From a74d3b5d3219d26a5aa6bddb636c867d399eed05 Mon Sep 17 00:00:00 2001 From: Emi Griffith Date: Sat, 18 Jul 2026 00:55:43 -0700 Subject: [PATCH] Restore the brand lockup on the homepage (#181) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 `

` 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

Inter 20px w400 display:block mark -8.5px /about

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. --- static/style.css | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/static/style.css b/static/style.css index 376c864..42bd09e 100644 --- a/static/style.css +++ b/static/style.css @@ -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

+ 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; }