diff --git "a/1024px\344\273\245\344\270\213\343\201\247ThemeToggle\343\203\273\350\250\200\350\252\236\343\202\271\343\202\244\343\203\203\343\203\201\343\201\214\346\244\234\347\264\242\347\252\223\343\201\256\344\270\213\343\201\253\351\232\240\343\202\214\343\202\213" "b/1024px\344\273\245\344\270\213\343\201\247ThemeToggle\343\203\273\350\250\200\350\252\236\343\202\271\343\202\244\343\203\203\343\203\201\343\201\214\346\244\234\347\264\242\347\252\223\343\201\256\344\270\213\343\201\253\351\232\240\343\202\214\343\202\213"
new file mode 100644
index 0000000..fd40910
--- /dev/null
+++ "b/1024px\344\273\245\344\270\213\343\201\247ThemeToggle\343\203\273\350\250\200\350\252\236\343\202\271\343\202\244\343\203\203\343\203\201\343\201\214\346\244\234\347\264\242\347\252\223\343\201\256\344\270\213\343\201\253\351\232\240\343\202\214\343\202\213"
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/styles/global.css b/public/styles/global.css
index 38e342e..0da0313 100644
--- a/public/styles/global.css
+++ b/public/styles/global.css
@@ -72,6 +72,7 @@
--content-max-width: 1200px;
--sidebar-width: 280px;
--prose-max-width: 65ch;
+ --header-height: 80px;
}
/* ダークモード - システム設定 */
@@ -124,6 +125,207 @@
--color-border-dark: #cccccc;
}
+/* ==========================================================================
+ グローバルヘッダー固定 - すべてのページで適用
+ ========================================================================== */
+
+.header {
+ position: fixed !important;
+ top: 0 !important;
+ left: 0 !important;
+ right: 0 !important;
+ z-index: 1000 !important;
+ width: 100% !important;
+ background: var(--color-bg-header) !important;
+ border-bottom: 1px solid var(--color-border) !important;
+}
+
+/* ==========================================================================
+ Pagefind 検索結果のオーバーレイ表示 - 重要な修正
+ ========================================================================== */
+
+/* 検索コンテナを相対配置の基準に */
+.search-container {
+ position: relative !important;
+}
+
+/* Pagefind UIコンテナ */
+.pagefind-ui {
+ position: relative !important;
+}
+
+/* 検索結果を固定オーバーレイとして表示（ドキュメントフローから外す） */
+.pagefind-ui__drawer {
+ position: fixed !important;
+ top: var(--header-height) !important;
+ left: 0 !important;
+ right: 0 !important;
+ bottom: 0 !important;
+ width: 100% !important;
+ background: var(--color-bg, #fff) !important;
+ /* Header (z-index: 1000) より背面に配置するため 900 に設定 */
+ z-index: 900 !important;
+ overflow: visible !important;
+ padding: 0 !important;
+ height: calc(100vh - var(--header-height)) !important;
+ display: flex !important;
+ flex-direction: column !important;
+ box-sizing: border-box !important;
+}
+
+/* ダークモード対応 */
+@media (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) .pagefind-ui__drawer {
+ background: var(--color-bg, #1a1a1a) !important;
+ }
+}
+
+:root[data-theme="dark"] .pagefind-ui__drawer {
+ background: var(--color-bg, #1a1a1a) !important;
+}
+
+/* 検索フォームは通常の配置（ヘッダーより下） */
+.pagefind-ui__form {
+ position: relative !important;
+ z-index: 999 !important;
+ flex-shrink: 0 !important;
+ padding: 0 !important; /* パディングを削除して検索ボックスの幅を確保 */
+}
+
+/* 検索ボックスの入力フィールド調整 */
+.pagefind-ui__search-input {
+ padding-left: 3.2rem !important; /* アイコン分のスペースを確保 (虫眼鏡との重なりを防止) */
+ height: 40px !important; /* 高さを明示的に指定して安定させる */
+}
+
+/* フォームの擬似要素（虫眼鏡アイコン）の位置調整 */
+.pagefind-ui__form::before {
+ top: 50% !important;
+ transform: translateY(-50%) !important;
+ left: 12px !important;
+ z-index: 1001 !important;
+ opacity: 0.5 !important;
+}
+
+/* 検索結果エリア - スクロール可能 */
+.pagefind-ui__results-area {
+ max-width: 100% !important;
+ margin: 0 !important;
+ width: 100% !important;
+ flex: 1 1 auto !important;
+ min-height: 0 !important;
+ overflow-y: auto !important;
+ overflow-x: hidden !important;
+ -webkit-overflow-scrolling: touch !important;
+ overscroll-behavior: contain !important;
+ padding: 0 2rem 2rem 2rem !important;
+ box-sizing: border-box !important;
+}
+
+/* 検索結果の内容を中央配置 */
+.pagefind-ui__results {
+ max-width: 900px !important;
+ margin: 0 auto !important;
+ list-style: none !important;
+ padding: 0 !important;
+}
+
+/* 検索アクティブ時のbodyスタイル - 背景スクロールを防ぐ */
+body.search-active {
+ overflow: hidden !important;
+}
+
+/* ==========================================================================
+ サイドバー（モバイルメニュー）のz-index修正
+ ========================================================================== */
+
+/* サイドバーのz-index（モバイル時にヘッダーより上） */
+.sidebar {
+ z-index: 950;
+}
+
+.sidebar.active {
+ z-index: 1100;
+}
+
+/* サイドバーオーバーレイ */
+.sidebar-overlay {
+ z-index: 940;
+}
+
+.sidebar-overlay.active {
+ z-index: 1090;
+}
+
+/* サイドバー内のボタンとインタラクティブ要素のリセット防止（アコーディオンボタンは除く） */
+.sidebar .theme-toggle,
+.sidebar .sidebar-close,
+.sidebar-header button:not(.toc-toggle) {
+ cursor: pointer !important;
+ pointer-events: auto !important;
+}
+
+.sidebar-close {
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ background: none !important;
+ border: none !important;
+ padding: 0.5rem !important;
+ cursor: pointer !important;
+ color: var(--color-text) !important;
+ border-radius: 4px !important;
+ transition: background-color 0.2s !important;
+}
+
+.sidebar-close:hover {
+ background-color: var(--color-bg-secondary) !important;
+}
+
+.sidebar-close svg {
+ display: block !important;
+ width: 24px !important;
+ height: 24px !important;
+}
+
+/* サイドバー内のテーマトグルと言語スイッチャー */
+.sidebar-mobile-controls .theme-toggle,
+.sidebar-mobile-controls .lang-switcher a,
+.sidebar-mobile-controls .language-switcher a {
+ cursor: pointer !important;
+ pointer-events: auto !important;
+}
+
+.sidebar-mobile-controls .theme-toggle {
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ background: none !important;
+ border: none !important;
+ padding: 0.5rem !important;
+ cursor: pointer !important;
+ color: var(--color-text) !important;
+ border-radius: 4px !important;
+ transition: background-color 0.2s !important;
+}
+
+.sidebar-mobile-controls .theme-toggle:hover {
+ background-color: var(--color-bg-secondary) !important;
+}
+
+/* 言語リンク */
+.sidebar-mobile-controls a,
+.lang-switcher-mobile a {
+ cursor: pointer !important;
+ pointer-events: auto !important;
+ text-decoration: none !important;
+}
+
+.sidebar-mobile-controls a:hover,
+.lang-switcher-mobile a:hover {
+ text-decoration: underline !important;
+}
+
/* ==========================================================================
Base Styles - リセットと基本スタイル
========================================================================== */
@@ -150,7 +352,7 @@ body {
/* アンカーリンクでのスクロール時、ヘッダー分のオフセットを確保 */
h1, h2, h3, h4, h5, h6 {
- scroll-margin-top: 5rem;
+ scroll-margin-top: 7rem;
}
/* ==========================================================================
@@ -172,7 +374,7 @@ h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: var(--line-height-tight);
color: var(--color-text);
- scroll-margin-top: 5rem; /* ヘッダー分のオフセット */
+ scroll-margin-top: 7rem; /* ヘッダー分のオフセット */
}
.prose h1 {
diff --git a/public/vivliostyle-docs.png b/public/vivliostyle-docs.png
new file mode 100644
index 0000000..05bf40a
Binary files /dev/null and b/public/vivliostyle-docs.png differ
diff --git a/public/vivliostyle-docs.svg b/public/vivliostyle-docs.svg
new file mode 100644
index 0000000..60e0d80
--- /dev/null
+++ b/public/vivliostyle-docs.svg
@@ -0,0 +1,5867 @@
+
+
\ No newline at end of file
diff --git a/public/vivliostyle-logo72.png b/public/vivliostyle-logo72.png
new file mode 100644
index 0000000..c202886
Binary files /dev/null and b/public/vivliostyle-logo72.png differ
diff --git a/src/components/LanguageSwitcher.astro b/src/components/LanguageSwitcher.astro
index 4f9f2ae..19da8a1 100644
--- a/src/components/LanguageSwitcher.astro
+++ b/src/components/LanguageSwitcher.astro
@@ -55,6 +55,7 @@ const otherLangUrl = `/${otherLang}${normalizedPath}`;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
+ white-space: nowrap; /* 改行を防止 */
}
.current-lang {
diff --git a/src/components/SearchBox.astro b/src/components/SearchBox.astro
index 7ca090d..521d3ac 100644
--- a/src/components/SearchBox.astro
+++ b/src/components/SearchBox.astro
@@ -27,9 +27,171 @@ const isDev = import.meta.env.DEV;
)}
-
+
{!isDev && }
+
+