From 713e8876a2066d45a11749fbbf77935137957925 Mon Sep 17 00:00:00 2001 From: betegon Date: Thu, 29 Jan 2026 12:19:42 +0100 Subject: [PATCH 1/3] fix(docs): Improve mobile responsiveness on landing page - Add border to feature visuals for better definition at all sizes - Add padding to feature-visual for consistent margins around terminals - Fix main terminal bleeding to edges on mobile (keep border-radius) - Add mobile breakpoints for FeatureTerminal component - Add 480px breakpoint for smaller mobile devices Co-Authored-By: Claude Opus 4.5 --- docs/src/components/FeatureTerminal.astro | 19 +++++++++++++++---- docs/src/components/Terminal.astro | 4 ++-- docs/src/styles/custom.css | 21 +++++++++++++++++++++ 3 files changed, 38 insertions(+), 6 deletions(-) diff --git a/docs/src/components/FeatureTerminal.astro b/docs/src/components/FeatureTerminal.astro index eb762a5c6..72db71bf7 100644 --- a/docs/src/components/FeatureTerminal.astro +++ b/docs/src/components/FeatureTerminal.astro @@ -26,13 +26,12 @@ const { title = "Terminal" } = Astro.props; background: rgba(10, 10, 15, 0.99); border-radius: 8px; overflow: hidden; - box-shadow: + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); - max-width: 640px; - width: 94%; - font-size: 0.8rem; + width: 100%; + font-size: 0.75rem; } .feature-terminal-header { @@ -135,4 +134,16 @@ const { title = "Terminal" } = Astro.props; text-align: right; color: rgba(255, 255, 255, 0.5); } + + @media (max-width: 640px) { + .feature-terminal { + max-width: 100%; + width: 100%; + font-size: 0.7rem; + } + + .feature-terminal-body { + padding: 0 1rem 1rem; + } + } diff --git a/docs/src/components/Terminal.astro b/docs/src/components/Terminal.astro index ddeceba5a..28064bd19 100644 --- a/docs/src/components/Terminal.astro +++ b/docs/src/components/Terminal.astro @@ -305,9 +305,9 @@ const base = baseUrl.endsWith('/') ? baseUrl : baseUrl + '/'; @media (max-width: 640px) { .terminal-wrapper { - margin: 0 -1rem 3rem; + margin: 0 0 3rem 0; padding: 1rem; - border-radius: 0; + border-radius: 12px; } .terminal-body { diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css index cfe1df178..ed75edfc7 100644 --- a/docs/src/styles/custom.css +++ b/docs/src/styles/custom.css @@ -439,12 +439,15 @@ starlight-tabs [role="tabpanel"] { flex: 0 0 55%; min-height: 420px; margin: 0.5rem 0.75rem 0.75rem 0; + padding: 10%; background-size: cover; background-position: center; border-radius: 8px; + border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; + box-sizing: border-box; } .feature-section-inner.reverse .feature-visual { @@ -483,6 +486,8 @@ starlight-tabs [role="tabpanel"] { .feature-visual { min-height: 340px; + margin: 0 0.5rem 0.5rem 0.5rem; + padding: 8%; } .feature-text h3 { @@ -490,6 +495,22 @@ starlight-tabs [role="tabpanel"] { } } +@media (max-width: 480px) { + .feature-visual { + margin: 0 0.5rem 0.5rem 0.5rem; + min-height: 300px; + padding: 6%; + } + + .feature-text { + padding: 1.25rem; + } + + .feature-text h3 { + font-size: 1.25rem; + } +} + .features-section-new h2 { font-size: 1.75rem; font-weight: 600; From 8f59d10a3053bd27d3d8e54a7d675a18fe23319c Mon Sep 17 00:00:00 2001 From: betegon Date: Thu, 29 Jan 2026 14:40:31 +0100 Subject: [PATCH 2/3] fix(docs): force dark theme on mobile TOC summary The mobile "On this page" summary element was displaying with a white background when the user's system was in light mode, making text unreadable. Added CSS rules to directly target the summary element and force dark styling regardless of system preference. --- docs/astro.config.mjs | 6 +- docs/src/components/ThemeProvider.astro | 23 ++++++ docs/src/styles/custom.css | 93 +++++++++++++++++++++++++ 3 files changed, 117 insertions(+), 5 deletions(-) create mode 100644 docs/src/components/ThemeProvider.astro diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index e3893ccb7..4f4271f7f 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -37,16 +37,12 @@ export default defineConfig({ }, }, components: { + ThemeProvider: "./src/components/ThemeProvider.astro", Header: "./src/components/Header.astro", ThemeSelect: "./src/components/ThemeSelect.astro", PageTitle: "./src/components/PageTitle.astro", }, head: [ - // Force dark mode - runs before page renders - { - tag: "script", - content: `document.documentElement.dataset.theme = 'dark';`, - }, // Overscroll easter egg - bottom of page, only on /cli route { tag: "script", diff --git a/docs/src/components/ThemeProvider.astro b/docs/src/components/ThemeProvider.astro new file mode 100644 index 000000000..30f4d8fe1 --- /dev/null +++ b/docs/src/components/ThemeProvider.astro @@ -0,0 +1,23 @@ +--- +// Force dark mode only - completely overrides Starlight's theme system +--- + +{/* Matches Starlight's inline pattern to prevent FOUC */} + + +{/* Empty template to satisfy any code expecting theme icons */} + diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css index ed75edfc7..2f889480d 100644 --- a/docs/src/styles/custom.css +++ b/docs/src/styles/custom.css @@ -1601,6 +1601,99 @@ nav.sidebar a[aria-current="page"] { } } +/* ========================================================================== + Force Dark Mode Globally + Ensures dark theme even if JS fails or system preference leaks through + ========================================================================== */ + +:root { + color-scheme: dark !important; +} + +:root, +:root[data-theme="light"] { + --sl-color-bg: #0a0a0f !important; + --sl-color-bg-nav: #0a0a0f !important; + --sl-color-bg-sidebar: #0a0a0f !important; + --sl-color-black: #0a0a0f !important; + --sl-color-white: #ffffff !important; + --sl-color-text: rgba(255, 255, 255, 0.9) !important; + --sl-color-text-accent: #ffffff !important; + --sl-color-gray-1: #e0e0e0 !important; + --sl-color-gray-2: #c0c0c0 !important; + --sl-color-gray-3: #888888 !important; + --sl-color-gray-4: #555555 !important; + --sl-color-gray-5: #333333 !important; + --sl-color-gray-6: #1a1a1a !important; +} + +/* Mobile Table of Contents - Force Dark Theme */ +mobile-starlight-toc { + --sl-color-black: #0a0a0f !important; + --sl-color-white: #ffffff !important; +} + +mobile-starlight-toc nav, +mobile-starlight-toc summary, +mobile-starlight-toc .toggle { + background-color: #0a0a0f !important; + border-color: rgba(255, 255, 255, 0.1) !important; +} + +mobile-starlight-toc .toggle { + color: #ffffff !important; + border-color: rgba(255, 255, 255, 0.2) !important; +} + +mobile-starlight-toc .toggle:hover { + border-color: rgba(255, 255, 255, 0.3) !important; +} + +mobile-starlight-toc .display-current { + color: rgba(255, 255, 255, 0.9) !important; +} + +mobile-starlight-toc .dropdown { + background-color: #0a0a0f !important; + border-color: rgba(255, 255, 255, 0.1) !important; +} + +mobile-starlight-toc a { + color: rgba(255, 255, 255, 0.7) !important; +} + +mobile-starlight-toc a:hover { + color: #ffffff !important; +} + +/* Mobile TOC Summary - Direct targeting for light mode override */ +summary#starlight__on-this-page--mobile, +summary[id="starlight__on-this-page--mobile"] { + background-color: #0a0a0f !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; + border-radius: 8px !important; + color: #ffffff !important; +} + +summary#starlight__on-this-page--mobile .toggle, +summary[id="starlight__on-this-page--mobile"] .toggle { + background-color: transparent !important; + color: #ffffff !important; +} + +summary#starlight__on-this-page--mobile .display-current, +summary[id="starlight__on-this-page--mobile"] .display-current { + color: rgba(255, 255, 255, 0.7) !important; +} + +summary#starlight__on-this-page--mobile svg, +summary[id="starlight__on-this-page--mobile"] svg, +summary#starlight__on-this-page--mobile .caret, +summary[id="starlight__on-this-page--mobile"] .caret { + color: rgba(255, 255, 255, 0.5) !important; + fill: rgba(255, 255, 255, 0.5) !important; +} + /* ========================================================================== Scrollbar ========================================================================== */ From ec49f1c99109bd874db0087a96525b41c9526e15 Mon Sep 17 00:00:00 2001 From: betegon Date: Thu, 29 Jan 2026 16:39:49 +0100 Subject: [PATCH 3/3] fix(docs): improve mobile header layout and hamburger menu - Make search bar compact (icon-only) on mobile screens - Style hamburger menu button for dark theme visibility - Increase header background opacity for better readability --- docs/src/styles/custom.css | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css index 2f889480d..77875b097 100644 --- a/docs/src/styles/custom.css +++ b/docs/src/styles/custom.css @@ -90,10 +90,17 @@ body { ========================================================================== */ header.header { - background: rgba(10, 10, 15, 0.8); + background: rgba(10, 10, 15, 0.95); backdrop-filter: blur(12px); border-bottom: none; - position: relative; +} + +/* Ensure hamburger menu button is visible and properly styled */ +starlight-menu-button button { + background-color: #1a1a1f !important; + color: #fff !important; + border: 1px solid rgba(255, 255, 255, 0.2) !important; + box-shadow: none !important; } /* Logo size - larger */ @@ -1599,6 +1606,21 @@ nav.sidebar a[aria-current="page"] { .why-section ul { grid-template-columns: 1fr; } + + /* Reset search bar to flow naturally in header */ + site-search button { + position: static !important; + transform: none !important; + width: auto !important; + min-width: auto !important; + padding: 0.5rem !important; + } + + /* Hide search text and kbd shortcut on mobile */ + site-search button span, + site-search button kbd { + display: none !important; + } } /* ==========================================================================