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

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 /* Brand wordmark: monospace stack (instrument/data feel, no webfonts) beside
the mark, larger than the old Inter treatment. The mark lives INSIDE the h1 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 (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. */ are one lockup, aligned to each other on every page regardless of tagline.
.brand h1 {
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-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
font-weight: 700; font-weight: 700;
font-size: 26px; font-size: 26px;
@ -88,13 +94,15 @@ h1 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
align-items: center; align-items: center;
gap: 10px; 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; } .tag { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
/* Compact header (e.g. Calendar): no tagline, roughly half the height. /* Compact header (e.g. Calendar): no tagline, roughly half the height.
Only the vertical padding is trimmed so the responsive side padding stands. */ Only the vertical padding is trimmed so the responsive side padding stands. */
header.compact { padding-top: 9px; padding-bottom: 9px; } header.compact { padding-top: 9px; padding-bottom: 9px; }
header.compact .logo svg { width: 22px; height: 22px; } 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; } main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }