Timeline layout

Use the timeline layout to narrate milestones, redesign phases, or program launches without building a custom component. Each checkpoint keeps the parchment styling and dot markers from the new CSS.

Phase 1 · Audit

Catalogue Markdown surfaces

List every page powered by Markdown and map the slots each one relies on.

Phase 2 · Skin

Apply the parchment UI

Port the GitHub-flavoured styles from redesign/markdown-github.css into the PHP-rendered pages.

Phase 3 · Layouts

Refine templates

Update the feature, gallery, and two-column layouts to respect the new spacing and typography tokens.

Phase 4 · Launch

Ship the refreshed site

Publish the Markdown-driven pages, regenerate the sitemap, and announce the design system update.

Implementation notes

Duplicate the .timeline__item blocks for additional milestones; the CSS handles spacing and connectors.
Combine this with a qa-block for FAQ-style rollouts after each phase.
Swap out the headings for inline SVG if you want even bolder milestone markers.