style phone section nav like the light/dark toggle
This commit is contained in:
parent
f72415f464
commit
b6abd972f1
2 changed files with 11 additions and 6 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue