DogFatherGitandClaude Opus 5
bea1bb7194
Drei Wuensche aus zwei Bildschirmfotos und einem Satz. === 1. SIE DARF SAGEN, WAS PASST UND WAS NICHT === Filipe: "die rechte hand soll bei diesen aufgaben auch wie die modis sagen koennen ob es passt oder nicht ... die rechte hand ist da um mir zu helfen aber auch wie die modis um mir zu sagen was passt und nicht wo die denken bedarf oder nicht. perfektionier das alles." SIE KONNTE ES NICHT, UND ZWAR AN DREI STELLEN GLEICHZEITIG -- die zweite und dritte kamen erst zum Vorschein, nachdem die erste behoben war. Genau deshalb steht "perfektionier das alles" ueber diesem Commit und nicht "eine Zeile geaendert": ERSTENS: Die Frage "an wessen Liste arbeitest du?" kannte nur Creator und Modis (dann die eigene). Sie fiel durch beide Zweige und konnte ueberall antworten, nirgends urteilen. ZWEITENS: Nach der Reparatur durfte sie -- und bekam den KATALOG DER CREATOR. Ihre Meldung trug einen Schluessel, den der Eingang gar nicht kennt, und wurde dort stillschweigend uebersprungen. Die Pruefung meldete "sie darf urteilen (200)" und eine Zeile spaeter "ihre Meldung steht NICHT in DogFathers Eingang". Beides stimmte. DRITTENS: Der Eingang sammelt aus der Liste der Teammitglieder, und die hiess `rolle = 'modi'`. Sie war die Empfaengerin dieser Seite und kam auf ihr selbst nicht vor. Wer nicht in der Liste steht, kann melden, so viel er will -- es erreicht niemanden. Jetzt steht sie in derselben Liste (aber `id <> ich`: eine Karte ueber sich selbst ist kein Ueberblick, sondern ein Spiegel), bekommt denselben Beobachtungskatalog wie die Modis und meldet in denselben Eingang. Alle Rollenvergleiche kommen dabei aus der vorhandenen Menge TEAM_DOGI_ROLLEN statt als zwei Vergleiche danebengeschrieben -- sonst steht dort beim naechsten Mal einer zu wenig. === 2. DIE LEISTE === Filipe: "der hintergrund dieser leiste soll extrem speziell aussehen wie ein universum und soll von lila auf babyblau wechseln, von links nach rechts ... der husky links soll auch babyblau strahlen und nicht rot und der rechts lila. dan brauch ich auch noch einen teilen button." DIE RICHTUNG IST DIE EIGENTLICHE AENDERUNG: Der Schein lief von UNTEN nach oben (die Glut der Agenturseite, nur in Lila). Jetzt von LINKS nach rechts, mit zwei Nebeln und sieben Sternen -- als Verlaufslagen und nicht als Elemente: Sieben Punkte waeren sieben Knoten im Baum auf jeder der zwanzig Seiten, nur fuer Zierde. DIE ZEICHEN TAUSCHEN DIE SEITEN. Links stand ein warmes Rot, fest hingeschrieben in start.css; rechts strahlte der zweite Husky babyblau. Jetzt umgekehrt -- so hat jede Seite der Leiste beide Farben, statt dass jede nur eine hat. Beim rechten wird die FUELLUNG mitgetauscht, nicht nur der Schein: Ein lila Schein um ein blaues Zeichen waere ein Rand, keine Farbe. "UEBERTRIEBEN GEIL" HAT EINE GRENZE, und sie ist gemessen, nicht geschaetzt. Erster Anlauf: .30 -- der Verlauf war zu ahnen, nicht zu sehen, Kontrast 5,26:1. Zweiter: .40 -- sichtbar, aber 4,79:1 in der Mitte, bei einer Grenze von 4,5 zu knapp. Jetzt kraeftige Enden und eine zurueckhaltende Mitte: 5,92 / 5,26 / 7,06:1 an drei Stellen des Verlaufs, gemessen an echten Bildpunkten. Die Farbe liest das Auge an den Enden; in der Mitte gewinnt die Lesbarkeit. DER TEILEN-KNOPF fehlte, weil `DARF_TEILEN` Leitung und Scouts kennt -- die rechte Hand ist keins von beidem. Gefragt wird jetzt nicht nach der Rolle, sondern nach `ich.marke`: Die setzt der Server genau dann, wenn jemand zu Team Dogi gehoert. Der Rollenname bleibt damit aus einer Datei heraus, die jeder herunterlaedt -- und die Frage lautet ohnehin "gehoert diese Person hierher?". === 3. SEIN KALENDER BLEIBT GANZ === Filipe: "mein kalender (dogfather) auf dieser seite hier soll komplett verbunden sein mit dem kalender in der workspace seite ABER NUR IN DER DOGFATHER ROLLE BEI DOGFATHER: NICHT BEI VANVAN." Bei Aufgaben, Bereichen und Dateien ist die Haustrennung eine Hilfe -- man will das andere Haus dort gerade nicht sehen. Beim Kalender waere sie eine Falle: Wer auf der Team-Seite einen Termin eintraegt und die Haelfte seines Tages nicht sieht, legt ihn auf eine Zeit, in der er schon woanders sitzt. Ein Kalender, der nur die halbe Wahrheit zeigt, ist schlimmer als keiner. Geprueft wird die ROLLE und nicht der Name -- ein Name waere die Stelle, an der es beim naechsten Menschen bricht. === WAS DIE PRUEFUNGEN GEZEIGT HABEN === Eine Erwartung war seit Stunden stumm rot: pruef-modi-checkliste verlangte GENAU EINE Zusatzkachel, und seit dem Ideen-Board sind es drei. Ich hatte sie nach der Aenderung nicht noch einmal laufen lassen. Sie zaehlt jetzt nicht mehr auf eine feste Zahl, sondern prueft die AUSSAGE: Wer welche bekommen soll, bekommt welche -- und jede gehoert in die Gruppe "Team Dogi". Eine Pruefung, die bei jeder neuen Kachel rot wird, erzieht dazu, ihr Rotwerden zu ignorieren. Zwei weitere Erwartungen haben sich gedreht und sind im Quelltext begruendet: Der Kalender auf crew. zeigt DogFather jetzt alles (die Pruefung unterscheidet dafuer ER-ja/SIE-nein statt einer einzelnen Antwort -- das ist mehr, nicht weniger), und "aus dem Eingang verschwunden" fragt jetzt nach Schluessel UND Person: Seit die rechte Hand denselben Katalog benutzt, koennen zwei Menschen denselben Punkt melden, und die Pruefung meldete einen Fehler, den es nicht gab. Und eine war wertlos: "die rechte Hand sieht den Agenturtermin nicht" lief gegen einen leeren Kalender -- sie sah ueberhaupt nichts. Sie hat jetzt zwei eigene Termine, einen aus jedem Haus; erst damit sagt die Messung etwas. pruef-modi-checkliste 59 -> 70 · pruef-team-stufen 24 -> 26 · pruef-team-ampel 32 · pruef-haus-trennung 61 -> 62 · pruef-rollen 278 · pruef-css-klassen gruen · pruef-modi-wortleck 5. Co-Authored-By: Claude Opus 5 <[email protected]>
449 lines
20 KiB
CSS
449 lines
20 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);
|
|
}
|