:root { color-scheme: light; --bg: #f8fafc; --panel: #ffffff; --text: #172033; --muted: #5f6b7a; --border: #d7dee8; --link: #245ebd; --link-hover: #123f8a; --code-bg: #eef2f7; --shadow: 0 1px 2px rgb(15 23 42 / 0.08); } /* テーマ切り替え: で暗色を適用する。 */ /* data-theme は のスクリプトが「保存値 → 無ければ OS 設定」の順で */ /* 描画前に確定させるため、既定では OS の prefers-color-scheme に追従する。 */ :root[data-theme="dark"] { color-scheme: dark; --bg: #111827; --panel: #182235; --text: #e5e7eb; --muted: #a8b3c2; --border: #2d3a50; --link: #8ab4ff; --link-hover: #bdd3ff; --code-bg: #202b3d; --shadow: none; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "YuGothic", "Segoe UI", sans-serif; font-size: 16px; line-height: 1.8; } a { color: var(--link); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; } a:hover { color: var(--link-hover); } .site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 10px 24px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(14px); } .site-title { color: var(--text); font-weight: 700; text-decoration: none; } .top-nav { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.92rem; } .header-right { display: flex; align-items: center; gap: 14px; } /* テーマ切り替えボタン。ライト時は月（→ 夜へ）、ダーク時は太陽（→ 昼へ）を表示。 */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); cursor: pointer; line-height: 0; } .theme-toggle:hover { color: var(--link); border-color: var(--link); } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: inline; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } .layout { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 32px; width: min(1380px, 100%); margin: 0 auto; padding: 28px 24px 64px; } .sidebar { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 112px); overflow: auto; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); font-size: 0.9rem; line-height: 1.5; } .sidebar-title { margin: 0 0 10px; color: var(--muted); font-weight: 700; } .sidebar ol, .note-list { margin: 0; padding-left: 1.35rem; } .sidebar li, .note-list li { margin: 0.45rem 0; } .sidebar a[aria-current="page"] { color: var(--text); font-weight: 700; text-decoration: none; } .content, .index { width: min(880px, 100%); } .content { min-width: 0; } .index { margin: 0 auto; padding: 48px 24px 72px; } .lead { margin-top: -0.5rem; color: var(--muted); } article { padding: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); } h1, h2, h3, h4 { line-height: 1.35; letter-spacing: 0; } h1 { margin: 0 0 1.25rem; font-size: clamp(1.7rem, 1.35rem + 1vw, 2.35rem); } h2 { margin-top: 2.6rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--border); font-size: 1.45rem; } h3 { margin-top: 2rem; font-size: 1.2rem; } h4 { margin-top: 1.6rem; font-size: 1.05rem; } p, ul, ol, table, pre, .math-display { margin-top: 1rem; margin-bottom: 1rem; } img { display: block; max-width: 100%; height: auto; margin: 1.4rem auto; border-radius: 6px; } table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; } th, td { padding: 0.55rem 0.75rem; border: 1px solid var(--border); vertical-align: top; } th { background: var(--code-bg); text-align: left; } code { padding: 0.12em 0.28em; border-radius: 4px; background: var(--code-bg); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; } pre { overflow-x: auto; padding: 1rem; border-radius: 8px; background: var(--code-bg); } pre code { padding: 0; background: transparent; } blockquote { margin: 1.5rem 0; padding: 0.15rem 1rem; border-left: 4px solid var(--border); color: var(--muted); } .math-display { overflow-x: auto; overflow-y: hidden; padding: 0.3rem 0; } /* ===== 図（インライン SVG） ===== */ /* SVG 内のテキスト・線は currentColor を使うため、本文色（--text）を */ /* 継承してライト/ダーク両モードに自動追従する。アクセント色は両背景で */ /* 視認できる中明度の色を SVG 側で直接指定している。 */ figure.diagram { margin: 1.8rem 0; padding: 0.6rem 0; text-align: center; overflow-x: auto; } figure.diagram svg { max-width: 100%; height: auto; } figure.diagram figcaption { margin-top: 0.7rem; color: var(--muted); font-size: 0.86rem; line-height: 1.6; } .katex-display { margin: 0.4rem 0; } .math-error { color: #b42318; } .pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; } .pager-link { display: block; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); text-decoration: none; } .pager-link span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 0.82rem; font-weight: 700; } .align-right { grid-column: 2; text-align: right; } @media (max-width: 900px) { .site-header { position: static; align-items: flex-start; padding: 12px 16px; } .layout { display: block; padding: 18px 14px 48px; } .sidebar { position: static; max-height: none; margin-bottom: 18px; } article { padding: 22px 16px; } .pager { grid-template-columns: 1fr; } .align-right { grid-column: auto; text-align: left; } } /* ===== コードのシンタックスハイライト ===== */ /* Pandoc(skylighting) が出力するトークンクラスに配色する。配色はビルド時に */ /* 焼き込まれる。light を既定とし、dark は で上書き */ /* する（テーマはヘッダーのトグルが切り替える）。言語未指定・非対応言語の */ /* コードは色が付かず素のコードブロックになる。 */ .sourceCode span.co, .sourceCode span.do, .sourceCode span.cv { color: #6a737d; font-style: italic; } .sourceCode span.kw, .sourceCode span.cf { color: #d73a49; } .sourceCode span.st, .sourceCode span.ch, .sourceCode span.sc, .sourceCode span.ss, .sourceCode span.vs { color: #032f62; } .sourceCode span.dv, .sourceCode span.bn, .sourceCode span.fl, .sourceCode span.cn { color: #005cc5; } .sourceCode span.fu, .sourceCode span.at { color: #6f42c1; } .sourceCode span.dt, .sourceCode span.bu { color: #e36209; } .sourceCode span.pp, .sourceCode span.im { color: #d73a49; } .sourceCode span.va { color: #e36209; } .sourceCode span.al, .sourceCode span.er { color: #b42318; font-weight: 700; } .sourceCode span.wa { color: #b35900; } :root[data-theme="dark"] .sourceCode span.co, :root[data-theme="dark"] .sourceCode span.do, :root[data-theme="dark"] .sourceCode span.cv { color: #8b949e; } :root[data-theme="dark"] .sourceCode span.kw, :root[data-theme="dark"] .sourceCode span.cf { color: #ff7b72; } :root[data-theme="dark"] .sourceCode span.st, :root[data-theme="dark"] .sourceCode span.ch, :root[data-theme="dark"] .sourceCode span.sc, :root[data-theme="dark"] .sourceCode span.ss, :root[data-theme="dark"] .sourceCode span.vs { color: #a5d6ff; } :root[data-theme="dark"] .sourceCode span.dv, :root[data-theme="dark"] .sourceCode span.bn, :root[data-theme="dark"] .sourceCode span.fl, :root[data-theme="dark"] .sourceCode span.cn { color: #79c0ff; } :root[data-theme="dark"] .sourceCode span.fu, :root[data-theme="dark"] .sourceCode span.at { color: #d2a8ff; } :root[data-theme="dark"] .sourceCode span.dt, :root[data-theme="dark"] .sourceCode span.bu { color: #ffa657; } :root[data-theme="dark"] .sourceCode span.pp, :root[data-theme="dark"] .sourceCode span.im { color: #ff7b72; } :root[data-theme="dark"] .sourceCode span.va { color: #ffa657; } :root[data-theme="dark"] .sourceCode span.al, :root[data-theme="dark"] .sourceCode span.er { color: #ff7b72; font-weight: 700; } :root[data-theme="dark"] .sourceCode span.wa { color: #d29922; } /* ===== Pagefind 検索 UI ===== */ /* UI のテーマ変数をサイトの配色変数に紐づける。サイト側の変数が */ /* prefers-color-scheme でライト/ダークに切り替わるため、検索 UI も */ /* 自動でダークモードに追従する。Pagefind 既定値は :root に定義されるため、 */ /* ここでは .pagefind-ui（より近い要素）に設定して確実に上書きする。 */ .pagefind-ui { --pagefind-ui-scale: 0.85; --pagefind-ui-primary: var(--link); --pagefind-ui-text: var(--text); --pagefind-ui-background: var(--panel); --pagefind-ui-border: var(--border); --pagefind-ui-tag: var(--code-bg); --pagefind-ui-border-radius: 8px; } /* マッチ箇所のハイライト（マーカー風の黄色。ライト/ダーク共通で */ /* 黄色背景 + 濃い文字にして視認性を確保する） */ .pagefind-ui mark { background: #ffe066; color: #1a1a1a; padding: 0 2px; border-radius: 3px; } .pagefind-search { margin-bottom: 14px; } .index-search { max-width: 520px; }