vetr0s.css

This is the stylesheet behind the blog at vetr0s.dev, pulled out to stand on its own. It is one file of about six hundred lines, with no build step and no preprocessor.Link css/style.css and css/reset.css, self-host the three ET Book files, and it works. This page is the reference: it uses every element the stylesheet styles, so you can see the whole thing at once.

The body face is ET Book, the digitisation of Bembo that Edward Tufte's handouts are set in. Color is the Modus palettes, Operandi in light and Vivendi in dark, switched with the CSS light-dark() function.One custom property, --color-accent, sets the one blue used for links and markers. Change that line and the page follows. The page also respects a saved light or dark choice from the toggle above, and falls back to the operating system otherwise.

Layout

The article sits in a fixed column with a wide left margin that scales with the window. On a roomy screen the footnotes float out into the space on the right.

A column of text should be wide enough to carry a full clause and narrow enough that the eye finds the start of the next line without hunting for it.

The layout is lifted from gingerBill's site, which is where the ET Book face came from too. It does three things:

• The measure is capped and the sheet is centred, so the page holds together on a wide monitor.
• Below that cap the column goes full width and the margin shrinks to a small percentage.
• Nothing is a raw pixel value; the indent is a share of the viewport, so it grows and shrinks with the window.

To drop it into a plain HTML page:

1. Link reset.css then style.css in the head.
2. Copy the font directory and keep the @font-face paths.
3. Add the theme script if you want the toggle; the stylesheet works without it.

Margin notes

Footnotes are set as margin notes.Like this one. It needs no script: the marker is a checkbox and a label, and the note is a sibling span. On a wide screen a note sits in the right margin beside its number. Narrow the window and it folds away behind the number until tapped.

Code

Code is set in a monospace face in a bordered box, a shade off the page color.Inline code gets the same box at a smaller size, so it reads level with the serif text around it. Syntax highlighting classes follow the Chroma names, so output from Hugo drops in unchanged.

const greeting = "hello";
// Syntax colors follow the active theme.

Tables

Tables are enclosed, ruled between columns, and striped on alternate rows.