Design-Notizen on Liftoff

Icons ohne Build-Schritt

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

Icon-Fonts liefern jede Glyphe an jeden Besucher aus. Sprite-Sheets brauchen einen Build-Schritt und eine Namenskonvention, die sich niemand merkt. Liftoff geht einen dritten Weg: Jedes Icon wird während des Hugo-Builds von der Iconify-API geladen und als SVG eingebettet.

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

Jedes Set auf Iconify funktioniert, adressiert als set:name. Ein Name ohne Präfix landet bei den Material Design Icons, check und mdi:check sind also dasselbe Icon.

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.