Rail Timeline Blog Block for React

Add an object to ENTRIES at the top of the file with a date as an ISO string, a title, a dek and an href. Keep the list newest first. The year bands, their order and the "3 posts" counts are derived from the dates, so the first entry of a new year opens a new band.

One CSS variable, --rail, holds the rail's distance from the band's start edge. The line, the + mark where it meets each year's rule and the dots all read it, so they cannot drift apart. It is one value on phones and another from lg, where the year takes its own column. Every band draws its own rule with Guides, so the marks land on the rail.

From lg the year label is sticky inside its band, so it stays near the top while its entries scroll and hands over to the next year when the next band arrives. On a phone each year simply stacks above its entries; nothing sticks.

It is an ordered list of years, each with an h3 and an ordered list of entries, each an article with an h4 link. There is nothing to operate except the links, so Tab moves from title to title. The dots and the rail are decoration and hidden from assistive technology.

Yes. The rail, the dots and the year column sit on the start side and flip with the page, and the dates and counts are isolated with bdi.