Styleguide: So sieht ein Beitrag auf diesem Blog aus

Dieser Beitrag zeigt alle Gestaltungselemente des Blogs an einer Stelle – Überschriften, Listen, Zitate, Tabellen und Code-Blöcke – und dient zugleich als Testseite für das Design. Die Code-Beispiele sind nicht ausgeführt, sie dienen nur zur Illustration.

Wie der Blog selbst entstanden ist, steht im Beitrag Wie dieser Blog entstand.

Text und Hervorhebungen

Fließtext kann fett oder kursiv sein und Code im Text enthalten. Links im Text sind unterstrichen, damit man sie auch ohne Farbe erkennt. Tastenkürzel stehen als Strg + C im Text, Überholtes wird durchgestrichen.

Eine Unterüberschrift

Unterüberschriften der dritten Ebene erscheinen kursiv.

Eine Überschrift der vierten Ebene

Die vierte Ebene ist für feine Gliederungen innerhalb eines Abschnitts gedacht.

Listen

Eine Liste ohne Reihenfolge:

• Cascade Layers
• Custom Properties
• Logische Properties

Eine nummerierte Liste:

1. Branch anlegen
2. Änderung committen
3. Pull Request öffnen

Listen lassen sich verschachteln:

• Styles
  • tokens.css für Farben, Schriften und Abstände
  • components.css für wiederkehrende Bausteine
• Inhalte
  • Beiträge als Markdown-Dateien

Zitat

Zitate stehen eingerückt, mit einer Linie im Akzentton und in kursiver Schrift.

Tabelle

Code-Block mit Dateiname und markierter Zeile

@layer components {
  .card {
    padding: var(--space-m);
    border: 1px solid var(--color-border);
  }
}

Code-Block ohne Dateiname

Ohne title entfällt der Dateiname; der Kopier-Knopf bleibt.

const datum = new Date('2026-10-15');
console.log(datum.toLocaleDateString('de-DE'));

Mehrere markierte Zeilen

Markierungen können einzelne Zeilen und Bereiche umfassen, hier {2,4-5}:

<article>
  <h2>Titel</h2>
  <p>Einleitung</p>
  <a href="/beitraege/">Alle Beiträge</a>
</article>

Befehle im Terminal

npm ci
npm run check-alles

Änderungen als Diff

- color: #000;
+ color: var(--color-text);

Eine Trennlinie wie die darüber trennt größere Abschnitte voneinander.