About this set
A changelog laid out as a timeline, with entries grouped under month headings that stick to the top of the viewport while you scroll through that month. Each entry has a coloured ring on a thin spine, a title followed by a tag, New, Fix or Breaking, a sentence of detail and a version number with its release date. Use it for product release notes, a documentation changelog or a status history page that grows by a few entries a week. The month headings are h2 elements with position: sticky and a background that matches the page, so entries slide under them, and each month’s entries are an ordered list with h3 titles. The ring colour follows the tag through a –c custom property, but the tag text carries the meaning, so nothing relies on colour. Release dates are time elements with full ISO dates. The spine stops at the last entry’s ring so the timeline ends cleanly. The Bootstrap version uses .sticky-top for the headings and .badge for the tags, and the Tailwind version uses sticky top-0 and before: and after: utilities for the spine and rings.
What’s included
- Sticky month headings over grouped entries
- New, Fix and Breaking tags with matching ring colours
- Version number and release date on every entry
- Heading structure: h2 per month, h3 per entry
- Spine ends at the final entry
Accessibility
Months are h2 headings and entries are h3 headings inside ordered lists, so the changelog can be navigated by heading or by list. Each entry's type is written in its tag, and the coloured ring only repeats it. Grey text was darkened to meet 4.5:1 and the tag colours pass on their tinted backgrounds. Nothing animates.
Customise it
Set --gl-bg on .log to your page background so the sticky headings cover what scrolls under them, and change --gl-line, --gl-muted and --gl-light for the spine and text (Tailwind: --color-gl-*). Each entry's ring colour is its inline --c.
