mykiwi/mykiwi.blog · cdc5ae7

⑂ cdc5ae7

Stop the masthead title moving between pages

The header row is baseline-aligned, and .masthead__tools sat on that
baseline. A flex container takes its baseline from its first child, so the
whole masthead was measured from whichever control happened to be in the
group - and that set is not the same on every page. "About" only renders
on the home page below $wide, so a post's group fell back to the theme
toggle, a round button with no text whose baseline the browser synthesises
near its bottom edge.

Measured at 390px wide, the title, the signal under it and the top of
#main all sat 3.9px lower on a post than on the home page (title top
40.59 vs 36.72), and the offset shifted again as tools came and went.

Centring the group takes it out of the baseline calculation entirely, so
the title is the only thing the header baseline is drawn from and every
page measures the same by construction rather than because its controls
happen to agree. Verified with Playwright at 390px and 1440px: title top,
signal top, masthead height and #main top are now identical on home and
post. It costs "About" its shared baseline with the title - it now rides
the centre of the row, a couple of px higher.

Romain Gautier committed 2026-09-23T22:58:10+02:00 Browse files

cdc5ae7 parent: 8804fce

modified blog/assets/css/style.scss +19 -3 Viewed

@@ -392,11 +392,27 @@ body {
392	392	}
393	393
394	394	// Controls, as opposed to the title: kept together at the right end of the
395		-// masthead row. Baseline alignment is what the header uses, but a round icon
396		-// has no baseline worth aligning to, so the group centres its own children
397		-// and hands the header a single baseline - the "About" link's - to work with.
	395	+// masthead row, and deliberately kept out of the header's baseline
	396	+// alignment.
	397	+//
	398	+// A flex container takes its baseline from its first child, so while this
	399	+// group sat on the header's baseline the whole masthead was measured from
	400	+// whatever control happened to be in it. That is not the same set on every
	401	+// page: "About" shows only on the home page below $wide, so a post's group
	402	+// fell back to the theme toggle - a round button with no text, whose
	403	+// baseline the browser synthesises near its bottom edge. The title, the
	404	+// signal under it and the top of #main all landed ~4px lower on a post than
	405	+// on the home page, and the difference moved as tools came and went.
	406	+//
	407	+// Centring the group instead leaves the title as the only thing the header
	408	+// baseline is drawn from, so the masthead measures the same on every page by
	409	+// construction rather than because its controls happen to agree. It costs
	410	+// "About" its baseline with the title - it now rides the centre of the row,
	411	+// a couple of px higher - which is a fair trade for a title that does not
	412	+// move under the reader.
398	413	.masthead__tools {
399	414	flex: none;
	415	+ align-self: center;
400	416	display: flex;
401	417	align-items: center;
402	418	gap: 0.85rem;

  }
  // Controls, as opposed to the title: kept together at the right end of the
--// masthead row. Baseline alignment is what the header uses, but a round icon
++// masthead row, and deliberately kept *out* of the header's baseline
--// has no baseline worth aligning to, so the group centres its own children
++// alignment.
--// and hands the header a single baseline - the "About" link's - to work with.
++//
++// A flex container takes its baseline from its first child, so while this
++// group sat on the header's baseline the whole masthead was measured from
++// whatever control happened to be in it. That is not the same set on every
++// page: "About" shows only on the home page below $wide, so a post's group
++// fell back to the theme toggle - a round button with no text, whose
++// baseline the browser synthesises near its bottom edge. The title, the
++// signal under it and the top of #main all landed ~4px lower on a post than
++// on the home page, and the difference moved as tools came and went.
++//
++// Centring the group instead leaves the title as the only thing the header
++// baseline is drawn from, so the masthead measures the same on every page by
++// construction rather than because its controls happen to agree. It costs
++// "About" its baseline with the title - it now rides the centre of the row,
++// a couple of px higher - which is a fair trade for a title that does not
++// move under the reader.
  .masthead__tools {
    flex: none;
++  align-self: center;
    display: flex;
    align-items: center;
    gap: 0.85rem;