Design on Liftoff

Alle Markdown-Elemente auf einer Seite

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

Dieser Artikel darf ruhig überladen wirken, das ist Absicht. Er spielt jedes Markdown-Element durch, das im Theme gestaltet ist. Damit lassen sich Typografie, Abstände und der Kontrast im Dark Mode an einer Stelle prüfen. Was hier schief aussieht, sieht auch in deinen Inhalten schief aus.

Jeder Abschnitt zeigt zuerst den Quelltext, darunter das Ergebnis.

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.

Hallo, Liftoff

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

Ich habe für jede kleine Produktseite immer wieder dasselbe Gerüst gebaut: einen Hero mit Code-Block, OS-spezifische Installations-Tabs, ein Feature-Grid, eine Doku-Sektion und einen abschließenden CTA. Liftoff bündelt diese Bausteine in einem Hugo-Theme mit sinnvollen Dark-Defaults.

Was im ersten Wurf drin ist

Hero-Partial aus dem Front Matter
OS-Tabs als leichter Shortcode
Code-Blöcke mit Copy-Button
Feature-, Integrations-, Pricing-, Testimonial- und CTA-Shortcodes
Doku-Layout mit Karten-Index, “On this page”-TOC, Vor/Zurück-Navigation
Blog- und Showcase-Bereiche

Wohin es geht

I18n-Strings sind für Deutsch und Englisch dabei. Weitere Sprachen sind eine i18n/<lang>.yaml-Datei entfernt.