Typography test

This post exists to exercise the stylesheet. Every element the theme styles appears below at least once. Delete it once you trust the CSS.

Headings and prose#

A paragraph of body copy set in Space Grotesk at 300 weight. It carries bold text, italic text, inline code, an internal link , an external link↗ that should pick up an arrow, and a Ctrl+C key hint.

A third-level heading#

Headings get a › prompt from CSS and a # anchor on hover.

Lists#

• En-dash bullets, not dots
• A second item to check the spacing
• A third, with code inside it

1. Ordered lists keep their numbers
2. Set in the faint ink
3. Third item

Quotes and rules#

A blockquote sits behind a hairline rule in the muted ink, set in italic. It runs to a second line so the left border has something to measure.

Code#

// Chroma classes, coloured from the same tokens as the rest of the page.
import { test, expect } from '@playwright/test'

test('the grain does not intercept clicks', async ({ page }) => {
  await page.goto('/')
  const overlay = page.locator('body')
  await expect(overlay).toHaveCSS('background-color', 'rgb(10, 10, 10)')
})

hugo server --buildDrafts --navigateToChanged

Tables#

A wide table scrolls inside its own box rather than widening the page.