Marginalia — blog and magazine template

Look at the article page first

That’s where readers spend their time. Marginalia’s article page is an 18 px serif at a 40-rem measure — about 66 characters — with 1.6 leading, a lead paragraph, a byline, and prose styles for figures, block quotes, code and lists that hold up past the first screen. The type scale is small on purpose: a blog has three levels of heading, not six.

Notes in the margin

The name is the feature. An <aside class="note"> placed after a paragraph floats into the right margin above 72 rem and renders inline with a hairline below it. Reference and note link to each other, so keyboard and screen-reader users can jump and return. No JavaScript, no footnote plugin.

Nothing loads

System fonts only — Iowan Old Style on Apple devices, Palatino or Georgia elsewhere — so the page is one HTML file and one stylesheet with zero requests after them. Swap in a webfont if you must; the README says how to do it without a flash of invisible text.

Porting to a generator

Everything inside .prose is plain semantic HTML, which is what Markdown produces. The header and footer are two partials; the assembler is optional. Astro, Eleventy, Hugo and Jekyll all take this page as a layout with no changes to the CSS.