This post is a test of the site's formatting. The first letter uses a drop cap set in Cherubic Initials. Body text is justified and hyphenated, inspired by Gwern's site.Gwern's site uses sidenotes instead of footnotes on wide windows. On a wide screen this note should float in the right margin at the same height as the reference. On narrow screens, tap the superscript number to toggle it.
A Section Heading§
Section headings at the h2 level are rendered in small caps with a thin rule beneath them — a common convention in academic typography. This separates headings from body text.
Here is an inline code span: const x = 42. And a code block:
function greet(name: string): string {
return `Hello, ${name}`
}
A blockquote is set in italic with a left rule and muted colour. Use these for extended quotations from other sources.
Figures§
The <Figure> component floats an image beside the text with an optional caption. It accepts a float prop — "right" (default) or "left" — and wraps the image in a lightbox: click any figure to view it full-size and page through all figures in the post.
Figures occupy sixty percent of the column width and sit flush with the margin on whichever side they float. The prose wraps naturally around them, with a small gap between text and image. On narrow screens the float is dropped and figures stack full-width in the reading flow instead.
One or two figures per section usually fit well. When figures are close together, alternating their float direction can leave more space for the text.
Collapsible Sections§
Supplementary material can be hidden behind a <details> element. Click the triangle to expand:
Further notes on the typographic setup
This content is hidden until you expand it. I use these sections for longer notes and technical details.
The <summary> element gets a rotating triangle marker and is styled with a left border. The full <details> block is indented to show it is subordinate to the summary.
Sidenotes work inline anywhere in the body text.A second sidenote, automatically numbered. The superscript counter and the note prefix are both generated by a CSS counter — no manual numbering required. The counter increments in document order.
Lists and Other Elements§
- A monochrome palette in light and dark mode
- Four themes: dark, light, color, and Windows 98
- EB Garamond for body text; UnifrakturCook for page titles; Playfair Display for section headings; Cherubic Initials for drop caps
- Justified text with
hyphens: auto
A thematic break is rendered as ornamental stars rather than a plain rule:
That covers the main formatting examples.