luxick/mcg-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show all nav items on mobile instead of collapsing

Browse Source 
The menu collapsed to a hamburger below 640px, which was roughly twice
the width the items actually need: measured with Segoe UI Semibold, the
five entries occupy 296px against 343px available at a 375px viewport.

Drops the toggle entirely and scales the column gap and font size with
clamp() instead, so there is no breakpoint at all. flex-wrap handles the
extreme case -- below ~330px the row wraps to two lines, which still
shows every item rather than hiding them.

Also removes the checkbox-and-label toggle hack, which announced itself
as a checkbox and carried no aria-expanded state.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
luxick
2026-07-30 16:23:57 +02:00
parent 2fcb2fd219
commit f7ea9cde45
3 changed files with 7 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+7 -27
View File
@@ -109,20 +109,14 @@ h3 { font-size: 1.2rem; margin: var(--space-3) 0 var(--space-1); }
z-index: 20;
}
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle-label {
display: none;
padding: var(--space-2) 0;
color: #fff;
font-weight: 600;
cursor: pointer;
}
/* No hamburger: the five menu items need roughly 316px at the smallest gap, so
they fit on one line on any modern phone. The column gap scales with the
viewport, and flex-wrap drops to a second row in the extreme case (very
narrow screen or large text zoom) rather than hiding anything. */
.nav-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
gap: 0 clamp(0.75rem, 0.2rem + 2.2vw, 1.5rem);
list-style: none;
margin: 0;
padding: 0;
@@ -130,30 +124,16 @@ h3 { font-size: 1.2rem; margin: var(--space-3) 0 var(--space-1); }
.nav-list a {
display: block;
padding: 0.85rem 0;
padding: 0.85rem 0; /* keeps a ~44px touch target */
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
font-size: clamp(0.875rem, 0.83rem + 0.2vw, 0.95rem);
border-bottom: 3px solid transparent;
}
.nav-list a:hover { color: #fff; border-bottom-color: rgb(255 255 255 / 45%); }
.nav-list a[aria-current="page"] { border-bottom-color: #fff; }
@media (max-width: 640px) {
.nav-toggle-label { display: block; }
.nav-list {
display: none;
flex-direction: column;
gap: 0;
padding-bottom: var(--space-2);
}
.nav-toggle:checked ~ .nav-list { display: flex; }
.nav-list a { padding: 0.6rem 0; border-bottom: 0; }
.nav-list a[aria-current="page"] { text-decoration: underline; }
.nav-toggle:focus-visible ~ .nav-toggle-label { outline: 3px solid #fff; }
}
/* ----------------------------------------------------------------- main */
.site-main { padding-block: var(--space-4) var(--space-5); }