Responsive Two-Column Timeline

This is a Responsive Two-Column Timeline. It transforms list-based historical data into a structured, alternating visual path. Its function is to allow users to navigate chronological content with ease, using a centralized vertical bar to guide the eye while images and text blocks oscillate between left and right columns.

Specs

• Weight: ~1 KB. Zero dependencies.
• Performance: Excellent. It relies entirely on native CSS rendering. There is no JavaScript, avoiding scroll-listener overhead.
• Theming / Customization: Uses CSS variables (--size, --highlight) for rapid styling of markers and bar thickness.
• Responsiveness: Fluid. Grid layout handles column alignment. The use of max-width and min-height ensures it sits well on desktop and mobile.
• Graceful Degradation: Perfect. Even in the oldest browsers, the timeline presents as a readable list of articles.

Anatomy

The component uses an ingenious background-gradient trick for the timeline structure.

• HTML (The Skeleton): Simple semantic <section> containing multiple <article> tags.
• CSS (The Skin): The timeline line and the circular markers are not separate DOM elements; they are drawn onto the background of the <article> tag using a layered background gradient with radial-gradient (for the marker) and linear-gradient (for the bar).

Logic

The logic hinges on the “Background-Overlay Geometry” technique.

article {
  background: 
    var(--marker), 
    linear-gradient(var(--highlight) 0 0) 50%/ 2px;
  background-repeat: no-repeat;
}

Instead of using absolute positioning to place a div as a line or marker, the developer uses the background property. By setting the background-position to 50% and providing a fixed 2px width, the vertical bar spans the element. The marker (the “dot”) is added via a radial-gradient that is placed at the top of the element. By simply changing the background repeat/size properties, the timeline is drawn automatically as part of the container itself, making it highly robust.

Feel

Structural and logical. The timeline feels like a high-end editorial layout. Because it is powered by CSS Grid, the content blocks are perfectly aligned with the markers on the central axis. The use of dark-mode-friendly colors (#121212) and a vibrant lime green (lime) highlight makes the path clear and easy to follow.