style phone section nav like the light/dark toggle

This commit is contained in:
Martin Dvořák 2026-09-30 13:26:36 +00:00
commit b6abd972f1
2 changed files with 11 additions and 6 deletions

View file

@ -177,8 +177,10 @@ Themes: `web` = default frosted-glass website (sidebar + content, light/dark),
top panel it's just noise; the desktop/tablet sidebar keeps it.
- On phones (`max-width: 640px`) the section nav (`.web-nav`) stops being the
sideways-scrolling row it is on tablets and becomes a wrapping **grid**
(3-up, 2-up below `375px`) of button tiles, so every section fits with no
horizontal scroll — the collapsed top panel must never scroll sideways.
(3-up, 2-up below `375px`) styled to match the Light/Dark toggle (`.web-ctl`):
same `--btn-*` surface / radius / shadow and `0.82rem` / `600` type. Every
section fits with no horizontal scroll — the collapsed top panel must never
scroll sideways.
- Under `max-width: 640px` the year-grid heatmap (`.heatmap-container`) and its
legend/hover row (`.heatmap-status-row`) are `display: none` — the grid is
unreadable at phone widths. The contribution total and the commit history

View file

@ -1116,19 +1116,22 @@ html[data-theme="web"][data-scheme="dark"] .heatmap-legend-cell[data-level="4"]
}
/* Section nav: fit every link on screen instead of a sideways-scrolling row,
so the collapsed top panel never scrolls horizontally — a 3-up button
grid (2-up on very narrow phones, see the 374px block below). */
grid (2-up on very narrow phones, see the 374px block below) styled like
the Light/Dark toggle (.web-ctl): same surface, radius, shadow and type. */
.web-nav {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
gap: 8px;
overflow: visible;
padding-bottom: 0;
}
.web-nav a {
justify-content: center;
padding: 9px 8px;
border: 1px solid var(--btn-border, var(--glass-border));
background: var(--btn-bg, var(--glass-lo));
box-shadow: var(--btn-shadow, none);
color: var(--fg);
font-size: 0.82rem;
font-weight: 600;
}
.project-grid {
columns: 1;