Kacheln: 37 Farben neu gerechnet, und in jeder ein eigenes Universum
Filipe, zwei Wuensche: "ich will das jede kachel eine andere farbe hat
... keine die sich irgendwie aehnlich sind ... richtig geil und
speziell" und "der hintergrund ... soll noch mehr viel mehr nach
universum sein. nicht einfach so paar weisse punkte sondern richtig
geil hochwertiger geiler universum ... in den kacheln ueberall".
BEIDES WAR BERECHTIGT, und beides liess sich messen:
kleinster Farbabstand 0,0529 (Rueckmeldung / Steckbrief)
Paare unter 0,10 26 von 666
schlechtester Kontrast 1,64:1 (Ton 35 -- praktisch unlesbar)
sieben Toene unter 4,5:1
Universum auf GENAU EINER Kachel
WIE DAS PASSIEREN KONNTE, obwohl es ein Farbwerkzeug gab: Es kannte 21
Farben. Seit dem 08.09. waren SECHZEHN von Hand dazugekommen (Ton 22
bis 37) -- jede einzeln plausibel, keine gegen die anderen gerechnet.
Das Werkzeug meldete weiter "0,0973, alle Bedingungen erfuellt" und
meinte einen Stand, den es nicht mehr gab. Dieselbe Krankheit wie eine
abgeschriebene Spaltenliste: Die Zahl wird nicht falsch, sie wird
UNZUSTAENDIG. Es liest die Anzahl jetzt aus den Dateien.
NEU GERECHNET, alle 37 auf einmal:
kleinster Abstand 0,0529 -> 0,1010 (fast doppelt)
Paare unter 0,10 26 -> 0
schlechtester Kontrast 1,64 -> 4,50:1
Buntheit bis 0,300 statt 0,170, Helligkeit 0,58 bis 0,92
Drei Stellschrauben: Buntheitsgrenze hoch (augenschonend heisst dunkles
Schema und kein Flackern, NICHT blass), Raster von 2 Grad auf 1 Grad
und von fuenf auf zwanzig Helligkeitsstufen, und sechzehn Startpunkte
statt einem. Der Kontrast 4,5:1 bleibt hart -- eine Kachelfarbe traegt
Text.
DAS UNIVERSUM STEHT JETZT IM HINTERGRUND JEDER KACHEL, nicht in einem
Element: Beide Pseudo-Elemente sind vergeben (Leuchtschiene, Glanz),
und ein neues Element muesste an jeder Stelle nachgetragen werden, die
Kacheln baut. Eine Ebene, die man vergessen kann, wird vergessen.
Siebzehn Ebenen: drei nahe Sterne mit Hof, vier mittlere (zwei im
Kachelton), fuenf Staubkoerner, eine Milchstrasse als Schraege, drei
Nebel im Kachelton, ein kuehler Gegenpol, eine Vignette. Die Nebel
tragen `var(--ton)` -- 37 Kacheln sind damit 37 verschiedene Nebel.
Keine Bewegung: 28 driftende Felder waeren 28 Dauerlaeufer auf der
Grafikkarte.
Nach dem ersten Bildschirmfoto nachgeschaerft -- die Sterne lagen bei
6 bis 14 Prozent und waren aus der Naehe nicht zu sehen, genau die
"paar weissen punkte". Der Grund steht in der Kachel selbst: Sie ist
halbdurchsichtig, darunter liegt das Buehnenbild. Ein Sternenfeld muss
sich hier gegen ein FOTO durchsetzen, nicht gegen Schwarz.
NEU: server/helfer-png.mjs -- ein PNG-Leser (zlib, 90 Zeilen). Er
beantwortet die Frage, die aus dem CSS nicht mehr zu beantworten war:
Zwischen Textfarbe und Flaeche liegen jetzt sieben Ebenen plus das
durchscheinende Buehnenbild. Gemessen am Bildschirmfoto: schlechtester
Textkontrast 8,02:1 (Grenze 4,5).
NEU: server/pruef-kachel-universum.mjs, 12 Pruefungen.
DREI ANLAEUFE FUER DIE STERNPRUEFUNG, und die ersten zwei waren gruen
und wertlos:
1. Ebenen im CSS zaehlen -- `0px` ist auch eine Zahl. Alle Sterne
auf null: blieb gruen.
2. Helle Punkte im Bildschirmfoto zaehlen -- die Kachel ist
halbdurchsichtig, das Foto darunter hat selbst Punktstruktur.
Gemessen: 459 Punkte mit Sternen, 441 ohne. Vier Prozent sind
kein Nachweis, sondern Rauschen.
3. Jetzt die GROESSEN aus dem CSS (>= 0,7 px). Schwaecher, aber
ehrlich -- und die Gegenprobe greift: 12 -> 0.
Dabei fiel ein eigener Messfehler auf: Der Bereich wurde aus der
Textposition geschaetzt und lag OBERHALB der Kachel. Verraten hat es
die Gegenprobe, die zweimal exakt 153 lieferte -- eine Messung, deren
Ergebnis sich nicht aendert, wenn man das Gemessene entfernt, misst
etwas anderes.
Gegenproben, alle zielgenau:
zwei gleiche Farben -> 3 rot Sterne auf 0px -> 1 rot
Nebel ohne Kachelton -> 1 rot (nach dem Schaerfen: vorher blieb es
gruen, weil `--ton` auch im Grundverlauf steht)
Gruen: kachel-universum, css-klassen, start-ansicht, namen.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+169
-39
@@ -883,10 +883,10 @@ body.start > main { position: relative; z-index: 1; }
|
||||
Unterschied), und jede Farbe haelt 4,5:1 gegen den dunklen Grund --
|
||||
sie traegt auch Text. Wer sie neu rechnet: Das Werkzeug bricht ab,
|
||||
wenn das Ergebnis schlechter waere als der alte Stand. */
|
||||
[data-ton="1"] { --ton: #0284dd; } /* Dashboard */
|
||||
[data-ton="2"] { --ton: #e15e8e; } /* Zahlen */
|
||||
[data-ton="3"] { --ton: #ff9781; } /* LIVE */
|
||||
[data-ton="4"] { --ton: #c26201; } /* Chat */
|
||||
[data-ton="1"] { --ton: #0c86af; } /* Dashboard */
|
||||
[data-ton="2"] { --ton: #fe5e82; } /* Zahlen */
|
||||
[data-ton="3"] { --ton: #ff996d; } /* LIVE */
|
||||
[data-ton="4"] { --ton: #c16302; } /* Chat */
|
||||
/* TON 5 IST VON HAND GESETZT (09.09.2026, screen4).
|
||||
|
||||
Filipe: "ich will dass die kategorie eine farbe bekommt die extrem
|
||||
@@ -920,22 +920,22 @@ body.start > main { position: relative; z-index: 1; }
|
||||
gewünscht ("alle kacheln auf der ganzen website sollen sein wie auf
|
||||
der startseite"). Was sie heraushebt, ist die Farbe, nicht eine
|
||||
Sonderform. */
|
||||
[data-ton="5"] { --ton: #ff2fd0; } /* Schutz & Regeln -- Wunsch: extrem auffällig */
|
||||
[data-ton="6"] { --ton: #768b09; } /* Community */
|
||||
[data-ton="7"] { --ton: #089868; } /* Reports */
|
||||
[data-ton="8"] { --ton: #c06ad0; } /* Kalender */
|
||||
[data-ton="9"] { --ton: #afde57; } /* Bibliothek */
|
||||
[data-ton="10"] { --ton: #7bba3a; } /* Steckbrief */
|
||||
[data-ton="11"] { --ton: #ed8712; } /* Personen */
|
||||
[data-ton="12"] { --ton: #01edb5; } /* Content */
|
||||
[data-ton="13"] { --ton: #18bfa3; } /* Aufgaben */
|
||||
[data-ton="14"] { --ton: #c0a311; } /* Technik */
|
||||
[data-ton="15"] { --ton: #5fddff; } /* Calls */
|
||||
[data-ton="16"] { --ton: #0da2c6; } /* Start-Check */
|
||||
[data-ton="17"] { --ton: #bac8fc; } /* Agentur */
|
||||
[data-ton="18"] { --ton: #9299fd; } /* Automationen */
|
||||
[data-ton="19"] { --ton: #796ce0; } /* Dateien */
|
||||
[data-ton="20"] { --ton: #fc88db; } /* Creator-Profile */
|
||||
[data-ton="5"] { --ton: #ff08d5; } /* Schutz & Regeln -- Wunsch: extrem auffällig */
|
||||
[data-ton="6"] { --ton: #8b8400; } /* Community */
|
||||
[data-ton="7"] { --ton: #098f71; } /* Reports */
|
||||
[data-ton="8"] { --ton: #ab68ff; } /* Kalender */
|
||||
[data-ton="9"] { --ton: #cace02; } /* Bibliothek */
|
||||
[data-ton="10"] { --ton: #a8ad11; } /* Steckbrief */
|
||||
[data-ton="11"] { --ton: #db8908; } /* Personen */
|
||||
[data-ton="12"] { --ton: #0ce6a3; } /* Content */
|
||||
[data-ton="13"] { --ton: #12b37e; } /* Aufgaben */
|
||||
[data-ton="14"] { --ton: #ffbd4a; } /* Technik */
|
||||
[data-ton="15"] { --ton: #01d7e3; } /* Calls */
|
||||
[data-ton="16"] { --ton: #19b2c2; } /* Start-Check */
|
||||
[data-ton="17"] { --ton: #a2c6fe; } /* Agentur */
|
||||
[data-ton="18"] { --ton: #aa99ff; } /* Automationen */
|
||||
[data-ton="19"] { --ton: #586dfe; } /* Dateien */
|
||||
[data-ton="20"] { --ton: #ff8fb4; } /* Creator-Profile */
|
||||
/* TON 21 IST VON HAND GESETZT (09.09.2026, screen6).
|
||||
|
||||
Filipe: "die farbe von dieser kategorie soll knall rot sein."
|
||||
@@ -953,7 +953,7 @@ body.start > main { position: relative; z-index: 1; }
|
||||
Kontrast auf dem dunklen Grund: 5,01:1 (noetig 4,5). Von sechs
|
||||
geprueften Rottoenen hat dieser den groessten Abstand UND genug
|
||||
Kontrast -- deshalb dieser und nicht der erstbeste. */
|
||||
[data-ton="21"] { --ton: #ff1f2e; } /* Scout-Pipeline -- Wunsch: knallrot */
|
||||
[data-ton="21"] { --ton: #f80442; } /* Scout-Pipeline -- Wunsch: knallrot */
|
||||
|
||||
/* TON 22 -- TEAM-LAGE (09.09.2026).
|
||||
|
||||
@@ -970,13 +970,13 @@ body.start > main { position: relative; z-index: 1; }
|
||||
Warm und hell ist kein Zufall: Diese eine Kachel gehoert der
|
||||
Leitung. Zwischen den kuehlen Toenen der Arbeitsbereiche faellt ein
|
||||
warmer auf, ohne lauter zu sein. */
|
||||
[data-ton="22"] { --ton: #ffd166; } /* Team-Lage */
|
||||
[data-ton="22"] { --ton: #fee0b2; } /* Team-Lage */
|
||||
/* Ton 23 (10.09.2026, Ideen-Board). NICHT nach Gefuehl gewaehlt: Die
|
||||
22 vorhandenen Toene sind dicht besetzt, deshalb wurde der Abstand zu
|
||||
allen ausgerechnet. #5f8a9f hat mit 127 den zweitgroessten -- der
|
||||
groesste war ein Graubraun, und eine graue Kachel zwischen bunten
|
||||
sieht abgeschaltet aus. Gedeckt statt grell, wie alles hier. */
|
||||
[data-ton="23"] { --ton: #5f8a9f; } /* Ideen-Board */
|
||||
[data-ton="23"] { --ton: #07a7fd; } /* Ideen-Board */
|
||||
|
||||
/* Ton 24 (10.09.2026, Eingang). Wieder gerechnet statt gewaehlt, und bei
|
||||
23 belegten Toenen wird es eng: Der Abstand im CIELAB-Raum zum
|
||||
@@ -989,7 +989,7 @@ body.start > main { position: relative; z-index: 1; }
|
||||
schlechtesten zu fokussieren. Kraeftiges Gruen kam auf 39,5, hat aber
|
||||
L* 81 und wuerde leuchten. Dieser Ton hat eine Leuchtdichte von 0,109
|
||||
-- dunkel genug, um neben den anderen ruhig zu bleiben. */
|
||||
[data-ton="24"] { --ton: #8a20cf; } /* Eingang */
|
||||
[data-ton="24"] { --ton: #d21afd; } /* Eingang */
|
||||
|
||||
/* TON 25 -- Rueckmeldung (10.09.2026).
|
||||
|
||||
@@ -1008,7 +1008,7 @@ body.start > main { position: relative; z-index: 1; }
|
||||
Kontrast auf dem dunklen Grund: 8,9 zu 1. Und die Bedeutung passt:
|
||||
Gruen ist im Haus die Farbe von "laeuft" -- eine Rueckmeldung soll
|
||||
nicht nach Beschwerde aussehen. */
|
||||
[data-ton="25"] { --ton: #43c95e; } /* Rückmeldung */
|
||||
[data-ton="25"] { --ton: #72d512; } /* Rückmeldung */
|
||||
|
||||
/* TON 26 UND 27 (11.09.2026) -- und hier wird die Rechnung ehrlich:
|
||||
|
||||
@@ -1027,8 +1027,8 @@ body.start > main { position: relative; z-index: 1; }
|
||||
Wenn eine achtundzwanzigste Kachel kommt, ist das der Zeitpunkt, an
|
||||
dem die Kacheln Gruppenfarben brauchen statt Einzelfarben -- nicht
|
||||
der, an dem man den naechsten Ton dazwischenquetscht. */
|
||||
[data-ton="26"] { --ton: #7fd4a8; } /* Entwicklung */
|
||||
[data-ton="27"] { --ton: #8f7bd6; } /* Talente */
|
||||
[data-ton="26"] { --ton: #07fff1; } /* Entwicklung */
|
||||
[data-ton="27"] { --ton: #ff6bfa; } /* Talente */
|
||||
|
||||
/* =====================================================================
|
||||
DIE SIEBEN TOENE DES TREFFS (11.09.2026)
|
||||
@@ -1054,13 +1054,13 @@ body.start > main { position: relative; z-index: 1; }
|
||||
Hand gewaehlte Farbfamilie im selben Blau bei 12,6. Die Rechnung war
|
||||
also nicht Genauigkeitsspielerei, sondern der Unterschied zwischen
|
||||
unterscheidbar und nicht. */
|
||||
[data-ton="28"] { --ton: #8e784f; } /* Regeln & Hilfe */
|
||||
[data-ton="29"] { --ton: #8e5b77; } /* Highlights */
|
||||
[data-ton="30"] { --ton: #b2bc78; } /* Wunschliste */
|
||||
[data-ton="31"] { --ton: #656a9e; } /* Was ansteht */
|
||||
[data-ton="32"] { --ton: #668e6e; } /* Mitmachen */
|
||||
[data-ton="33"] { --ton: #cc9451; } /* Anschlagbrett */
|
||||
[data-ton="34"] { --ton: #cc92c6; } /* Der Treff */
|
||||
[data-ton="28"] { --ton: #069511; } /* Regeln & Hilfe */
|
||||
[data-ton="29"] { --ton: #ee068b; } /* Highlights */
|
||||
[data-ton="30"] { --ton: #a7ff98; } /* Wunschliste */
|
||||
[data-ton="31"] { --ton: #fe5a11; } /* Was ansteht */
|
||||
[data-ton="32"] { --ton: #18b803; } /* Mitmachen */
|
||||
[data-ton="33"] { --ton: #f4acff; } /* Anschlagbrett */
|
||||
[data-ton="34"] { --ton: #f9d7ff; } /* Der Treff */
|
||||
|
||||
/* DER 35. TON (11.09.2026) — für „Wer sieht was".
|
||||
|
||||
@@ -1086,18 +1086,18 @@ body.start > main { position: relative; z-index: 1; }
|
||||
mit einer anderen geteilt. Zwei Dinge in einer Farbe heißt, dass die
|
||||
Farbe nichts mehr sagt — und pruef-start-ansicht zählt genau das
|
||||
nach ("34 Farben auf 35 Kacheln" war ihre Meldung). */
|
||||
[data-ton="35"] { --ton: #2f2f7f; } /* Wer sieht was */
|
||||
[data-ton="35"] { --ton: #b4f1fe; } /* Wer sieht was */
|
||||
/* Der 36., nach derselben Rechnung: #7c2771, Abstand 29,7 zu den beiden
|
||||
nächsten (#8e5b77 „Highlights", #2f2f7f „Wer sieht was"). Auch das
|
||||
liegt über dem schwächsten Paar der vorhandenen Töne (24,9). */
|
||||
[data-ton="36"] { --ton: #7c2771; } /* Meldungen & Maßnahmen */
|
||||
[data-ton="36"] { --ton: #eeef08; } /* Meldungen & Maßnahmen */
|
||||
/* Der 37., nach derselben Rechnung: #46762e, Abstand 25,6 zum nächsten
|
||||
Nachbarn — knapp über dem schwächsten Paar der ursprünglichen 34
|
||||
(24,9). Bei 37 Tönen in einem augenschonenden Ausschnitt (kein Rot,
|
||||
keine Neonsättigung) ist das die Grenze des Machbaren; wird es enger,
|
||||
ist die nächste Frage nicht „noch ein Ton", sondern „braucht diese
|
||||
Kachel wirklich eine eigene Farbe". */
|
||||
[data-ton="37"] { --ton: #46762e; } /* Wie geht's dir? */
|
||||
[data-ton="37"] { --ton: #61ff09; } /* Wie geht's dir? */
|
||||
|
||||
/* Rückfallwert für alles, was einen Ton braucht, aber keine Nummer hat.
|
||||
Steht bewusst in :where() -- damit zählt die Zeile beim Wettstreit der
|
||||
@@ -1113,10 +1113,140 @@ body.start > main { position: relative; z-index: 1; }
|
||||
--my: 0%;
|
||||
position: relative;
|
||||
border-radius: 18px;
|
||||
|
||||
/* =====================================================================
|
||||
DAS UNIVERSUM IN JEDER KACHEL (17.09.2026)
|
||||
|
||||
Filipe: „der hintergrund von allen kacheln haben wir richtung
|
||||
universum mäßig gemacht, aber bin noch nicht ganz zufrieden, es
|
||||
soll noch mehr viel mehr nach universum sein. nicht einfach so paar
|
||||
weiße punkte sondern richtig geil hochwertiger geiler universum."
|
||||
|
||||
Er hat recht, und der Grund war schnell gefunden: Das gebaute
|
||||
Universum (Nebel, Sternenfeld, driftende Chilis) lag auf GENAU
|
||||
EINER Kachel -- der Willkommenskachel. Alle anderen hatten einen
|
||||
Verlauf und sonst nichts.
|
||||
|
||||
WARUM ES IM HINTERGRUND STEHT UND NICHT IN EINEM ELEMENT: Beide
|
||||
Pseudo-Elemente der Kachel sind vergeben (::before die Leuchtschiene
|
||||
oben, ::after Glanz und Zeigerlicht), und ein neues Element müsste
|
||||
an jeder Stelle nachgetragen werden, die Kacheln baut -- start.js,
|
||||
bereiche.js und jede künftige. Eine Ebene, die man vergessen kann,
|
||||
wird vergessen. Als Hintergrund gilt sie überall, wo `.kachel`
|
||||
gilt, ohne eine einzige Zeile JavaScript.
|
||||
|
||||
DER NEBEL TRÄGT DIE FARBE DER KACHEL. Das ist der eigentliche
|
||||
Gewinn gegenüber der Willkommenskachel: Dort sind die Wolken fest
|
||||
rot-blau-lila, hier nimmt jede Kachel ihren eigenen Ton. Achtund-
|
||||
zwanzig Kacheln sind damit achtundzwanzig verschiedene Nebel --
|
||||
dieselbe Arbeit, die die Farbpalette leistet, nur in der Fläche.
|
||||
|
||||
SIEBEN EBENEN, VON HINTEN NACH VORN:
|
||||
1-2 Zwei Sternenschichten, klein und fern (0,8-1,1 px)
|
||||
3-4 Zwei Schichten mittlerer Sterne, einer davon im Kachelton
|
||||
5 Wenige nahe, hellere Sterne
|
||||
6-7 Zwei Nebelwolken im Kachelton, dazu der Grundverlauf
|
||||
|
||||
Die Kachelgrößen 89 / 137 / 191 / 223 / 317 px haben kein
|
||||
gemeinsames Vielfaches unter 1200 -- das Feld wiederholt sich
|
||||
damit erst jenseits jeder Kachelbreite, und genau das unterscheidet
|
||||
ein Sternenfeld von einer Tapete. (Dieselbe Überlegung wie bei der
|
||||
Willkommenskachel, dort nachzulesen.)
|
||||
|
||||
KEINE BEWEGUNG. Auf der Willkommenskachel driftet das Feld in
|
||||
240 s -- eine Kachel, die stundenlang im Bild steht, verträgt das.
|
||||
Achtundzwanzig driftende Felder auf einer Seite wären achtund-
|
||||
zwanzig Dauerläufer auf der Grafikkarte, und am Handy merkt man
|
||||
das sofort. Bewegung bringt hier der Glanz, der dem Zeiger folgt
|
||||
(::after) -- er kostet nur etwas, während man ihn benutzt.
|
||||
|
||||
LESBARKEIT GEHT VOR. Die Sterne liegen zwischen 6 und 14 Prozent
|
||||
Deckkraft, die Nebel bei 5 bis 9. Man sieht einen Raum, man liest
|
||||
keine Punkte. Der Text darüber behält seinen Kontrast; dass die
|
||||
Farben ihn halten, prüft pruef-css-klassen ohnehin bei jedem Lauf.
|
||||
===================================================================== */
|
||||
background:
|
||||
/* ---- NAHE STERNE ------------------------------------------------
|
||||
Gross, hell, spaerlich. Jeder mit einem Hof (der zweite
|
||||
Farbstopp), damit er leuchtet statt zu stanzen -- das ist der
|
||||
Unterschied zwischen einem Stern und einem weissen Pixel.
|
||||
|
||||
DEUTLICH HELLER ALS IM ERSTEN ANLAUF (17.09., nach dem ersten
|
||||
Bildschirmfoto). Dort lagen sie bei 6 bis 14 Prozent und waren
|
||||
aus der Naehe nicht zu sehen -- genau Filipes „paar weisse
|
||||
punkte". Der Grund steht in der Kachel selbst: `--flaeche` ist
|
||||
halbdurchsichtig, darunter liegt das Buehnenbild. Ein Sternenfeld
|
||||
muss sich hier gegen ein FOTO durchsetzen, nicht gegen Schwarz. */
|
||||
radial-gradient(2.2px 2.2px at 47px 118px, rgba(255, 255, 255, .92), rgba(255, 255, 255, .22) 42%, transparent 100%),
|
||||
radial-gradient(1.9px 1.9px at 263px 61px, rgba(226, 240, 255, .78), rgba(226, 240, 255, .18) 45%, transparent 100%),
|
||||
radial-gradient(2.0px 2.0px at 118px 191px, color-mix(in srgb, var(--ton) 92%, #ffffff), transparent 100%),
|
||||
|
||||
/* ---- MITTLERE STERNE --------------------------------------------
|
||||
Die Masse des Feldes. Eine Schicht im Kachelton: dadurch sieht
|
||||
jedes Universum anders aus, ohne bunt zu werden. */
|
||||
radial-gradient(1.4px 1.4px at 22px 31px, rgba(255, 255, 255, .62), transparent 100%),
|
||||
radial-gradient(1.5px 1.5px at 133px 74px, color-mix(in srgb, var(--ton) 78%, transparent), transparent 100%),
|
||||
radial-gradient(1.3px 1.3px at 201px 138px, rgba(214, 234, 255, .55), transparent 100%),
|
||||
radial-gradient(1.4px 1.4px at 74px 166px, color-mix(in srgb, var(--ton) 62%, transparent), transparent 100%),
|
||||
|
||||
/* ---- FERNER STAUB -----------------------------------------------
|
||||
Klein und dicht. Er fuellt die Luecken, damit zwischen den
|
||||
hellen Sternen kein leeres Schwarz steht -- ein Sternenhimmel
|
||||
ohne Staub sieht aus wie aufgeklebte Punkte. */
|
||||
radial-gradient(0.9px 0.9px at 104px 96px, rgba(255, 255, 255, .42), transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 31px 140px, rgba(190, 220, 250, .36), transparent 100%),
|
||||
radial-gradient(0.9px 0.9px at 168px 44px, rgba(255, 255, 255, .34), transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 57px 83px, rgba(226, 240, 255, .30), transparent 100%),
|
||||
radial-gradient(0.9px 0.9px at 149px 23px, rgba(255, 255, 255, .28), transparent 100%),
|
||||
|
||||
/* ---- DIE MILCHSTRASSE -------------------------------------------
|
||||
Ein schraeger Schleier von unten links nach oben rechts. Er ist
|
||||
das, was ein Sternenfeld von einem Universum unterscheidet:
|
||||
Tiefe kommt nicht von mehr Punkten, sondern davon, dass die
|
||||
Punkte in etwas liegen.
|
||||
|
||||
Sehr weich und sehr blass -- er soll die Richtung geben, nicht
|
||||
auffallen. */
|
||||
linear-gradient(118deg,
|
||||
transparent 18%,
|
||||
rgba(255, 255, 255, .055) 38%,
|
||||
color-mix(in srgb, var(--ton) 14%, transparent) 50%,
|
||||
rgba(255, 255, 255, .045) 62%,
|
||||
transparent 82%),
|
||||
|
||||
/* ---- DIE NEBEL --------------------------------------------------
|
||||
Zwei Wolken im Ton der Kachel, diagonal versetzt, dazu ein
|
||||
kuehler Gegenpol. Achtundzwanzig Kacheln sind damit
|
||||
achtundzwanzig verschiedene Nebel -- dieselbe Arbeit, die die
|
||||
Farbpalette leistet, nur in der Flaeche. */
|
||||
radial-gradient(62% 70% at 14% 8%, color-mix(in srgb, var(--ton) 55%, transparent), transparent 62%),
|
||||
radial-gradient(52% 58% at 30% 86%, color-mix(in srgb, var(--ton) 34%, transparent), transparent 66%),
|
||||
radial-gradient(80% 66% at 92% 96%, color-mix(in srgb, var(--ton) 26%, transparent), transparent 68%),
|
||||
/* EIN KUEHLER GEGENPOL. Ein Nebel aus einer Farbe ist ein
|
||||
Farbfleck; erst ein zweiter, kaelterer Ton macht daraus einen
|
||||
Raum mit Ferne. Dieselbe Ueberlegung wie bei der
|
||||
Willkommenskachel, wo Rot und Babyblau sich gegenueberstehen. */
|
||||
radial-gradient(56% 64% at 76% 18%, rgba(96, 158, 232, .16), transparent 64%),
|
||||
/* DIE VIGNETTE. Aussen dunkler als innen -- ohne sie ist die
|
||||
Kachel eine gleichmaessig helle Flaeche, mit ihr ein Ausschnitt
|
||||
aus etwas Groesserem. Das ist der billigste Tiefeneindruck, den
|
||||
es gibt, und der wirksamste. */
|
||||
radial-gradient(120% 120% at 50% 45%, transparent 38%, rgba(3, 5, 12, .55) 100%),
|
||||
|
||||
/* ---- DER GRUND --------------------------------------------------
|
||||
Dunkler als frueher: Das Universum braucht Schwarz, sonst
|
||||
leuchten die Sterne gegen ein Foto an und verlieren. Die Kachel
|
||||
bleibt durchscheinend -- nur eben weniger. */
|
||||
linear-gradient(155deg,
|
||||
color-mix(in srgb, var(--ton) 26%, var(--flaeche)),
|
||||
var(--flaeche) 62%);
|
||||
color-mix(in srgb, var(--ton) 24%, var(--flaeche)),
|
||||
color-mix(in srgb, #05070e 55%, var(--flaeche)) 58%);
|
||||
background-size:
|
||||
317px 317px, 223px 223px, 271px 271px,
|
||||
137px 137px, 191px 191px, 233px 233px, 163px 163px,
|
||||
89px 89px, 137px 137px, 223px 223px, 107px 107px, 179px 179px,
|
||||
100% 100%,
|
||||
100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
|
||||
100% 100%;
|
||||
border: 1px solid var(--rand);
|
||||
/* Die feine helle Linie an der Oberkante. Ein Pixel, kaum sichtbar --
|
||||
aber die Kachel wirkt dadurch von oben beleuchtet statt aufgeklebt.
|
||||
|
||||
Reference in New Issue
Block a user