Jinemi/thermograph
4
0
Fork 0
Code Issues 2 Pull requests 3 Projects Releases Packages Wiki Activity Actions 1

Restore the brand lockup on the homepage (#181)

Browse source 
The homepage header lost its wordmark treatment: the mark baseline-aligned
instead of centring (riding ~8px high) and the wordmark fell back to 20px Inter
regular instead of the 26px monospace used everywhere else.

The lockup is styled by `.brand h1` — an element selector. The homepage renders
the brand as `<p class="site-name">` so its hero headline can own the page's
only h1, so it matched none of it: no flex centring, no gap, no monospace, no
weight. Measured against /about at 393px:

  homepage   <p>   Inter         20px w400  display:block  mark -8.5px
  /about     <h1>  ui-monospace  26px w700  display:flex   mark -1.2px

Match `.brand .site-name` alongside `.brand h1` (and the same for the inner
link and the compact-header size). Both now measure -1.2px, the intended
optical nudge.

Adds a test for the invariant. Nothing else caught this: the page rendered,
every test passed, and only the rendering was wrong — so the test asserts the
lockup rule covers the class the homepage actually uses, and fails if the
selector is narrowed again.
This commit is contained in:
Emi Griffith 2026-07-18 00:55:43 -07:00 committed by GitHub
parent 487c1a6ee4
commit a74d3b5d32
1 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
static/style.css
View file

@ -78,8 +78,14 @@ h1 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
/* Brand wordmark: monospace stack (instrument/data feel, no webfonts) beside
the mark, larger than the old Inter treatment. The mark lives INSIDE the h1
(and inside its home link on server-rendered pages) so glyph and wordmark
are one lockup, aligned to each other on every page regardless of tagline. */
.brand h1 {
are one lockup, aligned to each other on every page regardless of tagline.
Matched on .site-name as well as h1: the homepage renders the brand as a <p>
so its hero headline can own the page's only h1. Without the class here the
lockup falls back to block layout, which baseline-aligns the mark instead of
centring it (it rides ~8px high) and drops the monospace wordmark. */
.brand h1,
.brand .site-name {
font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
font-weight: 700;
font-size: 26px;
@ -88,13 +94,15 @@ h1 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
align-items: center;
gap: 10px;
}
.brand h1 a { display: inline-flex; align-items: center; gap: 10px; }
.brand h1 a,
.brand .site-name a { display: inline-flex; align-items: center; gap: 10px; }
.tag { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
/* Compact header (e.g. Calendar): no tagline, roughly half the height.
Only the vertical padding is trimmed so the responsive side padding stands. */
header.compact { padding-top: 9px; padding-bottom: 9px; }
header.compact .logo svg { width: 22px; height: 22px; }
header.compact h1 { font-size: 21px; }
header.compact h1,
header.compact .site-name { font-size: 21px; }
main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }