How these pages are laid out

The essays on this site borrow their layout from Amelia Wattenberger's writing. Her pages keep the text to one calm column and let pictures, demos and pauses break out of it. This note explains how that works here, and it uses each piece as it goes.

One grid, four widths

The page is a CSS grid with seven tracks. The middle track holds the text, and it is about seventy-five characters wide. On each side of it there is a wide track, a wider track and a gutter. A block decides how far it reaches by naming a span.¹

.article-grid {
  display: grid;
  grid-template-columns:
    [full-start] var(--gutter) [wider-start] var(--wider) [wide-start] var(--wide)
    [content-start] minmax(0, 36em) [content-end]
    var(--wide) [wide-end] var(--wider) [wider-end] var(--gutter) [full-end];
}

That code sits in a <Wide> block, so on a large screen it runs one track past the text on each side. On a phone the side tracks are zero, and the same block simply lines up with the text. Nothing has to be rewritten for small screens.

Reaching out, one track at a time

That section is a <Scrolly>. The figure holds still while the steps scroll past it, and it is told which step is crossing the middle of the screen. On a phone the figure pins to the top and the steps scroll up beneath it.

Rhythm

Not every paragraph has to sit flush left. Wattenberger often moves short lines across the column to slow the reader down.

First a line on the left,

then one in the middle,

and one on the right.

The grid only decides which tracks a block spans. Where the block sits inside them is up to ordinary Tailwind classes.

Writing a new essay

Each essay is a folder in src/content/thoughts/. Its index.mdx starts with a title, a summary, a date and a draft flag, and it can import figures from its own folder, the way this one imports its diagrams. <Wide>, <Wider>, <Full>, <Scrolly> and <Step> are available in every essay without an import.