🎨 Styling & CSS Classes — Custom Design

Abstract

Quartz ermöglicht Styling auf zwei Ebenen: globale Themes (Farben, Schriften in quartz.config.ts) und seitenspezifische CSS-Klassen via Frontmatter (cssclasses). Diese Seite zeigt, wie beides funktioniert und welche Patterns nützlich sind.

---

1. cssclasses im Frontmatter

cssclasses: [klasse1, klasse2]

Diese Klassen werden direkt auf das <article>-Element der Seite gesetzt:

<article class="popover-hint klasse1 klasse2">
  <!-- Seiteninhalt -->
</article>

Du kannst sie in quartz/styles/custom.scss definieren und ansprechen.

---

2. Quartz Theme-Konfiguration

In quartz.config.ts steuerst du globale Design-Token:

theme: {
  fontOrigin: "googleFonts",
  typography: {
    header: "Schibsted Grotesk",   // Überschriften
    body: "Source Sans Pro",        // Fließtext
    code: "IBM Plex Mono",          // Code
  },
  colors: {
    lightMode: {
      light: "#faf8f8",             // Seitenhintergrund
      lightgray: "#e5e5e5",         // Borders, Trennlinien
      gray: "#b8b8b8",              // Deaktiviert, Meta
      darkgray: "#4e4e4e",          // Fließtext
      dark: "#2b2b2b",              // Überschriften
      secondary: "#284b63",         // Links, Akzente
      tertiary: "#84a59d",          // Hover-Zustand
      highlight: "rgba(143,159,169,0.15)", // Code-Hintergrund
      textHighlight: "#fff23688",   // ==Markierung==
    },
    darkMode: { /* analog */ }
  }
}

Alle Farb-Tokens als CSS-Variablen verfügbar:

var(--light)       var(--dark)
var(--lightgray)   var(--gray)
var(--darkgray)    var(--secondary)
var(--tertiary)    var(--highlight)
var(--textHighlight)

---

3. Custom SCSS — quartz/styles/custom.scss

Diese Datei existiert und wird automatisch eingebunden. Hier kommen alle eigenen Stile rein:

// Beispiel: MOC-Seiten hervorheben
article.moc {
  border-left: 4px solid var(--secondary);
  padding-left: 1.5rem;
 
  h2 {
    color: var(--secondary);
  }
}
 
// Breiteres Layout
article.wide {
  max-width: 900px;  // Standard ist ~750px
}
 
// Kein Titel anzeigen
article.no-title .article-title {
  display: none;
}

---

4. Nützliche CSS-Klassen-Patterns

moc — Map of Content

cssclasses: [moc]

article.moc {
  border-left: 3px solid var(--secondary);
  padding-left: 1rem;
  background: color-mix(in srgb, var(--secondary) 5%, transparent);
}

---

wide — Breiteres Layout

cssclasses: [wide]

article.wide {
  max-width: min(900px, calc(100% - 2rem));
}

Gut für: Tabellenlastige Seiten, Showcase-Seiten, diese Seite hier.

---

no-toc — Kein Inhaltsverzeichnis

cssclasses: [no-toc]

article.no-toc ~ * .toc {
  display: none;
}

Gut für: Kurze Notizen, Daily Notes, wo TOC störend wäre.

---

Reifegrad-Badges (Garden Status)

tags: [garden/seedling]

// Badge am Seitenende über Tags
.tag[href*="garden/seedling"]::before { content: "🌱 "; }
.tag[href*="garden/budding"]::before  { content: "🌿 "; }
.tag[href*="garden/evergreen"]::before { content: "🌳 "; }

---

Dark-Mode-Only Styles

// Nur im Dark Mode aktiv
:root[saved-theme="dark"] article.moc {
  background: color-mix(in srgb, var(--secondary) 8%, transparent);
}

---

5. Schriften anpassen

In quartz.config.ts kannst du jede Google Font verwenden:

typography: {
  header: "Playfair Display",   // Serifenschrift für Eleganz
  body: "Inter",                 // Modern, lesbar
  code: "JetBrains Mono",       // Entwicklerfreundlich
}

Oder: fontOrigin: "local" für selbst-gehostete Fonts (kein Google-Request).

---

6. Komponenten-Styling

Quartz-Komponenten haben eigene CSS-Klassen:

Komponente	CSS-Klasse	Wo
Backlinks	.backlinks	Rechte Sidebar
Graph	.graph	Rechte Sidebar
TOC	.toc	Rechte Sidebar
Explorer	.explorer	Linke Sidebar
Tags	.tags	Unter Titel
Breadcrumbs	.breadcrumb-container	Über Titel
Footer	.footer	Seitenende

// Beispiel: Backlinks-Bereich hervorheben
.backlinks {
  border-top: 1px solid var(--lightgray);
  padding-top: 1rem;
}
 
// Explorer-Links größer
.explorer .folder-title {
  font-size: 0.95rem;
}

---

7. Callout-Farben anpassen

// Custom Callout-Farbe überschreiben
.callout[data-callout="note"] {
  --callout-color: 100, 149, 237;  // RGB, kein #
}
 
// Neuen Callout-Typ definieren
.callout[data-callout="garden"] {
  --callout-color: 80, 160, 100;
  --callout-icon: lucide-sprout;
}

---

8. Responsive Design

Quartz bringt Breakpoints mit:

// Mobile-spezifisch
@media (max-width: 768px) {
  article.wide {
    max-width: 100%;
    padding: 0 1rem;
  }
}

---

💡 Best Practices

Wenige Klassen, klare Bedeutung

Lieber 3 gut definierte Klassen (moc, wide, draft-visual) als 20 spezifische. CSS-Klassen sind ein Interface — halte es minimal.

CSS-Variablen nutzen

Immer var(--secondary) statt Hex-Farben in Custom-CSS — sonst bricht dein Styling im Dark Mode.

Livevorschau

npx quartz build --serve + Browser-DevTools → CSS-Änderungen sofort sichtbar ohne Reload.

---

🌱 Verwandte Seiten

• frontmatter-guide — cssclasses im Frontmatter setzen
• callout-showcase — Callout-Styling
• Quartz — Technische Basis
• 02-moc — MOC-Klasse in Aktion

---

Status: 🌿 Budding | Wächst mit dem Garten