dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style phone section nav like the light/dark toggle

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

6
agents.md
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. 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 - 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** 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 (3-up, 2-up below `375px`) styled to match the Light/Dark toggle (`.web-ctl`):
horizontal scroll — the collapsed top panel must never scroll sideways. 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 - Under `max-width: 640px` the year-grid heatmap (`.heatmap-container`) and its
legend/hover row (`.heatmap-status-row`) are `display: none` — the grid is legend/hover row (`.heatmap-status-row`) are `display: none` — the grid is
unreadable at phone widths. The contribution total and the commit history unreadable at phone widths. The contribution total and the commit history

11
src/app/web.css
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, /* 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 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 { .web-nav {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px; gap: 8px;
overflow: visible; overflow: visible;
padding-bottom: 0; padding-bottom: 0;
} }
.web-nav a { .web-nav a {
justify-content: center;
padding: 9px 8px;
border: 1px solid var(--btn-border, var(--glass-border)); border: 1px solid var(--btn-border, var(--glass-border));
background: var(--btn-bg, var(--glass-lo)); 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 { .project-grid {
columns: 1; columns: 1;