Css on Liftoff

Ein Performance-Budget, das man einhält

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

Ein Performance-Budget funktioniert nur, wenn es kurz genug ist, um im Kopf zu bleiben. Für eine Inhaltsseite reichen drei Zahlen.

Budget	Zielwert	Was es sprengt
Requests pro Seite	unter 10	Webfonts, Analytics
CSS	unter 30 kB	Utility-Frameworks
JavaScript	unter 10 kB	alles mit Build-Schritt

Liftoff gibt sein JavaScript für drei Dinge aus: den Theme-Umschalter, die Copy-Buttons an Codeblöcken und den Blueprint-Filter. Alle drei bleiben ohne Skripte benutzbar, und nur deshalb dürfen sie überhaupt existieren.

Dark Mode, der das System respektiert

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

Ein Umschalter, der für alle erst mal dunkel startet, ist eine Geschmacksfrage im Gewand eines Features. Liftoff liest zuerst prefers-color-scheme und schreibt erst dann nach localStorage, wenn jemand tatsächlich ein Schema wählt.

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

Diese Reihenfolge ist der Punkt. Wer sein System hell eingestellt hat, bekommt eine helle Seite, ohne dass kurz Dunkel aufblitzt. Wer danach bewusst auf Dunkel wechselt, behält Dunkel, auch wenn sich das System später ändert: Eine ausdrückliche Wahl schlägt eine abgeleitete.

Über Design-Tokens

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

Liftoff legt seine Palette, sein Spacing und die Typografie als CSS Custom Properties auf :root offen. Konsument:innen können das Theme anpassen, ohne es zu forken.

Override-Pattern

Lege eine kleine CSS-Datei in assets/css/ deiner Seite ab und binde sie nach dem Theme-Bundle ein.

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

Der Light-Mode ist Opt-in über data-theme="light" am <html>-Element. Der eingebaute Toggle merkt sich die Wahl in localStorage, Fallback ist prefers-color-scheme.

Warum nicht Tailwind

Für ein Theme, das als Hugo-Modul ausgeliefert wird, ist eine Node-Toolchain Reibung. Reines CSS mit Variablen bringt keine Abhängigkeiten und bleibt lesbar.