Compare commits
2
Commits
863471c3df
...
ff8ea38595
| Author | SHA1 | Date | |
|---|---|---|---|
  DogFatherGitandClaude Opus 5
|
ff8ea38595 | ||
|
DogFatherGitandClaude Opus 5
|
963ea492b1 |
@@ -243,7 +243,10 @@ for (const [breite, wie] of [[1440, "Computer"], [390, "Handy"]]) {
|
||||
Schriftzug darf nicht umbrechen) -- beim Vergleich werden sie
|
||||
deshalb gleichgesetzt, sonst prüft man Unsichtbares. */
|
||||
const ohneNbsp = (t) => t.replace(/ /g, " ");
|
||||
ok(ohneNbsp(r.markeHaupt) === "Dogfather Universe", `der Name steht vorn ("${r.markeHaupt}")`);
|
||||
/* "Spicy & Dogi" seit dem 08.09.2026 (Wunsch von Filipe): links die
|
||||
Chili von Spicy Media, rechts der Husky von Dogi, und der Name
|
||||
dazwischen in genau dieser Reihenfolge. */
|
||||
ok(ohneNbsp(r.markeHaupt) === "Spicy & Dogi", `der Name steht vorn ("${r.markeHaupt}")`);
|
||||
ok(ohneNbsp(r.markeLeise) === "Creator Workspace", `der Ort dahinter ("${r.markeLeise}")`);
|
||||
ok(r.markeRauten === 1, `und dazwischen genau eine Raute (${r.markeRauten})`);
|
||||
/* Der geschützte Leerraum muss WIRKLICH noch da sein -- ginge er beim
|
||||
|
||||
@@ -157,10 +157,10 @@
|
||||
border: 1px solid color-mix(in srgb, var(--r) 30%, transparent);
|
||||
}
|
||||
/* Dieselben Rollenfarben wie überall im Haus. */
|
||||
.chat-raum__zeichen[data-rolle="admin"] { --r: #e8c07d; }
|
||||
.chat-raum__zeichen[data-rolle="manager"] { --r: #8a76ff; }
|
||||
.chat-raum__zeichen[data-rolle="scout"] { --r: #5fc99a; }
|
||||
.chat-raum__zeichen[data-rolle="creator"] { --r: #3fbdf5; }
|
||||
.chat-raum__zeichen[data-rolle="admin"] { --r: var(--dogi-haupt); }
|
||||
.chat-raum__zeichen[data-rolle="manager"] { --r: var(--manager-haupt); }
|
||||
.chat-raum__zeichen[data-rolle="scout"] { --r: var(--scout-haupt); }
|
||||
.chat-raum__zeichen[data-rolle="creator"] { --r: var(--creator-haupt); }
|
||||
/* Eine Gruppe zeigt ihre Größe statt einer Initiale -- der Name der
|
||||
Gruppe steht ohnehin daneben. */
|
||||
.chat-raum__zeichen[data-gruppe="ja"] {
|
||||
@@ -271,10 +271,10 @@
|
||||
background: color-mix(in srgb, var(--r) 13%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--r) 28%, transparent);
|
||||
}
|
||||
.chat-nachricht__zeichen[data-rolle="admin"] { --r: #e8c07d; }
|
||||
.chat-nachricht__zeichen[data-rolle="manager"] { --r: #8a76ff; }
|
||||
.chat-nachricht__zeichen[data-rolle="scout"] { --r: #5fc99a; }
|
||||
.chat-nachricht__zeichen[data-rolle="creator"] { --r: #3fbdf5; }
|
||||
.chat-nachricht__zeichen[data-rolle="admin"] { --r: var(--dogi-haupt); }
|
||||
.chat-nachricht__zeichen[data-rolle="manager"] { --r: var(--manager-haupt); }
|
||||
.chat-nachricht__zeichen[data-rolle="scout"] { --r: var(--scout-haupt); }
|
||||
.chat-nachricht__zeichen[data-rolle="creator"] { --r: var(--creator-haupt); }
|
||||
/* Ohne Kreis (Folgenachricht) bleibt die Spalte trotzdem stehen. */
|
||||
.chat-nachricht[data-folge="ja"]:not([data-selbst="ja"]) .chat-nachricht__blase { grid-column: 2; }
|
||||
|
||||
@@ -397,10 +397,10 @@
|
||||
width: 7px; height: 7px; border-radius: 50%;
|
||||
background: var(--r, var(--text-still)); flex: none;
|
||||
}
|
||||
.chat-wahl__gruppe[data-rolle="admin"] { --r: #e8c07d; }
|
||||
.chat-wahl__gruppe[data-rolle="manager"] { --r: #8a76ff; }
|
||||
.chat-wahl__gruppe[data-rolle="scout"] { --r: #5fc99a; }
|
||||
.chat-wahl__gruppe[data-rolle="creator"] { --r: #3fbdf5; }
|
||||
.chat-wahl__gruppe[data-rolle="admin"] { --r: var(--dogi-haupt); }
|
||||
.chat-wahl__gruppe[data-rolle="manager"] { --r: var(--manager-haupt); }
|
||||
.chat-wahl__gruppe[data-rolle="scout"] { --r: var(--scout-haupt); }
|
||||
.chat-wahl__gruppe[data-rolle="creator"] { --r: var(--creator-haupt); }
|
||||
|
||||
.chat-wahl__liste { display: flex; flex-wrap: wrap; gap: 7px; }
|
||||
.chat-wahl__knopf {
|
||||
@@ -413,10 +413,10 @@
|
||||
color: var(--text-leise); font: inherit; cursor: pointer;
|
||||
transition: color .16s ease, border-color .16s ease, background .16s ease;
|
||||
}
|
||||
.chat-wahl__knopf[data-rolle="admin"] { --r: #e8c07d; }
|
||||
.chat-wahl__knopf[data-rolle="manager"] { --r: #8a76ff; }
|
||||
.chat-wahl__knopf[data-rolle="scout"] { --r: #5fc99a; }
|
||||
.chat-wahl__knopf[data-rolle="creator"] { --r: #3fbdf5; }
|
||||
.chat-wahl__knopf[data-rolle="admin"] { --r: var(--dogi-haupt); }
|
||||
.chat-wahl__knopf[data-rolle="manager"] { --r: var(--manager-haupt); }
|
||||
.chat-wahl__knopf[data-rolle="scout"] { --r: var(--scout-haupt); }
|
||||
.chat-wahl__knopf[data-rolle="creator"] { --r: var(--creator-haupt); }
|
||||
.chat-wahl__knopf:hover { color: var(--text); border-color: rgba(255, 255, 255, .24); }
|
||||
.chat-wahl__knopf:focus-visible { outline: 2px solid var(--r); outline-offset: 2px; }
|
||||
.chat-wahl__zeichen {
|
||||
@@ -533,15 +533,15 @@
|
||||
}
|
||||
/* Die Farbe der Rolle -- dieselbe Zuordnung wie überall im Haus. */
|
||||
.chat-raum__zeichen[data-rolle="spicy"],
|
||||
.chat-nachricht__zeichen[data-rolle="spicy"] { --rton: #e9848c; }
|
||||
.chat-nachricht__zeichen[data-rolle="spicy"] { --rton: var(--spicy-haupt); }
|
||||
.chat-raum__zeichen[data-rolle="admin"],
|
||||
.chat-nachricht__zeichen[data-rolle="admin"] { --rton: var(--k-gold); }
|
||||
.chat-nachricht__zeichen[data-rolle="admin"] { --rton: var(--dogi-haupt); }
|
||||
.chat-raum__zeichen[data-rolle="manager"],
|
||||
.chat-nachricht__zeichen[data-rolle="manager"] { --rton: var(--k-mittel); }
|
||||
.chat-nachricht__zeichen[data-rolle="manager"] { --rton: var(--manager-haupt); }
|
||||
.chat-raum__zeichen[data-rolle="scout"],
|
||||
.chat-nachricht__zeichen[data-rolle="scout"] { --rton: var(--k-gut); }
|
||||
.chat-nachricht__zeichen[data-rolle="scout"] { --rton: var(--scout-haupt); }
|
||||
.chat-raum__zeichen[data-rolle="creator"],
|
||||
.chat-nachricht__zeichen[data-rolle="creator"] { --rton: var(--akzent); }
|
||||
.chat-nachricht__zeichen[data-rolle="creator"] { --rton: var(--creator-haupt); }
|
||||
|
||||
/* Das Bild liegt ÜBER dem Buchstaben, nicht an seiner Stelle. Fällt es
|
||||
aus, steht der Buchstabe weiterhin da. */
|
||||
|
||||
@@ -67,8 +67,95 @@
|
||||
--radius-klein: 12px;
|
||||
--schatten: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
|
||||
--tempo: .22s cubic-bezier(.4, 0, .2, 1);
|
||||
|
||||
/* ================================================================
|
||||
DIE FARBEN DER FÜNF ROLLEN — an EINER Stelle (08.09.2026)
|
||||
|
||||
Auftrag von Filipe: "die farben sollen jeden rollen angepasst
|
||||
werden über die ganze website … diese farben sollen auch immer
|
||||
danach bei den rollen benutzt werden."
|
||||
|
||||
Das Entscheidende ist das "immer": Bisher standen dieselben vier
|
||||
Hex-Werte über chat.css, personen.css und ein Dutzend weiterer
|
||||
Dateien verstreut — allein in chat.css sechzehnmal. Wer eine Farbe
|
||||
ändern wollte, musste sie überall finden; wer eine übersah, hatte
|
||||
zwei Wahrheiten auf einem Bildschirm. Deshalb stehen sie ab jetzt
|
||||
hier, in der einzigen Datei, die auf ALLEN 19 Seiten liegt.
|
||||
|
||||
Je Rolle drei Angaben, damit auch Verläufe und Schimmer aus
|
||||
derselben Quelle kommen:
|
||||
--r-haupt die tragende Farbe (Text, Rahmen, Zeichen)
|
||||
--r-zweit die zweite Farbe für Verläufe und Glanzkanten
|
||||
--r-tief die abgedunkelte Fassung für Flächen und Schatten
|
||||
|
||||
AUGENSCHONEND BLEIBT PFLICHT (Hausregel). "Richtig geil" heißt
|
||||
satt und eigenständig, nicht grell: Alle Töne sind auf dem dunklen
|
||||
Grund gedämpft gehalten, keiner ist reines Signalrot oder Neon.
|
||||
Gegen #0a121e liegt jeder Haupt-Ton über 4,5:1. */
|
||||
|
||||
/* SPICY — rot. Kein Signalrot (#f00 flimmert auf dunklem Grund und
|
||||
ist auf Rot-Grün-Sehschwäche kaum vom Braun zu trennen), sondern
|
||||
ein warmes, sattes Chili-Rot mit einem Stich ins Orange. */
|
||||
--spicy-haupt: #ef5f57;
|
||||
--spicy-zweit: #ff8a6b;
|
||||
--spicy-tief: #8c2f2b;
|
||||
|
||||
/* DOGFATHER (admin) — babyblau UND lila, wie gewünscht. Die beiden
|
||||
Töne sind der Kern seiner Marke: Das Babyblau trägt, das Lila
|
||||
kommt in Verläufen und Kanten dazu. */
|
||||
--dogi-haupt: #7ec8f2;
|
||||
--dogi-zweit: #a78bfa;
|
||||
--dogi-tief: #2c5f80;
|
||||
|
||||
/* MANAGER — lila, bleibt (Wunsch: "manager bleibt lila"). */
|
||||
--manager-haupt: #8a76ff;
|
||||
--manager-zweit: #b9a6ff;
|
||||
--manager-tief: #3d3480;
|
||||
|
||||
/* SCOUT — grün, bleibt (Wunsch: "scout bleibt grun"). */
|
||||
--scout-haupt: #5fc99a;
|
||||
--scout-zweit: #8fe0bb;
|
||||
--scout-tief: #245c47;
|
||||
|
||||
/* CREATOR — Braun und Silber gemischt. Das ist der einzige Ton, den
|
||||
es vorher nicht gab (Creator lief auf demselben Blau wie der
|
||||
Akzent und war dadurch von "irgendein Element" nicht zu
|
||||
unterscheiden). Warmes Bronzebraun als Träger, kühles Silber als
|
||||
Glanz — die Mischung ergibt den Metallschimmer, der ihn von allen
|
||||
vier anderen abhebt. */
|
||||
--creator-haupt: #c79a6d;
|
||||
--creator-zweit: #d8dee9;
|
||||
--creator-tief: #6b4a2f;
|
||||
|
||||
/* Vorgabe, solange keine Rolle bekannt ist (Anmeldeseite, Fehler-
|
||||
seiten). Bewusst der neutrale Akzent und nicht die Farbe einer
|
||||
bestimmten Rolle — sonst sähe die Anmeldung aus, als wäre man
|
||||
schon jemand. */
|
||||
--r-haupt: var(--akzent);
|
||||
--r-zweit: var(--violett);
|
||||
--r-tief: var(--akzent-tief);
|
||||
}
|
||||
|
||||
/* Die Rolle steht am <html> (gesetzt in kopf.js) — damit gilt sie für
|
||||
ALLES auf der Seite, auch für Elemente, die erst später entstehen.
|
||||
Ein Umschalten an einzelnen Bausteinen hätte jede neue Stelle wieder
|
||||
vergessen können. */
|
||||
html[data-rolle="spicy"] { --r-haupt: var(--spicy-haupt); --r-zweit: var(--spicy-zweit); --r-tief: var(--spicy-tief); }
|
||||
html[data-rolle="admin"] { --r-haupt: var(--dogi-haupt); --r-zweit: var(--dogi-zweit); --r-tief: var(--dogi-tief); }
|
||||
html[data-rolle="manager"] { --r-haupt: var(--manager-haupt); --r-zweit: var(--manager-zweit); --r-tief: var(--manager-tief); }
|
||||
html[data-rolle="scout"] { --r-haupt: var(--scout-haupt); --r-zweit: var(--scout-zweit); --r-tief: var(--scout-tief); }
|
||||
html[data-rolle="creator"] { --r-haupt: var(--creator-haupt); --r-zweit: var(--creator-zweit); --r-tief: var(--creator-tief); }
|
||||
|
||||
/* Dieselben fünf Töne auch als BAUSTEIN-Farbe, für Stellen, an denen
|
||||
mehrere Rollen NEBENEINANDER stehen (Personenliste, Chat-Auswahl,
|
||||
Team-Ring). Dort zählt nicht, wer eingeloggt ist, sondern zu wem der
|
||||
einzelne Eintrag gehört. */
|
||||
[data-rolle="spicy"] { --rolle-haupt: var(--spicy-haupt); --rolle-zweit: var(--spicy-zweit); --rolle-tief: var(--spicy-tief); }
|
||||
[data-rolle="admin"] { --rolle-haupt: var(--dogi-haupt); --rolle-zweit: var(--dogi-zweit); --rolle-tief: var(--dogi-tief); }
|
||||
[data-rolle="manager"] { --rolle-haupt: var(--manager-haupt); --rolle-zweit: var(--manager-zweit); --rolle-tief: var(--manager-tief); }
|
||||
[data-rolle="scout"] { --rolle-haupt: var(--scout-haupt); --rolle-zweit: var(--scout-zweit); --rolle-tief: var(--scout-tief); }
|
||||
[data-rolle="creator"] { --rolle-haupt: var(--creator-haupt); --rolle-zweit: var(--creator-zweit); --rolle-tief: var(--creator-tief); }
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
|
||||
/* `color-scheme: dark` ist der eigentliche Schalter für alles, was der
|
||||
@@ -254,11 +341,16 @@ body.gate {
|
||||
damit die Farbe eines Tages nur an EINER Stelle geaendert werden
|
||||
muss -- die Zeichen selbst wissen nichts von Rollen. */
|
||||
.rolle { --rf: var(--text-still); }
|
||||
.rolle[data-rolle="spicy"] { --rf: #ff6f7d; }
|
||||
.rolle[data-rolle="admin"] { --rf: #e3b341; }
|
||||
.rolle[data-rolle="manager"] { --rf: #a48bff; }
|
||||
.rolle[data-rolle="scout"] { --rf: #3fd18b; }
|
||||
.rolle[data-rolle="creator"] { --rf: #3fbdf5; }
|
||||
/* Seit dem 08.09.2026 aus den zentralen Rollenfarben oben, nicht mehr
|
||||
als eigene Hex-Werte. Zwei davon waren inhaltlich falsch geworden:
|
||||
`admin` stand auf Gold (Filipe will Babyblau/Lila) und `creator` auf
|
||||
demselben Blau wie der allgemeine Akzent -- die Rolle war dadurch
|
||||
optisch nicht von "irgendein Bedienelement" zu unterscheiden. */
|
||||
.rolle[data-rolle="spicy"] { --rf: var(--spicy-haupt); }
|
||||
.rolle[data-rolle="admin"] { --rf: var(--dogi-haupt); }
|
||||
.rolle[data-rolle="manager"] { --rf: var(--manager-haupt); }
|
||||
.rolle[data-rolle="scout"] { --rf: var(--scout-haupt); }
|
||||
.rolle[data-rolle="creator"] { --rf: var(--creator-haupt); }
|
||||
|
||||
.rolle__zeichen {
|
||||
stroke: color-mix(in srgb, var(--rf) 88%, #ffffff);
|
||||
@@ -1612,7 +1704,7 @@ body.gate {
|
||||
Alle gedeckt, keine davon neon: augenschonend bleibt Vorgabe. */
|
||||
/* Spicy Media traegt das Rot der Marke -- dieselbe Farbe wie ihr Name
|
||||
im Kopf der Karte darueber. */
|
||||
.tafel .rolle[data-rolle="spicy"] { --rton: #e9848c; }
|
||||
.tafel .rolle[data-rolle="spicy"] { --rton: var(--spicy-haupt); }
|
||||
.tafel .rolle[data-rolle="admin"] { --rton: var(--k-gold); }
|
||||
.tafel .rolle[data-rolle="manager"] { --rton: var(--k-mittel); }
|
||||
.tafel .rolle[data-rolle="scout"] { --rton: var(--k-gut); }
|
||||
|
||||
@@ -1487,3 +1487,42 @@
|
||||
@media (forced-colors: active) {
|
||||
.gruppe__kopf { border: 1px solid CanvasText; }
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
DER HUSKY RECHTS IN DER KOPFLEISTE (08.09.2026)
|
||||
|
||||
Filipe: "wo der husky ist soll eine geile rot grüne peperoni sein …
|
||||
und der husky von links soll rechts sein."
|
||||
|
||||
Zusammen mit der Chili links (start.css) ergibt das eine Klammer um
|
||||
den Schriftzug: Spicy links, Dogi rechts -- genau die Reihenfolge des
|
||||
Namens "Spicy & Dogi", und die Farben laufen zwischen beiden über den
|
||||
Text aufeinander zu.
|
||||
|
||||
WARUM DIESE REGEL HIER STEHT UND NICHT IN start.css: heim.css wird
|
||||
ausschliesslich von der Startseite geladen. Auf den Unterseiten traegt
|
||||
`.marke` den Rueckweg statt des Markennamens -- dort hat der Husky
|
||||
nicht nur nichts zu suchen, er hat auch Schaden angerichtet: Seine
|
||||
22 px plus Abstand nahmen dem Text so viel Platz, dass "Creator
|
||||
Workspace" zu "CREAT…" abgeschnitten wurde.
|
||||
|
||||
Der naheliegende Weg, ein `body.start` davorzusetzen, funktioniert
|
||||
NICHT: Diese Klasse tragen alle 18 Seiten -- sie kennzeichnet den
|
||||
Grundstil, nicht die Startseite. Der Selektor las sich richtig und
|
||||
war es nicht; gesehen erst im Bildschirmfoto der Unterseite.
|
||||
|
||||
Als MASKE und nicht als Bild: Der Husky ist schwarzweiss gezeichnet
|
||||
und waere auf dunklem Grund ein dunkler Fleck. Von einer Maske zaehlt
|
||||
nur die Silhouette, und die wird hier mit Silber und Babyblau
|
||||
gefuellt -- seine beiden Farben aus dem Rollenschema. Die Augenfarbe
|
||||
klingt im Verlauf an, ohne dass man bei 22 px Augen zeichnen muesste.
|
||||
=================================================================== */
|
||||
.kopfleiste .marke::after {
|
||||
content: "";
|
||||
flex: none; width: 22px; height: 22px;
|
||||
background: linear-gradient(160deg, #eaf1f8 8%, #b9c6d6 46%, var(--dogi-haupt) 100%);
|
||||
-webkit-mask: url("../img/marke-husky.webp") center / contain no-repeat;
|
||||
mask: url("../img/marke-husky.webp") center / contain no-repeat;
|
||||
transition: filter var(--tempo);
|
||||
}
|
||||
.kopfleiste:hover .marke::after { filter: brightness(1.2); }
|
||||
|
||||
@@ -909,13 +909,13 @@
|
||||
/* Rollentöne. Dieselben wie in personen.css -- eine Farbe pro Rolle im
|
||||
ganzen Workspace, sonst muss man sie auf jeder Seite neu lernen. */
|
||||
.k-dabei__gruppe[data-rolle="admin"],
|
||||
.k-dabei__knopf[data-rolle="admin"] { --r: #e8c07d; }
|
||||
.k-dabei__knopf[data-rolle="admin"] { --r: var(--dogi-haupt); }
|
||||
.k-dabei__gruppe[data-rolle="manager"],
|
||||
.k-dabei__knopf[data-rolle="manager"] { --r: #8a76ff; }
|
||||
.k-dabei__knopf[data-rolle="manager"] { --r: var(--manager-haupt); }
|
||||
.k-dabei__gruppe[data-rolle="scout"],
|
||||
.k-dabei__knopf[data-rolle="scout"] { --r: #5fc99a; }
|
||||
.k-dabei__knopf[data-rolle="scout"] { --r: var(--scout-haupt); }
|
||||
.k-dabei__gruppe[data-rolle="creator"],
|
||||
.k-dabei__knopf[data-rolle="creator"] { --r: #3fbdf5; }
|
||||
.k-dabei__knopf[data-rolle="creator"] { --r: var(--creator-haupt); }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.k-dabei__knopf, .k-dabei__haken { transition: none; }
|
||||
|
||||
@@ -23,9 +23,21 @@
|
||||
padding: 1px 9px; border-radius: 999px;
|
||||
font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
|
||||
}
|
||||
.marke-rolle[data-rolle="admin"] { background: rgba(63, 189, 245, .16); color: #7fd2fb; }
|
||||
.marke-rolle[data-rolle="creator"] { background: rgba(138, 118, 255, .16); color: #b3a6ff; }
|
||||
.marke-rolle[data-rolle="scout"] { background: rgba(77, 171, 119, .16); color: #79d1a2; }
|
||||
/* Alle FUENF Rollen, aus den zentralen Farben (08.09.2026).
|
||||
|
||||
Vorher standen hier nur drei -- Spicy und Manager fehlten ganz und
|
||||
liefen ohne Marke, also farblos, durch die Liste. Ausserdem trug
|
||||
`creator` das Lila des Managers: Zwei verschiedene Rollen sahen in
|
||||
derselben Liste gleich aus.
|
||||
|
||||
`color-mix` statt fester rgba-Werte, damit Flaeche und Schrift
|
||||
automatisch aus derselben Rollenfarbe kommen -- wer die Farbe oben
|
||||
aendert, muss hier nichts nachziehen. */
|
||||
.marke-rolle[data-rolle="spicy"] { background: color-mix(in srgb, var(--spicy-haupt) 16%, transparent); color: var(--spicy-haupt); }
|
||||
.marke-rolle[data-rolle="admin"] { background: color-mix(in srgb, var(--dogi-haupt) 16%, transparent); color: var(--dogi-haupt); }
|
||||
.marke-rolle[data-rolle="manager"] { background: color-mix(in srgb, var(--manager-haupt) 16%, transparent); color: var(--manager-haupt); }
|
||||
.marke-rolle[data-rolle="scout"] { background: color-mix(in srgb, var(--scout-haupt) 16%, transparent); color: var(--scout-haupt); }
|
||||
.marke-rolle[data-rolle="creator"] { background: color-mix(in srgb, var(--creator-haupt) 16%, transparent); color: var(--creator-haupt); }
|
||||
|
||||
.person__knoepfe { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
|
||||
|
||||
@@ -192,10 +204,10 @@
|
||||
}
|
||||
|
||||
/* Eine Farbe je Rolle -- dieselbe Sprache wie überall sonst. */
|
||||
.rollenwahl__knopf[data-rolle="admin"] { --r: #e8c07d; }
|
||||
.rollenwahl__knopf[data-rolle="manager"] { --r: #8a76ff; }
|
||||
.rollenwahl__knopf[data-rolle="scout"] { --r: #5fc99a; }
|
||||
.rollenwahl__knopf[data-rolle="creator"] { --r: #3fbdf5; }
|
||||
.rollenwahl__knopf[data-rolle="admin"] { --r: var(--dogi-haupt); }
|
||||
.rollenwahl__knopf[data-rolle="manager"] { --r: var(--manager-haupt); }
|
||||
.rollenwahl__knopf[data-rolle="scout"] { --r: var(--scout-haupt); }
|
||||
.rollenwahl__knopf[data-rolle="creator"] { --r: var(--creator-haupt); }
|
||||
|
||||
.rollenwahl__knopf[data-an="ja"] {
|
||||
color: #fff;
|
||||
@@ -225,31 +237,56 @@
|
||||
AUGEN hell gefuellt, damit ein Gesicht auch ein Gesicht ist.
|
||||
|
||||
`--r` ist die Farbe der Rolle und kommt aus der Liste darueber. */
|
||||
/* NACHTRAG 08.09.2026: DIE ZEICHEN TRAGEN IHRE FARBEN JETZT SELBST.
|
||||
|
||||
Die Regeln darunter faerbten jedes Zeichen in der Farbe SEINER ROLLE
|
||||
ein -- eine Farbe pro Zeichen. Filipe will es zweifarbig: "peperoni:
|
||||
rot und grün", "husky: silber und blaue augen", "scout: grünes schild
|
||||
mit einer roten peperoni drin". Das ist mit einer einzigen `--r`
|
||||
nicht darstellbar, egal wie man mischt.
|
||||
|
||||
Die Zeichen bringen ihre Verlaeufe deshalb selbst mit (siehe das
|
||||
<defs>-Sprite in personen.html). Hier bleibt nur noch, was VON AUSSEN
|
||||
kommen muss: Groesse und der Schlagschatten, der sie von der Flaeche
|
||||
abhebt.
|
||||
|
||||
`fill: none; stroke: var(--r)` MUSSTE WEG, und das ist der Kern:
|
||||
Beides wird an die Pfade VERERBT. Ein Pfad, der nur ein `fill`-Attribut
|
||||
traegt, haette den Rollen-Strich in 1,55 px geerbt -- jedes Zeichen
|
||||
waere von einem dicken farbigen Rand ueberzogen worden. Jetzt steht
|
||||
hier `stroke: none`, und jeder Pfad, der eine Linie haben will, sagt
|
||||
das selbst. */
|
||||
.rollenwahl__symbol {
|
||||
width: 24px; height: 24px; flex: none; margin-top: 1px;
|
||||
fill: none; stroke: var(--r); stroke-width: 1.55;
|
||||
fill: none; stroke: none;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
|
||||
}
|
||||
.rollenwahl__symbol .fuell {
|
||||
stroke: none;
|
||||
fill: color-mix(in srgb, var(--r) 58%, transparent);
|
||||
|
||||
/* DAS FUNKELN DES MANAGER-STERNS.
|
||||
|
||||
Ein heller Streifen wandert einmal quer ueber den Stern. Bewusst
|
||||
langsam (4,5 s) und mit langer Pause: Ein schnelles Blinken waere
|
||||
genau die aggressive Optik, die hier nicht sein soll -- und in einer
|
||||
Liste mit fuenf Rollen zoege ein zappelndes Zeichen den Blick
|
||||
dauerhaft von allem anderen ab.
|
||||
|
||||
Gemacht ueber eine wandernde Maske, nicht ueber die Deckkraft: Ein
|
||||
Auf- und Abblenden des ganzen Sterns waere ein Pulsieren, kein
|
||||
Glitzern. Glanz ist etwas, das sich BEWEGT. */
|
||||
.rs-funkel {
|
||||
-webkit-mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) center / 260% 100% no-repeat;
|
||||
mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) center / 260% 100% no-repeat;
|
||||
animation: rs-glitzer 4.5s cubic-bezier(.5, 0, .5, 1) infinite;
|
||||
}
|
||||
.rollenwahl__symbol .linie { stroke: color-mix(in srgb, var(--r) 92%, #ffffff); }
|
||||
.rollenwahl__symbol .auge {
|
||||
stroke: none;
|
||||
fill: color-mix(in srgb, var(--r) 30%, #ffffff);
|
||||
@keyframes rs-glitzer {
|
||||
0%, 62% { -webkit-mask-position: 145% 0; mask-position: 145% 0; }
|
||||
100% { -webkit-mask-position: -45% 0; mask-position: -45% 0; }
|
||||
}
|
||||
/* Der Haken im Schutzschild ist die AUSSAGE des Zeichens -- er bleibt
|
||||
hell und duenn, damit er auf der gefuellten Flaeche steht statt in
|
||||
ihr zu verschwinden. */
|
||||
.rollenwahl__symbol .hell {
|
||||
stroke: color-mix(in srgb, var(--r) 18%, #ffffff);
|
||||
stroke-width: 1.9;
|
||||
}
|
||||
.rollenwahl__symbol .nase {
|
||||
stroke: none;
|
||||
fill: color-mix(in srgb, var(--r) 45%, #06090f);
|
||||
/* Hausregel: Wer weniger Bewegung eingestellt hat, bekommt keine.
|
||||
Uebrig bleibt ein ruhiger goldener Stern -- nicht ein unsichtbarer. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.rs-funkel { animation: none; -webkit-mask: none; mask: none; opacity: .25; }
|
||||
}
|
||||
/* Beim gewaehlten Knopf leuchtet die Flaeche etwas staerker -- das ist
|
||||
der einzige Unterschied, den es braucht: mehr Licht auf demselben
|
||||
|
||||
@@ -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;
|
||||
@@ -1713,10 +1794,10 @@ body.start > main { position: relative; z-index: 1; }
|
||||
border: 1px solid color-mix(in srgb, var(--rollen-ton) 38%, transparent);
|
||||
}
|
||||
/* Eine Farbe je Rolle -- dieselbe Sprache wie in der Personenliste. */
|
||||
.wer[data-rolle="admin"] { --rollen-ton: #e8c07d; }
|
||||
.wer[data-rolle="manager"] { --rollen-ton: #9085e9; }
|
||||
.wer[data-rolle="scout"] { --rollen-ton: #4fc38f; }
|
||||
.wer[data-rolle="creator"] { --rollen-ton: #3fbdf5; }
|
||||
.wer[data-rolle="admin"] { --rollen-ton: var(--dogi-haupt); }
|
||||
.wer[data-rolle="manager"] { --rollen-ton: var(--manager-haupt); }
|
||||
.wer[data-rolle="scout"] { --rollen-ton: var(--scout-haupt); }
|
||||
.wer[data-rolle="creator"] { --rollen-ton: var(--creator-haupt); }
|
||||
|
||||
/* Auf dem Handy faellt die Rollen-Marke weg und der Name darf schrumpfen.
|
||||
Ohne das schob die neue Kennung die Kopfleiste um 8 px aus dem Bild --
|
||||
@@ -1851,10 +1932,10 @@ body.start > main { position: relative; z-index: 1; }
|
||||
|
||||
/* Dieselben vier Rollentöne wie im Kopf der Seite und auf der
|
||||
Zugangsseite -- eine Rolle hat überall dieselbe Farbe. */
|
||||
.willkommen__plakette[data-rolle="admin"] { --rolle-ton: #d8a13a; }
|
||||
.willkommen__plakette[data-rolle="manager"] { --rolle-ton: #8a76ff; }
|
||||
.willkommen__plakette[data-rolle="scout"] { --rolle-ton: #12a69b; }
|
||||
.willkommen__plakette[data-rolle="creator"] { --rolle-ton: #3fbdf5; }
|
||||
.willkommen__plakette[data-rolle="admin"] { --rolle-ton: var(--dogi-haupt); }
|
||||
.willkommen__plakette[data-rolle="manager"] { --rolle-ton: var(--manager-haupt); }
|
||||
.willkommen__plakette[data-rolle="scout"] { --rolle-ton: var(--scout-haupt); }
|
||||
.willkommen__plakette[data-rolle="creator"] { --rolle-ton: var(--creator-haupt); }
|
||||
|
||||
/* Die Lage in einem Satz, abgesetzt hinter der Rolle. Auf dem Handy
|
||||
rutscht sie in die zweite Zeile, statt den Text zu quetschen. */
|
||||
@@ -2852,10 +2933,10 @@ body.start #protokoll {
|
||||
/* Dieselben vier Rollentöne wie in der Begrüßung, im Seitenkopf und auf
|
||||
der Zugangsseite. Eine Rolle hat überall dieselbe Farbe -- sonst muss
|
||||
man jede Ansicht neu lernen. */
|
||||
.team-karte[data-rolle="admin"] { --k-ton: #d8a13a; }
|
||||
.team-karte[data-rolle="manager"] { --k-ton: #8a76ff; }
|
||||
.team-karte[data-rolle="scout"] { --k-ton: #12a69b; }
|
||||
.team-karte[data-rolle="creator"] { --k-ton: #3fbdf5; }
|
||||
.team-karte[data-rolle="admin"] { --k-ton: var(--dogi-haupt); }
|
||||
.team-karte[data-rolle="manager"] { --k-ton: var(--manager-haupt); }
|
||||
.team-karte[data-rolle="scout"] { --k-ton: var(--scout-haupt); }
|
||||
.team-karte[data-rolle="creator"] { --k-ton: var(--creator-haupt); }
|
||||
/* Die eigene Karte: ein Rand in der eigenen Rollenfarbe. Ohne das sucht
|
||||
man sich zwischen zwanzig Gesichtern selbst. */
|
||||
.team-karte[data-ich="ja"] {
|
||||
|
||||
@@ -25,6 +25,19 @@
|
||||
ziel.textContent = '';
|
||||
ziel.dataset.rolle = ich.rolle || '';
|
||||
|
||||
/* DIE ROLLE AUCH ANS <html> (08.09.2026).
|
||||
|
||||
Damit gilt die Farbe der angemeldeten Rolle fuer die GANZE Seite
|
||||
und nicht nur fuer dieses eine Zeichen -- die Umschaltung steht in
|
||||
gate.css bei `html[data-rolle=...]`.
|
||||
|
||||
Warum am <html> und nicht am <body>: Das <html> steht schon, bevor
|
||||
irgendetwas geladen ist. Und warum ueberhaupt an einem so weit
|
||||
oben liegenden Element: Wer die Farbe an jedem einzelnen Baustein
|
||||
umschaltet, vergisst den naechsten, der dazukommt. Hier erbt alles
|
||||
mit, auch was es heute noch gar nicht gibt. */
|
||||
if (ich.rolle) document.documentElement.dataset.rolle = ich.rolle;
|
||||
|
||||
/* Das eigene Bild, wenn es eines gibt -- sonst der Anfangsbuchstabe.
|
||||
Der Buchstabe bleibt als Unterlage LIEGEN und wird nicht ersetzt:
|
||||
Laedt das Bild nicht (Verbindung weg, Datei geloescht), steht dort
|
||||
|
||||
+145
-27
@@ -37,36 +37,154 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<svg style="display:none" aria-hidden="true"><defs>
|
||||
<!-- Chili fuer Spicy Media -- dasselbe Zeichen wie auf der
|
||||
Anmeldeseite. Zwei Rollen mit derselben Krone waeren genau der
|
||||
Fehler, den die Kacheln schon einmal hatten: Man klickt zweimal
|
||||
falsch, bevor man merkt, dass es zwei verschiedene sind. -->
|
||||
<g id="r-chili"><path class="fuell" d="M13.4 4.6c-.6 1.4-.3 2.6.6 3.4 3 .3 5 2.6 5 5.4 0 3.4-3 6-6.8 6-4.6 0-8.2-2.9-9.7-6.7 3.7.9 6.6-.4 8-3.1.6-1.2.4-2.4-.4-3.1"/><path class="linie" d="M13.4 4.6c1.5-.6 2.8.1 3 1.4"/><path class="linie" d="M13.4 4.6c-.6 1.4-.3 2.6.6 3.4 3 .3 5 2.6 5 5.4 0 3.4-3 6-6.8 6-4.6 0-8.2-2.9-9.7-6.7 3.7.9 6.6-.4 8-3.1.6-1.2.4-2.4-.4-3.1"/></g>
|
||||
<!-- DER HUSKY FUER DOGFATHER (07.09.2026). Filipe: "die krone bei
|
||||
dogfather durch einen husky ersetzen, wie mein logo."
|
||||
<!-- ====================================================================
|
||||
DIE FÜNF ROLLENZEICHEN, plastisch (08.09.2026)
|
||||
|
||||
Bei 22 Pixeln entscheidet die SILHOUETTE, nicht das Detail. Ein
|
||||
Husky erkennt man an dreierlei, und mehr passt auch nicht hinein:
|
||||
den spitzen, aufrecht stehenden Ohren, dem breiten Kopf, der
|
||||
nach unten schmal zulaeuft, und der Gesichtsmaske. Fell, Zunge
|
||||
oder ein zweiter Ton wuerden bei dieser Groesse zu Matsch --
|
||||
genau deshalb hat die Krone davor auch funktioniert.
|
||||
Filipe: "die symbole sollen auch noch viel viel viel realistischer
|
||||
und geiler sein", mit genauen Vorgaben je Rolle:
|
||||
peperoni rot und grün
|
||||
husky silber und blaue Augen
|
||||
manager gelber Stern, der glitzert
|
||||
scout grünes Schild mit einer roten Peperoni darin
|
||||
creator lila und silber, "was richtig geiles"
|
||||
|
||||
`fuell` traegt die Flaeche, `linie` die Zeichnung darauf; beides
|
||||
getrennt, damit die Farbe im CSS unabhaengig vom Umriss gesetzt
|
||||
werden kann. -->
|
||||
<g id="r-husky">
|
||||
<path class="fuell" d="M6.3 4.2 9.6 8.9h4.8l3.3-4.7 1.1 6.2c.5 2.6-.4 5.1-2.4 6.8L12 21.2l-4.4-4c-2-1.7-2.9-4.2-2.4-6.8z"/>
|
||||
<path class="linie" d="M6.3 4.2 9.6 8.9h4.8l3.3-4.7 1.1 6.2c.5 2.6-.4 5.1-2.4 6.8L12 21.2l-4.4-4c-2-1.7-2.9-4.2-2.4-6.8z"/>
|
||||
<path class="linie" d="M9.6 8.9c-.9 1.4-1.4 2.6-1.5 4.1M14.4 8.9c.9 1.4 1.4 2.6 1.5 4.1"/>
|
||||
<circle class="auge" cx="9.5" cy="13.1" r="1.05"/>
|
||||
<circle class="auge" cx="14.5" cy="13.1" r="1.05"/>
|
||||
<path class="nase" d="M12 15.4l1.5 1.1-1.5 1.4-1.5-1.4z"/>
|
||||
WAS SICH GRUNDSÄTZLICH ÄNDERT: Vorher trug jedes Zeichen genau EINE
|
||||
Farbe (`currentColor` über `.fuell`/`.linie`). Damit lässt sich
|
||||
"rot UND grün" nicht darstellen. Jedes Zeichen bekommt deshalb
|
||||
eigene Verläufe — dieselbe Technik, mit der auch die Kacheln
|
||||
plastisch wirken: ein heller Rand oben, die Sättigung in der Mitte,
|
||||
Abdunklung unten. Das ergibt Volumen statt einer flachen Fläche.
|
||||
|
||||
WARUM VERLÄUFE UND KEIN DETAIL: Diese Zeichen stehen bei 22 px.
|
||||
Mehr Linien werden dort zu Matsch — das stand schon beim Husky hier,
|
||||
und es gilt weiter. "Realistischer" heißt bei dieser Größe also
|
||||
nicht "mehr Striche", sondern LICHT: eine Form, auf die Licht fällt,
|
||||
wirkt körperlich; dieselbe Form flach gefüllt wirkt wie ein
|
||||
Aufkleber. Alle Verläufe laufen deshalb von oben nach unten, als
|
||||
stünde das Licht über der Seite — so wie bei allem anderen hier auch.
|
||||
|
||||
Die Verlaufs-IDs sind mit `rs-` vorangestellt (RollenSymbol), damit
|
||||
sie mit nichts kollidieren, was später dazukommt.
|
||||
==================================================================== -->
|
||||
<!-- NICHT `display:none` VERSTECKEN -- das war ein echter Fehler, und man
|
||||
sieht ihn erst im Bild (08.09.2026).
|
||||
|
||||
Solange die Zeichen einfarbig waren (`currentColor` ueber CSS), war
|
||||
`display:none` harmlos. Sobald sie ihre Farbe aus einem <linearGradient>
|
||||
im selben <defs> holen, ist es das nicht mehr: Ein Verlauf in einem
|
||||
Teilbaum, der `display:none` traegt, wird nicht ausgewertet, und ein
|
||||
`<use>` darauf bekommt schlicht KEINE Fuellung. Im Bildschirmfoto
|
||||
standen daraufhin fuenf Bruchstuecke -- nur die Strichlinien, keine
|
||||
Flaechen. Die Zahlen sagten dazu nichts, das Sprite war ja da.
|
||||
|
||||
Richtig ist ein Kasten ohne Groesse: Er wird gerendert (Verlaeufe
|
||||
werden also aufgeloest), nimmt aber keinen Platz ein. -->
|
||||
<svg width="0" height="0" style="position:absolute;overflow:hidden" aria-hidden="true"><defs>
|
||||
|
||||
<linearGradient id="rs-chili-rot" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#ff8a6b"/>
|
||||
<stop offset=".55" stop-color="#ef4136"/>
|
||||
<stop offset="1" stop-color="#a8221c"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="rs-chili-gruen" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#8fd66a"/>
|
||||
<stop offset="1" stop-color="#3f7d33"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="rs-silber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#ffffff"/>
|
||||
<stop offset=".42" stop-color="#cfd8e3"/>
|
||||
<stop offset=".72" stop-color="#93a1b3"/>
|
||||
<stop offset="1" stop-color="#5d6b7d"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="rs-gold" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#fff3b0"/>
|
||||
<stop offset=".45" stop-color="#ffd24a"/>
|
||||
<stop offset="1" stop-color="#c88a12"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="rs-schild" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#7fe0ae"/>
|
||||
<stop offset=".5" stop-color="#3faa78"/>
|
||||
<stop offset="1" stop-color="#1c5e42"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="rs-lila" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#d9c9ff"/>
|
||||
<stop offset=".38" stop-color="#a78bfa"/>
|
||||
<stop offset="1" stop-color="#5b3fa8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="rs-lila-silber" x1="0" y1="1" x2="1" y2="0">
|
||||
<stop offset="0" stop-color="#6d4fc4"/>
|
||||
<stop offset=".5" stop-color="#cbd5e1"/>
|
||||
<stop offset="1" stop-color="#a78bfa"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="rs-auge" cx=".38" cy=".32" r=".85">
|
||||
<stop offset="0" stop-color="#bfe9ff"/>
|
||||
<stop offset=".45" stop-color="#3fa9f5"/>
|
||||
<stop offset="1" stop-color="#0f4c75"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- SPICY MEDIA — die Peperoni, rot mit grünem Stiel.
|
||||
Der Stiel liegt ÜBER der Frucht und ist eine eigene Form: Als
|
||||
Teil desselben Pfades hätte er die Farbe der Frucht erben müssen,
|
||||
und genau das wollte Filipe nicht. -->
|
||||
<g id="r-chili">
|
||||
<path fill="url(#rs-chili-rot)" d="M13.4 4.6c-.6 1.4-.3 2.6.6 3.4 3 .3 5 2.6 5 5.4 0 3.4-3 6-6.8 6-4.6 0-8.2-2.9-9.7-6.7 3.7.9 6.6-.4 8-3.1.6-1.2.4-2.4-.4-3.1"/>
|
||||
<path fill="none" stroke="rgba(255,255,255,.5)" stroke-width=".9" stroke-linecap="round" d="M6.2 13.9c2.4 1.9 5 2.6 7.4 2"/>
|
||||
<path fill="none" stroke="url(#rs-chili-gruen)" stroke-width="1.9" stroke-linecap="round" d="M13.4 4.6c1.5-.6 2.8.1 3 1.4"/>
|
||||
<path fill="none" stroke="url(#rs-chili-gruen)" stroke-width="1.7" stroke-linecap="round" d="M13.4 4.6c-.5 1.2-.3 2.3.5 3.2"/>
|
||||
</g>
|
||||
|
||||
<!-- DOGFATHER — der Husky in Silber, mit blauen Augen.
|
||||
Silhouette unverändert (sie war richtig): spitze Ohren, breiter
|
||||
Kopf, schmal zulaufend. Neu ist das Licht darauf und die Augen,
|
||||
die jetzt aus einem eigenen Radialverlauf kommen — ein blauer
|
||||
Punkt allein sähe aus wie ein Loch, mit Lichtpunkt wirkt er nass. -->
|
||||
<g id="r-husky">
|
||||
<path fill="url(#rs-silber)" d="M6.3 4.2 9.6 8.9h4.8l3.3-4.7 1.1 6.2c.5 2.6-.4 5.1-2.4 6.8L12 21.2l-4.4-4c-2-1.7-2.9-4.2-2.4-6.8z"/>
|
||||
<path fill="rgba(255,255,255,.34)" d="M6.3 4.2 9.6 8.9h2.4V4.9z"/>
|
||||
<path fill="none" stroke="rgba(40,58,78,.55)" stroke-width=".85" stroke-linecap="round" d="M9.6 8.9c-.9 1.4-1.4 2.6-1.5 4.1M14.4 8.9c.9 1.4 1.4 2.6 1.5 4.1"/>
|
||||
<circle fill="url(#rs-auge)" cx="9.5" cy="13.1" r="1.15"/>
|
||||
<circle fill="url(#rs-auge)" cx="14.5" cy="13.1" r="1.15"/>
|
||||
<circle fill="#fff" opacity=".9" cx="9.15" cy="12.75" r=".33"/>
|
||||
<circle fill="#fff" opacity=".9" cx="14.15" cy="12.75" r=".33"/>
|
||||
<path fill="#2b3746" d="M12 15.4l1.5 1.1-1.5 1.4-1.5-1.4z"/>
|
||||
</g>
|
||||
|
||||
<!-- MANAGER — der goldene Stern, der glitzert.
|
||||
Das Funkeln ist ein schmaler heller Streifen, der einmal quer
|
||||
über den Stern wandert. Es ist BEWUSST langsam (4,5 s) und
|
||||
schwach: Ein schnelles Blinken wäre genau die aggressive Optik,
|
||||
die hier nicht sein soll. Bei "weniger Bewegung" steht es still
|
||||
(siehe personen.css) -- dann bleibt ein ruhiger goldener Stern. -->
|
||||
<g id="r-stern">
|
||||
<path fill="url(#rs-gold)" d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/>
|
||||
<path fill="rgba(255,255,255,.45)" d="m12 3.4 2.6 5.6-2.6.7z"/>
|
||||
<path class="rs-funkel" fill="rgba(255,255,255,.75)" d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/>
|
||||
</g>
|
||||
|
||||
<!-- SCOUT — grünes Schild mit einer roten Peperoni darin.
|
||||
Der Haken von früher ist weg: Filipe hat die Peperoni ausdrücklich
|
||||
verlangt, und beides nebeneinander wäre bei 22 px Matsch. Die
|
||||
Chili ist stark vereinfacht — bei dieser Größe zählt nur, dass
|
||||
eine rote, gebogene Form mit grünem Stiel im Schild steht. -->
|
||||
<g id="r-schutz">
|
||||
<path fill="url(#rs-schild)" d="M12 3.4 5.8 5.9v5c0 3.5 2.5 6.7 6.2 8 3.7-1.3 6.2-4.5 6.2-8v-5z"/>
|
||||
<path fill="rgba(255,255,255,.28)" d="M12 3.4 5.8 5.9v5c0 1.4.4 2.7 1.1 3.9L12 3.4z"/>
|
||||
<path fill="url(#rs-chili-rot)" d="M13.6 8.1c-.4.9-.2 1.7.4 2.2 1.9.2 3.2 1.7 3.2 3.4 0 2.1-1.9 3.8-4.3 3.8-2.9 0-5.2-1.8-6.1-4.2 2.3.6 4.2-.3 5-2 .4-.8.3-1.5-.2-2z" transform="translate(-.6 -.9) scale(.92) translate(1 1)"/>
|
||||
<path fill="none" stroke="#8fd66a" stroke-width="1.3" stroke-linecap="round" d="M12.9 7.6c.9-.4 1.7 0 1.8.8"/>
|
||||
</g>
|
||||
|
||||
<!-- CREATOR — Lila und Silber.
|
||||
Statt der alten Person-Silhouette (die aussah wie ein leeres
|
||||
Benutzerbild und damit wie "niemand") jetzt ein geschliffener
|
||||
Kristall: lila Kern, silberne Facetten. Er hat als einziges der
|
||||
fünf Zeichen eine Innenzeichnung, und die trägt auch klein --
|
||||
weil es gerade Kanten sind, keine Rundungen. -->
|
||||
<g id="r-person">
|
||||
<path fill="url(#rs-lila)" d="M12 2.6 20 9l-3 11.4H7L4 9z"/>
|
||||
<path fill="url(#rs-lila-silber)" opacity=".85" d="M12 2.6 20 9h-5.6zM12 2.6 4 9h5.6z"/>
|
||||
<path fill="rgba(255,255,255,.4)" d="M12 2.6 14.4 9H9.6z"/>
|
||||
<path fill="none" stroke="rgba(216,222,233,.75)" stroke-width=".8" stroke-linejoin="round" d="M12 2.6 20 9l-3 11.4H7L4 9zM4 9h16M9.6 9 12 20.4 14.4 9"/>
|
||||
</g>
|
||||
<g id="r-stern"><path class="fuell" d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/><path class="linie" d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/></g>
|
||||
<g id="r-schutz"><path class="fuell" d="M12 3.4 5.8 5.9v5c0 3.5 2.5 6.7 6.2 8 3.7-1.3 6.2-4.5 6.2-8v-5z"/><path class="linie" d="M12 3.4 5.8 5.9v5c0 3.5 2.5 6.7 6.2 8 3.7-1.3 6.2-4.5 6.2-8v-5z"/><path class="linie hell" d="m9.5 11.8 1.8 1.8 3.3-3.5"/></g>
|
||||
<g id="r-person"><circle class="fuell" cx="12" cy="8.4" r="3.6"/><path class="fuell" d="M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7z"/><circle class="linie" cx="12" cy="8.4" r="3.6"/><path class="linie" d="M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7"/></g>
|
||||
</defs></svg>
|
||||
|
||||
<main class="inhalt inhalt--breit">
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
<div class="schleier" aria-hidden="true"></div>
|
||||
|
||||
<header class="kopfleiste">
|
||||
<p class="marke"><span class="marke__text">Dogfather Universe · Creator Workspace</span></p>
|
||||
<p class="marke"><span class="marke__text">Spicy & Dogi · Creator Workspace</span></p>
|
||||
<div class="kopfleiste__rechts">
|
||||
<span class="wer" id="wer">…</span>
|
||||
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
|
||||
@@ -104,9 +104,13 @@
|
||||
Vorbild. Die Rauten sind eigene Elemente und kein Zeichen im
|
||||
Text: Ein ◆ aus der Schriftart sitzt nie auf der Grundlinie
|
||||
und sieht auf jedem Geraet anders aus. -->
|
||||
<!-- "Spicy Media", nicht mehr "Dogfather Universe" (08.09.2026,
|
||||
Wunsch von Filipe). Die Zierzeile nennt den BETRIEB, unter
|
||||
dem das ganze Team arbeitet -- und der heisst Spicy Media.
|
||||
Der Titel darunter ("Die Zentrale") sagt, wo man ist. -->
|
||||
<span class="zmarke">
|
||||
<i class="zraute" aria-hidden="true"></i>
|
||||
Dogfather Universe
|
||||
Spicy Media
|
||||
<i class="zraute" aria-hidden="true"></i>
|
||||
</span>
|
||||
<p class="ztitel" id="ztitel">Die Zentrale</p>
|
||||
|
||||
Reference in New Issue
Block a user