Wo sie steht
Sie stand einmal zwischen Datum und Text und steht heute unter dem Artikel, hinter dem Kasten „Weiterlesen“. Der Grund ist, wofür sie da ist: Wer eine Seite aufschlägt, will lesen, was auf ihr steht — nicht zuerst eine Tabelle mit ihren Metadaten. Die zwei Angaben, die beim Einstieg wirklich helfen, stehen weiterhin oben: Datum und Tags.
Diese Seite steht trotzdem in Über dem Inhalt, weil sie zum Titelblock gehört, den sie beschreibt.
Von Haus aus
Eine schlichte Tabelle in Textfarbe, klappbar.
In dieser Vorlage
- auf einer getönten Fläche mit Rahmen und runden Ecken
- die Kopfzeile versal, klein und gedämpft — sie ist Beschriftung, nicht Inhalt, und trägt seit dem 05.09.2026 keine Linie mehr unter sich: Eine zweite Waagerechte so dicht an der eigenen Kante der Box liest sich als Naht
- der Schlüssel gedämpft und so breit wie sein Text, der Wert nimmt den Rest
- Werttypen werden unterschieden: eine Zahl in Ziffernbreite, ein Wahrheitswert als eingefärbtes Wort, eine Liste als Reihe von Marken, ein leeres Feld kursiv
Zu sehen unter Datentypen, wo eine Seite alle vier Typen mitbringt.
Der Fund mit der Zellenbreite
Die naheliegende Lösung für „der Schlüssel ist so breit wie sein Inhalt“ ist width: 1% auf der
Schlüsselzelle. Gemessen: Die Zelle wurde 7,94 px breit — exakt 1 % der Tabelle — und der Schlüssel
lag über dem Wert.
Der Weg, der funktioniert, ist der umgekehrte: width: 100% auf die Wertzelle. Sie beansprucht
alles, was übrig ist, und lässt dem Schlüssel seine Inhaltsbreite.
Welche Variablen hier greifen
Diese 16 Variablen liest der Abschnitt meta-note-properties in components-note.scss. Ändern lassen sie sich in QuartzControl unter Stile → Variablen — ohne eine Zeile CSS.
| Variable | Wert | gilt außerdem für |
|---|---|---|
--codeFont | "Noto Sans Mono", ui-monospace, SFMono-Re… | 4 weitere Komponenten |
--darkgray | #333333 · dunkel #DDDDDD | 18 weitere Komponenten |
--gray | #5F5F5F · dunkel #A1A1A1 | 22 weitere Komponenten |
--headerFont | "Noto Sans", system-ui, "Segoe UI", Robot… | 15 weitere Komponenten |
--tpl-positive | #136B34 · dunkel #6DD68F | nur hier |
--tpl-radius-md | 8px | 17 weitere Komponenten |
--tpl-rule | var(--lightgray) = #DDDDDD | 19 weitere Komponenten |
--tpl-rule-strong | var(--gray) = #5F5F5F | 8 weitere Komponenten |
--tpl-rule-width | 1px | 25 weitere Komponenten |
--tpl-space-2xs | 0.25rem | 16 weitere Komponenten |
--tpl-space-md | 1rem | 18 weitere Komponenten |
--tpl-space-sm | 0.75rem | 10 weitere Komponenten |
--tpl-surface-tint | var(--highlight) = rgba(42, 78, 108, 0.10) | 14 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.