Gallery ledger

A gallery set as an index rather than a grid. Four ruled rows run down a full-width band: a small numeral in the left margin, one panoramic 21/9 frame in the middle, and on the right a title with a tracked place-and-year line under it. Above them an intro row carries a tracked label on the left and one short line on the right. All four core/image blocks include example photographs; choose Replace to select your own media library files and scale: cover crops whatever they upload to the band.

Four rows, each ruled off from the one above by a 1px currentColor hairline, with an index numeral in the left margin and a meta line on the right. The section is scanned like an index of works rather than browsed like a grid: the photographs are entries in a list, not tiles on a wall, and the eye runs down the numerals and the rules instead of across a mosaic.

It survives colourlessness because the whole device is hairlines, numerals and alignment. There is no wash, no tint and no accent anywhere in it: the rules are currentColor, so they are whatever the theme paints text, and the numerals are the same colour as everything else, distinguished by size and tracking rather than by hue. Take every colour away and the ledger is still a ledger.

It survives 390px because a ledger is defined by its rules, not by its columns. Core stacks core/columns below 782px, so each entry becomes numeral, then frame, then title and meta, in one ruled block. The hairline sits on the row GROUP rather than between the columns, so it does not stack with them: on a phone each entry is still fenced top and bottom, still numbered, still read in order. What is lost is the left margin, and what is kept is the index.

The hairlines are per-side group borders, not core/separator blocks. Twenty Twenty-Four narrows any separator that is not is-style-wide to a centred stub, and a group border is the shape that cannot be narrowed. The last row carries a bottom border as well as a top one, so the index closes rather than trailing off.

• Ink ledger: the band inverts. A contrast chain becomes the ground and a base chain becomes every word in it, including each heading's own explicit text colour, because a theme's heading element style beats an inherited group colour and would otherwise paint the titles the same colour as the plate. The hairlines are currentColor in both files and need no change at all: they follow the type from dark-on-light to light-on-dark by themselves, which is the argument for currentColor in one line. Rows, widths, frames and everything else are identical to the base.

Inherits: every colour (the band is a base chain, all type a contrast chain, every rule currentColor), the typeface, and the spacing scale (spacing|70 above and below the band, spacing|50 under the intro row, spacing|40 inside each row, spacing|30 between stacked columns and spacing|20 between a title and its meta line).

Decides: the ledger itself. The 1240px measure and the clamp gutters; the 8 / 60 / 32 column split, which gives the frame roughly 700px at 1400 so a 21:9 band is a band and not a strip; the row rhythm, which comes from padding on the row group rather than from block gap, so the hairlines sit tight against the rows they fence; the type proportion, a 13px numeral and a 13px meta line in wide caps against a clamp(1.125rem, 1.6vw, 1.5rem) title at 1.15 with a touch of negative tracking. The title states its own clamp because it is read; the numeral and the meta line are genuinely incidental labels, both well under 30 characters, which is the only place a flat 13px belongs.

The photographs. All four image blocks include example photographs; choose Replace to select an image from your media library, and the 21/9 aspect ratio with scale: cover crops it. Panoramic subjects suit it; a portrait crops hard and that is the point of the proportion being set for them.

Then the entries. The numerals are plain text, so an index of six is two more rows copied and renumbered, and an index of three is one row deleted; nothing else needs touching, because the rules and the rhythm belong to the rows. Keep each title short enough to hold one or two lines in a 32% column, and keep the meta line to a place and a year, or anything else under about 20 characters, so the tracking still reads as tracking.

The base and the variation both take every colour and typeface from the theme. Both were checked in the editor, rendered and looked at.

The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image or cover and choose Replace to use your own Media Library files. See image credits for the sources and licenses. Pasting an image URL does not import a Media Library attachment.