Articles on Liftoff

Every markdown element, on one page

Fri, 10 Jul 2026 00:00:00 +0000

This article exists to be ugly on purpose. It runs through every markdown element the theme styles, so you can check typography, spacing, and dark-mode contrast in one place. If something looks wrong here, it will look wrong in your content too.

Every section shows the source first, then the result.

Shipping a docs site in an afternoon

Sun, 28 Jun 2026 00:00:00 +0000

Most documentation sites die of structure, not of prose. You spend the first afternoon on the generator, the second on navigation, and by the third you have written four pages and lost interest. This walkthrough skips to the part where you are writing.

Start from the module, not from a fork

Add Liftoff as a Hugo module rather than copying it into themes/. You keep the ability to update, and your repository stays small enough to read.

Icons without a build step

Fri, 12 Jun 2026 00:00:00 +0000

Icon fonts ship every glyph to every visitor. Sprite sheets need a build step and a naming convention nobody remembers. Liftoff takes a third route: it fetches each icon from the Iconify API while Hugo builds, and inlines the SVG.

 go-html-template
 
{{ partial "icon.html" "simple-icons:codeberg" }}

Any set on Iconify works, addressed as set:name. A bare name falls back to Material Design Icons, so check and mdi:check are the same icon.

Multilingual from day one

Sun, 24 May 2026 00:00:00 +0000

Retrofitting a second language is the kind of task that looks like an afternoon and turns into a weekend. Every content file needs a counterpart, every menu entry needs a translation, every data file needs a variant, and every hardcoded date format turns out to be English.

Configuring it up front costs almost nothing, even if you only ever ship one language.

 toml
 
 
defaultContentLanguage = "en"
defaultContentLanguageInSubdir = true

[languages]
 [languages.en]
 label = "English"
 weight = 1

Content files then carry their language in the filename: about.md and about.de.md sit side by side and Hugo pairs them automatically.

A performance budget you can actually keep

Fri, 15 May 2026 00:00:00 +0000

A performance budget only works if it is short enough to remember. Three numbers are enough for a content site.

Budget	Target	What breaks it
Requests per page	Under 10	Web fonts, analytics
CSS	Under 30 kB	Utility frameworks
JavaScript	Under 10 kB	Anything with a build

Liftoff spends its JavaScript on three things: the theme toggle, the copy buttons on code blocks, and the blueprint filter. All three degrade to something usable when scripting is off, which is the only reason they are allowed to exist at all.

Dark mode that respects the system

Fri, 08 May 2026 00:00:00 +0000

A theme toggle that defaults to dark for everyone is a preference disguised as a feature. Liftoff reads prefers-color-scheme first, and only writes to localStorage once someone actually picks a scheme.

 js
 
 
const stored = localStorage.getItem("liftoff.theme");
const system = matchMedia("(prefers-color-scheme: light)").matches;

That ordering matters. A visitor whose system is light gets a light page on first load, without a flash of dark. A visitor who then picks dark keeps dark, even if their system changes later, because an explicit choice outranks an inferred one.

On design tokens

Sat, 02 May 2026 00:00:00 +0000

Liftoff exposes its palette, spacing scale, and typography as CSS custom properties on :root. Consumers can theme the site without forking the theme.

Override pattern

Drop a small CSS file into your site’s assets/css/ and import it after the theme’s bundle.

 css
 
 
:root {
 --color-accent: #ff7a59;
 --color-bg: #0d0a0a;
}

Light mode is opt-in by setting data-theme="light" on <html>. The built-in toggle remembers the user’s choice in localStorage with prefers-color-scheme as the fallback.

Hello, Liftoff

Wed, 15 Apr 2026 00:00:00 +0000

I kept rebuilding the same scaffold for every small product page: a hero with a code block, OS-specific install tabs, a feature grid, a docs section, and a closing CTA. Liftoff bundles those pieces into one Hugo theme with sensible dark-first defaults.

What’s in the first cut

Hero partial driven by front matter
OS tabs as a CSS-light shortcode
Code blocks with copy buttons
Feature, integrations, pricing, testimonial, and CTA shortcodes
Docs layout with card index, on-this-page TOC, and prev/next navigation
Blog and showcase sections

Where it’s going

Internationalisation strings ship for German and English. More languages are a i18n/<lang>.yaml file away.