em — editorial italic accent

The em shortcode wraps inline text in a styled italic accent. Used in editorial hero titles to colour a single word.

Live demo:

Software engineering from a small shop.

Source:

## Software {% em() %}engineering{% end %} from a small shop.

Plain markdown *emphasis* inside .editorial-hero__title and .editorial-section-hero__title picks up the same treatment, so writers can use either form.

Footnotes

Native pulldown-cmark footnotes. Use [^label] inline and [^label]: ... at the bottom of the page. Labels can be numeric or semantic — basalt numbers refs and definitions by first-reference order, so [^smith] still renders as [1].

The migration broke under concurrent writes.1 Later analysis confirmed it.2

Source:

The migration broke under concurrent writes.[^incident-2026] Later analysis confirmed it.[^smith]

[^incident-2026]: <https://example.com/incident-report>
[^smith]: <https://smith.example.com/paper-on-locking>

Wrap bare URLs as <https://…> or [label](url) — Zola does not autolink them.

kbd / sub / sup

Three semantic tags get sensible defaults. No class wiring required:

  • <kbd> — keyboard keys. Press Ctrl+K to open the palette.
  • <sub> — subscript. Water is H2O.
  • <sup> — superscript. a2 + b2 = c2.

For a keycap chip outside <kbd> (palette UIs, hint ribbons), use .kbd:

<span class="kbd">Esc</span>

Font stacks

Three CSS variables select the active fonts; basalt's mixins read them at runtime so a consumer site can swap stacks without touching templates:

:root {
  --font-text:    "Public Sans", system-ui, sans-serif;
  --font-display: "Newsreader", Georgia, serif;
  --font-mono:    "Space Grotesk", ui-monospace, monospace;
}

var(--font-display) powers @include display(...) which sets headings and editorial titles. var(--font-mono) powers @include mono(...) and @include uppercase-label(...). Defaults fall back to basalt's bundled stacks (Inter / Space Grotesk / JetBrains Mono).

Anchor offset

--anchor-offset (default 40px) is the scroll-margin-top on prose headings: the gap between the top of the viewport and an anchor target after a hash jump. Override if your site has a sticky top bar.