diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 395e4aa..f585e2a 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -15,6 +15,10 @@ export default defineConfig({ title: 'GitHub Stacked PRs', description: 'Manage stacked branches and pull requests with the gh stack CLI extension.', favicon: '/favicon.svg', + logo: { + src: './src/assets/github-invertocat.svg', + alt: 'GitHub', + }, head: [ { tag: 'meta', attrs: { name: 'robots', content: 'noindex, nofollow' } }, ], @@ -24,9 +28,6 @@ export default defineConfig({ customCss: [ './src/styles/custom.css', ], - social: [ - { icon: 'github', label: 'GitHub', href: 'https://github.com/github/gh-stack' }, - ], tableOfContents: { minHeadingLevel: 2, maxHeadingLevel: 4 diff --git a/docs/public/fonts/MonaSans-Bold.woff2 b/docs/public/fonts/MonaSans-Bold.woff2 new file mode 100644 index 0000000..1f86963 Binary files /dev/null and b/docs/public/fonts/MonaSans-Bold.woff2 differ diff --git a/docs/public/fonts/MonaSans-Regular.woff2 b/docs/public/fonts/MonaSans-Regular.woff2 new file mode 100644 index 0000000..69ee837 Binary files /dev/null and b/docs/public/fonts/MonaSans-Regular.woff2 differ diff --git a/docs/src/assets/github-invertocat.svg b/docs/src/assets/github-invertocat.svg new file mode 100644 index 0000000..4752432 --- /dev/null +++ b/docs/src/assets/github-invertocat.svg @@ -0,0 +1 @@ + diff --git a/docs/src/components/CustomHeader.astro b/docs/src/components/CustomHeader.astro index 45bffde..03fadbe 100644 --- a/docs/src/components/CustomHeader.astro +++ b/docs/src/components/CustomHeader.astro @@ -1,5 +1,4 @@ --- -import Default from '@astrojs/starlight/components/SocialIcons.astro'; const base = import.meta.env.BASE_URL; --- @@ -11,162 +10,150 @@ const base = import.meta.env.BASE_URL; FAQ - -
- -
- - diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css index 703db78..c1b86e9 100644 --- a/docs/src/styles/custom.css +++ b/docs/src/styles/custom.css @@ -1,29 +1,959 @@ -/* Custom styles for gh-stack docs */ +/* ============================================================ + gh-stack docs — GitHub Primer Brand theme + Colors: https://primer.style/brand/primitives/color/ + Reference: github.com dark/light themes + ============================================================ */ +/* --- Mona Sans (GitHub typeface) --- */ +@font-face { + font-family: 'Mona Sans'; + src: url('/gh-stack/fonts/MonaSans-Regular.woff2') format('woff2'); + font-style: normal; + font-weight: 400; + font-display: swap; +} +@font-face { + font-family: 'Mona Sans'; + src: url('/gh-stack/fonts/MonaSans-Bold.woff2') format('woff2'); + font-style: normal; + font-weight: 700; + font-display: swap; +} + +/* ============================================================ + 1. Color palette — Dark mode (default) + Values from github.com CSS custom properties + ============================================================ */ :root { - --sl-color-accent-low: #3730a3; - --sl-color-accent: #6366f1; - --sl-color-accent-high: #c7d2fe; + --sl-font: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', + 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji'; + --sl-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, + 'Liberation Mono', monospace; + + /* GitHub green accent */ + --sl-color-accent-low: #0e4a2e; + --sl-color-accent: #3fb950; + --sl-color-accent-high: #a7f3d0; + --sl-color-text-accent: #3fb950; + + --sl-color-white: #ffffff; + --sl-color-gray-1: #f0f6fc; + --sl-color-gray-2: #c9d1d9; + --sl-color-gray-3: #9198a1; + --sl-color-gray-4: #656d76; + --sl-color-gray-5: #3d444d; + --sl-color-gray-6: #2d333b; + --sl-color-black: #0d1117; + + --sl-color-hairline: #3d444d; + --sl-color-hairline-light: rgba(240, 246, 252, 0.1); + --sl-color-text: #f0f6fc; + --sl-color-text-invert: #0d1117; } +/* ============================================================ + 2. Color palette — Light mode + ============================================================ */ :root[data-theme='light'] { - --sl-color-accent-low: #c7d2fe; - --sl-color-accent: #4f46e5; - --sl-color-accent-high: #312e81; + --sl-color-accent-low: #dafbe1; + --sl-color-accent: #1a7f37; + --sl-color-accent-high: #0e4a2e; + --sl-color-text-accent: #1a7f37; + + --sl-color-white: #1f2328; + --sl-color-gray-1: #1f2328; + --sl-color-gray-2: #656d76; + --sl-color-gray-3: #656d76; + --sl-color-gray-4: #9198a1; + --sl-color-gray-5: #d1d9e0; + --sl-color-gray-6: #eaeef2; + --sl-color-black: #ffffff; + + --sl-color-hairline: #d1d9e0; + --sl-color-hairline-light: rgba(31, 35, 40, 0.1); + --sl-color-text: #1f2328; + --sl-color-text-invert: #ffffff; +} + +/* ============================================================ + 3. Body backgrounds + Clean flat backgrounds matching github.com + ============================================================ */ +body { + background: #0d1117 !important; + font-family: var(--sl-font) !important; +} + +:root[data-theme='light'] body { + background: #ffffff !important; +} + +/* Hero gradient glow — matches github.com/features/copilot green→purple pattern */ +body::before { + content: ''; + position: fixed; + inset: 0; + background: + radial-gradient(ellipse 90% 80% at 50% -5%, rgba(95, 237, 131, 0.18) 0%, rgba(131, 66, 250, 0.08) 30%, transparent 70%), + radial-gradient(ellipse 600px 600px at 15% 20%, rgba(131, 66, 250, 0.1), transparent), + radial-gradient(ellipse 500px 500px at 85% 60%, rgba(68, 147, 248, 0.06), transparent); + z-index: 0; + pointer-events: none; + display: none; +} + +body:has(.hero)::before { + display: block; +} + +:root[data-theme='light'] body::before { + background: + radial-gradient(ellipse 110% 50% at 50% 0%, rgba(15, 191, 62, 0.26) 0%, rgba(48, 148, 255, 0.18) 30%, transparent 60%), + radial-gradient(ellipse 500px 500px at 0% 15%, rgba(48, 148, 255, 0.22), transparent), + radial-gradient(ellipse 500px 500px at 100% 30%, rgba(15, 191, 62, 0.20), transparent); +} + +/* ============================================================ + 4. Header — Primer SubdomainNavBar style + ============================================================ */ +header { + background: rgba(13, 17, 23, 0.95) !important; + border-bottom: 1px solid #3d444d !important; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); +} + +:root[data-theme='light'] header { + background: rgba(255, 255, 255, 0.95) !important; + border-bottom: 1px solid #d1d9e0 !important; +} + +/* Override Starlight grid to flex for reordering */ +header .header { + display: flex !important; + align-items: center; + gap: 1rem; + padding: 0 1rem; +} + +/* Even padding on outer header container */ +header { + padding: 0.75rem 0.25rem !important; +} + +/* Flatten right-group so its children join the header flex container */ +header .right-group { + display: contents !important; +} + +/* Reorder header children: title(1) → links(2) → search(3) → theme(4) */ +header .title-wrapper { + order: 1; + flex: 0 0 auto; +} + +header .social-icons { + order: 2; + display: flex !important; + align-items: center; + gap: 0; + flex: 1 1 auto; + justify-content: flex-end; +} + +header .social-icons::after { + display: none !important; +} + +header div:has(> site-search) { + order: 3; + flex: 0 0 auto; + margin: 0 0.5rem; +} + +header site-search button { + border: 1px solid #3d444d !important; + border-radius: 6px; +} + +:root[data-theme='light'] header site-search button { + border-color: #d1d9e0 !important; +} + +header starlight-theme-select { + order: 4; + flex: 0 0 auto; + margin-top: 1px; +} + +/* Site title styling */ +.site-title { + color: #f0f6fc !important; + font-size: 1rem !important; + font-weight: 600 !important; + gap: 0.5rem !important; +} + +.site-title img { + width: 24px !important; + height: 24px !important; + filter: invert(1); +} + +:root[data-theme='light'] .site-title { + color: #1f2328 !important; +} + +:root[data-theme='light'] .site-title img { + filter: brightness(0); +} + +/* Announcement banner — Primer attention yellow */ +.sl-banner { + background-color: #FABF21 !important; + color: #1f2328 !important; +} + +.sl-banner a { + color: #1f2328 !important; + font-weight: 600; +} + +/* ============================================================ + 5. Hero section — Primer CTA Banner style (centered) + ============================================================ */ +.hero { + text-align: center; + display: flex !important; + flex-direction: column !important; + align-items: center !important; +} + +.hero > .sl-flex { + align-items: center !important; + width: 100%; + max-width: 720px; +} + +.hero h1 { + text-align: center !important; + margin: 0 auto; +} + +.hero .tagline { + text-align: center !important; + max-width: 640px; + margin-left: auto; + margin-right: auto; +} + +/* Center the action button group */ +.hero .sl-flex .sl-flex { + justify-content: center !important; + align-items: center !important; + gap: 0.75rem !important; + width: 100% !important; +} + +/* Primer ButtonBase shared styles (large size) */ +.hero .sl-link-button { + align-items: center !important; + appearance: none !important; + border: 0.0625rem solid !important; + border-radius: 0.375rem !important; + cursor: pointer !important; + display: inline-flex !important; + font-family: inherit !important; + font-size: 0.875rem !important; + font-weight: 500 !important; + gap: 0.5rem !important; + height: 2.5rem !important; + justify-content: center !important; + min-width: 10rem !important; + padding: 0 1rem !important; + text-align: center !important; + text-decoration: none !important; + transition: 80ms cubic-bezier(0.33, 1, 0.68, 1) !important; +} + +/* Primary CTA button — Primer primary variant */ +.hero .sl-link-button:first-of-type, +a.sl-link-button[data-variant='primary'], +.sl-link-button.primary { + background-color: #238636 !important; + border-color: rgba(240, 246, 252, 0.1) !important; + box-shadow: 0 1px 0 rgba(27, 31, 36, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; + color: #ffffff !important; +} + +.hero .sl-link-button:first-of-type:hover, +a.sl-link-button[data-variant='primary']:hover, +.sl-link-button.primary:hover { + background-color: #2ea043 !important; +} + +/* Secondary CTA button — Primer default variant */ +.hero .sl-link-button:not(:first-of-type) { + background-color: #21262d !important; + border-color: #3d444d !important; + box-shadow: 0 1px 0 rgba(27, 31, 36, 0.04) !important; + color: #f0f6fc !important; +} + +.hero .sl-link-button:not(:first-of-type):hover { + background-color: #30363d !important; + border-color: #656d76 !important; +} + +:root[data-theme='light'] .hero .sl-link-button:first-of-type, +:root[data-theme='light'] a.sl-link-button[data-variant='primary'], +:root[data-theme='light'] .sl-link-button.primary { + background-color: #1f883d !important; + border-color: rgba(27, 31, 36, 0.15) !important; + box-shadow: 0 1px 0 rgba(27, 31, 36, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; + color: #ffffff !important; +} + +:root[data-theme='light'] .hero .sl-link-button:first-of-type:hover, +:root[data-theme='light'] a.sl-link-button[data-variant='primary']:hover { + background-color: #1a7f37 !important; +} + +:root[data-theme='light'] .hero .sl-link-button:not(:first-of-type) { + background-color: #f6f8fa !important; + border-color: rgba(27, 31, 36, 0.15) !important; + box-shadow: 0 1px 0 rgba(27, 31, 36, 0.04) !important; + color: #1f2328 !important; +} + +:root[data-theme='light'] .hero .sl-link-button:not(:first-of-type):hover { + background-color: #eaeef2 !important; + border-color: rgba(27, 31, 36, 0.25) !important; +} + +:root[data-theme='light'] .hero h1 { + color: #1f2328; +} + +:root[data-theme='light'] .hero .tagline { + color: #656d76; +} + +/* ============================================================ + 6. Sidebar + ============================================================ */ +#starlight__sidebar, +.sidebar { + border-right: 1px solid #3d444d; +} + +:root[data-theme='light'] #starlight__sidebar, +:root[data-theme='light'] .sidebar { + border-right-color: #d1d9e0; +} + +@media (min-width: 769px) { + #starlight__sidebar, + .sidebar { + background-color: transparent !important; + } + .sidebar-content, + .sidebar-pane { + background: transparent !important; + } +} + +/* Remove default nesting indentation and gray vertical line on sub-items */ +.sidebar ul ul li { + margin-inline-start: 0 !important; + border-inline-start: none !important; + padding-inline-start: 0 !important; +} + +/* Sub-page links get extra internal left padding for indent */ +.sidebar ul ul li a { + padding-inline-start: 1.25rem !important; +} + +/* Uniform font size and weight — override Starlight .large class on top-level items */ +.sidebar .large { + font-size: 0.875rem !important; + font-weight: 400 !important; + color: inherit !important; +} + +/* All sidebar links — uniform styling, no weight changes */ +.sidebar .top-level > li > details > summary, +.sidebar .top-level > li > a, +.sidebar nav li li a { + font-weight: 400; + font-size: 0.875rem; + color: #e6edf3; + text-transform: none; + letter-spacing: normal; + background: none !important; + border-left: none !important; + border-radius: 8px !important; + transition: color 0.15s ease, background-color 0.15s ease; + line-height: 1.5; + padding-block: 0.4em !important; +} + +.sidebar .top-level > li > details > summary:hover, +.sidebar .top-level > li > a:hover, +.sidebar nav li li a:hover { + color: #e6edf3; + background: rgba(177, 186, 196, 0.08) !important; +} + +:root[data-theme='light'] .sidebar .top-level > li > details > summary, +:root[data-theme='light'] .sidebar .top-level > li > a, +:root[data-theme='light'] .sidebar nav li li a { + color: #1f2328; +} + +:root[data-theme='light'] .sidebar .top-level > li > details > summary:hover, +:root[data-theme='light'] .sidebar .top-level > li > a:hover, +:root[data-theme='light'] .sidebar nav li li a:hover { + color: #1f2328; + background: rgba(209, 217, 224, 0.3) !important; +} + +/* Active state — GitHub Docs: subtle gray bg + blue left indicator */ +/* No font-weight change, no margin shift — only background + blue line */ +.sidebar a[aria-current='page'], +.sidebar .top-level > li > a[aria-current='page'], +.sidebar-pane a[aria-current='page'] { + color: #e6edf3 !important; + background: rgba(177, 186, 196, 0.08) !important; + font-weight: 400 !important; + border-left: none !important; + border-radius: 8px !important; + position: relative; +} + +.sidebar a[aria-current='page']::before, +.sidebar .top-level > li > a[aria-current='page']::before, +.sidebar-pane a[aria-current='page']::before { + content: ''; + position: absolute; + left: calc(-1 * var(--sl-sidebar-pad-x, 1rem)); + top: 50%; + transform: translateY(-50%); + width: 3px; + height: 60%; + background: #4493f8; + border-radius: 2px; +} + +.sidebar a[aria-current='page']:hover, +.sidebar .top-level > li > a[aria-current='page']:hover, +.sidebar a[aria-current='page']:focus, +.sidebar-pane a[aria-current='page']:hover { + background: rgba(177, 186, 196, 0.15) !important; +} + +/* Light mode active state */ +:root[data-theme='light'] .sidebar a[aria-current='page'], +:root[data-theme='light'] .sidebar .top-level > li > a[aria-current='page'], +:root[data-theme='light'] .sidebar-pane a[aria-current='page'] { + color: #1f2328 !important; + background: rgba(209, 217, 224, 0.4) !important; + font-weight: 400 !important; + border-left: none !important; + border-radius: 8px !important; + position: relative; +} + +:root[data-theme='light'] .sidebar a[aria-current='page']::before, +:root[data-theme='light'] .sidebar .top-level > li > a[aria-current='page']::before, +:root[data-theme='light'] .sidebar-pane a[aria-current='page']::before { + content: ''; + position: absolute; + left: calc(-1 * var(--sl-sidebar-pad-x, 1rem)); + top: 50%; + transform: translateY(-50%); + width: 3px; + height: 60%; + background: #0969da; + border-radius: 2px; +} + +:root[data-theme='light'] .sidebar a[aria-current='page']:hover, +:root[data-theme='light'] .sidebar .top-level > li > a[aria-current='page']:hover, +:root[data-theme='light'] .sidebar a[aria-current='page']:focus, +:root[data-theme='light'] .sidebar-pane a[aria-current='page']:hover { + background: rgba(209, 217, 224, 0.5) !important; +} + +/* ============================================================ + 7. Content typography + ============================================================ */ +.sl-markdown-content { + color: #f0f6fc; + font-family: var(--sl-font) !important; + overflow-wrap: break-word; + word-wrap: break-word; +} + +:root[data-theme='light'] .sl-markdown-content { + color: #1f2328; +} + +.sl-markdown-content p { + line-height: 1.65; + color: #c9d1d9; +} + +.sl-markdown-content li { + color: #c9d1d9; +} + +:root[data-theme='light'] .sl-markdown-content p, +:root[data-theme='light'] .sl-markdown-content li, +:root[data-theme='light'] .sl-markdown-content td, +:root[data-theme='light'] .sl-markdown-content th { + color: #1f2328; +} + +/* Headings — medium weight like github.com (font-weight: 440–600) */ +.sl-markdown-content h1 { + font-size: 2rem; + font-weight: 600; + line-height: 1.25; + color: #f0f6fc; + border-bottom: none; +} + +.sl-markdown-content h2 { + font-size: 1.75rem; + font-weight: 600; + border-bottom: none; + color: #f0f6fc; +} + +.sl-markdown-content h3 { + font-size: 1.25rem; + font-weight: 600; + border-bottom: none; + color: #f0f6fc; +} + +.sl-markdown-content h4, +.sl-markdown-content h5, +.sl-markdown-content h6 { + font-size: 1rem; + font-weight: 600; + border-bottom: none; + color: #f0f6fc; +} + +:root[data-theme='light'] .sl-markdown-content h1, +:root[data-theme='light'] .sl-markdown-content h2, +:root[data-theme='light'] .sl-markdown-content h3, +:root[data-theme='light'] .sl-markdown-content h4, +:root[data-theme='light'] .sl-markdown-content h5, +:root[data-theme='light'] .sl-markdown-content h6 { + color: #1f2328; +} + + +/* Heading anchor links */ +.sl-markdown-content h1 a.header-anchor, +.sl-markdown-content h2 a.header-anchor, +.sl-markdown-content h3 a.header-anchor, +.sl-markdown-content h4 a.header-anchor, +.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) a[aria-label^='Permalink'] { + font-size: 0.2em; + opacity: 0; + transition: opacity 0.2s ease; +} + +.sl-markdown-content :is(h1, h2, h3, h4, h5, h6):hover a[aria-label^='Permalink'] { + opacity: 0.2; +} + +/* Links — Primer accent blue */ +.sl-markdown-content a:not(.sl-link-button) { + color: #4493f8; + text-decoration: underline; + transition: color 0.15s ease; +} + +.sl-markdown-content a:hover { + color: #79c0ff; +} + +:root[data-theme='light'] .sl-markdown-content a:not(.sl-link-button) { + color: #0969da; +} + +:root[data-theme='light'] .sl-markdown-content a:hover { + color: #0550ae; +} + +/* Code blocks and tables — let Starlight/ExpressiveCode handle layout. + Colors flow through the --sl-color-* variables set above. */ + +/* Blockquotes — light color adjustments only */ +.sl-markdown-content blockquote { + color: #9198a1; +} + +:root[data-theme='light'] .sl-markdown-content blockquote { + color: #656d76; +} + +/* ============================================================ + 8. Feature cards — Primer Brand Card style + ============================================================ */ +.card { + border: 1px solid #3d444d !important; + border-radius: 24px !important; + background: #0f1511 !important; + padding: 2rem !important; + position: relative; + overflow: hidden; +} + +.card .card-title { + color: #ffffff !important; + font-size: 1.25rem !important; + font-weight: 500 !important; +} + +.card .card-body { + color: #a4aea6; + font-size: 1rem; + line-height: 1.5; +} + +.card .card-icon { + color: #3fb950; +} + +:root[data-theme='light'] .card { + background: #ffffff !important; + border: 1px solid #d1d9e0 !important; +} + +:root[data-theme='light'] .card .card-title { + color: #1f2328 !important; +} + +:root[data-theme='light'] .card .card-body { + color: #656d76; +} + +:root[data-theme='light'] .card .card-icon { + color: #1a7f37; +} + +/* ============================================================ + 9. Right sidebar / Table of Contents + ============================================================ */ +@media (min-width: 769px) { + .right-sidebar, + .right-sidebar[class*='astro-'] { + border-left: 1px solid #3d444d; + } + :root[data-theme='light'] .right-sidebar, + :root[data-theme='light'] .right-sidebar[class*='astro-'] { + border-left-color: #d1d9e0; + } +} + +starlight-toc nav { + font-size: 0.875rem; +} + +starlight-toc a { + color: #656d76; + text-decoration: none; + border-left: none; + line-height: 1.4; + font-weight: 400; + transition: color 0.15s ease; +} + +starlight-toc a:hover { + color: #ffffff; + background: none !important; +} + +starlight-toc a[aria-current='true'] { + color: #ffffff; + font-weight: 500; + background: none !important; +} + +starlight-toc h2 { + font-size: 0.6875rem; + font-weight: 600; + color: #656d76; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +:root[data-theme='light'] starlight-toc a { + color: #656d76; +} + +:root[data-theme='light'] starlight-toc a:hover { + color: #1f2328; + background: none !important; +} + +:root[data-theme='light'] starlight-toc a[aria-current='true'] { + color: #1f2328; + font-weight: 500; + background: none !important; +} + +:root[data-theme='light'] starlight-toc h2 { + color: #656d76; +} + +/* ============================================================ + 10. Pagination links + ============================================================ */ +.pagination-links { + border-top: none; +} + +/* Remove the horizontal line above the pagination area */ +.content-panel { + border-top: none !important; +} + +.pagination-links a { + border: 1px solid #3d444d; + border-radius: 6px; + background: #161b22; + transition: all 0.2s ease; + text-decoration: none; +} + +.pagination-links a:hover { + border-color: #3fb950; + transform: translateY(-1px); + box-shadow: 0 2px 8px rgba(63, 185, 80, 0.08); +} + +.pagination-links a .meta { + font-size: 0.6875rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: #9198a1; +} + +.pagination-links .link-title { + font-weight: 600; + font-size: 0.9375rem; + color: #f0f6fc; +} + +.pagination-links a:hover .link-title { + color: #3fb950; +} + +:root[data-theme='light'] .pagination-links { + border-top: none; +} + +:root[data-theme='light'] .pagination-links a { + border-color: #d1d9e0; + background: #ffffff; +} + +:root[data-theme='light'] .pagination-links a:hover { + border-color: #1a7f37; + box-shadow: 0 2px 8px rgba(26, 127, 55, 0.08); +} + +:root[data-theme='light'] .pagination-links .link-title { + color: #1f2328; +} + +:root[data-theme='light'] .pagination-links a:hover .link-title { + color: #1a7f37; +} + +/* ============================================================ + 11. Buttons + ============================================================ */ +.sl-markdown-content button, +.sl-markdown-content .button, +a.button { + background-color: #21262d; + border: 1px solid #3d444d; + color: #f0f6fc; + border-radius: 6px; + font-weight: 500; + transition: all 0.15s ease; +} + +.sl-markdown-content button:hover, +.sl-markdown-content .button:hover, +a.button:hover { + background-color: #30363d; + border-color: #656d76; +} + +/* ============================================================ + 12. Nav links + ============================================================ */ +nav a { + color: #c9d1d9; + transition: color 0.15s ease; +} + +nav a:hover { + color: #f0f6fc; +} + +nav a[aria-current='page'] { + color: #f0f6fc; + font-weight: 400; +} + +:root[data-theme='light'] nav a { + color: #656d76; +} + +:root[data-theme='light'] nav a:hover { + color: #1f2328; +} + +:root[data-theme='light'] nav a[aria-current='page'] { + color: #1f2328; +} + +/* ============================================================ + 13. Scrollbars + ============================================================ */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: rgba(61, 68, 77, 0.5); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(101, 109, 118, 0.6); +} + +* { + scrollbar-width: thin; + scrollbar-color: rgba(61, 68, 77, 0.5) transparent; +} + +:root[data-theme='light'] ::-webkit-scrollbar-track { + background: transparent; +} + +:root[data-theme='light'] ::-webkit-scrollbar-thumb { + background: rgba(209, 217, 224, 0.6); +} + +:root[data-theme='light'] ::-webkit-scrollbar-thumb:hover { + background: rgba(175, 184, 193, 0.8); +} + +/* ============================================================ + 14. Responsive header nav (custom component) + ============================================================ */ + +/* Always hide splash hamburger by default */ +.splash-nav-wrapper { + display: none !important; } -/* Show full nav by default, switch to hamburger on narrow viewports */ @media (max-width: 900px) { .custom-header-links { display: none !important; } - .tablet-nav-wrapper { + header div:has(> site-search) { + margin: 0 2.5rem 0 0; + } + header site-search button { + border: none !important; + font-size: 1rem !important; + color: var(--sl-color-gray-3) !important; + } + header site-search button span, + header site-search button kbd { + display: none !important; + } + header site-search button:hover { + color: var(--sl-color-text) !important; + } + header starlight-theme-select { + display: none !important; + } + + /* Show our custom hamburger only on splash (homepage), fixed to top-right */ + body:has(.hero) .splash-nav-wrapper { display: block !important; + position: fixed; + top: 16px; + right: 16px; + z-index: 10; + } + body:has(.hero) .splash-hamburger-btn { + margin: 0 !important; + } + body:has(.hero) header starlight-theme-select label svg.caret { + display: none; + } + + /* Keep theme toggle visible on homepage (splash), compact icon-only */ + body:has(.hero) header starlight-theme-select { + display: block !important; + margin-right: 1.25em; + } + body:has(.hero) header starlight-theme-select label { + --sl-select-width: 1em !important; + overflow: hidden; + } + body:has(.hero) header starlight-theme-select label svg.icon { + width: 1.25em; + height: 1.25em; + } + body:has(.hero) header starlight-theme-select select { + color: transparent; + width: 1.25rem; + } + /* On homepage, make room for theme toggle + hamburger to the right */ + body:has(.hero) header div:has(> site-search) { + margin-right: 0; } } -@media (min-width: 901px) { - .tablet-nav-wrapper { - display: none !important; +@media (max-width: 800px) { + body:has(.hero) .splash-nav-wrapper { + top: 12px; } } + +/* ============================================================ + Search dialog — collapse empty results area + ============================================================ */ +[data-pagefind-ui] .pagefind-ui__results-area:empty, +dialog .results-inner:empty, +dialog [data-search-results]:empty { + display: none !important; +} + +dialog.search-dialog .dialog-frame { + max-height: fit-content !important; +}