/* ===================================================================== theme.css — Schwarzes Brett, SV 1958 Wörth Diese Datei darf Bille jederzeit ändern. Ändern, speichern, F5. Kein Build, kein Deploy, kein Sascha nötig. Alles hier drin ist Geschmack. Wenn etwas hässlich wird: rückgängig machen, F5, weg. Kaputtgehen kann nichts — die Struktur liegt in brett.css, und da muss hier keiner ran. Liegt auf dem Server unter: /static/theme/theme.css ===================================================================== */ :root { /* ------------------------------------------------------------------- Das Vereinsblau Direkt aus dem Wappen gemessen. Das ist die Wahrheit, alles andere hier unten ist daraus abgeleitet. Warum nicht als Hintergrund? Weil es mit R=0 G=4 B=155 so gesättigt ist, dass Text darauf flimmert. Ein Wappen ist klein. Eine Seite ist gross. Deshalb: gleicher Farbton, weniger Sättigung, dunkler — siehe unten. ------------------------------------------------------------------- */ --vereinsblau: #00049B; /* Aus dem Wappen. Nicht ändern. */ /* ------------------------------------------------------------------- Farben: das Brett Alle drei haben denselben Farbton wie das Wappen (238.5°), nur abgedunkelt. Wenn ihr sie ändert: den Blauton beibehalten, sonst passt das Wappen nicht mehr dazu. ------------------------------------------------------------------- */ --brett: #090A32; /* Der Brettgrund */ --brett-rahmen: #05051D; /* Rahmen aussen, dunkler als das Brett */ --brett-fach: #0F114A; /* Ein einzelner Aushang, etwas heller */ --schiene: #B08D4E; /* Messing: Schiene, Draht und Ringe */ /* ------------------------------------------------------------------- Farben: die Anhänger Heller Holzton. Hier wird gelesen, deshalb hoher Kontrast: dunkler Text auf hellem Anhänger, nicht andersrum. ------------------------------------------------------------------- */ --anhaenger: #EDE8DC; /* Das Holz */ --anhaenger-text: #17150F; /* Der Vorname, gross */ --anhaenger-name: #3A362B; /* Der Nachname, klein — es gibt vier Annas */ --anhaenger-neben: #5C5747; /* Spielstärke, Altersklasse, noch kleiner */ /* ------------------------------------------------------------------- Die zwei Akzente. Bitte sparsam. ASCHE = HIER KANNST DU TIPPEN. Genau zwei Stellen: der leere Haken, und der Anhänger, den du gerade in der Hand hältst. Das ist EIN Zug, keine zwei — du hältst Emma, die Haken sagen "Emma dazu". Dass beide Enden dieselbe Farbe tragen, ist der Punkt. GRÜN = HIER IST PLATZ. Auskunft, kein Knopf. Die Zahl im Kalender ("3 Plätze frei") und das "+2 frei" auf der zugeklappten Karte. Zwei Maßstäbe, dieselbe Aussage. Die Trennung ist die ganze Regel: Asche ist immer anklickbar, Grün nie. Wer eine der beiden woanders hinsetzt, macht beide stumpf. Auf Blau wirkt Asche stärker als auf Grün: Blau und Orange sind Komplementärfarben. Deshalb reicht wenig davon. ------------------------------------------------------------------- */ --asche: #C2542B; /* Rand vom leeren Haken, gewählter Anhänger */ --asche-hell: #E8845C; /* Schrift auf dem Haken, Regenwarnung */ --frei: #4CAF7D; /* "hier ist Platz" — Kalender und "+X frei" */ /* ------------------------------------------------------------------- Wetterwarnung (DWD) Bewusst NICHT auf der Vereinspalette. Eine amtliche Warnung ist nichts vom Verein -- sie darf fremd aussehen. Und bewusst nicht rot: Aschenrot ist #C2542B, DWD-Rot ist #C0342B. Auf dem Schirm ist das dieselbe Farbe. Ein rotes Warnband neben einem aschenroten Haken wuerde beide Signale kaputtmachen. Also das Gelb vom DWD. Abstufung ueber die Fuellung, nicht ueber den Farbton: minor/moderate = Umriss, severe/extreme = ausgefuellt. ------------------------------------------------------------------- */ --warnung: #F0B429; /* DWD-Gelb */ --warnung-text: #1A1405; /* Schrift auf der gefüllten Variante */ /* ------------------------------------------------------------------- Kalender im Aufhängen-Dialog Nimmt --frei von oben. Dazu Bernstein (--warnung), wenn es eng wird, und Grau, wenn kein Platz mehr da ist. Warum kein Rot für "alle belegt"? Zwei Gründe. Erstens sieht es aus wie Asche: DWD-Rot #C0342B gegen Aschenrot #C2542B — auf dem Schirm dieselbe Farbe. Jedes brauchbare Rot liegt zu nah dran. Zweitens, und wichtiger: "0 Plätze frei" ist gar kein Fehler. Einen offenen Spielwunsch kann man immer aufhängen, der bindet ja keinen Platz. Rot würde "geht nicht" sagen, obwohl es geht. Grau sagt "kein Platz mehr" — und das stimmt. Die Zahl steht in jeder Zelle. Die Farbe ist Verstärkung, nicht die einzige Auskunft — sonst wäre das Ding bei Rot-Grün-Schwäche wertlos. ------------------------------------------------------------------- */ /* ------------------------------------------------------------------- Farben: Schrift auf dem Brett ------------------------------------------------------------------- */ --text-hell: #DFE4F5; /* Normale Schrift */ --text-leise: #9AA6CE; /* Nebensachen: Dauer, Wetter, Datum */ --linie: #1F216B; /* Trennlinien und Rahmen */ /* ------------------------------------------------------------------- Schrift Archivo Narrow: schmal, wie graviert. Für Namen und Uhrzeiten. Atkinson Hyperlegible: vom Braille Institute für schwaches Sehen gemacht. Für alles, was gelesen werden muss. Beide kommen von Google Fonts. Wenn ihr sie tauscht: der Link im vom Template muss mit. ------------------------------------------------------------------- */ --schrift-namen: 'Archivo Narrow', 'Arial Narrow', sans-serif; --schrift-lesen: 'Atkinson Hyperlegible', system-ui, sans-serif; /* 17px statt der üblichen 16. Unsere Mitglieder sind zwischen 10 und 70 und schauen abends im Gegenlicht aufs Handy. Grösser ist hier kein Fehler. */ --schrift-groesse: 17px; --zeilenhoehe: 1.6; /* ------------------------------------------------------------------- Masse ------------------------------------------------------------------- */ --wappen-hoehe: 62px; /* Das Wappen im Kopf */ --neu-groesse: 72px; /* Der Aufhängen-Knopf. Größer = mutiger. */ --max-breite: 680px; /* Wie breit das Brett maximal wird */ --anhaenger-breite: 116px; --anhaenger-hoehe: 92px; /* Drei Zeilen: Vorname, Nachname, Klasse */ --anhaenger-abstand: 14px; /* Luft zwischen den Anhängern */ --wetter-icon: 18px; /* Sonne, Wolke, Regen, Gewitter */ /* Ab hier klappen die Aushänge zu und nur der oberste bleibt offen. Hochsetzen, wenn auch auf Tablets zu wenig auf den Schirm passt. */ --schmal-ab: 560px; --ecken: 5px; /* 0 = eckig wie echtes Holz */ --abstand: 20px; /* ------------------------------------------------------------------- Bewegung Wie schnell ein Anhänger schwingt, wenn man drübergeht. Auf 0ms setzen, wenn es nerven sollte. ------------------------------------------------------------------- */ --schwung: 160ms; }