A Specimen of the Reading Layout

This page is a type specimen. It shows how each element of an article renders, so that layout changes can be checked against one reference. Nothing here is an argument; it is furniture.

Paragraphs and emphasis

Body text is set in a variable serif with optical sizing, at a measure of about sixty-six characters. Italic marks emphasis and titles such as The Elements of Typographic Style; bold is kept for genuine warnings. Quotation marks and dashes are converted typographically — “like this” — and so are ellipses…

Links within the site, such as the garden note on identity, carry a small degree mark so readers can tell they stay on this site. External links, like the Astro documentation, do not.

Lists

Unordered lists use a short dash:

A first item, which may run long enough to wrap onto a second line to show the hanging indent.
A second item
- with a nested item
A third item

Ordered lists number with small figures:

Write the draft.
Leave status: draft until it’s ready.
Change it to status: published.

Quotation

A blockquote is set in italic with an accent rule. Use it for quoted material, with the source given in the text or a citation.

A second paragraph in the same quotation.

Code

Inline code like getCollection('essays') sits on a tinted ground. Blocks are highlighted, and follow the light or dark theme:

def retry(operation, attempts=3):
    for attempt in range(attempts):
        try:
            return operation()
        except TimeoutError:
            if attempt == attempts - 1:
                raise

npm run build && npm run preview

Tables

Element	Markdown	Notes
Footnote	`text[^1]`	Numbered, collected at the end
Citation	`[@key, p. 4]`	Author–year, linked to the references
Inline math	$e^{i\pi} + 1 = 0$	Rendered by KaTeX at build time
Sidenote	`<Sidenote>…`	MDX only

Mathematics

Inline expressions such as $\sum_{k=1}^{n} k = \tfrac{n(n+1)}{2}$ flow with the text. Display equations are centred and scroll horizontally on small screens rather than overflowing:

\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi} \qquad \binom{n}{k} = \frac{n!}{k!\,(n-k)!}

Notes and keyboard input

Footnotes collect at the end of the article.¹ Keyboard shortcuts use Ctrl + K styling.

Callout

A callout highlights a short note within the text column — useful for warnings, definitions or editorial notes.

Headings

A third-level heading

Third-level headings appear indented in the table of contents.

A fourth-level heading

Fourth-level headings are set in small capitals and are not listed in the contents.

This is a footnote. Use footnotes for asides that would interrupt the sentence; use a sidenote when the aside belongs beside a particular paragraph. ↩