This page exists to be looked at, not read — every element CyberLavandaTea styles, rendered once, in order, so a change to _tokens.scss or _components.scss shows up here first. It also proves the small stuff still works: footnotes,¹ for instance.

This is a heading level one ¶

Rendered with the display face at its largest, an anchor id from its slug, and a pilcrow (¶) that fades in on hover — the same render hook handles every level below. Each level has its own voice rather than just a smaller size, so the hierarchy reads at a glance.

This is a heading level two ¶

Still the display face, a step down, with a hairline underneath and a short Primary segment at its start — in prose it opens a section, so it doubles as a divider. Also the level this page uses for its own section headers, which is why it shows up nested under “Heading level one” in the table of contents above.

This is a heading level three ¶

Drops to the body face, bold, in Primary green: a sub-section title that stands out from the paragraph without competing with the h2 above it.

This is a heading level four ¶

A mono, uppercase, letter-spaced label in Inactive grey, prefixed with a Primary // — like a comment tag in a config file.

Body text ¶

This theme renders Goldmark’s Markdown plus a handful of render hooks of its own. Inline styles work as expected: emphasis, strong emphasis, inline code, and a link to Hugo ↗ — external, so it picks up the outbound arrow.

Lists ¶

An unordered list, nested one level, in the tree-triangle marker:

• Static site generators
  • Hugo (Go — this site)
  • Eleventy (Node)
  • Zola (Rust)
• Build tooling
  • Tailwind CSS v4
  • Dart Sass

And an ordered list, in zero-padded mono indices, because sequence matters here:

1. Write Markdown in content/.
2. Hugo compiles templates and Markdown into static HTML.
3. Tailwind processes assets/css/main.css and purges unused utilities.
4. public/ ships to a static host.

Links ¶

An unvisited link is Link-blue, like the one to Hugo ↗ above. This link back to the Lists section turns Visited-sage once you’ve clicked it. On :hover or :focus any link switches to Primary green, with a focus ring for keyboard navigation.

Images ¶

A lone image becomes a <figure> with a caption, centered:

Quote ¶

The full layout is written in plain CSS, so the theme renders correctly even without Tailwind’s content detection.

Tables ¶

Code ¶

// buildIndex writes the search index used by /search.
const maxResults = 40

func buildIndex(posts []Post) (string, error) {
	count := 0
	for _, p := range posts {
		if p.Draft {
			continue
		}
		count++
	}
	return fmt.Sprintf("indexed %d posts", count), nil
}

Buttons ¶

Try the search →

Color & type reference ¶

The same six roles, read directly from assets/scss/_tokens.scss:

And the typefaces that carry it:

Written by a human