/* =========================================================================== theme.css - Farben und Schriften von hirch.net. =========================================================================== RICHTUNG "STROM" Der Ausgangspunkt war eine Seite mit einem bewegten Farbverlauf hinter allem. Der hat mit jedem Inhalt konkurriert, und weil Datum und Ort als Plaketten auf dem Kartenrand sassen, passten auf einen Bildschirm fünf Veranstaltungen. Diese Fassung setzt auf einen Strom: eine Spalte, eine Karte je Eintrag. Die Karte trägt ein Bild, wenn eines da ist, und bleibt kurz, wenn keines da ist - sie steht nicht leer herum. Die Farbe kommt aus den Bildern der Veranstalter, der Rest ist Grau und ein Grün. WIE DIE ROLLEN GEMEINT SIND Jede Farbe hat genau eine Aufgabe. Wer eine neue braucht, soll erst prüfen, ob eine der vorhandenen sie erfüllt - sonst wächst die Liste, bis niemand mehr weiss, welche wofür ist. HELL UND DUNKEL Umgeschaltet wird über ein Attribut am -Element: dunkle Fassung bzw. data-theme="light" helle Fassung (Vorgabe) Die Vorgabe ist bewusst HELL. Eine Veranstaltungsliste wird meistens unterwegs im Freien aufgerufen, und dort ist Dunkelschrift auf hellem Grund besser lesbar als umgekehrt. */ /* --- SCHRIFTEN ------------------------------------------------------------- Beide liegen als Datei daneben, statt bei Google geholt zu werden. Zwei Gründe: Die Content-Security-Policy der Seite müsste sonst um zwei fremde Adressen erweitert werden, und die Seite lädt niemanden nach, der mitzählen könnte, wer hier vorbeikommt. Es sind variable Schriften - eine Datei trägt alle Strichstärken. */ @font-face { font-family: 'Source Serif 4'; src: url('schrift/sourceserif.woff2') format('woff2-variations'); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Archivo'; src: url('schrift/archivo.woff2') format('woff2-variations'); font-weight: 300 700; font-style: normal; font-display: swap; } :root { /* Titel, Datumszahlen, Monatsgliederung. Eine Serifenschrift, weil eine Terminliste gedruckten Veranstaltungskalendern näher ist als einer Anwendung. */ --schrift-titel: 'Source Serif 4', Georgia, 'Times New Roman', serif; /* Alles andere. */ --schrift-text: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; } /* --- HELL (Vorgabe) ------------------------------------------------------ */ :root { /* Die Grundfläche. Leicht warm, nicht reinweiss - reinweiss ermüdet auf einer Seite, die man scrollend liest. */ --papier: #f2f3f4; /* Erhöhte Flächen: Anzeigen, Eingabefelder, der Eintrage-Bereich. */ --flaeche: #ffffff; /* Titel und Fliesstext. */ --tinte: #14181b; /* Ort, Datum, Zusätze - alles, was nach dem Titel kommt. Kontrast 5,4:1. */ --beiwerk: #4d565c; /* Rubriken, Wochentage, Hinweise. Kontrast 5,0:1 - reicht auch für 11 px. */ --leise: #616a71; /* Der einzige Akzent. Sparsam: aktiver Reiter, Hauptknopf, Verweis. */ --akzent: #1f6f5c; --akzent-hell: #e6f1ed; --akzent-tief: #175647; --auf-akzent: #ffffff; /* Zwei Linienstärken: zwischen Abschnitten die kräftigere, zwischen Zeilen die feine. */ --linie: #e2e5e7; --linie-fein: #ebedef; /* Ränder von Knöpfen und Feldern. */ --rand: #dde1e4; /* Etwas, das auffallen soll, ohne zu schreien - hervorgehobene Veranstaltungen. */ --marke: #e6f1ed; --marke-tinte: #1f6f5c; /* Schleier hinter Überlagerungen. */ --schleier: rgba(28, 26, 23, 0.42); /* Schatten - flach; Tiefe entsteht hier aus Linien, nicht aus Wolken. */ --schatten: 0 1px 2px rgba(28, 26, 23, 0.05); --schatten-hoch: 0 8px 30px rgba(28, 26, 23, 0.13); /* Die Symbole in shared/ sind WEISS gezeichnet - sie stammen aus der dunklen Glas-Fassung. Auf hellem Papier wären sie unsichtbar, deshalb werden sie hier nach Schwarz gerechnet. In der dunklen Fassung bleiben sie, wie sie sind. Eine Zeile statt sechs neu gezeichneter Dateien. */ --symbol-filter: brightness(0); color-scheme: light; } /* --- DUNKEL -------------------------------------------------------------- Dieselbe Struktur, andere Helligkeit. KEINE einfache Umkehrung: Auf Dunkel wirkt dieselbe Sättigung kräftiger, deshalb ist das Grün heller und weniger tief, und der Papierton wird zu einem neutralen Grau statt zu einem warmen Braun - warme Dunkeltöne sehen schnell schmutzig aus. */ :root[data-theme="dark"] { --papier: #0f1113; --flaeche: #191d21; --tinte: #eef0f2; --beiwerk: #a2abb2; --leise: #929ba2; --akzent: #2fd39f; --akzent-hell: #152720; --akzent-tief: #5ee0b8; --auf-akzent: #0c1a15; --linie: #242a2e; --linie-fein: #1f2428; --rand: #2e353a; --marke: #152720; --marke-tinte: #2fd39f; --schleier: rgba(6, 8, 11, 0.66); --schatten: 0 1px 2px rgba(0, 0, 0, 0.4); --schatten-hoch: 0 8px 30px rgba(0, 0, 0, 0.5); --symbol-filter: none; color-scheme: dark; } /* Wer die Seite nicht selbst umgestellt hat, bekommt, was das Gerät sagt. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --papier: #0f1113; --flaeche: #191d21; --tinte: #eef0f2; --beiwerk: #a2abb2; --leise: #929ba2; --akzent: #2fd39f; --akzent-hell: #152720; --akzent-tief: #5ee0b8; --auf-akzent: #0c1a15; --linie: #242a2e; --linie-fein: #1f2428; --rand: #2e353a; --marke: #152720; --marke-tinte: #2fd39f; --schleier: rgba(6, 8, 11, 0.66); --schatten: 0 1px 2px rgba(0, 0, 0, 0.4); --schatten-hoch: 0 8px 30px rgba(0, 0, 0, 0.5); --symbol-filter: none; color-scheme: dark; } } /* --- WAS DER ALTE STAND HIESS --------------------------------------------- Die vorige Fassung arbeitete mit Glas-Rollen (--ink, --glass-tint, --text-main ...). Der Eintrage-Bereich und der Hinweis sprechen sie noch an. Damit die beiden nicht gleichzeitig umgebaut werden mussten, werden sie hier auf die neuen Rollen gelegt. Wer eine dieser Zeilen entfernen will, sucht vorher, wer sie noch benutzt. */ :root { --ink: 28, 26, 23; --surface: 255, 255, 255; --text-main: var(--tinte); --text-muted: var(--beiwerk); --glass-tint: var(--flaeche); --glass-edge: var(--linie); --glass-filter: none; --glass-shadow: var(--schatten-hoch); --glass-blur: 0px; --icon-filter: var(--symbol-filter); --scrim: var(--schleier); --panel-bg: var(--flaeche); --important-tint: var(--marke); --ink-shadow: transparent; --ink-shadow-strong: transparent; } :root[data-theme="dark"] { --ink: 236, 238, 241; --surface: 27, 30, 36; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: 236, 238, 241; --surface: 27, 30, 36; } }