adbr.css

This page is a simple test surface. It uses only semantic HTML. If you add the class debug to <body>, you get a baseline grid overlay.

Typography

The default font stack is serif, with headings in sans. Links are the accent colour and inline code is loud on purpose. A date in text uses <time>, e.g. 25 April 2026.

This is strong, this is emphasis, this is marked, and this is small text.

Phrases, edits, and quotes

A CSS file with a TL;DR still benefits from a dotted underline on expansions. Chemistry uses subscripts, e.g. H₂O; footnotes and ordinal ideas use superscripts, e.g. E = mc² or the 2^nd draft.

We might show a price change: the offer was ~~£12.00~~ £9.99 after a correction. A short inline quotation is wrapped automatically, and you can nest inner quotes when a sentence refers to someone who was also quoting without hand-typing quote marks.

Lists

Unordered list item
Another item with a nested list
- Nested item
- Nested item
A final item

Ordered list item
Another item
A final item

Blockquotes are for pulling a thought out of the flow. The point is to make the contrast obvious without adding noise.

Details and summary

Use this for footnotes, tangents, and optional background. Keep it out of the main line of argument.

Code

Inline code uses backticks via CSS, like printf or make build.

#!/usr/bin/env bash
set -euo pipefail

echo "hello"
echo "world"

Keyboard input looks like Ctrl C.

Tables

Subtle caption, sans at 0.875em. Hover a body row to see a panel tint; header and footer rows stay still.
Thing	Why it exists	Notes
Baseline	Predictable rhythm	Baseline grid, strict spacing
Measure	Readable line length	Defaults to 68ch
Focus	Keyboard and links	Ring from `--focus`
Total rows (footer)	3	—

Forms

Forms are styled lightly. If you want a full component kit, use a UI framework. This is for small contact forms and simple inputs.