Example
Das Handbuch der Vorlage: sieben Kapitel, jede Komponente gestaltet, jeder Kontrast gemessen.
Example ist eine Vorlage für QuartzControl. Eine Vorlage ist hier eine Gestaltung: Farben,
Schriften, Abstände, das Seitenraster, die Anordnung der Bausteine, die Einstellungen der Plugins —
alles, was eine Website ausmacht, außer ihrem Inhalt. Sie wird als eine Datei mit der Endung
.qtpl weitergegeben und in QuartzControl unter Vorlagen in ein eigenes Projekt importiert. Danach
sieht die eigene Website aus wie diese hier, mit den eigenen Notizen darin.
Die Vorlage ist zum Benutzen gedacht und zum Umbauen. Nichts an ihr ist versteckt: Jede Farbe und jedes Maß ist eine Variable, die man in QuartzControl ändern kann. Jedes Stylesheet — die Datei, in der das Aussehen einer Komponente beschrieben ist — gehört zu genau einer Komponente und ist nach ihr benannt.
Warum es diese Website gibt
Eine Gestaltung kann man nicht abstrakt ansehen. Ein Explorer braucht Ordner, ein Inhaltsverzeichnis braucht Überschriften, ein Graph braucht Verweise, eine Tabelle braucht Zeilen. Diese Website liefert das alles: Sie ist das Handbuch der Vorlage und zugleich ihr Vorführmodell. Jedes Element, das Obsidian schreiben kann, kommt hier mindestens einmal vor — und wer eine eigene Anpassung prüfen will, findet hier die Seite, an der man den Unterschied sieht.
Die drei Entscheidungen
Alles Weitere folgt aus diesen dreien.
1. Die Breite entscheidet das Raster
Das Seitenraster — in Quartz Frame genannt — teilt die Seite in zwölf gleich breite Spalten und gibt dem Text sechs davon. Wie breit eine Textzeile wird, ist damit entschieden, und zwar an genau einer Stelle. Es gibt keine zweite Begrenzung am Absatz, die mit der ersten in Streit geraten könnte. Was das für Tablet und Smartphone heißt, steht unter 6.5 Seitenraster.
2. Farben sind gemessen
Kontrast ist das Helligkeitsverhältnis zwischen Text und Grund. Die Richtlinie für barrierefreie Websites, WCAG, verlangt für normalen Text mindestens 4,5:1. Diese Vorlage misst bei jedem Lauf 93 Farbpaare in hell und dunkel — jede Text-auf-Grund-Kombination, die dreizehn Callout-Farben, die Farben des Code-Syntaxthemas — und bricht ab, wenn eines darunter liegt. Quartz’ eigene Farben bestehen diese Prüfung nicht: von seinen dreizehn Callout-Typen scheitern elf im hellen Modus. Deshalb sind sie hier neu gesetzt. Mehr unter 6.2 – Farben und Kontrast.
3. Kein Stylesheet setzt eine Farbe oder ein Maß selbst
Farben und Maße stehen in 66 Variablen, nicht in den Stylesheets. Das ist keine Kosmetik: Nach dem Import bleiben Variablen in QuartzControl unter Stile → Variablen bearbeitbar; ein Wert, der in einer Stylesheet-Datei steht, nicht. Was trotzdem als Zahl in einer Datei steht, ist benannt und begründet — die Callout- und Syntaxfarben, weil sie einen Status bedeuten und keine Palette sind; die Haarlinien; und die Umbruchbreiten, weil eine Media-Query keine Variable lesen kann. Mehr unter 6.4 – Variablen.
Was die Vorlage nicht enthält
Keinen Inhalt. Die Notizen dieser Website reisen nicht mit der Vorlage; sie liegen in einem eigenen Obsidian-Vault. Wer die Vorlage importiert, bekommt die Gestaltung und schreibt seine eigenen Seiten hinein.
Keine fremde Konfiguration. Ein Vorlagenpaket trägt die Gestaltung — Stylesheets, Schriften, Bilder, Schnipsel, Plugin-Einträge — und lässt alles stehen, was ein Projekt für sich entschieden hat. Welcher Baustein was mitnimmt, steht unter 6.8 – Das Vorlagenpaket.
Was das hier ist und wie es zusammenhängt.
note
Der Standardtyp.
abstract
Zweitnamen:
summary,tldr.
info
Sachliche Ergänzung.
todo
Was noch zu tun ist.
tip
Zweitnamen:
hint,important.
success
Zweitnamen:
check,done.
question
Zweitnamen:
help,faq.
warning
Zweitnamen:
caution,attention.
failure
Zweitnamen:
fail,missing.
danger
Zweitname:
error.
bug
Ein Fehler im Programm.
example
Ein Beispiel.
quote
Zweitname:
cite. Nimmt die Akzentfarbe der Seite statt einer eigenen.
Was diese Vorlage anders macht
Von Haus aus setzt Quartz für diese dreizehn Typen zwölf Farben und lässt note die
Grundfarbe behalten. Gemessen gegen den hellen Seitengrund dieser Vorlage scheitern elf von
dreizehn an der WCAG-Schwelle von 4,5:1 — note erreicht 3,23:1, question nur 2,14:1. Durch
kommen nur example und quote. Im dunklen Modus dreht sich das Bild fast um: Dort scheitern vier,
und example ist eines davon (2,81:1). Das Rot von danger, failure und bug scheitert in
beiden Modi, bei 4,20 und 4,16:1.
In dieser Vorlage sind alle dreizehn neu gesetzt, je Modus einmal, und werden bei jedem Lauf gemessen: gegen den Seitengrund und gegen die eigene getönte Fläche des Callouts. Der Farbton bleibt erhalten — Blau bleibt Blau —, damit der Typ weiterhin an der Farbe erkennbar ist.
Die Zahlen dazu stehen unter Farben und Kontrast.
Jedes Element als Quelltext und gerendertes Ergebnis.
Eine .base-Datei hat bis zu drei Abschnitte:
filters:
and:
- file.hasTag("formatierung")
- file.ext == "md"
formulas:
Bereich: file.folder
views:
- type: table
name: Alle Formatierungsseiten
order:
- file.name
- description
- formula.Bereich
sort:
- property: file.name
direction: ASCfilters
Welche Notizen aufgenommen werden. Verknüpft mit and, or und not. Häufige Ausdrücke:
| Ausdruck | Bedeutung |
|---|---|
file.hasTag("x") | trägt diesen Tag |
file.inFolder("x") | liegt in diesem Ordner |
file.ext == "md" | ist eine Markdown-Datei |
eigenschaft != null | Feld ist gesetzt |
formulas
Berechnete Spalten. Sie stehen danach als formula.Name zur Verfügung — praktisch, um zwei Felder
zusammenzuziehen oder einen Pfad zu kürzen.
views
Eine Base kann mehrere Ansichten derselben Daten haben. Das Quartz-Plugin kennt table, list,
cards, board und gallery; die Voreinstellung ist table.
| Schlüssel | Wirkung |
|---|---|
type | Ansichtsart |
name | Beschriftung der Ansicht |
order | welche Spalten, in welcher Reihenfolge |
sort | Sortierung, mit property und direction |
groupBy | Gruppierung nach einem Feld |
limit | Höchstzahl der Einträge |
Wo man das bearbeitet
In Obsidian gibt es dafür eine Oberfläche — die YAML-Datei ist nur die Ablage. Wer sie von Hand schreibt, sollte sie danach in Obsidian öffnen und prüfen.
Verlinken
Ein Wikilink auf eine solche Datei braucht die Endung:
[[3-obsidian-formate/01-bases/Formatierungsseiten.base|Formatierungsseiten]]
[[3-obsidian-formate/02-canvas/Aufbau der Vorlage.canvas|Aufbau der Vorlage]]Quartz behält die Endung im Adressteil der Seite (…/formatierungsseiten.base), anders als bei
Markdown-Dateien. Ohne sie geht der Link ins Leere — und das fällt nicht auf, weil ein
unaufgelöster Wikilink hier keine besondere Auszeichnung bekommt.
Bases, Canvas, Excalidraw — drei eigene Seitentypen.
draft: true — die Seite wird nicht gebaut
Ein Entwurf bleibt im Vault und in Obsidian, aber Quartz überspringt ihn beim Bauen. Es gibt keine Datei dafür in der Ausgabe, keinen Eintrag in der Navigation, kein Suchergebnis; ein Link darauf führt ins Leere. Das ist der Weg für alles, was noch nicht fertig ist.
Dafür sorgt das Plugin Remove draft. Ist es abgeschaltet, werden Entwürfe wie alle anderen Seiten gebaut.
unlisted: true — gebaut, aber unsichtbar
Eine ungelistete Seite existiert auf der Website und ist über ihre Adresse erreichbar, taucht aber in keiner Ordnerübersicht, keiner Tag-Seite und keinem Suchergebnis auf. Wer die Adresse kennt, kann sie lesen; wer sie nicht kennt, findet sie nicht. Das ist der Weg für eine Seite, die man nur per Link weitergibt.
Die zwei Testseiten
In diesem Kapitel liegen zwei Seiten, die genau das vorführen:
- Ein Entwurf — dieser Link führt ins Leere, weil die Seite nicht gebaut wird. Erscheint sie doch, ist das Plugin aus oder das Feld falsch geschrieben.
- Eine ungelistete Seite — dieser Link funktioniert, aber in keiner Liste dieser Website ist die Seite zu finden.
Ungelistet heißt nicht geheim
Die Seite liegt auf dem Webspace wie jede andere. Eine Suchmaschine kann sie finden, sobald irgendwo ein Link darauf steht. Was wirklich nicht öffentlich sein soll, bleibt ein Entwurf.
Frontmatter: Entwurf, Datum, Alias, Titelbild.
In dieser Vorlage abgeschaltet
Seit dem 20.09.2026 führt die Navigation durch dieses Handbuch, nicht mehr der Explorer. Gestaltet ist er weiter, und sein Stylesheet reist im Paket mit: Wer ihn unter Plugins einschaltet, findet ihn so vor, wie diese Seite ihn beschreibt.
Eingeschaltet steht links im Fenster der Baum über alle Notizen. Er ist die Komponente mit dem größten Gestaltungsaufwand in dieser Vorlage, weil die Tiefe das eigentliche Problem ist.
Von Haus aus
Quartz rückt jede Ebene ein und färbt den aktiven Eintrag. Auf Ebene drei oder vier lässt sich nicht mehr erkennen, zu welchem Elternordner eine Datei gehört — der Einzug allein trägt die Struktur nicht.
In dieser Vorlage
- Führungslinie je Ebene. Jede verschachtelte Liste bekommt eine Haarlinie zum Elternordner. Bei vier Ebenen sind das vier Linien, an denen das Auge zurückfindet. Sie steht unter der Spitze des Pfeils, der die Ebene aufgeklappt hat, nicht daneben — und Dateien beginnen auf derselben Kante wie die Ordner ihrer Ebene, nicht davor. Beides war eine Zeit lang um ein paar Pixel daneben, aus drei verschiedenen Gründen, und drei kleine Fehler in derselben Richtung sehen aus wie Absicht.
- Gewicht sinkt mit der Tiefe. Ebene 1 ist fett, Ebene 2 halbfett, ab Ebene 3 normal und kleiner. Der Kopf einer Verzweigung ist damit auffindbar.
- Ab Ebene fünf wird nicht weiter eingerückt, nur noch die Linie geführt — fünf Einzüge lassen in einer drei Spalten schmalen Leiste kein Wort mehr übrig.
- Ein Symbol vor jeder Zeile. Ordner tragen ein Ordner-Icon, das offen und geschlossen verschieden aussieht, Dateien ein Datei-Icon — beide aus dem Lucide-Satz. Die Zeile sagt damit, was sie ist, bevor sie sagt, wie sie heißt.
- Der aktive Eintrag bekommt Farbe, Halbfett und einen Balken links — auch dann, wenn er
eine Ordnerseite ist. Das Plugin selbst kann das nicht: Es setzt seine Klasse nur auf Datei-
Zeilen, eine Ordnerzeile trägt bloß ein
data-folderpath, und die aktuelle Seite steht in<body data-slug>. Zwei Attribute miteinander vergleichen kann kein Selektor — also wird die Regel gebaut statt gesucht, von einer Layout-Box, die nichts ausgibt als ein<style>mit dem Pfad dieser einen Seite darin. - Die ganze Zeile ist anklickbar, bei Dateien wie bei Ordnern. Bei Ordnern war lange nur der Name der Link, während die Hinterlegung beim Überfahren über die volle Breite lief — sie versprach ein Ziel auf ganzer Zeile und antwortete auf einem Drittel. Der Pfeil bleibt daneben das, was auf- und zuklappt.
- Der ganze Weg dorthin ist markiert. Jeder Ordner, unter dem die offene Seite liegt, färbt seinen Namen und sein Symbol im Akzent ein, und die Führungslinie des direkten Elternordners färbt mit. Vorher sah ein aufgeklappter Ordner genauso aus wie einer, den jemand vor zehn Minuten von Hand aufgeklappt hatte — die Spur von der Wurzel zur aktuellen Seite war unsichtbar.
- Alle Ausklapp-Pfeile sind dieselbe Lucide-Chevron. Vorher zeichneten der Kopf des Baums, jeder Ordner, das Inhaltsverzeichnis und die aufklappbare Layout-Box vier verschiedene.
- Lange Namen werden abgeschnitten statt umgebrochen; drei Zeilen für einen Dateinamen zerreißen den Baum.
- Ein langer Baum scrollt in sich selbst (60 % der Fensterhöhe) statt die Fußzeile wegzuschieben, und blendet dabei oben und unten weich aus. Der Kasten trägt dafür genau so viel Innenabstand, wie die Kante tief ist: Ganz oben steht die erste Zeile deshalb unter dem Verlauf statt darin, ganz unten die letzte darüber. Beide Enden liest man in voller Stärke; weich wird nur, was gerade vorbeizieht.
- Am Smartphone ist er eine Schublade. Der Button sitzt in der App-Leiste, wird beim Öffnen zum Kreuz, die Schublade fährt von links über eine abgedunkelte Seite, und die Seite selbst scrollt solange nicht mit.
Zu sehen war das am besten unter Callouts — Grundform — drei Ordner tief, und im Explorer ein voll aufgeklappter Ast.
Zwei Sprachen, ein Baum
Der Explorer weiß nichts von Sprachen: Er baut seinen Baum aus jeder Seite des Builds und zeigte
ohne Zutun den deutschen und den englischen zugleich. Die Vorlage löst das im Stylesheet. Auf einer
deutschen Seite ist der en-Ordner ausgeblendet; auf einer englischen alles außer ihm, und seine
eigene Zeile gleich mit, damit der englische Baum ganz oben steht statt eine Ebene eingerückt.
Der Weg des Plugins — ein filterFn für den Explorer — ist von hier aus nicht erreichbar: Er wird
nur aus quartz.ts entgegengenommen, und dieses Projekt baut sein Layout aus
quartz.config.yaml. Siehe Wo die zwei Sprachen aufhören.
Welches Element eigentlich rollt
Das musste erst geklärt werden, bevor Maske und Kante überhaupt an der richtigen Stelle sitzen
konnten. Quartz gibt der inneren Liste max-height: 100% — und die beiden Browser lösen das
verschieden auf:
| rollendes Element | Kasten | Liste | |
|---|---|---|---|
| Chrome | die innere ul | 540 px, kein Überlauf | 540 px, 148 px Überlauf |
| Firefox | der Kasten .explorer-content | 540 px, 148 px Überlauf | 688 px, kein Überlauf |
Gemessen auf derselben Seite: 148 px Überlauf in beiden, aber an zwei verschiedenen Elementen.
Alles, was diese Vorlage an das Rollen hängt — die weiche Kante, das eingesperrte Überscrollen, die
dünne Rollleiste —, sitzt auf .explorer-content. In Chrome traf es damit ein Element, das gar
nicht rollt.
Die Liste gibt ihre Deckelung deshalb auf (max-height: none; overflow: visible), und der Kasten
ist in beiden Browsern der eine Roller.
Zwei Funde beim Bauen
Die Klassennamen führen in die Irre. Nur die Wurzelliste heißt explorer-ul; jede verschachtelte
heißt ul.tree-item-children. Und .nav-file-title ist der Link selbst, nicht sein Elternteil.
Die erste Fassung dieser Datei stylte deshalb ins Leere — sichtbar war das nicht, weil Quartz’
eigene Einrückung ähnlich genug aussah.
Zugeklappt kappt Quartz die ganze Komponente bei 1.2em. Wer seiner Überschrift eine Zielgröße von
44 px gibt, verliert sie damit vollständig. Diese Vorlage verlegt das Einklappen deshalb auf den
Inhalt und lässt den Kopf stehen.
Was das Plugin nicht kann
Die Ordner starten zugeklappt, und die Option dagegen wirkt nicht
@quartz-community/explorer0.1.0 kenntfolderDefaultState: 'open'und schreibt den Wert auch brav ins Markup — sein eigenes Skript liest ihn nur nie. Es holt den Faltzustand ausschließlich aus demlocalStorageund nimmt für alles, was dort nicht steht, zugeklappt an. Offen sind deshalb nur die Ordner auf dem Weg zur aktuellen Seite.Mit einem Stylesheet ist das nicht zu heilen: „offen“ und „noch nie angefasst“ tragen dieselbe Klasse, CSS kann die beiden nicht unterscheiden.
Der Explorer selbst — die ganze Komponente — ist dagegen aufgeklappt und bleibt es; nur am Smartphone startet er geschlossen, sonst stünde vor dem Text erst einmal die halbe Navigation.
Und einer, der hausgemacht war
Genau das ging eine Zeit lang schief: Eine Regel dieser Vorlage gab dem Schubladen-Button
display: grid, ohne ihn auf schmale Fenster zu beschränken. Weil hier alles ungeschichtet steht, schlug das Quartz’ eigenesdisplay: none— der Button war auch bei 1600 px da. Und das Skript des Plugins endet mit „wenn dieser Button sichtbar ist, klapp den Baum zu“. Der Baum war also auf jedem Desktop-Aufruf zu, obwohl er gerendert wurde.
Welche Variablen hier greifen
Diese 38 Variablen liest der Abschnitt nav-explorer in components-navigation.scss. Ändern lassen sie sich in QuartzControl unter Stile → Variablen — ohne eine Zeile CSS.
| Variable | Wert | gilt außerdem für |
|---|---|---|
--dark | #17171A · dunkel #FCFCFA | 13 weitere Komponenten |
--darkgray | #333333 · dunkel #DDDDDD | 18 weitere Komponenten |
--explorer-ring-reach | im Stylesheet gesetzt (components-navigation.scss) | nur hier |
--gray | #5F5F5F · dunkel #A1A1A1 | 22 weitere Komponenten |
--headerFont | "Noto Sans", system-ui, "Segoe UI", Robot… | 15 weitere Komponenten |
--icon-close | im Stylesheet gesetzt (foundation.scss) | nur hier |
--icon-file | im Stylesheet gesetzt (foundation.scss) | nur hier |
--icon-folder | im Stylesheet gesetzt (foundation.scss) | nur hier |
--icon-folder-open | im Stylesheet gesetzt (foundation.scss) | nur hier |
--light | #FCFCFA · dunkel #16171A | 14 weitere Komponenten |
--secondary | #1463A3 · dunkel #699DC3 | 19 weitere Komponenten |
--tpl-accent-bar | 3px | 6 weitere Komponenten |
--tpl-backdrop | rgba(0, 0, 0, 0.3) | Die Navigation |
--tpl-backdrop-blur | 4px | Die Navigation |
--tpl-drawer-width | min(86vw, 340px) | Die Navigation |
--tpl-focus-offset | 2px | Callouts, 6.4 – Variablen |
--tpl-focus-width | 2px | Callouts, 6.4 – Variablen |
--tpl-header-h | im Stylesheet gesetzt (layout.scss) | 6.4 – Variablen, Die Navigation |
--tpl-icon | 1.1rem | 3 weitere Komponenten |
--tpl-icon-sm | 0.95rem | 3 weitere Komponenten |
--tpl-indent | 0.85rem | Inhaltsverzeichnis, Die Navigation |
--tpl-motion | 150ms ease | 13 weitere Komponenten |
--tpl-radius-lg | 14px | 3 weitere Komponenten |
--tpl-radius-md | 8px | 17 weitere Komponenten |
--tpl-radius-sm | 4px | 10 weitere Komponenten |
--tpl-rule | var(--lightgray) = #DDDDDD | 19 weitere Komponenten |
--tpl-rule-width | 1px | 25 weitere Komponenten |
--tpl-shadow | 0 6px 24px rgba(23, 23, 26, 0.10) · dunkel 0 6px 24px rgba(0, 0, 0, 0.55) | 5 weitere Komponenten |
--tpl-space-2xs | 0.25rem | 16 weitere Komponenten |
--tpl-space-lg | 1.5rem | 12 weitere Komponenten |
--tpl-space-md | 1rem | 18 weitere Komponenten |
--tpl-space-xs | 0.5rem | 20 weitere Komponenten |
--tpl-surface | var(--lightgray) = #DDDDDD | 6 weitere Komponenten |
--tpl-surface-tint | var(--highlight) = rgba(42, 78, 108, 0.10) | 14 weitere Komponenten |
--tpl-target | 44px | 12 weitere Komponenten |
--tpl-text-sm | 0.875rem | 20 weitere Komponenten |
--tpl-text-xs | 0.78rem | 10 weitere Komponenten |
--tpl-tracking-label | 0.08em | 9 weitere Komponenten |
Diese Tabelle ist erzeugt: Sie wird aus den Stylesheets gelesen, nicht von Hand gepflegt.
Je Komponente: von Haus aus gegen diese Vorlage.
Diese Vorlage ist zum Ändern gebaut. Es gibt drei Ebenen dafür, und die erste reicht öfter, als man denkt.
1 · Eine Variable
Der Normalfall. 66 Variablen tragen jede Farbe und jedes Maß dieser Vorlage; keine Zeile CSS ist dafür nötig. In der App unter Stile → Variablen, getrennt nach hell und dunkel.
Welche Variable wo greift, steht auf jeder Seite in Kapitel 5 ganz unten — samt der Spalte, die
sagt, was sich noch mit ändert. --tpl-space-md anzufassen bewegt die ganze Website; --tpl-fade
bewegt zwei weiche Kanten.
2 · Eine Regel im vorhandenen Stylesheet
Wenn eine Variable nicht reicht, weil es nicht der Wert ist, sondern die Form: die zwölf Stylesheets liegen unter Stile → Eigenes CSS, in Abschnitten je Komponente. In welcher Datei und in welchem Abschnitt eine Komponente steht, sagt die Tabelle unten auf ihrer Seite.
Das ändert die Vorlage selbst. Beim nächsten Import eines Vorlagenpakets kann das überschrieben werden — für eine dauerhafte Änderung ist der dritte Weg der sicherere.
3 · Ein eigenes Stylesheet
Stile → Eigenes CSS → Neue Datei. Eine neu angelegte Datei wird ans Ende der Ladereihenfolge gehängt, und das ist der Punkt: Bei gleicher Spezifität gewinnt die zuletzt geladene Regel. Was hier steht, schlägt die ganze Vorlage, ohne dass man ihr etwas wegnehmen muss.
Auch
a11y.scsssteht dann nicht mehr am EndeDiese eine Datei liegt mit Absicht zuletzt: Ihre Regeln müssen Entscheidungen weiter oben gewinnen — eine Bedienhilfe, die nur bei Hover erschiene, ein Zustand, der nur an einer Farbe hinge. Eine eigene Datei landet dahinter. Wenn nach einer Änderung etwas verschwindet, das mit Tastatur, Kontrast oder Druck zu tun hat, ist das die erste Stelle zum Nachsehen.
Die Ausnahme: Diagramme
Bei Mermaid reicht keiner der drei Wege ohne !important. Quartz übergibt dem Diagramm-Renderer
neun seiner rund hundert Theme-Variablen (primaryColor, lineColor, secondaryColor und
sechs weitere, fest im Quartz-Skript verdrahtet). Alles andere färbt Mermaid selbst — und schreibt
es als <style> mit der Kennung des jeweiligen SVG in die Grafik, also mit einem ID-Selektor, den
keine Klassenregel schlägt.
Deshalb stehen im Abschnitt body-mermaid von content.scss 129 !important — und deshalb braucht
auch deine eigene Regel eins. Zum Vergleich: In allen anderen Abschnitten zusammen sind es 21, jedes
mit einer Begründung daneben.
Was du nicht anfassen solltest
Die Ladereihenfolge, die Schriften und die Variablen stehen als Blöcke zwischen Markierungen in
_quartzcontrol.scss, einer eigenen Datei neben custom.scss. Die schreibt QuartzControl bei jedem
Speichern neu — was du dort von Hand einträgst, ist beim nächsten Klick weg. custom.scss gehört
dir; QuartzControl setzt dort nur die eine Zeile @use "./quartzcontrol"; ganz oben, die die Blöcke lädt.
Farben, Schriften, Maße, Raster, Sprachen.
Drei Entscheidungen tragen die ganze Vorlage; sie stehen in 1.1 – Was diese Vorlage ist. Darunter wiederholen sich kleinere Muster in jeder Komponente. Wer eine Komponente ändert oder eine neue gestaltet, hält sich an diese, damit sie zum Rest passt.
Was überall gleich ist
- Überschriften der Seitenleisten sind klein, versal und gedämpft — sie sind Beschriftung, nicht Inhalt. Dieselbe Form steht in neun Stylesheets, und das ist Absicht: Jede Seite in Kapitel 5 soll ihre eigene Tabelle der Variablen vollständig zeigen.
- Ein Zustand wird nie nur durch Farbe gezeigt. Der aktive Eintrag im Explorer hat Farbe, Schriftschnitt und einen Balken; ein erledigter Aufgabenpunkt ist gedämpft und durchgestrichen; ein externer Link ist andersfarbig und trägt einen Pfeil.
- Ränder von Bedienelementen ziehen ihre Farbe aus
--tpl-rule-control, nicht aus--lightgray. Der zarte Ton reicht für eine Trennlinie, aber nicht für den Rand von etwas, das man bedient — WCAG verlangt dort 3:1. - Alles, was man antippt, ist mindestens 44 px groß (
--tpl-target). WCAG verlangt 24; 44 ist die Größe, bei der niemand zielen muss. - Zwei Zeilenabstände, nicht einer. 1,65 für den Fließtext, 1,45 für alles in Kleinschrift — die Seitenleisten und die Fußzeile. Derselbe Abstand bei kleinerer Schrift zerreißt einen Absatz in Einzelzeilen.
- Ein überfahrener Link wird akzentfarbig und unterstrichen, mit tiefer gesetzter Unterstreichung. Dieselbe Geste in acht Stylesheets, derselbe Wert aus einer Variable.
- Alle Ausklapp-Pfeile sind dieselbe Chevron aus dem Lucide-Satz — im Explorer, im Inhaltsverzeichnis, in der aufklappbaren Layout-Box.
- Was über den Rand läuft, scrollt in sich selbst und blendet dabei weich aus, statt die Seite länger zu machen: der Explorer, das Inhaltsverzeichnis, eine breite Tabelle, ein Codeblock.
- Ein Bereich, der auf einer Breite wirklich nichts zu suchen hat, wird ausgeblendet; eine Spalte, die nur gerade leer ist, bleibt stehen, damit die Textspalte nicht wandert.
- Nichts bewegt sich, wenn das System es nicht will.
prefers-reduced-motionsetzt eine einzige Variable auf null, und jeder Übergang der Vorlage folgt ihr.
Was bewusst nicht vereinheitlicht ist
Die neun Panel-Überschriften und die acht Hover-Regeln ließen sich in eine gemeinsame Datei
ziehen. Das wäre hier falsch: Die Stylesheets sind nach Komponenten geschnitten, und die
Dokumentation hängt daran — jede Seite in Kapitel 5 zeigt die Variablen, die ihre Komponente
liest. Geteilt werden die Werte, und die sind es: --tpl-tracking-label und
--tpl-underline-offset stehen je einmal. Ausführlich in 6.4 – Variablen.
Glossar, Muster, Grenzen, alle Seiten.