A Four-Column Rail, an Eight-Column Read

This page runs on Harbor's two-column grid: col-lg-4 for the rail, col-lg-8 for the article, both wrapped in a row g-4. Under the lg breakpoint the columns stack in source order — rail first, then article — since Harbor doesn't reorder columns with order-* utilities the way some templates do.

Reach for this arrangement when the rail is doing navigation work: a section tree, a tag list, a related-reading widget. A visitor who lands mid-article still gets the map in the same glance a visitor browsing from the top does.

Dark Themes Demand More Discipline

Recoloring a light template for a dark body isn't a one-line change. Bootstrap's own components — .table, form validation states, the border on this rail — read --bs-body-bg, --bs-emphasis-color, and --bs-border-color directly, not the computed body background. Leave those three at Bootstrap's light-theme defaults on a dark page and .table renders a white box regardless of the color rules layered on top; theme.css overrides all three at :root instead.

Contrast discipline matters more here too: body copy sits at 75% white rather than solid white, headings jump to full opacity, and every translucent panel — the spotlight content boxes on the homepage, the collapsed mobile nav — uses a near-opaque dark fill instead of a lighter tint, so text stays legible no matter what photo or color sits behind it.

• col-lg-4 / col-lg-8 — the split itself
• row g-4 — the gutter between rail and content
• --bs-body-bg / --bs-emphasis-color / --bs-border-color — the dark-theme overrides
• Two .sidebar-block widgets, divided by a hairline border
• Source-order stacking on mobile — no order-* utilities needed