mix/selfpost
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

style(panel): give the navigation column's mark the column's full width

Browse Source 
The mark kept the 110px it had as part of the bar, which was all there was
room for in a row; in a column it ended halfway across, sharing an edge with
nothing below it. At the column's width its edges line up with the page
entries, and the SVG's own inset puts the drawn mark on the entries' icons.
The width/height attributes carry the file's real proportions so the column
still reserves the right height before the SVG loads.

Where the column lies back down into a bar, the mark returns to the compact
size: at full width it would take a row to itself above the entries.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
mixeme
2026-08-07 22:30:21 +03:00
parent 9179818262
commit c4c1f12f3c
3 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/static/panel.css
+11 -4
View File
@@ -239,10 +239,13 @@ button.danger:hover, a.danger:hover { background: #912018; }
padding and rounding the entry rule below applies, so its own edge lines up
with the entries' icons rather than sitting half a step inside them. */
.nav .brand { padding: 0; }
/* width/height are on the element too, so the row reserves the space before the
SVG has loaded; these keep the ratio if the box is ever squeezed. The stamp's
proportions are part of the mark — it is never scaled unevenly. */
.nav .brand img { display: block; width: 110px; height: auto; }
/* The mark takes the column's full width, so its edges line up with the entries
below it rather than ending halfway across — the same way .mark fills the
card column on the pages that carry no navigation. width/height are on the
element too, so the column reserves the right height before the SVG has
loaded; height stays automatic because the stamp's proportions are part of
the mark — it is never scaled unevenly. */
.nav .brand img { display: block; width: 100%; height: auto; }
/* Each entry pairs an icon with its label, so the entry itself is a flex row
rather than a run of text — that is also why the entries centre their items
instead of aligning them on the text baseline. In the column the entry fills
@@ -309,6 +312,10 @@ button.danger:hover, a.danger:hover { background: #912018; }
flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.2rem;
padding-bottom: 0.6rem; border-bottom: 1px solid var(--border);
}
/* Lying down there is no column for the mark to span, and at its full width
it would take a row to itself above the entries, so it goes back to the
compact size it had — enough to read beside them. */
.nav .brand img { width: 110px; }
/* Each block keeps its own group of entries together and wraps as one; the
rules that separated the blocks vertically become the space between them. */
.nav .links, .nav .session, .nav .sections {