/* nacht.css — die Nachtfarben, und zwar SCHON BEIM ERSTEN ZEICHNEN. * * Warum eine eigene Datei und nicht wie der Rest in nacht.js: * * nacht.js steht ganz unten im Body. Der Browser malt die Seite also einmal * fertig in Pfirsich, und erst danach kommt das Skript und faerbt um. Beim * schnellen Wischen vom Menue in den Chat sieht man das – ein, zwei Bilder * lang steht die Tagfassung da. Abel hat es gemeldet, und es stimmt. * * Diese Datei haengt im und ist vor dem ersten Zeichnen da. Das kleine * Skript daneben im setzt die Klasse auf , bevor irgendetwas * gemalt wird – es fragt dafuer nicht die Sonne, sondern den Merker vom * letzten Mal (localStorage). Das ist ein Zeichen schneller Rechnung wert: * die Antwort ist praktisch immer dieselbe wie eben, und wenn doch nicht * (genau zum Sonnenuntergang, oder beim allerersten Besuch), korrigiert * nacht.js es Millisekunden spaeter. Nichts geht kaputt, es blitzt nur einmal. * * Geschrieben als html.nacht und nicht als .nacht: das ist spezifischer * als das :root der Seiten und gewinnt deshalb, egal an welcher Stelle im * diese Datei haengt. Die Klasse sitzt auf und nicht auf : gibt es im * noch gar nicht. Die Variablen vererben sich von dort nach unten, und * damit stimmen alle Farben, die ueber var(--…) gehen – also fast alle. * * Die uebrigen Regeln (Raender, Sonderfaelle) bleiben in nacht.js und * haengen weiter an body.nacht. Sie kommen einen Wimpernschlag spaeter, aber * die grossen Flaechen sind da schon dunkel. */ html.nacht { --peach-bg-1: #1b2340; --peach-bg-2: #131a31; --peach-deep: #6c7bb5; --peach-soft: #2c3559; --cream: #232c4c; --ink: #e8ecff; --ink-soft: #a9b3d8; --shadow: rgba(0, 0, 0, .5); } /* Derselbe Hintergrund wie frueher in nacht.js. Er muss auf den Body, nicht auf : der Body malt seinen eigenen Verlauf und laege sonst darueber. */ html.nacht body { background: radial-gradient(ellipse at 20% 10%, #2a3560 0%, transparent 55%), radial-gradient(ellipse at 90% 90%, #1d2647 0%, transparent 50%), linear-gradient(160deg, #1b2340 0%, #131a31 100%) !important; color: var(--ink); }