Stone Theme

24 Jun, 2026

The colors for this theme were entirely too hard to decide on, therefore a default greyscale has been chosen and the theme has been named STONE. Apologies for the un-creativity.

Re-typesetting this blog

The serif setup here follows Maggie Appleton's garden thematically. Every styled element is on this page so I can check the CSS against real content. Previously I was using a much more brutal, monospaced theme called Parchment.

The CSS file is on this GitHub Gist if you would like to try.

Type voices

Three faces. Mono used to be everywhere; now it is only for code.

Cormorant — headings and body. A high-contrast serif in the spirit of Maggie's Canela.
Lato — nav, dates, and the footer.
IBM Plex Mono — code.

Body weight

Body text is weight 500. Cormorant is thin at 400 and gets hard to read at this size, so it runs a little heavier.

Sizing

Sizes use a fluid clamp() scale instead of one fixed size. Body sits near 20–22px and grows with the viewport.

Heading ladder

The six levels should read as distinct:

H1 / H2 / H3 — large serif at reading width.
H4 — a step above body size.
H5 — small-caps label.
H6 — uppercase, in the accent color.

Emphasis

Cormorant italic is faint at body weight, so emphasis is set to 600. Here it is next to a plain italic span and regular text.

Figures

The serif body uses oldstyle figures (0123456789); Lato uses lining figures for dates.

Open tradeoff

If the body ever reads too thin, bump it to 600 or switch the body face to Cormorant Garamond and keep Cormorant for display.

Layout

Three widths:

Reading column (--width, 720px): text, headings, and hr.
Wide (--width-wide, 920px): images, figures, and embeds.
Footer rule: a 720px line under the column.

On wide screens (1400px and up) the nav is a fixed rail in the left gutter: the home button on top with a dot, the links below beside a line, labels in small caps. Narrower than that, it becomes a top bar with the nav to the right of the title. An external link gets a ↗; internal links do not.

Kept from the old theme

Dark mode.
The body-link underline and hover fill. Nav and title links stay plain.
The external-link ↗ marker.

The roles

The type roles are four variables:

:root {
    --font-display: 'Cormorant', Georgia, serif;
    --font-body:    'Cormorant', Georgia, serif;
    --font-sans:    'Lato', system-ui, sans-serif;
    --font-mono:    'IBM Plex Mono', monospace;
}

Role	Font	Weight
Display	Cormorant	500
Body	Cormorant	500
UI / chrome	Lato	400
Code	IBM Plex Mono	400

Image

Images run wider than the text, up to the frame width.

#theme

Shank Space