Timeline

An <ol data-timeline> is a vertical run of events down a rule, each with a dot. data-dot colours the dot with one of the tones.

Basic

<ol data-timeline>
  <li data-dot="info"><time datetime="2026-10-02T14:02">14:02</time><strong>Build started</strong><p>atlas in <code>~/code/atlas</code>.</p></li>
  <li data-dot="stop"><time datetime="2026-10-02T14:09">14:09</time><strong>Link check failed</strong><p>A page pointed at a missing guide.</p></li>
  <li data-dot="go"><time datetime="2026-10-02T14:31">14:31</time><strong>Site deployed</strong><p>182 built, 0 failed.</p></li>
</ol>

Keep the order newest last, as the list reads down; <time datetime> gives each entry a machine-readable stamp.

Notes

• data-dot takes go, stop, info or earth; with none the dot takes the page ink.
• The dot is drawn by a ::before on the item, so the three elements inside are free.
• The rule is --s72-line; the dot's centre is the page colour, so the rule appears to pass behind it.