Every entity, one page

A single post that exercises every formatting element so I can see how each one renders before writing something real. Treat this like a typography test card.

Headings

Section headings are H2. They get a thin rule beneath via the layout CSS, so they double as section breaks.

Subsections are H3

H3 gets the same rule treatment, slightly tighter spacing.

And H4 is for the rare deeper nesting

H4 isn’t styled differently — use it sparingly.

Paragraph styling

Body text inherits the page font (JetBrains Mono Variable) at the default body size. Bold for emphasis. Italic for nuance. You can combine both when it’s load-bearing. Inline code uses a tinted background and the site’s --border color. Strikethrough works too, though it rarely earns its place in a serious post.

Links come in three flavors: an internal link to another page on the site, an external link that opens in the same tab, and an anchor link that jumps within this page.

Lists

Unordered:

• First item, short.
• Second item that wraps across more than one line when the text runs long enough to demand it; subsequent lines indent under the first character of the item’s content.
• Third item with a nested list:
  • Nested item one.
  • Nested item two.

Ordered:

1. Step one.
2. Step two.
3. Step three, with a sub-list:
   1. Sub-step.
   2. Sub-step.

Definition-style lists work via plain markdown:

• Term — explanation of the term in one sentence.
• Another term — its explanation.

Blockquotes

A blockquote is rendered with a left border in the accent color and a muted italic body. Useful for pulling out a single load-bearing sentence or quoting a source.

Code blocks

Inline code is one thing. Block code is another. Different languages exercise the syntax theme.

# Bash
set -euo pipefail
for f in src/**/*.ts; do
  echo "Checking $f"
  pnpm tsc --noEmit "$f"
done

# Python
def fibonacci(n: int) -> int:
    """Return the nth Fibonacci number."""
    if n < 2:
        return n
    a, b = 0, 1
    for _ in range(n - 1):
        a, b = b, a + b
    return b

// TypeScript
interface Post {
  title: string;
  pubDate: Date;
  tags: string[];
}

function isRecent(post: Post): boolean {
  const oneWeek = 7 * 24 * 60 * 60 * 1000;
  return Date.now() - post.pubDate.valueOf() < oneWeek;
}

/* CSS */
.example {
  color: var(--fg);
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}

Math

Inline math: the area of a circle is $A = \pi r^2$, and Euler’s identity is $e^{i\pi} + 1 = 0$.

Display math sits on its own line:

$$\int_{-\infty}^{\infty} e^{-x^2}\, dx = \sqrt{\pi}$$

Aligned multi-line proofs use \begin{aligned}:

$$\begin{aligned} f(x) &= ax^2 + bx + c \\ f'(x) &= 2ax + b \\ f'(x) = 0 &\;\Longrightarrow\; x = -\frac{b}{2a} \end{aligned}$$

Symbolic / set-theoretic notation works too:

$$\forall \epsilon > 0,\; \exists \delta > 0 : \;|x - a| < \delta \;\Longrightarrow\; |f(x) - f(a)| < \epsilon$$

Tables

A normal table — left-aligned, smallcaps header, bottom-bordered rows.

Column	Another	Third	Total
Alpha	1	2	3
Beta	4	5	9
Gamma	7	8	15

Tables can hold inline elements: bold, italic, code, a link, and even inline math like $x + y = z$.

Database	Trade-off
PostgreSQL	Strong consistency, higher latency
Cassandra	Tunable per-query (ONE, QUORUM, ALL)
Redis	In-memory speed at the cost of durability guarantees

Horizontal rule

The --- separator renders as a dotted divider:

---

Useful between major sections when a heading would be overkill.

Images

When you add an image, drop it in public/ and reference it by path:

![Alt text](/path/to/image.png)

The base styles set max-width: 100% and height: auto so they don’t overflow. If you provide explicit width and height, modern browsers reserve the slot before the image loads (no layout shift).

Wrap-up

That’s every element this site styles. When something doesn’t appear correctly, the most likely culprits are (a) a syntax mistake in the MDX, (b) a missing entry in the schema in src/content.config.ts, or (c) the styling for that element living in the wrong stylesheet (post layout vs. global).