From cb94d859fbd639727b8005173b6b15b903e155c0 Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 1 Nov 2026 10:34:05 +0000 Subject: [PATCH] The logo beside the greeting is centred on the heading's line The logo started at the height of the heading's text and hung 50px below it, so it read as lower than the heading. It rises by half of what it is taller than the line now - 29px at 40px type, computed from the font size so it holds at every width - and its middle is the line's middle: 107px at 1440px, 103px at 820px, 96px on a phone, measured. The row is shorter for it, so the hang into the space below goes, and "Introduction" starts at 199px (204px before). Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_014YZFmFZwmxFekaMfr3Ka5m --- src/styles/global.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/styles/global.css b/src/styles/global.css index edea1cf..5b15d99 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -78,10 +78,12 @@ img { max-width: 100%; height: auto; } margin: 28px 0 40px; color: var(--ink); font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; } -/* the logo hangs 24px into the space below the row (12px on a phone), so - * the first group starts that much higher than a 104px row would let it */ -.welcome img { width: 104px; height: 104px; flex: none; margin-left: auto; margin-bottom: -24px; } -@media (max-width: 620px) { .welcome { margin: 24px 0 28px; } .welcome img { width: 64px; height: 64px; margin-bottom: -12px; } } +/* the logo is centred on the heading's line (1.15em high), not on the + * row: it rises by half of what it is taller than the line, 29px at 40px + * type. That also keeps the row short, so the first group starts close + * under the greeting */ +.welcome img { width: 104px; height: 104px; flex: none; margin-left: auto; margin-top: calc((1.15em - 104px) / 2); } +@media (max-width: 620px) { .welcome { margin: 24px 0 28px; } .welcome img { width: 64px; height: 64px; margin-top: calc((1.15em - 64px) / 2); } } /* ---- the groups: a label, three tiles to a row at most ------------------- */ /* the page is as wide as the Insights site (--width); in it the tiles fall