comunes/tane
1
0
Fork 0
Code Issues Pull requests Projects Releases 7 Packages Wiki Activity Actions

fix(site): only wrap header nav on small screens if it overflows

Browse source 
The forced width:100% on .site-nav below 560px was written back when
the language switcher spelled out every language name and needed the
room. Now that it's a compact pill, the header fits on one line down
to ~360px; let flex-wrap handle the actual overflow case instead of
always forcing a second row.
This commit is contained in:
vjrj 2026-07-22 00:01:20 +02:00
parent 8aa37bde34
commit 4963282620
1 changed files with 6 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

8
site/assets/css/main.css
View file

@ -121,11 +121,15 @@ a { color: var(--green); }
.lang-menu a.lang:hover { background: var(--container); } .lang-menu a.lang:hover { background: var(--container); }
.lang-menu span.current { color: var(--muted); font-weight: 600; } .lang-menu span.current { color: var(--muted); font-weight: 600; }
/* Narrow phones: brand on its own row, nav wraps beneath it, left-aligned. */ /* Narrow phones: shrink a bit, but only wrap the nav below the brand if it
actually stops fitting — the language menu is a compact pill now, not
three spelled-out language names, so it fits alongside "About Legal" down
to fairly small widths. flex-wrap on .site-header handles the overflow
case on its own; no need to force it. */
@media (max-width: 560px) { @media (max-width: 560px) {
.site-header { gap: .5rem; } .site-header { gap: .5rem; }
.brand { font-size: 1.15rem; } .brand { font-size: 1.15rem; }
.site-nav { width: 100%; gap: .4rem 1rem; font-size: .95rem; } .site-nav { gap: .4rem 1rem; font-size: .95rem; }
} }
main { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); } main { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }