style(ui): 40px theme toggle, FR nav breathing room, explicit script directives - #68
Merged
Conversation
… viewport (#46) - .theme-toggle: add flex:none — as a flex item in .header-actions it was being shrunk to as little as 30.6px wide on crowded desktop bars (the 2.5rem circle became an ellipse). It now renders a true 40x40 target from 390px up. - html[lang="fr"] nav spacing: the previous FR metrics (0.87rem labels, 0.35rem padding) still wrapped the nine French labels onto two crowded lines from 1024px through ~1280px. Tighten the base FR metrics and add a scoped 64rem-71.99rem band (tighter bar gutters + one font notch) so the nav holds a single line from the hamburger breakpoint up; 72rem+ keeps the base FR sizing. - BaseHead.astro script directives: already fully is:inline-annotated on main (5073da0); astro check reports no hints for it, so no change needed. Zero client JS added — CSS only.
|
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
1 participant
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.
Fixes #46
What changed
1. Theme toggle holds its 40px target at every viewport (
src/styles/global.css)The 2.1rem → 2.5rem size bump from 5073da0 was already on main, but measurement showed the button is a flex item inside
.header-actionsand was being flex-shrunk to as little as 30.6px wide on crowded desktop bars (the border-radius circle rendered as an ellipse).flex: nonekeeps it a true 40×40 circle everywhere.2. French nav no longer crowds at intermediate viewports (
src/styles/global.css)Measured on
/fr/: with the previous FR metrics (0.87remlabels,0.35rempadding) the nine labels needed ~60px more than the bar offers at 1024px, so the nav wrapped into two crowded lines from 1024px all the way through ~1280px. This PR:0.82remlabels,0.22rempadding,0.3remgap), and64rem–71.99remband that reclaims bar room (tighter gutters around the nav and inside the actions cluster) plus one font notch (0.78rem), so all nine links hold a single line from the hamburger breakpoint (1024px) up. 72rem and wider keeps the base FR sizing.3. Explicit
is:inlinedirectives in BaseHead.astro — no change neededAll four script tags (JSON-LD, theme restore, theme toggle, CF analytics) already carry
is:inlinefrom 5073da0;astro checkreports no hints for that file, so nothing to add.Verification (all in the worktree)
npx astro check: 0 errors, 0 warnings (single pre-existing hint: unusedwriteFileinscripts/render-tui-shots.mjs, unrelated to this issue)npm run build: full build incl. GitHub-API fetch scripts — 44 pages, complete/fr/page:/en/@1024PX re-measured for regression: identical to baseline (FR rules arehtml[lang="fr"]-scoped; AR/EN untouched)