DogFatherGitandClaude Opus 5
0852723493
pruef-kachel-universum war rot mit drei Meldungen. Die zweite rote
Pruefung von dreien.
ERST DIE FRAGE, OB ES DRIFT IST ODER VON ANFANG AN SO WAR: Die Pruefung
und das Sternenfeld kamen im selben Commit (ad47fc2). Dort laufen
lassen -- alles gruen, Kachelzeile 0,017 % auf 11610 Bildpunkten. Heute
2,372 % auf 6282. Die gemessene Flaeche hat sich HALBIERT.
Das war der Hinweis: Es wird eine andere Kachel gemessen. Der Waehler
nimmt die erste (`.kachel .kachel__unter`), und die war damals die
grosse Dashboard-Kachel (645 px breit), heute ist es "Team-Lage" (349
px). Die Reihenfolge hat sich zwischendurch geaendert.
WARUM DAS EINEN UNTERSCHIED MACHT: Die beiden Nebel sind auf
`100% 100%` skaliert, sie wachsen also mit der Kachel. Der babyblaue
sass bei `at 12% 88%` -- unten links. Auf einer schmalen Kachel liegt
genau dort die Unterzeile; auf der doppelt so breiten verteilt sich
derselbe Nebel ueber die ganze Breite und faellt nicht auf.
Der Kern ist jetzt tiefer in die Ecke geschoben (`at 10% 104%`, Ellipse
etwas flacher). Der Verlauf laeuft weiterhin quer durch die Kachel, die
Sterne sind unveraendert -- nachgesehen im Bild, nicht nur gemessen.
Kachelzeile 2,372 % -> 0,000 % (Mittel 6.93 -> 7.28)
Personenzeile 0,253 % -> 0,253 % (unveraendert, nichts kaputt)
UND EINE PRUEFUNG, DIE SEIT WOCHEN GAR NICHT LIEF. Die Zeile "dort
steht kein Stern" hing an `if (zwischenraum)`, und `zwischenraum` war
`null`, seit die grosse Kachel an Platz zwei steht: Sie faengt eine
Zeile tiefer wieder bei x=140 an, also gab es keinen Spalt zwischen
den ersten beiden. Ein uebersprungener Test beweist nichts -- und
gemeldet hat er nur, dass er nichts messen konnte.
Beim Wiederbeleben stellte sich heraus, dass er die falsche Frage
stellte: Er verlangte, dass der Grund zwischen den Kacheln "ruhig" ist
(Spanne <= 12). Das ist eine Aussage ueber das HINTERGRUNDFOTO der
Seite, und ein Foto darf helle Stellen haben -- gemessen 27, ohne dass
etwas kaputt war. Die eigentliche Frage ist eine andere: Liegt das
Sternenfeld wirklich nur auf den Kacheln?
Jetzt wird derselbe Fleck zweimal gemessen, mit und ohne Sternenfeld:
Mittel 42,7,12 -> 42,7,12 hellster 69,14,17 -> 69,14,17
Bildpunkt fuer Bildpunkt identisch. Das beantwortet die Frage
unabhaengig davon, was auf dem Foto zu sehen ist.
pruef-kachel-universum 37 Pruefungen, 0 Fehler (vorher 3)
pruef-css-klassen, pruef-neue-seiten 97 -- 0 Fehler
Co-Authored-By: Claude Opus 5 <[email protected]>
585 lines
27 KiB
CSS
585 lines
27 KiB
CSS
/* =====================================================================
|
|
crew-haus.css — das Haus von Team Dogi (10.09.2026)
|
|
|
|
Filipe: "die leiste da und alles andere was noch rot ist auf team
|
|
dogi seite soll lila werden. richtig geiles lila und babyblau
|
|
mischung überall."
|
|
|
|
Diese Datei wird NUR auf crew.dogfather-universe.com ausgeliefert.
|
|
`crewWeiche()` biegt dafuer `haus.css` hierher um; auf der
|
|
Agenturadresse kommt weiterhin die leere Fassung an. Beide Haeuser
|
|
liegen damit im selben Programm, auf denselben Daten -- und sehen
|
|
trotzdem nicht mehr wie dasselbe aus.
|
|
|
|
---------------------------------------------------------------------
|
|
WARUM NUR VARIABLEN UND FAST KEINE REGELN
|
|
|
|
Das ganze Haus haengt an zwei Dutzend Farbwerten in gate.css. Wer
|
|
die tauscht, tauscht jede Kachel, jeden Rand, jeden Knopf und jedes
|
|
Leuchten auf einmal -- und zwar an Stellen, die man beim Nachbauen
|
|
uebersehen wuerde. Eine Datei, die stattdessen Regel fuer Regel
|
|
umfaerbt, waere beim naechsten neuen Bauteil sofort unvollstaendig,
|
|
ohne dass es jemandem auffiele.
|
|
|
|
Ausnahmen stehen unten und sind einzeln begruendet: Es sind die
|
|
Stellen, an denen eine Farbe NICHT aus einer Variablen kommt.
|
|
|
|
---------------------------------------------------------------------
|
|
DIE MISCHUNG
|
|
|
|
Babyblau traegt, Lila akzentuiert. Nicht umgekehrt: Lila ist die
|
|
kraeftigere Farbe, und eine Flaeche, die ganz darin steht, wird nach
|
|
zwanzig Minuten anstrengend. Also grosse ruhige Flaechen kuehl,
|
|
Lila fuer das, was hervorstechen soll.
|
|
|
|
ALLE WERTE SIND ENTSAETTIGT gegenueber dem, was ein Farbwaehler
|
|
ausspuckt. "Richtig geiles Lila" heisst nicht Neonlila: #a98bff
|
|
liest sich auf Dunkel kraeftig, #b46bff waere nach einer Stunde
|
|
Arbeit eine Zumutung. Die Hausregel "augenschonend" gilt auch fuer
|
|
eine Lieblingsfarbe.
|
|
===================================================================== */
|
|
|
|
:root {
|
|
/* ---- Der Grund ---------------------------------------------------
|
|
Die dunklen Flaechen bekommen einen Stich ins Violette statt ins
|
|
Blaugraue. Der Unterschied ist einzeln kaum zu sehen und im
|
|
Ganzen deutlich -- er sorgt dafuer, dass auch die RUHIGEN Teile
|
|
der Seite zum Haus gehoeren und nicht nur die bunten. */
|
|
--tinte: #07060f;
|
|
--glas: rgba(15, 12, 27, 0.74);
|
|
--glas-tief: rgba(10, 8, 19, 0.86);
|
|
--flaeche: rgba(15, 12, 27, 0.89);
|
|
|
|
/* Raender im Lilaton statt im Blaugrau. Dieselben Deckkraefte wie im
|
|
Agenturhaus -- an denen ist nichts falsch, nur an der Farbe. */
|
|
--rand: rgba(176, 166, 236, 0.17);
|
|
--rand-hell: rgba(176, 166, 236, 0.32);
|
|
|
|
/* ---- Die Schrift -------------------------------------------------
|
|
Ein Hauch Violett, kein reines Weiss (Hausregel). Die Helligkeit
|
|
ist gegenueber dem Agenturhaus NICHT gesenkt: Der leiseste Ton
|
|
dort war bis auf 4,50:1 heruntergemessen, also genau auf die
|
|
Grenze -- diese Werte liegen darueber und werden am fertigen
|
|
Bildschirmfoto nachgemessen, nicht an der Farbangabe. */
|
|
--text: #e4e0f4;
|
|
--text-leise: #a9a2ca;
|
|
--text-still: #8f88b2;
|
|
|
|
/* ---- Die Mischung ------------------------------------------------
|
|
`--akzent` ist das Babyblau: Es traegt Knoepfe, Umrandungen und
|
|
jeden Fokusrahmen, also die grosse Menge.
|
|
`--violett` ist das Lila und steht ueberall dort, wo im Haus schon
|
|
eine ZWEITE Farbe vorgesehen war -- in Verlaeufen, im Leuchten,
|
|
an der zweiten Haelfte jeder Fassung. Dadurch entsteht die
|
|
Mischung von selbst, an genau den Stellen, an denen das Haus
|
|
ohnehin zwei Farben nebeneinanderstellt. */
|
|
--akzent: #8ec9ff;
|
|
--akzent-tief: #4b3fa8;
|
|
--violett: #a98bff;
|
|
|
|
/* ---- Was hier rot WAR --------------------------------------------
|
|
Diese drei Werte gehoeren der Agentur (Spicy Media). Auf dieser
|
|
Adresse gibt es sie als Rolle gar nicht -- ihre Farben tauchten
|
|
trotzdem auf, weil mehrere Bauteile "die zweite Marke" damit
|
|
zeichnen: das Leuchten der Kopfzeile, Verlaeufe, Fassungen. Genau
|
|
das war der rote Schimmer in der Leiste.
|
|
|
|
Sie werden nicht geloescht, sondern umgestellt: Ein geloeschter
|
|
Wert waere `unset` und faerbte die betroffenen Stellen schwarz
|
|
oder unsichtbar. Umgestellt tragen dieselben Bauteile jetzt Lila
|
|
und Babyblau -- ohne dass eine einzige Regel umgeschrieben werden
|
|
musste. */
|
|
--spicy-haupt: #a98bff;
|
|
--spicy-zweit: #8ec9ff;
|
|
--spicy-tief: #3a2f7a;
|
|
|
|
/* ---- DogFather ---------------------------------------------------
|
|
Bleibt die tragende Farbe des Hauses, wandert aber vom kraeftigen
|
|
Blau ins Babyblau und bekommt Lila als Begleitton. Damit laeuft
|
|
jede Rollenschiene, jedes Namensschild und jeder Kachelrand in der
|
|
neuen Mischung -- ohne Sonderregel. */
|
|
--dogi-haupt: #8ec9ff;
|
|
--dogi-zweit: #a98bff;
|
|
--dogi-tief: #33296b;
|
|
|
|
/* Die rechte Hand und Team Dogi teilen sich dieses Haus. Sie haben
|
|
im Agenturschema keine eigenen Toene (dort gibt es sie nicht) --
|
|
hier bekommen sie welche, gespiegelt zu DogFather: Bei ihm fuehrt
|
|
Babyblau, bei ihnen Lila. Gleiche Familie, andere Betonung; keine
|
|
Rangordnung. */
|
|
--hand-haupt: #a98bff;
|
|
--hand-zweit: #8ec9ff;
|
|
--hand-tief: #33296b;
|
|
|
|
/* WARN BLEIBT WARM -- und das ist Absicht.
|
|
Eine Warnung ist keine Verzierung, sondern eine Bedeutung. Faerbt
|
|
man sie ins Lila der Seite, sieht "etwas stimmt nicht" aus wie
|
|
alles andere, und dann sagt sie nichts mehr. Sie wird nur leicht
|
|
ins Rosa gezogen, damit sie neben Lila nicht wie ein Fremdkoerper
|
|
wirkt. Wenn Filipe auch das lila haben will, ist es diese eine
|
|
Zeile -- aber es waere seine Entscheidung, nicht meine. */
|
|
--warn: #ff9ab4;
|
|
}
|
|
|
|
/* =====================================================================
|
|
DIE VIER STELLEN, AN DENEN KEINE VARIABLE STAND
|
|
===================================================================== */
|
|
|
|
/* 1. DAS LEUCHTEN UNTER DEM ZEICHEN IN DER KOPFLEISTE.
|
|
In start.css steht dort ein fest hingeschriebenes
|
|
`rgba(255, 92, 68, .62)` -- ein warmes Rot. Es liegt genau an der
|
|
Stelle, auf die Filipe im Bildschirmfoto gezeigt hat, und es kam
|
|
aus keiner Variablen; ein Tausch der Toene oben haette es nicht
|
|
erwischt. */
|
|
.kopfleiste:hover .marke::before {
|
|
filter: saturate(1.1) brightness(1.16)
|
|
drop-shadow(0 0 9px rgba(169, 139, 255, .62));
|
|
}
|
|
|
|
/* 2. DIE FARBE DER BROWSERLEISTE am Handy. Sie steht als
|
|
<meta name="theme-color"> im HTML und laesst sich von CSS nicht
|
|
erreichen -- deshalb setzt sie kopf.js auf dieser Adresse um.
|
|
Der Wert steht hier, damit beide Stellen eine Quelle haben. */
|
|
:root { --haus-leiste: #0b0918; }
|
|
|
|
/* 3. DER RAND EINER AUSGEWAEHLTEN KACHEL. Er nimmt `--akzent` mit
|
|
einer Beimischung -- die Beimischung ist im Agenturhaus kuehl
|
|
gerechnet. Hier bekommt sie Lila, damit die Auswahl in der
|
|
Mischung steht statt daneben. */
|
|
.kachel[aria-current="page"],
|
|
.kachel:focus-visible {
|
|
border-color: color-mix(in srgb, var(--violett) 46%, transparent);
|
|
}
|
|
|
|
/* 4. PRUEFT SICH SELBST.
|
|
Diese Regel tut nichts Sichtbares. Sie ist der Beweis, dass die
|
|
Datei ueberhaupt angekommen ist: Eine Pruefung liest
|
|
`--haus-name` aus und weiss dadurch, ob auf dieser Adresse das
|
|
richtige Haus ausgeliefert wurde. Ohne so einen Griff koennte
|
|
man nur die Farben vergleichen -- und die stimmen zufaellig auch
|
|
dann, wenn gar nichts geladen wurde. */
|
|
:root { --haus-name: "crew"; }
|
|
|
|
/* =====================================================================
|
|
DIE FASSUNG DER ZENTRALE — die Stelle, auf die Filipe gezeigt hat
|
|
=====================================================================
|
|
|
|
Der Rahmen der grossen Kachel auf der Startseite laeuft im
|
|
Agenturhaus von ROT ueber Silber nach Babyblau. Das ist dort
|
|
richtig: Er nimmt die beiden Marken auf, Spicy Media und DogFather.
|
|
Hier gibt es Spicy Media nicht.
|
|
|
|
DIE PROZENTZAHLEN BLEIBEN AUF DEN PUNKT GLEICH. Sie sind am
|
|
08.09.2026 nachgerechnet worden, nicht nach Gefuehl verteilt --
|
|
Filipe wollte, dass man die beiden FARBEN am meisten sieht, und die
|
|
Gewichtung wurde damals dafuer eigens umgestellt. Wer sie hier
|
|
antastet, wirft diese Rechnung weg. Getauscht wird also
|
|
ausschliesslich die linke Haelfte: Rot wird Lila, Stufe fuer Stufe
|
|
in derselben Helligkeitsfolge (dunkel, mittel, hell, Spitzlicht,
|
|
mittel, tief, sehr dunkel).
|
|
|
|
Silber und Babyblau bleiben unangetastet -- das ist die zweite
|
|
Haelfte der Mischung, und sie war nie das Problem.
|
|
|
|
WARUM DIE GANZE LISTE NOCH EINMAL DASTEHT: `background` ist eine
|
|
Kurzschreibweise. Eine einzelne Stufe eines Verlaufs laesst sich
|
|
nicht ersetzen, ohne den ganzen Verlauf zu schreiben. Dieselbe
|
|
Ueberlegung steht schon bei `body.gate--crew .rollen` in gate.css.
|
|
===================================================================== */
|
|
.willkommen {
|
|
background:
|
|
linear-gradient(96deg,
|
|
#150625 0%,
|
|
#6d47c4 3%,
|
|
#a98bff 10%,
|
|
#e6dcff 16%, /* Spitzlicht im Lila */
|
|
#9d7bff 23%,
|
|
#5b3fa8 31%,
|
|
#2a1a52 38%,
|
|
#0a0c12 43%, /* schwarze Fuge */
|
|
#8fa0b4 47%,
|
|
#f4faff 51%, /* der silberne Treffpunkt -- Mitte der Kachel */
|
|
#8fa0b4 55%,
|
|
#0a0c12 59%, /* schwarze Fuge */
|
|
#1d4a63 64%,
|
|
#4f95bd 70%,
|
|
#8fd8ff 76%,
|
|
#dff2ff 81%, /* Spitzlicht im Babyblau */
|
|
#7ecdf5 87%,
|
|
#3f7fa3 93%,
|
|
#10222e 97%,
|
|
#06080f 100%);
|
|
}
|
|
|
|
/* =====================================================================
|
|
DIE UHR — dieselbe Mischung, andere linke Farbe
|
|
=====================================================================
|
|
|
|
Die Uhr in der Zentrale ist bewusst zweifarbig gebaut: links warm,
|
|
rechts babyblau, an vier Stellen. Im Agenturhaus sind das die zwei
|
|
Marken. Hier wird aus der warmen Seite Lila -- die Bauweise bleibt
|
|
Stueck fuer Stueck dieselbe, damit man beide Fassungen nebeneinander
|
|
lesen kann.
|
|
|
|
Gefunden wurden die vier Stellen nicht durch Suchen im Quelltext,
|
|
sondern durch MESSEN am fertigen Bildschirm: Jedes Element der Uhr
|
|
wurde nach Farben abgefragt, bei denen der Rotkanal deutlich ueber
|
|
den anderen liegt. Zwei davon (die Textschatten) haetten in 6000
|
|
Zeilen start.css niemand gefunden. */
|
|
|
|
/* Der Zeiger auf 12: heller Kopf, kraeftige Mitte, dunkler Fuss. */
|
|
.uhr__zwoelf {
|
|
background: linear-gradient(180deg, #e6dcff 0%, #a98bff 34%, #5b3fa8 100%);
|
|
}
|
|
|
|
/* Der Leuchtring: Lila, Babyblau, Grau im Wechsel -- gleiche Winkel,
|
|
gleiche Deckkraft, nur die erste Farbe wechselt. */
|
|
.uhr__leds {
|
|
background: repeating-conic-gradient(from -1.5deg,
|
|
rgba(169, 139, 255, .70) 0deg 3deg, transparent 3deg 6deg,
|
|
rgba(126, 200, 242, .70) 6deg 9deg, transparent 9deg 12deg,
|
|
rgba(120, 150, 185, .34) 12deg 15deg, transparent 15deg 18deg);
|
|
filter: drop-shadow(0 0 2px rgba(160, 165, 215, .4));
|
|
}
|
|
|
|
/* Die Uhrzeit selbst: Der Schein links war rot. Die zwei Schatten
|
|
davor (Gravur) bleiben Zeile fuer Zeile gleich -- `text-shadow` ist
|
|
eine Liste, sie laesst sich nicht teilweise ersetzen. */
|
|
.uhr__zeit {
|
|
text-shadow:
|
|
0 -.5px 0 rgba(0, 0, 0, .85),
|
|
0 .5px 0 rgba(255, 255, 255, .22),
|
|
-6px 0 16px rgba(169, 139, 255, .40),
|
|
6px 0 16px rgba(143, 216, 255, .42);
|
|
}
|
|
|
|
/* Die Digitalanzeige. Im Agenturhaus liest man "rote Digitalanzeige":
|
|
ein sehr helles Rotweiss, dessen Charakter allein aus dem Schein im
|
|
Textschatten kommt -- gesaettigtes Rot waere bei einer Uhr, die
|
|
dauerhaft im Bild steht, nach zwei Stunden eine Zumutung (die
|
|
Begruendung steht ausfuehrlich in start.css und gilt hier
|
|
unveraendert). Genau dieselbe Bauweise, nur in Lila: heller Kern,
|
|
Farbe im Schein. */
|
|
.uhr__zeit {
|
|
color: #ece0ff;
|
|
text-shadow:
|
|
0 0 6px rgba(160, 120, 255, .75),
|
|
0 0 16px rgba(130, 90, 255, .45),
|
|
0 1px 0 rgba(0, 0, 0, .6);
|
|
}
|
|
.uhr__sek {
|
|
color: #e2d2ff;
|
|
text-shadow: 0 0 7px rgba(150, 110, 255, .6);
|
|
}
|
|
|
|
/* =====================================================================
|
|
DIE LEISTE — genau die Stelle aus Filipes Bildschirmfoto
|
|
=====================================================================
|
|
|
|
Im Agenturhaus glimmt die Kopfleiste rot. Das ist dort sein
|
|
ausdruecklicher Wunsch (screen36: "eine richtig geile mischung von
|
|
rot schwarz, wie wenn es brennen würde") und bleibt dort auch so.
|
|
|
|
Hier wird aus der Glut ein Lila-Schimmer. DIE BAUWEISE BLEIBT
|
|
IDENTISCH -- unten waermer, nach oben dunkel, in der Mitte kraeftiger
|
|
als an den Raendern, alles unter 30 % Deckkraft. Der Grund dafuer
|
|
steht ausfuehrlich in start.css und gilt hier genauso: Die Leiste
|
|
steht auf JEDER Seite und liegt beim Lesen immer im Bild. Sie darf
|
|
nicht leuchten, nur schimmern.
|
|
===================================================================== */
|
|
/* =====================================================================
|
|
DIE LEISTE ALS UNIVERSUM (11.09.2026)
|
|
|
|
Filipe: "der hintergrund dieser leiste soll extrem speziell aussehen
|
|
wie ein universum und soll von lila auf babyblau wechseln, von links
|
|
nach rechts. mach das uebertrieben geil."
|
|
|
|
DIE RICHTUNG IST DIE EIGENTLICHE AENDERUNG. Vorher lief der Schein
|
|
von UNTEN nach oben (die Glut der Agenturseite, nur in Lila). Jetzt
|
|
laeuft er von LINKS nach rechts: Lila am Anfang, Babyblau am Ende --
|
|
dieselbe Diagonale, die im ganzen Haus gilt, nur waagerecht gelegt,
|
|
weil eine Leiste breit ist und nicht hoch.
|
|
|
|
DAS STERNENFELD SIND SIEBEN VERLAEUFE UND KEINE ELEMENTE. Sieben
|
|
Punkte waeren sieben Knoten im Baum, auf jeder der zwanzig Seiten,
|
|
nur fuer Zierde. Als Verlaufslagen kosten sie nichts und lassen sich
|
|
nicht anklicken.
|
|
|
|
"UEBERTRIEBEN GEIL" HAT EINE GRENZE, und sie steht nicht zur
|
|
Verhandlung: Diese Leiste liegt auf JEDER Seite dauerhaft im Bild.
|
|
Die kraeftigste Lage bleibt bei 34 %, die Sterne bei 55 % auf
|
|
anderthalb Bildpunkten. Was darueber liegt, ist keine Stimmung mehr,
|
|
sondern ein Flimmern am oberen Bildrand -- und die Schrift davor muss
|
|
lesbar bleiben. */
|
|
.kopfleiste {
|
|
background:
|
|
/* 1. das Sternenfeld -- unregelmaessig gesetzt, nicht im Raster:
|
|
gleichmaessige Punkte lesen sich als Muster, nicht als Himmel */
|
|
radial-gradient(1.4px 1.4px at 9% 66%, rgba(255, 255, 255, .55), transparent),
|
|
radial-gradient(1px 1px at 21% 28%, rgba(214, 226, 255, .45), transparent),
|
|
radial-gradient(1.2px 1.2px at 34% 74%, rgba(226, 216, 255, .40), transparent),
|
|
radial-gradient(1px 1px at 52% 22%, rgba(255, 255, 255, .38), transparent),
|
|
radial-gradient(1.5px 1.5px at 67% 60%, rgba(198, 226, 255, .48), transparent),
|
|
radial-gradient(1px 1px at 81% 32%, rgba(255, 255, 255, .34), transparent),
|
|
radial-gradient(1.2px 1.2px at 93% 70%, rgba(186, 220, 255, .42), transparent),
|
|
/* 2. zwei Nebel, einer je Seite -- sie geben dem Verlauf Tiefe,
|
|
statt ihn flach durchlaufen zu lassen */
|
|
radial-gradient(70% 220% at 8% 120%, rgba(150, 110, 255, .44), transparent 70%),
|
|
radial-gradient(70% 220% at 92% 120%, rgba(126, 200, 242, .38), transparent 70%),
|
|
/* 3. der Verlauf selbst: links Lila, rechts Babyblau.
|
|
|
|
DIE WERTE SIND NACHGEMESSEN, NICHT GEWAEHLT. Beim ersten
|
|
Anlauf lagen sie bei .30/.26 -- der Verlauf war zu ahnen und
|
|
nicht zu sehen. Gemessen am fertigen Bildschirmfoto hielt die
|
|
Leiste dabei 5,26:1 an ihrer schlechtesten Stelle, bei einer
|
|
Grenze von 4,5. Da war Luft, und die ist jetzt genutzt: Die
|
|
Lagen sind kraeftiger, die schlechteste Stelle bleibt ueber
|
|
der Grenze. Wer sie weiter aufdreht, misst wieder nach --
|
|
diese Leiste steht auf JEDER Seite dauerhaft im Bild. */
|
|
linear-gradient(90deg,
|
|
rgba(132, 96, 240, .40) 0%,
|
|
/* Die MITTE bleibt zurueckhaltender als die Enden -- dort stand
|
|
im Bildschirmfoto der schlechteste Kontrast (4,79:1 bei einer
|
|
Grenze von 4,5, also zu knapp). Die Farbe liest das Auge
|
|
ohnehin an den Enden; in der Mitte gewinnt die Lesbarkeit. */
|
|
rgba(124, 112, 236, .22) 34%,
|
|
rgba(110, 158, 244, .20) 64%,
|
|
rgba(126, 200, 242, .36) 100%),
|
|
/* 4. der dunkle Grund darunter -- er traegt die Lesbarkeit */
|
|
rgba(8, 7, 18, .9);
|
|
}
|
|
/* Die Naht zum Inhalt schimmert mit -- sonst endet das Licht an einer
|
|
grauen Linie. */
|
|
/* Die Naht unten laeuft mit -- links Lila, rechts Babyblau, an beiden
|
|
Enden auslaufend. Eine Kante, die in der Mitte am hellsten ist, waere
|
|
ein Strich; eine, die die Richtung des Verlaufs aufnimmt, ist sein
|
|
Abschluss. */
|
|
.kopfleiste::after {
|
|
background: linear-gradient(90deg,
|
|
transparent, rgba(150, 122, 255, .70) 18%, rgba(150, 150, 250, .62) 50%,
|
|
rgba(126, 200, 242, .70) 82%, transparent);
|
|
}
|
|
|
|
/* ---- Die beiden Zeichen ---------------------------------------------
|
|
Filipe: "der husky links soll auch babyblau strahlen und nicht rot
|
|
und der rechts lila."
|
|
|
|
Links stand ein warmes Rot (`rgba(255, 92, 68, .5)`) -- die Farbe
|
|
der Agentur, fest hingeschrieben in start.css. Rechts strahlte der
|
|
zweite Husky babyblau. Die beiden tauschen jetzt die Seiten: Der
|
|
Verlauf der Leiste beginnt links in Lila und endet rechts in
|
|
Babyblau, die Zeichen setzen den Gegenakzent -- so hat jede Seite
|
|
beide Farben, statt dass jede nur eine hat. */
|
|
.kopfleiste .marke::before {
|
|
filter: saturate(1.06) brightness(1.06)
|
|
drop-shadow(0 0 7px rgba(143, 216, 255, .62));
|
|
}
|
|
.kopfleiste:hover .marke::before {
|
|
filter: saturate(1.1) brightness(1.16)
|
|
drop-shadow(0 0 9px rgba(143, 216, 255, .75));
|
|
}
|
|
/* Der rechte Husky ist eine MASKE mit einem Verlauf darin -- seine
|
|
Fuellung wird mitgetauscht, nicht nur der Schein. Ein lila Schein um
|
|
ein blaues Zeichen waere ein Rand, keine Farbe. */
|
|
.kopfleiste .marke::after {
|
|
background-image:
|
|
url("../img/marke-husky.webp"),
|
|
linear-gradient(162deg, #9a7ee8 0%, #6a4bc0 44%, #33236b 100%);
|
|
filter: brightness(.9) drop-shadow(0 0 6px rgba(169, 139, 255, .55));
|
|
}
|
|
.kopfleiste:hover .marke::after {
|
|
filter: brightness(1.04) drop-shadow(0 0 8px rgba(169, 139, 255, .68));
|
|
}
|
|
|
|
/* Der Schriftzug selbst. Links stand die Chili in Rot, rechts das
|
|
Silber der Zentrale -- hier links Lila, rechts unveraendert. */
|
|
/* GENAUSO SPEZIFISCH WIE DAS ORIGINAL, und beides gemessen statt
|
|
geraten: Beim ersten Anlauf stand hier nur `.marke__haupt` -- die
|
|
Regel wurde geladen, tat nichts, und im Bildschirmfoto blieb der
|
|
Schriftzug rot. Das Original steht in einem @supports-Block unter
|
|
`.kopfleiste .marke__haupt`; wer nur die halbe Kette schreibt,
|
|
verliert gegen zwei Klassen. Dasselbe beim Universum darunter. */
|
|
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
|
|
.kopfleiste .marke__haupt {
|
|
/* `background-image` UND NICHT `background`. Die Kurzschreibweise
|
|
setzt jede Lage der Eigenschaft zurueck, die sie nicht nennt --
|
|
auch `background-clip`. Genau das ist hier passiert: Der Schriftzug
|
|
wird ueber `background-clip: text` in den Buchstaben ausgestanzt;
|
|
nach meinem ersten Anlauf stand oben links statt "Spicy & Dogi" ein
|
|
ausgefuellter heller Balken. Im Quelltext sah die Zeile voellig
|
|
richtig aus -- gesehen habe ich es erst im Bildschirmfoto. */
|
|
background-image: linear-gradient(95deg,
|
|
#b79aff 0%,
|
|
#d3c2ff 22%,
|
|
#eaf1f8 50%,
|
|
#c6d8ea 72%,
|
|
#9fc4e4 100%);
|
|
}
|
|
}
|
|
|
|
/* Das Universum hinter der Zentrale: unten links glueht es rot,
|
|
oben rechts babyblau, in der Mitte ein Hauch Lila. Jetzt zweimal
|
|
kalt -- die Anordnung bleibt, damit Rand und Flaeche weiter in
|
|
dieselbe Richtung laufen. */
|
|
.willkommen > .zuniversum {
|
|
background:
|
|
radial-gradient(125% 95% at 10% 88%, rgba(169, 139, 255, .13), transparent 62%),
|
|
radial-gradient(115% 90% at 90% 12%, rgba(126, 200, 242, .105), transparent 60%),
|
|
radial-gradient( 70% 62% at 52% 50%, rgba(200, 180, 255, .05), transparent 68%);
|
|
}
|
|
|
|
/* Glocke und Tagesruf tragen dieselbe zweifarbige Fassung wie alles
|
|
andere: eine Kante warm, die andere babyblau. Beide Stellen stehen
|
|
hier, weil beide dieselbe Mischung zeigen und sonst eine davon
|
|
uebrig bliebe -- genau die faellt dann als einziger roter Punkt auf. */
|
|
.glocke--kachel,
|
|
.tagesruf {
|
|
background:
|
|
linear-gradient(150deg,
|
|
rgba(255, 255, 255, .16) 0%,
|
|
rgba(169, 139, 255, .15) 28%,
|
|
rgba(9, 8, 19, .9) 54%,
|
|
rgba(143, 216, 255, .13) 80%,
|
|
rgba(255, 255, 255, .08) 100%);
|
|
box-shadow:
|
|
-2px -2px 16px -11px rgba(150, 122, 255, .55),
|
|
2px 2px 16px -11px rgba(143, 216, 255, .5),
|
|
0 8px 20px -12px rgba(0, 0, 0, .9);
|
|
}
|
|
|
|
|
|
/* =====================================================================
|
|
DER GRUND JEDER KACHEL: EIN STERNENFELD
|
|
=====================================================================
|
|
|
|
Filipe: "veraender die kacheln und den hintergrund, ich will dass
|
|
die hintergrunde von den kacheln immer unviersum artig ist, es muss
|
|
richtig geil sein aber immer so dass man alles noch gut erkkent.
|
|
und das IN DER GANZEN WEBSITE VON TEAM DOGI. nur die kacheln. [...]
|
|
wichtig ist die form der kacheln soll gleich bleiben."
|
|
|
|
---------------------------------------------------------------------
|
|
WARUM HIER NUR VIER WERTE STEHEN UND KEINE EINZIGE KACHELREGEL
|
|
|
|
Das Haus hat eine kanonische KACHELLISTE -- 48 Klassen, von der
|
|
grossen Startkachel bis zur Personenzeile. Sie steht in module.css
|
|
SIEBENMAL, und pruef-css-klassen vergleicht die sieben Vorkommen
|
|
miteinander. Eine achte Abschrift an dieser Stelle waere die Sorte
|
|
Fehler, die nicht auffaellt: Sie ginge heute auf und waere bei der
|
|
naechsten neuen Kachel unvollstaendig -- lautlos, denn niemand
|
|
vermisst einen Hintergrund, den er nie gesehen hat.
|
|
|
|
Deshalb faerbt diese Datei keine Kachel. Sie setzt die Werte um, aus
|
|
denen module.css den Grund JEDER Kachel baut. Was danach dazukommt,
|
|
bekommt das Sternenfeld von selbst. pruef-kachel-universum haelt
|
|
fest, dass hier keine Kachelklasse auftaucht.
|
|
|
|
DIE FORM BLEIBT UNANGETASTET. Fase, Kantenlicht und die drei
|
|
Eckwinkel stehen an anderen Stellen und werden hier nicht erwaehnt;
|
|
die Pruefung vergleicht Silhouette, Fase und Eckwinkel vor und nach
|
|
dem Hauswechsel Zeichen fuer Zeichen. Diese Datei aendert Farbe,
|
|
nicht Geometrie.
|
|
|
|
---------------------------------------------------------------------
|
|
WARUM DIE NEBEL OBEN RECHTS UND UNTEN LINKS STEHEN
|
|
|
|
Das ist die wichtigste Zeile dieses Abschnitts, und sie stammt nicht
|
|
aus dem Geschmack, sondern aus einer Messung.
|
|
|
|
Zuerst standen sie oben links -- die naheliegende Ecke, weil dort in
|
|
jedem Bild der Blick anfaengt. Gemessen wurde danach etwas anderes:
|
|
Hinter der leisesten Textzeile einer Personenkarte lagen
|
|
ZWEI PROZENT aller Bildpunkte unter der Lesbarkeitsgrenze. Im
|
|
Agenturhaus sind es an derselben Stelle 0,1 Prozent.
|
|
|
|
Der Grund: JEDE Kachel dieses Hauses hat bereits einen eigenen
|
|
Lichtverlauf, und der laeuft bei allen aus derselben Richtung --
|
|
155 Grad bei den Startkacheln, 150 bei den Teamkacheln, 158 beim
|
|
Kantenlicht. Oben links ist damit ueberall schon die hellste Stelle
|
|
der Kachel, und genau dort stehen ueberall die Ueberschriften. Ein
|
|
Nebel obendrauf addiert Licht auf Licht, ausgerechnet unter dem Text.
|
|
|
|
Nach dem Umzug in die beiden GEGENUEBERLIEGENDEN Ecken: 0,22 Prozent.
|
|
Derselbe Nebel, an einer anderen Stelle -- und er durfte dabei sogar
|
|
KRAEFTIGER werden (.80 statt .62), weil er nicht mehr auf dem
|
|
hellsten Punkt der Kachel liegt. Besser lesbar UND deutlicher zu
|
|
sehen; das ist selten und war hier umsonst zu haben.
|
|
|
|
---------------------------------------------------------------------
|
|
WARUM ES LESBAR BLEIBT -- die Zahlen dahinter
|
|
|
|
Alles unten ist an echten Bildpunkten gemessen, nicht gerechnet, und
|
|
gegen dieselbe Stelle im Agenturhaus gehalten. Drei Regeln haben die
|
|
Werte bestimmt:
|
|
|
|
1. DIE FLAECHE ZAEHLT, NICHT DER PUNKT. Ein Sternenfeld ist kein
|
|
Hintergrund, sondern viele. Gemessen wird deshalb, welcher ANTEIL
|
|
der Punkte hinter einer Textzeile unter 4,5:1 faellt. Im
|
|
Agenturhaus sind das im schlechtesten Fall 0,115 Prozent, hier
|
|
0,253 Prozent -- beides ein paar hundert Punkte von 17 000, und
|
|
es sind die Sternkerne. Der Mittelwert, also das, was ein
|
|
Buchstabe wirklich sieht, liegt ueberall bei 6,4:1 oder besser.
|
|
|
|
2. STERNE SIND PUNKTE UND BLEIBEN LEISE. Ihre Deckkraft ist die
|
|
einzige Zahl, die den hellsten Punkt hinter einem Buchstaben
|
|
bestimmt. Bei .58 mal dem Schleier von .30 kommt der Kern auf gut
|
|
ein Sechstel Weiss; auf dem dunklen Grund dieses Hauses steht die
|
|
Schrift selbst DORT noch bei 3,6:1. Ein Versuch mit kleineren,
|
|
dafuer helleren Kernen war der falsche Weg: Der hellste Punkt
|
|
blieb fast gleich, der Stern wurde nur unschaerfer.
|
|
|
|
3. KEIN KARO. Die Sternebenen wiederholen sich in Abstaenden ohne
|
|
gemeinsamen Teiler (89/77, 59/51, 167/139). Gleiche Zahlen
|
|
ergaeben ein Muster, und ein Muster sieht man sofort als Tapete.
|
|
Ungleiche ergeben ein Feld, das sich erst nach Hunderten von
|
|
Pixeln wiederholt -- laenger, als eine Kachel breit ist.
|
|
|
|
Der Nebel nimmt zu knapp einem Fuenftel den Ton der jeweiligen
|
|
Kachel auf. Dadurch hat jede Kategorie ihren eigenen Himmel, ohne
|
|
dass eine Kachel aus der Mischung faellt: Vier Fuenftel bleiben
|
|
Lila beziehungsweise Babyblau. */
|
|
:root {
|
|
--sternenfeld:
|
|
/* feine weisse Sterne */
|
|
radial-gradient(circle at 22% 28%, rgba(255, 255, 255, .58) 0 .9px, transparent 2px),
|
|
/* babyblaue Sterne, dichter gesaet */
|
|
radial-gradient(circle at 68% 71%, rgba(142, 201, 255, .52) 0 .8px, transparent 1.8px),
|
|
/* wenige groessere in Lila */
|
|
radial-gradient(circle at 47% 15%, rgba(169, 139, 255, .60) 0 1.3px, transparent 3px),
|
|
/* Nebel oben RECHTS, Lila -- die Ecke, an der keine Kachel schon
|
|
von sich aus hell ist (siehe oben) */
|
|
radial-gradient(ellipse 74% 64% at 90% 16%,
|
|
color-mix(in srgb, var(--ton, var(--violett)) 18%, rgba(125, 92, 224, .80)) 0%,
|
|
transparent 68%),
|
|
/* Nebel unten LINKS, Babyblau -- die gegenueberliegende Ecke,
|
|
damit der Verlauf quer durch die Kachel laeuft */
|
|
radial-gradient(ellipse 66% 52% at 10% 104%,
|
|
color-mix(in srgb, var(--ton, var(--akzent)) 18%, rgba(90, 162, 232, .70)) 0%,
|
|
transparent 70%);
|
|
|
|
--sternenfeld-mass:
|
|
89px 77px,
|
|
59px 51px,
|
|
167px 139px,
|
|
100% 100%,
|
|
100% 100%;
|
|
|
|
/* Die Versaetze sorgen dafuer, dass die drei Sternebenen nicht in
|
|
derselben Ecke anfangen -- sonst stuenden an jedem Rasterpunkt
|
|
drei Sterne uebereinander und dazwischen keiner. */
|
|
--sternenfeld-lage:
|
|
0 0,
|
|
11px 19px,
|
|
5px 7px,
|
|
0 0,
|
|
0 0;
|
|
|
|
/* Der Schleier daempft Raster, Eckwinkel UND Sternenfeld gemeinsam
|
|
-- eine Ebene, eine Deckkraft. Im Agenturhaus steht er auf .26,
|
|
dort traegt er nur ein Raster. Hier traegt er einen Himmel; .30
|
|
ist der Wert, bei dem die Sternkerne die Messung oben halten. Die
|
|
Eckwinkel werden dadurch um einen Hauch mitgehoben, was recht ist:
|
|
Sie sind die Form, und die soll vor dem Himmel nicht verschwinden. */
|
|
--modul-schleier: .30;
|
|
}
|