--- title: A Test Essay date: 2026-03-14 abstract: A comprehensive end-to-end exercise of the Hakyll pipeline — typography, code, math, sidenotes, filters, tables, exhibits, and annotations. tags: [meta] status: Working model confidence: 72 importance: 3 evidence: 2 scope: average novelty: moderate practicality: moderate confidence-history: [55, 63, 72] history: - date: "2026-03-01" note: Initial draft - date: "2026-03-14" note: Expanded typography and citation sections; added math examples --- The body typeface is Spectral, a screen-first serif with seven weights and full OpenType support. Old-style figures are enabled by default: the year 2026, the number 1984, Euler's number 2.718. Standard ligatures are active: *first*, *fifty*, *ffle*. The typographic principles informing this layout draw on Butterick[@butterick2019] and Tufte[@tufte1983]. This document is built with Pandoc[@pandoc]. Paragraphs following one another use first-line indentation in the traditional book manner, with no inter-paragraph vertical gap. This is the second paragraph of the opening section, and you should see the indent at the start of this line. A third paragraph to confirm the indent is consistent across multiple consecutive paragraphs and does not drift or accumulate. ## 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^2^, footnote reference^1^, ordinals like 1^st^ and 2^nd^. Subscripts use `subs`: H~2~O, CO~2~. 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. ```haskell -- Hakyll site compiler entry point module Main where import Hakyll (hakyll) import Site (rules) main :: IO () main = hakyll rules ``` ```css /* CSS custom property example */ :root { --bg: #faf8f4; --text: #1a1a1a; } body { background-color: var(--bg); color: var(--text); font-feature-settings: 'liga' 1, 'onum' 1; } ``` ```python 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.[^quadratic] 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.[^euler] The CSS smallcaps filter should catch abbreviations like NASA, HTML, CSS, and API automatically. [^quadratic]: The formula follows directly from completing the square. For a derivation, see any introductory algebra text, e.g. Stewart's *Precalculus*. [^euler]: This follows from Euler's formula $e^{i\theta} = \cos\theta + i\sin\theta$ evaluated at $\theta = \pi$. ### 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. ::: {.exhibit .exhibit--equation data-exhibit-name="Turán Edge Count" data-exhibit-type="equation" data-exhibit-caption="Edge count of a complete k-partite graph: total pairs minus same-part pairs."} :::: exhibit-body $$\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. ::: {.annotation .annotation--static}
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.
::: ::: {.annotation .annotation--collapsible}
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.
::: ::: {.exhibit .exhibit--proof data-exhibit-name="Turán Bound" data-exhibit-type="proof" data-exhibit-caption="Moving one vertex from the larger to the smaller part strictly increases the edge count when parts differ by ≥ 2."} :::: exhibit-body 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$. [□]{.proof-qed} :::: ::: ## 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 `
`, in keeping with the convention of printed musical editions. ::: {.score-fragment score-name="Sample Fragment" score-caption="A short excerpt demonstrating inline SVG score embedding with dark-mode-aware notation."} ![](../../sample_music.svg) ::: 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](https://en.wikipedia.org/wiki/Quadratic_formula), an [arXiv preprint](https://arxiv.org/abs/1234.5678), a [DOI link](https://doi.org/10.1000/xyz123), and [jgm/pandoc on GitHub](https://github.com/jgm/pandoc). A generic external: [example.com](https://example.com). An internal link [to the essay index](/essays/index.html) is left completely unchanged — no extra classes or attributes added. Wikilinks: [[About This Site]] resolved from `[[About This Site]]`, and [[The Colophon|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 `` 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 ``. 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 ::: {.annotation .annotation--static}
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.
::: ::: {.annotation .annotation--collapsible}
Note On collapsible annotations
This annotation is collapsed by default. The abbreviations i.e. and e.g. should be wrapped in `` tags by `Filters.Typography`. Clicking the button should expand and collapse this body smoothly, with the last line fully visible.
:::