Repository navigation
fix(site): responsive landing page + dark theme - #9
Merged
Merged
Conversation
The page scrolled sideways at every phone width. Three causes: - `1fr` in the single-column fallbacks is `minmax(auto,1fr)`, so a grid item refused to shrink below the min-content of a nowrap command line or a <pre>: at a 375px viewport the document was 624px wide. Every fallback now uses minmax(0,1fr). - Grids with no explicit template (.install, .checks, .ftr ul) sized their implicit auto track to max-content, pushing the Copy buttons off-screen. - The logo carried width/height attributes but only a CSS width, so it rendered stretched to 150x360 instead of square. The nav also collapsed too late: the full bar needs ~920px but only became a burger at 720px, overflowing by 60px at tablet width. It now collapses at 960px, and the coverage table stacks into cards below 720px rather than being a 680px side-scroller. Dark mode ships alongside. Colours are tokens on :root; dark redefines only what changes, in @media (prefers-color-scheme:dark) and [data-theme="dark"], and a head script stamps the theme before the first paint so nothing flashes. The choice persists in localStorage; without one the OS leads. The primary button keeps its own colour pair because --blue has to go light in dark mode for link legibility, and white text cannot sit on that. Verified from 300px to 1440px with no horizontal overflow, and with no WCAG contrast failures in either theme.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The landing page scrolled sideways on every phone width, and had no dark mode. Both are fixed here; the light design is unchanged apart from one contrast nudge noted below.
Responsiveness
At a 375px viewport the document was 624px wide. Three causes:
1frin the single-column fallbacks.1frisminmax(auto,1fr), so a grid item refuses to shrink below the min-content of anowrapcommand line or a<pre>. Every fallback now usesminmax(0,1fr)— the base rules already did..install,.checks,.ftr ul) sized their implicitautotrack to max-content, pushing the Copy buttons off-screen (hidden by.hero'soverflow:hidden, so it read as "the button is missing", not as a scroll).<img width="360" height="360">with only a CSSwidth, so the logo rendered stretched 150×360 instead of square. Fixed on the baseimgrule.Also:
Dark theme
:root; dark redefines only what changes, in two places that must stay in sync:@media (prefers-color-scheme:dark)(guarded so an explicit light choice wins — the only rule that applies without JS) and[data-theme="dark"], which the toggle sets.<head>stampsdata-themebefore the first paint, so switching never flashes. The choice persists inlocalStorage(minilake-theme); with nothing stored, the OS leads and liveprefers-color-schemechanges are followed.aria-labelthat tracks state.Two things needed decoupling:
--btn-top/--btn-bottompair:--bluemust go light in dark mode for link legibility, and white text on light blue is 1.8:1.--navywas overloaded as both text and background colour. It is now the heading token (light in dark mode); the places that need the literal brand navy — the white button on navy panels, the active tab — use--brand-navy/--tab-on.The architecture diagram had its styles inside
<svg><style>, which is document-global and followed no theme. They moved to the main stylesheet under.arch svg, as tokens.Verification
--text-faint#7D8CA5→#6B7B94, which lifts the small uppercase labels from 3.2:1 to 4.3:1 — a one-line revert if you prefer the original tone.site/README.mddocuments the token contract so future edits stay themable.