/* * Grundwerte, die Startseite und App gemeinsam haben – eine Datei, ein Wert. * * Hier stehen nur die Farben und Schriftstapel, die auf beiden Seiten * buchstäblich identisch waren und deshalb auseinanderlaufen konnten. Was nur * eine Seite kennt, bleibt dort: die App hat Papier-2, Linien, Verweise und * Zustandsfarben, die Startseite ihr Rohwachs und ihre Zellwand. * * Die Namen mit `--grund-` sind die Basisschicht und werden nicht direkt * benutzt. Jede Seite legt ihre eigenen Namen darüber – `--wachs`/`--tinte` * auf der Startseite, `--paper`/`--ink` in der App. * * Das dunkle Thema steht ebenfalls hier, weil es beide Seiten haben: die * Startseite und die Rechtsseiten kippen mit derselben Einstellung wie die * App. `data-theme` auf ist stets 'light' oder 'dark' – die * Systemvorgabe ist vorher aufgelöst, in der App von lib/prefs.svelte.js, auf * den öffentlichen Seiten von public/theme.js. * * Warum unter `public/`: von dort wird die Datei unverändert ausgeliefert, * und genau so brauchen sie die öffentlichen Seiten – sie binden sie per * `` ein. Die App zieht dieselbe Datei per `@import` in `app.css` ins * Bundle. Eine Datei, zwei Wege, keine zweite Fassung. */ :root { --grund-papier: #f7f4ed; --grund-tinte: #21201c; --grund-tinte-weich: #5c584f; --grund-tinte-fern: #948f83; --grund-akzent: #9a3412; --grund-serif: 'Fraunces', Georgia, serif; --grund-mono: 'IBM Plex Mono', ui-monospace, monospace; --grund-ui: 'Inter', system-ui, sans-serif; color-scheme: light; } /* * Dunkel. Nur die fünf Farben – die Schriften bleiben, und was jede Seite für * sich kennt (Rohwachs, Zellwand, Papier-2, Linien), kippt in ihrer eigenen * Datei. */ :root[data-theme='dark'] { --grund-papier: #171614; --grund-tinte: #ece8e0; --grund-tinte-weich: #b0aaa0; --grund-tinte-fern: #7c766c; --grund-akzent: #f0a37a; color-scheme: dark; }