A Test Essay

Typography

Headings

Headings are set in Fira Sans Semibold, a humanist sans-serif that complements Spectral. The hierarchy below demonstrates all levels used in practice.

Section heading (H2)

Subsection heading (H3)

Minor heading (H4)

Rarely used (H5)

Body text resumes here, following the heading sequence above. The vertical rhythm above each heading and the transition back to Spectral below it should feel natural, not abrupt.

Inline Elements

This sentence demonstrates bold emphasis (700) and semibold emphasis (600) side by side — the authorial choice the spec describes. Italic text looks like this phrase set in Spectral italic. Combined: bold italic.

Abbreviations use Spectral’s true small-caps via the smcp OpenType feature: the organisations NSF, ACLU, and CIA. These should appear as genuine small capitals, not scaled-down full caps.

Superscripts use Spectral’s sups glyphs: E = mc², footnote reference¹, ordinals like 1^st and 2^nd. Subscripts use subs: H₂O, CO₂.

Inline code looks like cabal run site -- build and sits comfortably in a line of Spectral body text. The size differential and background tint should clearly distinguish it without being jarring.

Blockquotes

The site is the proof. If a site about careful writing is itself carelessly made, the argument is self-defeating. Every element must earn its presence.

Text resumes after the blockquote without indent — the indent reset rule is working if this line begins flush left.

A nested quotation scenario: this outer blockquote contains ordinary text, establishing the left-border visual hierarchy.

Code

JetBrains Mono is used for all code. Ligatures and contextual alternates are active: -> => != :: >= in inline code, and in blocks below.

-- Hakyll site compiler entry point
module Main where

import Hakyll (hakyll)
import Site   (rules)

main :: IO ()
main = hakyll rules

/* CSS custom property example */
:root {
    --bg:   #faf8f4;
    --text: #1a1a1a;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-feature-settings: 'liga' 1, 'onum' 1;
}

def greet(name: str) -> str:
    return f"Hello, {name}!"

The code block border, background tint, and monospaced font should feel quiet — part of the page, not a jarring box.

Tables

Tables use Fira Sans at 90% size, with lining figures and tabular spacing enabled for numeric alignment.

Font	Role	Weight(s)	File size
Spectral	Body text	400, 600, 700	21–24 KB
Fira Sans	UI / headings	400, 600	16 KB
JetBrains Mono	Code	400	19–20 KB

Dark Mode

Use the toggle in the top-right corner of the nav to switch between light and dark. Both themes use warm monochrome palettes derived from the same base hue. The background, text, borders, muted text, code blocks, and blockquote borders should all shift coherently.

Check the following specifically in dark mode: sidenotes, code block backgrounds, the blockquote border, and the table header row. The transition on body should make the switch feel smooth rather than abrupt.

Background: #1c1a18 (warm dark, not pure black)
Text: #e8e5df (warm off-white, not pure white)
Muted text, borders: proportionally darker warm greys

Mathematics

The quadratic formula solves ax^2 + bx + c = 0 for real roots:

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

This is a well-known result.^a^a The formula follows directly from completing the square. For a derivation, see any introductory algebra text, e.g. Stewart’s Precalculus. Euler’s identity is often cited as the most beautiful equation in mathematics:

e^{i\pi} + 1 = 0

It connects the five most important constants in mathematics.^b^b This follows from Euler’s formula e^iθ = cos θ + isin θ evaluated at θ = π. The CSS smallcaps filter should catch abbreviations like NASA, HTML, CSS, and API automatically.

Turán’s Theorem

The Turán graph T(n,k) is the complete k-partite graph on n vertices with part sizes as equal as possible. Its edge count is given by the formula below — this is the identity the moving-vertex argument exploits.

\binom{n}{2} - \sum_{i=1}^{k}\binom{m_i}{2}

Every pair of vertices is adjacent except those within the same part, so the formula counts edges by subtracting same-part pairs from all pairs.

Remark Equal parts maximise edges

Intuitively: if two parts differ in size by more than one vertex, moving a vertex from the larger to the smaller part creates more cross-part pairs than it destroys within-part pairs. The moving-vertex argument below makes this precise.

Note Turán graph definition

The Turán graph T(n,k) is the unique (up to isomorphism) complete k-partite graph on n vertices whose part sizes differ by at most one. By Turán’s theorem, T(n,k) is the K_{k+1}-free graph on n vertices with the maximum number of edges.

Without loss of generality suppose n_1 - n_2 \ge 2. Form a new complete k-partite graph by moving one vertex from part 1 to part 2. Since the new graph is still complete k-partite on the same n vertices, it suffices to show it has strictly more edges.

The number of edges in any complete k-partite graph M_{m_1,\ldots,m_k} is

\binom{n}{2} - \sum_{i=1}^{k}\binom{m_i}{2},

since every pair of vertices is adjacent except those within the same part. Therefore

|E(G')| - |E(G)| = \binom{n_1}{2} + \binom{n_2}{2} - \binom{n_1-1}{2} - \binom{n_2+1}{2}.

Using \binom{m}{2} = \frac{m(m-1)}{2}, this simplifies to (n_1 - 1) - n_2 = n_1 - n_2 - 1. Since n_1 - n_2 \ge 2, we get |E(G')| - |E(G)| \ge 1 > 0. □

Music Notation

Score fragments are embedded inline as responsive SVGs, integrated with the gallery focusable system. Clicking the fragment — or the expand glyph that appears on hover — opens the shared overlay. The SVG inherits the page’s text color via currentColor, so notation renders correctly in both light and dark modes. The caption below the score is a persistent <figcaption>, in keeping with the convention of printed musical editions.

A short excerpt demonstrating inline SVG score embedding with dark-mode-aware notation.

Prose commentary surrounds the fragment just as it would in an analytical text — above to introduce the passage, below to elaborate on what was shown.

Links and Wikilinks

External links with domain classes: Wikipedia on the quadratic formula, an arXiv preprint, a DOI link, and jgm/pandoc on GitHub. A generic external: example.com.

An internal link to the essay index is left completely unchanged — no extra classes or attributes added.

Wikilinks: About This Site resolved from [About This Site](/about-this-site), and the colophon resolved from [the colophon](/the-colophon).

Filter Output

Abbreviations

Filters.Typography matches exact Pandoc Str tokens against a table of common Latin abbreviations and wraps them in <abbr title="…"> elements. Hover over the highlighted abbreviations below to see the tooltip.

Common scholarly shorthand: e.g. the quadratic formula, i.e. the formula x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}. See cf. Stewart §3.4. The argument follows from first principles, viz. the moving-vertex technique. NB: the result holds only for k \ge 2.

Smallcaps

Filters.Smallcaps detects runs of three or more uppercase letters and wraps them in <abbr class="smallcaps">. Technology acronyms detected automatically: HTML, CSS, API, JSON, URL, NASA, MIT. Trailing punctuation is stripped before the check so HTTP, and REST. also work correctly.

Not converted: short tokens like I, OK (two letters), or mixed-case tokens like JavaScript, macOS, or LaTeX.

Annotations

Remark On static annotations

This is a static annotation. It is always visible and has no toggle. The border separates the header from the body.

Note On collapsible annotations

This annotation is collapsed by default. The abbreviations i.e. and e.g. should be wrapped in <abbr> tags by Filters.Typography. Clicking the button should expand and collapse this body smoothly, with the last line fully visible.