Oben steht die Wortmarke, daneben der Seitentitel, am rechten Ende Suche, Farbschema-Umschalter, Lesemodus und der Sprachumschalter. Darunter eine Trennlinie.
Von Haus aus
Der Kopfbereich enthält nur den Seitentitel. Eine Marke gibt es nicht — dafür müsste man eine eigene Komponente bauen. Suche und die beiden Umschalter sitzen in der linken Seitenleiste.
In dieser Vorlage
Die Marke kommt aus einer Layout-Box-Instanz mit Inline-SVG, einmal hell und einmal dunkel. Sie ist zugleich der Link zur Startseite.
Zwei Feinheiten:
- Der Text der Marke ist visuell versteckt, aber im Dokument vorhanden. Der Link enthält sonst
nur ein SVG und hätte keinen zugänglichen Namen.
display: nonewäre hier falsch gewesen — genau dieser Fehler steckte in der ersten Fassung. - Die vier Bedienelemente stehen im Kopf, nicht in der Leiste. Dort sucht man sie, und es ist der einzige Bereich, den jeder Frame hat — auf der Fehlerseite gab es vorher weder Suche noch Farbschema-Umschalter, weil sie keine Seitenleisten hat.
- Sie bilden eine Gruppe (
toolbar) mitwrap, damit vier Bedienelemente und der Seitenname auch auf einem 360 px breiten Smartphone nebeneinander passen. - Am Smartphone wird der Kopf zur App-Leiste: Er bleibt beim Scrollen oben stehen, läuft über die volle Breite und nimmt den Schubladen-Button der Navigation mit auf. Die Suche gibt dort ihr Wort auf und wird ein Quadrat wie die beiden anderen; ihre 44 px behält sie.
Er bleibt stehen, der Titel geht
Seit dem 05.09.2026 klebt der Kopf auf jeder Breite oben am Fenster, nicht mehr nur am Smartphone: Die vier Bedienelemente und der Weg zurück zur Startseite sind das, wonach man mitten in einem langen Artikel greift, und mehrere Seiten hier sind drei Bildschirme hoch.
Seine Höhe ändert sich dabei nicht. Was sich ändert, ist die Seite darum: Der Kopf ist die eine von
zwei Ebenen, und die andere scrollt weg. Über dem Text steht der Bereich beforeBody mit
Brotkrumen, Tags, Überschrift und Datum — der Titelblock der Seite, und der geht mit dem Text. Die
Leiste bleibt. Genau das ist die Veränderung beim Scrollen, und sie braucht keinen Effekt: Sie
folgt daraus, wo die Dinge stehen.
Damit die Leiste in diesem Zustand noch etwas sagt, trägt sie zwei Namen nebeneinander — den
der Website und den des Kapitels ({{frontmatter.section}}, aus dem Frontmatter jeder Notiz). Das
Kapitel wiederholt die Überschrift nicht, also dürfen beide dauerhaft dastehen; wer über die
Überschrift hinausgescrollt ist, weiß weiter, wo er ist.
Vorher stand hier ein Effekt, und er lief nur in zwei von drei Browsern
Bis zum 09.09.2026 schrumpfte der Kopf beim Scrollen um 8 px, tauschte den Websitenamen gegen den Seitennamen und trug eine Fortschrittslinie. Alle drei hingen an
animation-timeline— CSS, das an die Scrollposition gebunden ist statt an die Uhr. Chromium und WebKit können das, Firefox nicht: an der installierten Fassung 155.0.1 nachgemessen, alle fünf Abfragen negativ, und es ist seit Jahren nicht in Sicht. Die Effekte standen hinter@supportsund passierten dort also einfach nicht — das sichtbarste Element der Website war in zwei Engines das eine und im dritten ein anderes.Die Fortschrittslinie fehlt seitdem ersatzlos, und das ist kein Verlust: Das Inhaltsverzeichnis markiert längst, wie weit gelesen ist, und tut das mit einem Skript des Plugins — also in jedem Browser.
Zwei Dinge hängen an der Höhe des Kopfes und stehen deshalb in derselben Rechnung:
- Die rechte Spalte klebt unter dem Kopf, nicht darunter verborgen: Ihr
topliest--tpl-header-h, dieselbe Rechnung, aus der der Kopf selbst seine Höhe bezieht. - Sprungziele halten die Höhe der Leiste über sich frei, dazu die 24 px der Ausblendung darunter
(
scroll-margin-block-start) — sonst landet jede angesprungene Überschrift hinter dem Kopf oder im Verlauf, der ihn nach unten abschließt.
Ein Fund beim Bauen
Das Plugin setzt width: 100% auf jede Layout-Box. In einer Flex-Zeile machte das die Marke
1376 px breit und schob den Titel in die nächste Zeile. flex hebt eine gesetzte Breite nicht auf —
sie musste ausdrücklich zurückgenommen werden.
Welche Variablen hier greifen
Diese 17 Variablen liest der Abschnitt nav-header in components-header.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 |
--gray | #5F5F5F · dunkel #A1A1A1 | 22 weitere Komponenten |
--headerFont | "Noto Sans", system-ui, "Segoe UI", Robot… | 15 weitere Komponenten |
--light | #FCFCFA · dunkel #16171A | 14 weitere Komponenten |
--secondary | #1463A3 · dunkel #699DC3 | 19 weitere Komponenten |
--titleFont | "Noto Sans", system-ui, "Segoe UI", Robot… | nur hier |
--tpl-header-pad | im Stylesheet gesetzt (layout.scss) | 6.4 – Variablen |
--tpl-header-title | im Stylesheet gesetzt (layout.scss) | nur hier |
--tpl-page-fade | 24px | 6.4 – Variablen |
--tpl-rule | var(--lightgray) = #DDDDDD | 19 weitere Komponenten |
--tpl-rule-width | 1px | 25 weitere Komponenten |
--tpl-space-2xs | 0.25rem | 16 weitere Komponenten |
--tpl-space-sm | 0.75rem | 10 weitere Komponenten |
--tpl-space-xs | 0.5rem | 20 weitere Komponenten |
--tpl-target | 44px | 12 weitere Komponenten |
--tpl-text-base | 1rem | 4 weitere Komponenten |
--tpl-text-sm | 0.875rem | 20 weitere Komponenten |
Diese Tabelle ist erzeugt: Sie wird aus den Stylesheets gelesen, nicht von Hand gepflegt.