Wordmark: larger capital-case monospace treatment (#171)

Swap the header wordmark from the lowercase Inter treatment to a
monospace system stack (ui-monospace / SF Mono / Cascadia / Menlo /
Consolas), bump it 22->26px (compact headers 18->21px), and restore
the capital T by dropping the lowercase transform. No webfonts.

Claude-Session: https://claude.ai/code/session_01KdTZCjpLeD26ZbXe6ApjpR
This commit is contained in:
Emi Griffith 2026-07-17 22:19:39 -07:00 committed by GitHub
parent 9b32dff138
commit e58776fba6

View file

@ -73,15 +73,20 @@ header {
} }
.logo svg { width: 28px; height: 28px; display: block; } .logo svg { width: 28px; height: 28px; display: block; }
h1 { margin: 0; font-size: 22px; letter-spacing: -0.02em; } h1 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
/* Brand wordmark: lowercase beside the mark; 650 resolves to the nearest /* Brand wordmark: monospace stack (instrument/data feel, no webfonts) beside
installed weight of the system stack (no webfonts). */ the mark, larger than the old Inter treatment. */
.brand h1 { text-transform: lowercase; font-weight: 650; } .brand h1 {
font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
font-weight: 700;
font-size: 26px;
letter-spacing: -0.04em;
}
.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: 18px; } header.compact h1 { 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; }