Timeline stair

The signature is that nothing counts the entries and nothing draws a rail: how far through the history you are is written in how far across the page the entry has walked. Each entry is indented one step further right than the one above it, and each carries a currentColor top rule across its own width, so six consecutive rules of decreasing length stepping right read as a flight of treads. A reader who lands halfway down the section knows they are halfway through it before they have read a word, from the position of the tread alone.

That is a structural mark carrying the whole composition, so the rule is currentColor: it cannot resolve to nothing, it follows the theme's text colour, and it inverts with the section if the section is recoloured.

How a step is built, and why it is columns rather than margins

Each entry is a core/columns of two children. The first is an empty core/column whose width is the indent for that step: 0%, 8%, 16%, 24%, 32%, 40%. The second takes the remainder and holds the entry: a group with border-top: 1px solid currentColor, then the year, the title and the copy. The empty column carries no content at all, which is what the editor itself writes for a column nobody has filled.

Margins would have expressed the same indent and would have been worse in two ways. A margin on a child of a constrained layout beats the layout's own margin-left: auto and moves the block rather than insetting it, and a margin does not collapse on a phone. A column width does both correctly and is one attribute per step.

The blockGap is 0 on both axes. On the horizontal axis that makes the indent exactly the spacer column's percentage rather than the percentage plus a gap; on the vertical axis it means the empty spacer contributes no height when the row stacks. The rhythm between entries is the entry group's own padding-bottom.

What happens at 390

Core stacks columns below 782px, and this pattern lets it: isStackedOnMobile is left at its default, so the spacer column becomes a full-width block of zero height and drops out of the picture, and every entry takes the full measure. The staircase flattens into a plain stack of ruled entries, which is the correct reading of it on a phone: the indent needs room to be a signal, and at 390 there is no room, so the six currentColor rules do the separating on their own. The spacer leaves no visible gap because it has no content and the row's vertical blockGap is 0.

This is the opposite decision from timeline-rail, which sets isStackedOnMobile: false because its rail would break into six pieces if the row stacked. Here the rule is a tread per entry rather than one continuous line, so stacking loses the staircase and keeps the history.

Holding the measure down the flight

By the last step the content column is 60% of 1240px, which is still about 740px, and the copy would have run as a wall at the top of the section and a ribbon at the bottom. Each entry's paragraph therefore sits in a nested constrained group at 30rem with justifyContent: left, so every entry reads at about the same measure whatever its step is. The measure is held with a nested group and never with padding-right, which on a direct child of a constrained band moves the block instead of narrowing it.