Die Kopfleiste wird zur Klammer: Chili links, Husky rechts, Spicy & Dogi

Filipe (Nachtliste, screen17): "wo der husky ist soll eine geile rot
gruene peperoni sein, dogfather universe ersetzen durch, Spicy & Dogi.
und der husky von links soll rechts sein. die farben von der peperoni und
von dem husky sollen ueber den text ziehen und sich dan in der mitte
treffen." Dazu screen9: die Zierzeile der Zentrale heisst jetzt
"Spicy Media" statt "Dogfather Universe".

Die Chili steht als BILD (sie ist von sich aus rot mit gruenem Stiel und
soll ihre Farben behalten), der Husky als MASKE (schwarzweiss gezeichnet
waere er auf dunklem Grund ein dunkler Fleck; von der Maske zaehlt nur
die Silhouette, gefuellt mit Silber und Babyblau). Dazwischen laeuft der
Schriftzug von Chili-Rot ueber Silber nach Babyblau -- Treffpunkt in der
Mitte, genau beim "&".

DER VERLAUF IM TEXT IST EINE AUSNAHME MIT SICHERUNG. Direkt darueber
steht seit dem 01.09. "KEIN Farbverlauf IM Text", und der Grund gilt
weiter: Durchsichtige Schrift haengt an einer einzigen Technik, und
faellt die aus, ist der Text WEG statt nur anders gefaerbt (gemessen
damals 1,05:1). Beides geht zusammen, wenn der Verlauf nur eine Zugabe
ist: `color` steht zuerst und voll sichtbar da, Verlauf und
durchsichtige Fuellung stehen NUR in einem @supports-Block (wer es nicht
kann, betritt ihn nicht), und bei `forced-colors: active` wird alles
zurueckgenommen. Die drei Stuetzstellen sind bewusst hell -- beim
Verlauf bestimmt der dunkelste Punkt den schlechtesten Kontrast.

EIN SELEKTOR, DER RICHTIG AUSSAH UND FALSCH WAR. Der Husky sollte nur
auf die Startseite; `body.start` davorzusetzen wirkte naheliegend. Diese
Klasse tragen aber ALLE 18 Seiten -- sie kennzeichnet den Grundstil,
nicht die Startseite. Folge auf den Unterseiten, wo `.marke` den Rueckweg
traegt: Die 22 px des Huskys nahmen dem Text so viel Platz, dass
"Creator Workspace" zu "CREAT…" wurde. Gesehen im Bildschirmfoto, nicht
im Code. Jetzt steht die Regel in heim.css, das ausschliesslich von der
Startseite geladen wird -- die Datei selbst ist die Bedingung.

Nachgemessen dabei, damit es nicht faelschlich mir zugeschrieben wird:
Der Schriftzug auf den Unterseiten ist AUCH IM ALTEN STAND abgeschnitten
(151 px Inhalt auf 91 px Platz). Das ist ein vorbestehender Mangel und
steht auf der offenen Liste, kein Rueckschritt aus diesem Commit.

pruef-start-ansicht angepasst: Sie prueft den Namen im Schriftzug und
erwartete "Dogfather Universe" -- sie hat ihre Arbeit getan und
angeschlagen. EXIT=0, weiterhin 140 Pruefungen.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-09-08 04:37:51 +02:00
co-authored by Claude Opus 5
parent 963ea492b1
commit ff8ea38595
4 changed files with 134 additions and 7 deletions
+85 -4
View File
@@ -1509,15 +1509,43 @@ body.start > main { position: relative; z-index: 1; }
min-width: 0; flex: 0 1 auto;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ZWEI MARKEN, EINE LINKS UND EINE RECHTS (08.09.2026).
Filipe: "wo der husky ist soll eine geile rot grüne peperoni sein …
und der husky von links soll rechts sein. die farben von der peperoni
und von dem husky sollen über den text ziehen und sich dan in der
mitte treffen."
Das ergibt eine Klammer: links die Chili von Spicy Media, rechts der
Husky von Dogi, und dazwischen der Schriftzug, der von der einen
Farbe in die andere übergeht. Genau die Reihenfolge, in der auch der
Name steht -- "Spicy & Dogi".
Die Chili wird als BILD gezeigt, der Husky als MASKE. Das ist kein
Zufall: Die Chili ist von sich aus rot mit grünem Stiel, sie soll
ihre eigenen Farben behalten. Der Husky ist schwarzweiß gezeichnet --
als Bild wäre er auf dunklem Grund ein dunkler Fleck. Als Maske zählt
nur seine Silhouette, und die wird mit Silber und Babyblau gefüllt:
seine beiden Farben aus dem Rollenschema. */
.kopfleiste .marke::before {
content: "";
flex: none; width: 22px; height: 22px;
background: linear-gradient(150deg, var(--akzent), var(--violett));
-webkit-mask: url("../img/marke-husky.webp") center / contain no-repeat;
mask: url("../img/marke-husky.webp") center / contain no-repeat;
background: url("../img/marke-spicy.webp") center / contain no-repeat;
transition: filter var(--tempo);
}
.kopfleiste:hover .marke::before { filter: brightness(1.25); }
/* Der Husky auf der rechten Seite steht in heim.css -- diese Datei wird
NUR von der Startseite geladen, und nur dort trägt `.marke` den
Markennamen. Auf den Unterseiten steht dort der Rückweg
("Creator Workspace · Aufgaben"); ein Husky dahinter wäre sinnlos, und
er hat dort echten Schaden angerichtet: Die 22 px plus Abstand haben
dem Text so viel Platz genommen, dass "Creator Workspace" zu
"CREAT…" abgeschnitten wurde.
Ein `body.start`-Vorsatz half NICHT, obwohl er richtig aussah: Diese
Klasse tragen ALLE 18 Seiten, sie kennzeichnet nicht die Startseite,
sondern den Grundstil. Gesehen im Bildschirmfoto der Unterseite --
der Selektor las sich völlig plausibel. */
.kopfleiste:hover .marke::before { filter: brightness(1.2); }
/* KEIN Farbverlauf IM Text.
@@ -1543,11 +1571,64 @@ body.start > main { position: relative; z-index: 1; }
und steht kräftig; was dahinter kommt, sagt nur, wo man gerade ist,
und tritt zurück. Beide bleiben eigenständig lesbar -- der leise Teil
liegt bei 5,2:1 und damit deutlich über der Norm. */
/* DER VERLAUF IM NAMEN -- und warum er hier ausnahmsweise doch erlaubt
ist (08.09.2026).
Direkt darüber steht "KEIN Farbverlauf IM Text", und die Begründung
gilt weiter: Durchsichtige Schrift ist auf eine einzige Technik
angewiesen, und faellt die aus, ist der Text WEG statt nur anders
gefaerbt. Filipe will den Verlauf trotzdem: "die farben von der
peperoni und von dem husky sollen über den text ziehen und sich dan
in der mitte treffen."
Beides geht zusammen, wenn der Verlauf nur eine ZUGABE ist:
1. `color` steht weiterhin als volle, sichtbare Farbe da -- und zwar
ZUERST. Wer den Verlauf nicht darstellen kann, sieht den Namen
genau wie vorher.
2. Der Verlauf und die durchsichtige Fuellung stehen NUR in einem
@supports-Block. Kann der Browser es nicht, betritt er ihn nicht
-- statt durchsichtige Schrift ohne Verlauf zu zeigen, was der
eigentliche Ausfall waere.
3. Im Kontrastmodus des Betriebssystems wird alles zurueckgenommen.
Dort bestimmt das System die Farben, und eine durchsichtige
Schrift waere unsichtbar.
Die Farben sind die der beiden Zeichen links und rechts: Chili-Rot
geht in Silber und dann in Babyblau ueber, Treffpunkt in der Mitte.
Alle drei Stuetzstellen sind BEWUSST hell gewaehlt -- beim
Farbverlauf bestimmt der dunkelste Punkt den schlechtesten Kontrast,
und der liegt hier bei #ff9a86 noch ueber 6:1 auf dem dunklen Grund. */
.kopfleiste .marke__haupt {
color: #dcecfb;
font-weight: 700;
text-shadow: 0 0 16px rgba(63, 189, 245, .34);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.kopfleiste .marke__haupt {
background: linear-gradient(95deg,
#ff9a86 0%, /* die Chili links */
#ffc0ad 22%,
#eaf1f8 50%, /* Treffpunkt in der Mitte */
#c6d8ea 72%,
#9ed4f5 100%); /* der Husky rechts */
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
/* Das Leuchten bleibt, sonst verliert der Schriftzug seine Tiefe --
es liegt HINTER der Schrift und wird vom Zuschnitt nicht erfasst. */
text-shadow: 0 0 18px rgba(127, 196, 242, .3);
}
}
/* Im Kontrastmodus bestimmt das Betriebssystem die Farben. Eine
durchsichtige Fuellung waere dort unsichtbar -- also zurueck auf die
Volltonfarbe, die oben ohnehin schon dasteht. */
@media (forced-colors: active) {
.kopfleiste .marke__haupt {
background: none;
-webkit-text-fill-color: currentColor;
color: CanvasText;
}
}
.kopfleiste .marke__leise {
color: #86b4d6;
font-weight: 500;