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

fit web section nav without horizontal scroll on phones

Browse source
This commit is contained in:
Martin Dvořák 2026-09-30 13:20:00 +00:00
commit f72415f464
2 changed files with 28 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/app/web.css
View file

@ -1114,6 +1114,22 @@ html[data-theme="web"][data-scheme="dark"] .heatmap-legend-cell[data-level="4"]
.web-title {
font-size: 1.7rem;
}
/* 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). */
.web-nav {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
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));
}
.project-grid {
columns: 1;
}
@ -1149,6 +1165,14 @@ html[data-theme="web"][data-scheme="dark"] .heatmap-legend-cell[data-level="4"]
}
}
/* Very narrow phones: 3-up is too tight for the longest labels ("Overview",
"Hardware"), so fall back to a 2-up grid — still no horizontal scrolling. */
@media (max-width: 374px) {
.web-nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
html[data-theme="web"] *,
html[data-theme="web"] *::before,