Skip to content

fix(docs): Mobile styling improvements for landing page #106

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
betegon merged 3 commits into from
Jan 29, 2026
Merged

fix(docs): Mobile styling improvements for landing page #106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
713e887
fix(docs): Improve mobile responsiveness on landing page
betegon Jan 29, 2026
8f59d10
fix(docs): force dark theme on mobile TOC summary
betegon Jan 29, 2026
ec49f1c
fix(docs): improve mobile header layout and hamburger menu
betegon Jan 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions docs/astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
19 changes: 15 additions & 4 deletions docs/src/components/FeatureTerminal.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
}
</style>
4 changes: 2 additions & 2 deletions docs/src/components/Terminal.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
23 changes: 23 additions & 0 deletions docs/src/components/ThemeProvider.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
// Force dark mode only - completely overrides Starlight's theme system
---

{/* Matches Starlight's inline pattern to prevent FOUC */}
<script is:inline>
window.StarlightThemeProvider = (() => {
// Always force dark mode, ignore localStorage and system preference
document.documentElement.dataset.theme = 'dark';
// Clear any stored theme preference to prevent future interference
if (typeof localStorage !== 'undefined') {
localStorage.removeItem('starlight-theme');
}
return {
updatePickers() {
// No-op: theme picker is hidden, no updates needed
},
};
})();
</script>

{/* Empty template to satisfy any code expecting theme icons */}
<template id="theme-icons"></template>
140 changes: 138 additions & 2 deletions docs/src/styles/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -439,12 +446,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 {
Expand Down Expand Up @@ -483,13 +493,31 @@ starlight-tabs [role="tabpanel"] {

.feature-visual {
min-height: 340px;
margin: 0 0.5rem 0.5rem 0.5rem;
padding: 8%;
}

.feature-text h3 {
font-size: 1.4rem;
}
}

@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;
Expand Down Expand Up @@ -1578,6 +1606,114 @@ 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;
}
}

/* ==========================================================================
Force Dark Mode Globally
Ensures dark theme even if JS fails or system preference leaks through
========================================================================== */

:root {
color-scheme: dark !important;
}
Copy link
Copy Markdown
Contributor

@cursor cursor Bot Jan 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Duplicate color-scheme declaration in CSS file

Low Severity

The declaration color-scheme: dark !important; is duplicated in the same file - once at line 10 within the original :root, html, html[data-theme="light"], html[data-theme="dark"] block, and again at line 1632 in a new :root block. This redundancy increases maintenance burden as both need to be updated together if changes are needed.

Additional Locations (1)

Fix in Cursor Fix in Web


: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;
}
Copy link
Copy Markdown
Contributor

@cursor cursor Bot Jan 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gray scale values override original "BOOSTED CONTRAST" design

Medium Severity

The new "Force Dark Mode Globally" CSS section uses the selector :root, :root[data-theme="light"] which includes plain :root that always matches. This causes the gray scale values with !important to always override the original "BOOSTED CONTRAST" values at the top of the file. The new --sl-color-gray-5: #333333 and --sl-color-gray-6: #1a1a1a have very low contrast against the #0a0a0f background, potentially making UI elements using these variables difficult to see. The original values (#94a3b8 and #64748b) were deliberately lighter for readability.

Fix in Cursor Fix in Web


/* 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;
}
Copy link
Copy Markdown
Contributor

@cursor cursor Bot Jan 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overlapping mobile TOC styles target same elements

Low Severity

Two separate styling blocks target the mobile table of contents with overlapping selectors: mobile-starlight-toc styles (lines 1652-1689) and summary#starlight__on-this-page--mobile styles (lines 1691-1717). Both set similar properties like background-color, color, and border-color on the .toggle and .display-current elements, creating potential specificity conflicts and maintenance burden.

Additional Locations (1)

Fix in Cursor Fix in Web


/* 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;
}
Copy link
Copy Markdown
Contributor

@cursor cursor Bot Jan 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Redundant ID and attribute selectors target same element

Low Severity

The selectors use both summary#starlight__on-this-page--mobile and summary[id="starlight__on-this-page--mobile"] in the same comma-separated list. These target the exact same element - the attribute selector [id="..."] is functionally equivalent to the ID selector #.... This redundancy appears in multiple rule sets (lines 1692-1693, 1700-1701, 1706-1707, 1711-1714).

Additional Locations (1)

Fix in Cursor Fix in Web


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;
}

/* ==========================================================================
Expand Down
Loading