From 6e09c550025149d0ccb44c401c43b7ae32ce18e5 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Mon, 7 Sep 2026 15:22:25 +0200 Subject: [PATCH] Die Symbole hatten nie ihre Farbe -- ein Jahr lang, auf jeder Seite Filipe: "ich will dass die symbole viel krasser, realistischer, farbiger und spezieller sind ... ich meine wirklich alle alle alle symbole auf der ganzen website." DER GRUND WAR KEIN GESCHMACK, SONDERN EIN BAUFEHLER Die Verlaeufe der Zeichen arbeiten mit `currentColor`, damit jedes Zeichen die Farbe SEINER Kachel annimmt. Sie lagen aber alle zusammen in EINEM versteckten SVG am Ende der Seite, und jedes Zeichen verwies nur darauf. `currentColor` in einem Verlaufsstopp wird an dem Element aufgeloest, das den STOPP enthaelt -- also dort, im versteckten SVG, wo die Textfarbe das helle Grau der Seite ist. Jedes Zeichen im ganzen Haus war deshalb grau. Der Farbton kam sauber an der Kachel an (gemessen: rgb(62,149,231) auf der Dashboard-Kachel) und wurde nie benutzt. GEMESSEN, NICHT VERMUTET: Faerbt man das versteckte SVG rot, werden die Zeichen rot (hellster Bildpunkt 43/49/61 -> 46/29/40). Faerbt man das ZEICHEN rot, passiert nichts. Damit war die Frage entschieden. Das Tueckische daran: Es sah nie kaputt aus. Graue Zeichen auf dunklem Grund wirken sauber und zurueckhaltend -- man haelt es fuer eine Entscheidung. Ein Fehler, der wie Gestaltung aussieht, ueberlebt jede Pruefung, die auf Fehlermeldungen achtet. DIE REPARATUR Jedes Zeichen traegt seine Verlaeufe jetzt SELBST, in seinem eigenen SVG und mit eigener Kennung. Damit steht `currentColor` dort, wo es hingehoert. Die Verweise setzt das Skript als Inline-Stil, weil eine Klassenregel die je Zeichen andere Kennung nicht kennen kann -- das Wasserzeichen bekommt keinen, dort setzt das CSS die Farbe ausdruecklich. UND DAS LICHT WURDE UMGEDREHT Weiss stand vorher ueberall: die Deckflaeche begann mit 92 % Weiss, die Kontur war bis 38 % weiss und bei 100 % wieder. Selbst mit richtiger Farbe waere davon wenig uebrig geblieben. Jetzt ist Weiss nur noch da, wo bei einem echten Gegenstand das SPITZLICHT sitzt -- ein schmaler Streifen ganz oben. Darunter traegt die Eigenfarbe, unten kommt Streulicht in einer helleren Tonung statt in Weiss: Licht, das vom Untergrund zurueckkommt, nimmt die Farbe des Gegenstands mit, es bleicht ihn nicht aus. Das Spitzlicht selbst wurde schmal und hart -- ein Schleier ueber zwei Drittel der Flaeche ist kein Spitzlicht, sondern der sicherste Weg, jede Farbe blass zu machen. DAS WASSERZEICHEN Seine Deckkraft von sieben Prozent war ein Wert aus der Zeit, als das Zeichen grau war -- mehr ging nicht, ohne dass es schmutzig aussah. Eine Farbe darf lauter sein als ein Grau, weil sie zur Kachel GEHOERT. Auf 14 Prozent verdoppelt, kraeftigere Linie, und ein leichter Schein darunter fuer Tiefe. 15 Pruefungen gelaufen, alle gruen. Co-Authored-By: Claude Opus 5 --- workspace/assets/css/start.css | 21 +++++- workspace/assets/js/bereiche.js | 115 ++++++++++++++++++++++++++------ workspace/aufgaben.html | 18 ++--- workspace/automation.html | 20 +++--- workspace/bereich.html | 28 ++++---- workspace/calls.html | 22 +++--- workspace/chat.html | 20 +++--- workspace/content.html | 24 +++---- workspace/dateien.html | 20 +++--- workspace/index.html | 4 +- workspace/kalender.html | 22 +++--- workspace/leistung.html | 20 +++--- workspace/personen.html | 20 +++--- workspace/profil.html | 22 +++--- workspace/report.html | 22 +++--- workspace/scouting.html | 20 +++--- workspace/start.html | 18 ++--- workspace/startcheck.html | 22 +++--- workspace/steckbrief.html | 20 +++--- workspace/uebersicht.html | 20 +++--- workspace/wissen.html | 20 +++--- 21 files changed, 303 insertions(+), 215 deletions(-) diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css index 2272362a..5670e8b6 100644 --- a/workspace/assets/css/start.css +++ b/workspace/assets/css/start.css @@ -875,17 +875,32 @@ body.start > main { position: relative; z-index: 1; } position: absolute; right: -14px; bottom: -26px; width: 132px; height: 132px; pointer-events: none; z-index: 0; - opacity: .07; + /* .07 WAR EIN WERT AUS DER ZEIT, ALS DAS ZEICHEN GRAU WAR + (07.09.2026). Ein graues Zeichen bei sieben Prozent auf dunklem + Grund ist ein Hauch -- mehr ging nicht, ohne dass es schmutzig + aussah. Seit die Zeichen ihre eigene Farbe tragen (siehe + bereiche.js), ist das etwas anderes: Eine Farbe darf lauter sein + als ein Grau, weil sie zur Kachel GEHOERT statt sie zu + verschmutzen. Filipe hat genau dieses Wasserzeichen als zweites + Beispiel geschickt. + + Auf .14 verdoppelt und mit einem leichten Schein darunter, damit + es Tiefe bekommt statt nur heller zu werden. */ + opacity: .14; + filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--ton) 45%, transparent)); transform: rotate(-8deg); transition: opacity var(--tempo), transform var(--tempo); } .kachel__wasserzeichen svg { width: 100%; height: 100%; fill: none; stroke: var(--ton); - stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; + /* 1,4 statt 1,1: Bei 132 px Kantenlaenge ist eine Linie von 1,1 + Einheiten im 24er-Raster rund sechs Bildpunkte breit -- sie traegt, + wenn sie kraeftig ist, und franst aus, wenn sie es nicht ist. */ + stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .kachel:hover .kachel__wasserzeichen { - opacity: .13; + opacity: .22; transform: rotate(-8deg) translate(-4px, -4px) scale(1.04); } .kachel[data-gross="ja"] .kachel__wasserzeichen { diff --git a/workspace/assets/js/bereiche.js b/workspace/assets/js/bereiche.js index 4092036b..e1cabb2a 100644 --- a/workspace/assets/js/bereiche.js +++ b/workspace/assets/js/bereiche.js @@ -539,19 +539,45 @@ und der Browser zeichnete den Pfad gar nicht. Genau daran sind am 03.09.2026 die Querlinie im Kalender, die Regler in Technik und die Grundlinie der Berichte verschwunden. */ - function verlaufSicherstellen() { - if (document.getElementById(VERLAUF_ID)) return; - const svg = document.createElementNS(NS, 'svg'); - svg.setAttribute('id', VERLAUF_ID); - svg.setAttribute('aria-hidden', 'true'); - svg.setAttribute('width', '0'); - svg.setAttribute('height', '0'); - svg.style.position = 'absolute'; + /* ===================================================================== + WARUM JEDES ZEICHEN SEINE VERLAEUFE SELBST TRAEGT (07.09.2026) + + Sie lagen bis heute in EINEM versteckten SVG am Ende der Seite, und + alle Zeichen verwiesen darauf. Das ist die uebliche Bauart, spart + Platz -- und sie hat hier ein Jahr lang das Gegenteil von dem + bewirkt, was danebenstand. + + Die Verlaeufe arbeiten mit `currentColor`, damit jedes Zeichen die + Farbe SEINER Kachel annimmt. `currentColor` in einem Verlaufsstopp + wird aber an dem Element aufgeloest, das den STOPP enthaelt -- also + im versteckten SVG am Seitenende, nicht an der Kachel. Dort ist die + Textfarbe das helle Grau der Seite. Jedes Zeichen im ganzen Haus war + deshalb grau, egal welche Farbe seine Kachel hatte. + + GEMESSEN, NICHT VERMUTET: Faerbt man das versteckte SVG rot, werden + die Zeichen rot (hellster Bildpunkt 43/49/61 -> 46/29/40). Faerbt + man das ZEICHEN rot, passiert nichts. Damit war klar, wo die Farbe + wirklich herkam. + + Das Tueckische: Es sah nie kaputt aus. Graue Zeichen auf dunklem + Grund wirken sauber und zurueckhaltend -- man haelt es fuer die + Gestaltung. Filipe hat es als Erster benannt: "ich will dass die + symbole viel krasser, realistischer, farbiger und spezieller sind." + + Jetzt bekommt jedes Zeichen seine eigenen Verlaeufe MIT, in seinem + eigenen SVG und mit eigener Kennung. Damit steht `currentColor` dort, + wo es hingehoert -- im Zeichen selbst, das die Farbe seiner Kachel + erbt. Zwanzig Zeichen je Seite ergeben zwanzig kleine + Verlaufsbloecke; das ist nichts gegen ein Farbsystem, das nicht + wirkt. */ + let zeichenZaehler = 0; + + function verlaufSicherstellen(ziel, endung) { const defs = document.createElementNS(NS, 'defs'); const bauen = (id, stops, x2 = '0', y1 = '2', y2 = '22') => { const lg = document.createElementNS(NS, 'linearGradient'); - lg.setAttribute('id', id); + lg.setAttribute('id', id + endung); lg.setAttribute('gradientUnits', 'userSpaceOnUse'); lg.setAttribute('x1', '0'); lg.setAttribute('y1', y1); lg.setAttribute('x2', x2); lg.setAttribute('y2', y2); @@ -567,10 +593,28 @@ /* Die Deckfläche: oben fast weiss, unten im Farbton. Das ist die Seite, auf die das Licht fällt. */ + /* AM 07.09.2026 AUF FARBE UMGESTELLT. + + Filipe: "ich will dass die symbole viel krasser, realistischer, + farbiger und spezieller sind." + + Der Farbton kam die ganze Zeit richtig an -- gemessen, das Zeichen + der Dashboard-Kachel bekam sauber rgb(62,149,231). Er war nur + nicht zu SEHEN, weil die Verlaeufe fast ueberall Weiss zeigten: + Die Deckflaeche begann mit 92 % Weiss, die Kontur war bis 38 % + weiss und bei 100 % wieder. Uebrig blieb ein graues Zeichen mit + einem Hauch Farbe in der Mitte. + + Weiss ist jetzt nur noch da, wo bei einem echten Gegenstand das + SPITZLICHT sitzt: ein schmaler Streifen ganz oben. Darunter + traegt die Eigenfarbe, unten kommt Streulicht in einer HELLEREN + Tonung statt in Weiss -- Licht, das vom Untergrund zurueckkommt, + nimmt die Farbe des Gegenstands mit, es bleicht ihn nicht aus. */ bauen('zeichen-deck', [ - ['0', '#ffffff', '0.92'], - ['0.4', 'currentColor', '0.95'], - ['1', 'currentColor', '0.72'], + ['0', '#ffffff', '0.88'], + ['0.14', 'currentColor', '1'], + ['0.62', 'currentColor', '0.96'], + ['1', 'currentColor', '0.78'], ]); /* Die Seitenwand: derselbe Ton, deutlich dunkler -- eine Wand, die vom Licht abgewandt ist. */ @@ -609,28 +653,37 @@ das Auge liest sie als Koerper im Raum. */ bauen('zeichen-linie', [ ['0', '#ffffff', '0.98'], - ['0.38', '#ffffff', '0.78'], - ['0.78', 'currentColor', '0.95'], - ['1', '#ffffff', '0.42'], + ['0.11', '#ffffff', '0.62'], + ['0.3', 'currentColor', '1'], + ['0.82', 'currentColor', '1'], + ['1', 'currentColor', '0.62'], ]); /* Die Spiegelung, diagonal von links oben nach rechts unten. */ + /* DAS SPITZLICHT WIRD SCHMAL UND HART. + + Vorher lief es ueber zwei Drittel der Flaeche aus -- das ist kein + Spitzlicht, sondern ein Schleier, und Schleier machen jede Farbe + blass. Ein Spitzlicht auf einer gewoelbten Flaeche ist KLEIN und + hat eine Kante; genau daran erkennt das Auge die Woelbung. */ bauen('zeichen-glanz', [ - ['0', '#ffffff', '0.55'], - ['0.45', '#ffffff', '0.12'], - ['0.7', '#ffffff', '0'], + ['0', '#ffffff', '0.72'], + ['0.16', '#ffffff', '0.3'], + ['0.3', '#ffffff', '0'], ], '18', '0', '20'); - svg.append(defs); - document.body.append(svg); + ziel.append(defs); } function zeichenBauen(name, klasse = 'kachel__svg') { - verlaufSicherstellen(); const svg = document.createElementNS(NS, 'svg'); svg.setAttribute('viewBox', '0 0 24 24'); svg.setAttribute('aria-hidden', 'true'); svg.setAttribute('class', klasse); + /* Eine eigene Kennung je Zeichen -- zwei gleiche Kennungen in einem + Dokument sind ein Verweis ins Nichts fuer das zweite. */ + const endung = '-' + (++zeichenZaehler); + verlaufSicherstellen(svg, endung); /* Erst die Fläche, dann die Linie -- in dieser Reihenfolge liegt die Zeichnung oben. Ein Zeichen ohne Füllung (ältere Einträge, @@ -653,11 +706,25 @@ ['zeichen__tiefe2', 'translate(1 1)'], ['zeichen__tiefe1', 'translate(0.5 0.5)'], ]; + /* WOHIN DIE VERWEISE GEHOEREN: in den Inline-Stil. + + Eine Klassenregel in start.css (`.zeichen__deck { fill: url(...) }`) + wuerde einen Praesentations-Attributwert schlagen, aber nicht den + Inline-Stil. Und sie kann die Kennung nicht kennen, weil die je + Zeichen anders ist. Die Farbe des Wasserzeichens setzt weiterhin + das CSS -- dort steht ausdruecklich `stroke: var(--ton)`, und + darum bekommt es hier keinen Verweis. */ + const wasserzeichen = /wasserzeichen/.test(klasse); + const verweis = (el, eigenschaft, id) => { + if (!wasserzeichen) el.style.setProperty(eigenschaft, `url(#${id}${endung})`); + }; + for (const [klasse, versatz] of tiefen) { if (!umriss.length) break; const g = document.createElementNS(NS, 'g'); g.setAttribute('class', klasse); g.setAttribute('transform', versatz); + if (klasse !== 'zeichen__tiefe3') verweis(g, 'fill', 'zeichen-wand'); for (const d of umriss) { const pfad = document.createElementNS(NS, 'path'); pfad.setAttribute('d', d); @@ -686,10 +753,16 @@ ['zeichen__saum', linien], ['zeichen__linie', linien], ]; + const verlaufZu = { + zeichen__deck: ['fill', 'zeichen-deck'], + zeichen__glanz: ['fill', 'zeichen-glanz'], + zeichen__linie: ['stroke', 'zeichen-linie'], + }; for (const [klasse, pfade] of lagen) { if (!pfade.length) continue; const g = document.createElementNS(NS, 'g'); g.setAttribute('class', klasse); + if (verlaufZu[klasse]) verweis(g, verlaufZu[klasse][0], verlaufZu[klasse][1]); for (const d of pfade) { const pfad = document.createElementNS(NS, 'path'); pfad.setAttribute('d', d); diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html index 62acc03f..c86b393d 100644 --- a/workspace/aufgaben.html +++ b/workspace/aufgaben.html @@ -9,10 +9,10 @@ - - - - + + + + @@ -212,10 +212,10 @@ - - - - - + + + + + diff --git a/workspace/automation.html b/workspace/automation.html index 4b9b3ad3..276aa4d9 100644 --- a/workspace/automation.html +++ b/workspace/automation.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -135,10 +135,10 @@ - - - - - + + + + + diff --git a/workspace/bereich.html b/workspace/bereich.html index b5983b0b..7bbb2112 100644 --- a/workspace/bereich.html +++ b/workspace/bereich.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -144,14 +144,14 @@ - - - - - - - - - + + + + + + + + + diff --git a/workspace/calls.html b/workspace/calls.html index cfb46cf4..821d4f33 100644 --- a/workspace/calls.html +++ b/workspace/calls.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -77,11 +77,11 @@ - - - - - - + + + + + + diff --git a/workspace/chat.html b/workspace/chat.html index 608f489f..77ddad9b 100644 --- a/workspace/chat.html +++ b/workspace/chat.html @@ -9,17 +9,17 @@ - - + + - - - + + + @@ -155,10 +155,10 @@ - - - - - + + + + + diff --git a/workspace/content.html b/workspace/content.html index 7b612ce8..f2fe018c 100644 --- a/workspace/content.html +++ b/workspace/content.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -167,12 +167,12 @@ - - - - - - - + + + + + + + diff --git a/workspace/dateien.html b/workspace/dateien.html index b4b1b514..f2bffc59 100644 --- a/workspace/dateien.html +++ b/workspace/dateien.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -96,10 +96,10 @@ - - - - - + + + + + diff --git a/workspace/index.html b/workspace/index.html index f968c04d..ea2c038f 100644 --- a/workspace/index.html +++ b/workspace/index.html @@ -27,7 +27,7 @@ - + @@ -202,6 +202,6 @@ - + diff --git a/workspace/kalender.html b/workspace/kalender.html index 3c37e179..afd80a92 100644 --- a/workspace/kalender.html +++ b/workspace/kalender.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -258,11 +258,11 @@ - - - - - - + + + + + + diff --git a/workspace/leistung.html b/workspace/leistung.html index 848095ad..b188b63e 100644 --- a/workspace/leistung.html +++ b/workspace/leistung.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -212,10 +212,10 @@ - - - - - + + + + + diff --git a/workspace/personen.html b/workspace/personen.html index 41c8f4b0..4e2a5e78 100644 --- a/workspace/personen.html +++ b/workspace/personen.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -137,10 +137,10 @@ - - - - - + + + + + diff --git a/workspace/profil.html b/workspace/profil.html index ed08861c..ee87f991 100644 --- a/workspace/profil.html +++ b/workspace/profil.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -202,11 +202,11 @@ - - - - - - + + + + + + diff --git a/workspace/report.html b/workspace/report.html index 80e06f50..df5012d9 100644 --- a/workspace/report.html +++ b/workspace/report.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -94,11 +94,11 @@ - - - - - - + + + + + + diff --git a/workspace/scouting.html b/workspace/scouting.html index acdf27e2..f98156ca 100644 --- a/workspace/scouting.html +++ b/workspace/scouting.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -127,10 +127,10 @@ - - - - - + + + + + diff --git a/workspace/start.html b/workspace/start.html index 07204316..98150214 100644 --- a/workspace/start.html +++ b/workspace/start.html @@ -9,12 +9,12 @@ - - + + - - + + @@ -275,10 +275,10 @@

- - - - - + + + + + diff --git a/workspace/startcheck.html b/workspace/startcheck.html index 88990135..2d6b7a75 100644 --- a/workspace/startcheck.html +++ b/workspace/startcheck.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -73,11 +73,11 @@ - - - - - - + + + + + + diff --git a/workspace/steckbrief.html b/workspace/steckbrief.html index 930c97df..bff8ac5b 100644 --- a/workspace/steckbrief.html +++ b/workspace/steckbrief.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -114,10 +114,10 @@ - - - - - + + + + + diff --git a/workspace/uebersicht.html b/workspace/uebersicht.html index 8991ce8e..8b425648 100644 --- a/workspace/uebersicht.html +++ b/workspace/uebersicht.html @@ -9,13 +9,13 @@ - - + + - - - + + + @@ -137,11 +137,11 @@ - + - - - - + + + + diff --git a/workspace/wissen.html b/workspace/wissen.html index f0e92a0d..7f641c98 100644 --- a/workspace/wissen.html +++ b/workspace/wissen.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -178,10 +178,10 @@ - - - - - + + + + +