From 3b356d6eefc3e18f429ead647549d47ff14f090a Mon Sep 17 00:00:00 2001 From: Dogfather Date: Mon, 7 Sep 2026 05:14:01 +0200 Subject: [PATCH] Ein Material fuer die ganze Website -- und die Uhr wird zum Chronographen DIE UHR: Sekunde nach AUSSEN, Minute in die Mitte, Stunde nach innen (Wunsch Filipe). Das ist die Anordnung eines Chronographen und nicht die eines Fortschrittsbalkens: Der schnellste Zeiger laeuft auf der laengsten Bahn, weil man Bewegung dort am besten sieht -- der langsamste innen, wo eine kleine Drehung viel bedeutet. Die drei Umfaenge sind mitgewandert; ein vertauschter Ring ohne vertauschte Zahlen endet nie dort, wo er soll. EIN MATERIAL FUER ALLE SEITEN. Die Startseite hatte seit heute beleuchtete Platten, die anderen sechzehn Seiten flache Rechtecke -- man wechselte die Seite und fiel aus einer Oberflaeche in eine andere. Ich habe das bisher Seite fuer Seite nachgezogen, und genau deshalb war es nie fertig: Es sind FUENFUNDVIERZIG Stellen. Jetzt EINE Regel. Die Klassenliste ist nicht erfunden, sondern gemessen -- es sind genau die, die `var(--flaeche)` als Kartenflaeche benutzen. `:where()` ist der Kniff dabei: Spezifitaet null, also ueberschreibt die Regel nichts, was eine Seite selbst festlegt. Eine Warnkarte bleibt rot, eine Spalte behaelt ihre Statusfarbe. Ohne das haette ich an dreissig Stellen `!important` gebraucht. DREI FUNDE DER PRUEFUNGEN, alle berechtigt: 1. `.profil-gruppe` gibt es nicht -- ich hatte den Namen aus dem Kopf geschrieben statt aus der Datei. pruef-struktur meldete totes CSS. Die Karten auf profil.html heissen `.gruppe`, und genau der Name darf NICHT in die Liste: Auf der Startseite heissen die Kachelgruppen ebenso und haetten ploetzlich eine Kartenflaeche. 2. Der erste Verlauf war HELLER als das, was er ersetzt. Ein Material, das die ganze Website aufhellt, hellt auch jeden Text darauf auf -- und das faellt an der leisesten Schrift zuerst auf. 3. `.gruppe__unter` stand auf 4,21:1. Und das ist der interessante Fall: Die Farbe war nicht schuld, eine VERSCHIEBUNG war es. Mit der fuenften Rolle rutschte auf personen.html alles eine Zeile nach unten, und die Zeile landete auf einer helleren Stelle des Buehnenbilds. Sie ist die einzige Beschriftung ohne Karte -- ein Text, dessen Untergrund ein FOTO ist, bekommt nicht den leisesten Ton. Jetzt 5,51:1. Der zweite Fund fiel nur auf, weil die Zahl sich nach meiner ersten Korrektur KEIN Stueck bewegte (zweimal exakt 4,21) -- dasselbe Zeichen wie schon zweimal heute: falsche Stelle, nicht zu wenig. Gruen: buehne (38), css-klassen (15), struktur (32), handy (59), breiten (23), start-ansicht (136), lesbarkeit (14), tempo (8), personen-liste (33). Co-Authored-By: Claude Opus 5 --- workspace/assets/css/heim.css | 37 ++++--- workspace/assets/css/start.css | 182 ++++++++++++++++++++++++++++++++- workspace/assets/js/start.js | 2 +- workspace/aufgaben.html | 16 +-- workspace/automation.html | 18 ++-- workspace/bereich.html | 26 ++--- workspace/calls.html | 20 ++-- workspace/chat.html | 16 +-- workspace/content.html | 22 ++-- workspace/dateien.html | 18 ++-- workspace/index.html | 4 +- workspace/kalender.html | 20 ++-- workspace/leistung.html | 18 ++-- workspace/personen.html | 18 ++-- workspace/profil.html | 20 ++-- workspace/report.html | 20 ++-- workspace/scouting.html | 18 ++-- workspace/start.html | 32 ++++-- workspace/startcheck.html | 20 ++-- workspace/steckbrief.html | 18 ++-- workspace/uebersicht.html | 16 +-- workspace/wissen.html | 18 ++-- 22 files changed, 390 insertions(+), 189 deletions(-) diff --git a/workspace/assets/css/heim.css b/workspace/assets/css/heim.css index 9fe067cf..9f39577f 100644 --- a/workspace/assets/css/heim.css +++ b/workspace/assets/css/heim.css @@ -277,27 +277,38 @@ } .uhr__bahn { stroke: rgba(150, 186, 220, .09); stroke-width: 3; } -/* AUSSEN: die Stunde in Schwarzsilber. Am breitesten und am ruhigsten -- - sie bewegt sich in fuenf Minuten um ein halbes Grad. */ -.uhr__stunde { - stroke: url(#uhr-silber); - stroke-width: 3.4; - stroke-dasharray: 285.88; +/* AUSSEN: die SEKUNDE in Rot, auf der laengsten Bahn (07.09.2026 + gedreht, Wunsch Filipe: "die minuten in der mitte und sekunden + aussen"). + + Das ist die Anordnung eines Chronographen und nicht die eines + Fortschrittsbalkens: Der schnellste Zeiger laeuft aussen, weil man + Bewegung dort am besten sieht -- und der langsamste innen, wo eine + kleine Drehung schon viel bedeutet. + + DIE ZAHLEN GEHOEREN ZUM RADIUS. Ein vertauschter Ring ohne + vertauschte Umfaenge sieht aus wie eine haengende Uhr: Der Bogen + endet dann nie dort, wo er soll. U = 2 * pi * r, ausgerechnet und + nicht geschaetzt. */ +.uhr__sekunde { + stroke: url(#uhr-rot); + stroke-width: 2.6; + stroke-dasharray: 285.88; /* r = 45.5 */ stroke-dashoffset: 285.88; } /* MITTE: die Minute in Blau. */ .uhr__minute { stroke: url(#uhr-blau); stroke-width: 3; - stroke-dasharray: 241.90; + stroke-dasharray: 241.90; /* r = 38.5 */ stroke-dashoffset: 241.90; } -/* INNEN: die Sekunde in Rot. Am duennsten -- sie laeuft am schnellsten, - und eine schnelle dicke Linie wird unruhig. */ -.uhr__sekunde { - stroke: url(#uhr-rot); - stroke-width: 2.4; - stroke-dasharray: 197.92; +/* INNEN: die STUNDE in Schwarzsilber. Am breitesten und am ruhigsten -- + sie bewegt sich in fuenf Minuten um ein halbes Grad. */ +.uhr__stunde { + stroke: url(#uhr-silber); + stroke-width: 3.6; + stroke-dasharray: 197.92; /* r = 31.5 */ stroke-dashoffset: 197.92; } diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css index 08f83d7a..bb593aeb 100644 --- a/workspace/assets/css/start.css +++ b/workspace/assets/css/start.css @@ -749,7 +749,22 @@ body.start > main { position: relative; z-index: 1; } margin: 0; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); } -.gruppe__unter { font-size: .78rem; color: var(--text-still); } +/* --text-leise (#94a5bb) statt --text-still (#7f8fa6), 07.09.2026. + + Diese Zeile steht als einzige Beschriftung OHNE Karte direkt auf dem + Buehnenbild. Solange die Gruppen dort standen, wo das Bild dunkel + ist, ging der leiseste Ton gut. Mit der fuenften Rolle (Spicy Media) + rutschte auf personen.html alles eine Zeile nach unten -- und die + DogFather-Beschreibung landete auf rgb(46, 44, 47): 4,21:1 statt der + noetigen 4,5. + + Der Ausloeser war also nicht die Farbe, sondern eine Verschiebung. + Genau deshalb bekommt ein Text, dessen Untergrund ein FOTO ist, nicht + den leisesten Ton: Was heute passt, passt nach der naechsten + eingefuegten Zeile nicht mehr. Jetzt 5,5:1 -- mit Luft. + + Gemessen von pruef-buehne an echten Bildpunkten. */ +.gruppe__unter { font-size: .78rem; color: var(--text-leise); } .kacheln { list-style: none; margin: 0; padding: 0; @@ -4533,3 +4548,168 @@ body[data-fremde-sicht="ja"]::after { overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .glocke--kachel .glocke__zeichen { width: 20px; height: 20px; } + + +/* ===================================================================== + EIN MATERIAL FÜR DIE GANZE WEBSITE (07.09.2026) + + Filipe: "ICH WILL DASS DU DIE KACHELN DER KOMPLETTEN WEBSITE KOMPLETT + VERÄNDERST ... SEHR HOCHWERTIG UND EPISCH ... EINE EINZIGARTIGE + WEBSITE ... PERFEKT AUF DEM PC UND AUF DEM HANDY." + + --------------------------------------------------------------------- + WARUM DAS BISHER NICHT GEKLAPPT HAT + + Die Startseite hat seit heute ein Material -- beleuchtete Platte, + Lichtkante, Schatten, Körnung. Die anderen sechzehn Seiten hatten + weiterhin `background: var(--flaeche)` und einen Rand: flache + Rechtecke. Man wechselte die Seite und fiel aus einer Oberfläche in + eine andere. + + Ich habe das bisher Seite für Seite nachgezogen -- und genau deshalb + war es nie fertig. Bei fünfundvierzig Stellen ist das kein Weg. + + --------------------------------------------------------------------- + EINE STELLE, NICHT FÜNFUNDVIERZIG + + Die Liste unten ist nicht erfunden, sie ist GEMESSEN: Es sind genau + die Klassen, die in den siebzehn Stildateien `var(--flaeche)` als + Kartenfläche benutzen. Wer eine neue Karte baut und diesen Token + nimmt, gehört dazu -- und sollte hier eingetragen werden. + + `:where()` ist der entscheidende Kniff: Es hat SPEZIFITÄT NULL. + Dadurch überschreibt diese Regel nichts, was eine Seite selbst + festlegt -- eine Warnkarte bleibt rot, eine Spalte behält ihre + Statusfarbe, die Kacheln der Startseite ihre eigene Form. Sie legt nur + den Boden, auf dem alle stehen. Ohne `:where()` müsste ich an + dreißig Stellen `!important` schreiben oder Reihenfolgen sortieren -- + beides Wege, die beim nächsten Umbau kippen. + + --------------------------------------------------------------------- + WAS DAS MATERIAL AUSMACHT + + GEWICHT Zwei Schatten: ein enger, dunkler direkt darunter und + ein weiter, weicher. Ein einzelner sieht immer nach + Aufkleber aus. + MATERIALSTÄRKE Licht oben, Schatten unten -- beide innen. Nur die + obere Kante ergibt einen aufgeklebten Strich; erst + beide zusammen ergeben ein Blech. + TIEFE Ein Verlauf von oben nach unten. Eine einfarbige + Fläche ist Papier. + KÖRNUNG Auf einer eigenen Ebene mit `overlay` und 3 % -- + genau der Fehler, den ich heute zweimal gemacht habe: + Körnung auf derselben Ebene wie ein Glanz erbt dessen + Deckkraft und wird zum grauen Schleier. + + AUF DEM HANDY DASSELBE MATERIAL, nur flacher: Schatten kosten dort + Rechenzeit und bringen wenig, weil ohnehin nichts nebeneinander liegt. + ===================================================================== */ + +:where( + .eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand, + .ki-kasten, .hinweis, .k-ansicht, .k-serie, .k-abo, .k-listentag, + .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .schulung__neu, + .nachricht, .creator, .summe, .wert, .pdf, .pdf-ablage, .suchleiste, + .person, .kk, .fortschritt, .punkt, .nur-lesen, .todo-liste li, + .unterweisung, .warnkarte + /* `.profil-gruppe` stand hier und existiert nirgends -- ich hatte den + Namen aus dem Kopf geschrieben statt aus der Datei. pruef-struktur + hat es als totes CSS gemeldet. Die Karten auf profil.html heissen + `.gruppe`, und genau dieser Name gehoert NICHT in diese Liste: Auf + der Startseite heissen die Kachelgruppen ebenso, und die haetten + dann ploetzlich eine Kartenflaeche. Zwei Dinge mit demselben + Klassennamen sind der Grund, warum man solche Listen misst statt + sie zu raten. */ +) { + position: relative; + /* DUNKLER ALS DER ERSTE ANLAUF (07.09.2026, gemessen). + + Zuerst stand hier rgba(26, 34, 49, .92) -- heller als das + `var(--flaeche)`, das ersetzt wurde. Auf personen.html landete die + Rollenbeschreibung damit auf rgb(46, 44, 47) und kam auf 4,21:1 + statt der noetigen 4,5. Ein Material, das die ganze Website + aufhellt, hellt auch jeden Text darauf auf -- und das faellt an der + leisesten Schrift zuerst auf, nicht an der lautesten. + + Jetzt derselbe Verlauf wie bei den Kacheln, die gemessen bestehen. */ + background: + linear-gradient(168deg, + rgba(20, 27, 40, .94) 0%, + rgba(11, 15, 24, .95) 62%, + rgba(8, 11, 18, .95) 100%); + border: 1px solid rgba(150, 186, 220, .12); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, .075), + inset 0 -1px 0 rgba(0, 0, 0, .42), + 0 2px 4px -2px rgba(0, 0, 0, .5), + 0 12px 28px -18px rgba(0, 0, 0, .85); +} + +/* Die Körnung. Eigene Ebene, `overlay`, 3 % -- und `pointer-events: + none`, sonst läge eine unsichtbare Fläche über jedem Knopf in jeder + Karte der ganzen Website. */ +:where( + .eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand, + .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, + .call-raum, .creator, .summe, .pdf, .person, .kk, .unterweisung +)::after { + content: ""; + position: absolute; inset: 0; + pointer-events: none; + border-radius: inherit; + background-image: var(--koernung); + background-size: 140px 140px; + opacity: .03; + mix-blend-mode: overlay; + z-index: 0; +} + +/* Karten, die man anklickt, kommen beim Zeigen NÄHER -- sie werden + nicht heller. So verhält sich ein Gegenstand, den man anhebt, und + deshalb wirkt es echt, ohne dass etwas blinkt. */ +:where(a, button):where(.datei, .pdf, .creator, .person, .kk, .call):hover, +:where(.datei, .pdf, .creator, .person, .kk):hover { + transform: translateY(-2px); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, .10), + inset 0 -1px 0 rgba(0, 0, 0, .42), + 0 4px 9px -4px rgba(0, 0, 0, .55), + 0 18px 36px -20px rgba(0, 0, 0, .9); +} +:where(.datei, .pdf, .creator, .person, .kk) { + transition: transform var(--tempo), box-shadow var(--tempo), border-color var(--tempo); +} + +@media (max-width: 620px) { + /* Flacher auf dem Handy: Nebeneinander liegt dort ohnehin nichts, und + große weiche Schatten kosten bei jedem Scrollen Rechenzeit. Das + Material bleibt -- nur seine Höhe über dem Grund sinkt. */ + :where( + .eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand, + .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, + .call-raum, .creator, .summe, .pdf, .person, .kk, .unterweisung + ) { + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, .07), + inset 0 -1px 0 rgba(0, 0, 0, .4), + 0 4px 12px -8px rgba(0, 0, 0, .8); + } +} + +@media (prefers-reduced-motion: reduce) { + :where(.datei, .pdf, .creator, .person, .kk):hover { transform: none; } +} +@media (forced-colors: active) { + /* Im Kontrastmodus zählt ausschließlich die Kante. Verläufe, Schatten + und Körnung sind dort nicht nur wirkungslos, sondern schädlich. */ + :where( + .eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand, + .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, + .call-raum, .creator, .summe, .pdf, .person, .kk, .unterweisung + ) { background: Canvas; box-shadow: none; border: 1px solid CanvasText; } + :where( + .eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand, + .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, + .call-raum, .creator, .summe, .pdf, .person, .kk, .unterweisung + )::after { display: none; } +} diff --git a/workspace/assets/js/start.js b/workspace/assets/js/start.js index 120d5bdf..07510aac 100644 --- a/workspace/assets/js/start.js +++ b/workspace/assets/js/start.js @@ -356,7 +356,7 @@ /* Drei Umfaenge, ausgerechnet und nicht als Formel im Stil: Aendert jemand einen Radius im HTML, faellt der Ring sofort auf, statt sich stillschweigend zu verrechnen. U = 2 * pi * r */ - const UMFANG = { stunde: 285.88, minute: 241.90, sekunde: 197.92 }; // r = 45.5 / 38.5 / 31.5 + const UMFANG = { sekunde: 285.88, minute: 241.90, stunde: 197.92 }; // r = 45.5 / 38.5 / 31.5 function uhrStarten() { const zeit = $('uhr-zeit'), sek = $('uhr-sek'); diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html index 0cdfa329..47b8d912 100644 --- a/workspace/aufgaben.html +++ b/workspace/aufgaben.html @@ -9,9 +9,9 @@ - - - + + + @@ -211,10 +211,10 @@ - - - - - + + + + + diff --git a/workspace/automation.html b/workspace/automation.html index c1f29f30..65bbdeef 100644 --- a/workspace/automation.html +++ b/workspace/automation.html @@ -9,10 +9,10 @@ - - - - + + + + @@ -134,10 +134,10 @@ - - - - - + + + + + diff --git a/workspace/bereich.html b/workspace/bereich.html index e7a0401c..1a977043 100644 --- a/workspace/bereich.html +++ b/workspace/bereich.html @@ -9,10 +9,10 @@ - - - - + + + + @@ -143,14 +143,14 @@ - - - - - - - - - + + + + + + + + + diff --git a/workspace/calls.html b/workspace/calls.html index 36b9b1c7..0ba53aeb 100644 --- a/workspace/calls.html +++ b/workspace/calls.html @@ -9,10 +9,10 @@ - - - - + + + + @@ -76,11 +76,11 @@ - - - - - - + + + + + + diff --git a/workspace/chat.html b/workspace/chat.html index dc6e5134..957aad5c 100644 --- a/workspace/chat.html +++ b/workspace/chat.html @@ -9,16 +9,16 @@ - - + + - - + + @@ -154,9 +154,9 @@ - - - - + + + + diff --git a/workspace/content.html b/workspace/content.html index f8627b9d..551d8ffc 100644 --- a/workspace/content.html +++ b/workspace/content.html @@ -9,10 +9,10 @@ - - - - + + + + @@ -166,12 +166,12 @@ - - - - - - - + + + + + + + diff --git a/workspace/dateien.html b/workspace/dateien.html index 93babda8..d015b560 100644 --- a/workspace/dateien.html +++ b/workspace/dateien.html @@ -9,10 +9,10 @@ - - - - + + + + @@ -95,10 +95,10 @@ - - - - - + + + + + diff --git a/workspace/index.html b/workspace/index.html index 349d1b9e..e8084196 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 8941b870..a67c843e 100644 --- a/workspace/kalender.html +++ b/workspace/kalender.html @@ -9,10 +9,10 @@ - - - - + + + + @@ -257,11 +257,11 @@ - - - - - - + + + + + + diff --git a/workspace/leistung.html b/workspace/leistung.html index 0a4cc795..b48f01e9 100644 --- a/workspace/leistung.html +++ b/workspace/leistung.html @@ -9,10 +9,10 @@ - - - - + + + + @@ -211,10 +211,10 @@ - - - - - + + + + + diff --git a/workspace/personen.html b/workspace/personen.html index 3f9d90de..c10683ef 100644 --- a/workspace/personen.html +++ b/workspace/personen.html @@ -9,10 +9,10 @@ - - - - + + + + @@ -128,10 +128,10 @@ - - - - - + + + + + diff --git a/workspace/profil.html b/workspace/profil.html index 14931a6b..f8585e77 100644 --- a/workspace/profil.html +++ b/workspace/profil.html @@ -9,10 +9,10 @@ - - - - + + + + @@ -201,11 +201,11 @@ - - - - - - + + + + + + diff --git a/workspace/report.html b/workspace/report.html index 34e08558..c54ee817 100644 --- a/workspace/report.html +++ b/workspace/report.html @@ -9,10 +9,10 @@ - - - - + + + + @@ -93,11 +93,11 @@ - - - - - - + + + + + + diff --git a/workspace/scouting.html b/workspace/scouting.html index 161d9a62..bc7835cf 100644 --- a/workspace/scouting.html +++ b/workspace/scouting.html @@ -9,10 +9,10 @@ - - - - + + + + @@ -126,10 +126,10 @@ - - - - - + + + + + diff --git a/workspace/start.html b/workspace/start.html index 7b8444d2..29d66f9c 100644 --- a/workspace/start.html +++ b/workspace/start.html @@ -9,11 +9,11 @@ - - + + - + @@ -132,9 +132,19 @@ - - - + + + + @@ -253,10 +263,10 @@

- - - - - + + + + + diff --git a/workspace/startcheck.html b/workspace/startcheck.html index bec20140..e2b826ff 100644 --- a/workspace/startcheck.html +++ b/workspace/startcheck.html @@ -9,10 +9,10 @@ - - - - + + + + @@ -72,11 +72,11 @@ - - - - - - + + + + + + diff --git a/workspace/steckbrief.html b/workspace/steckbrief.html index 207d40ec..7e40e25d 100644 --- a/workspace/steckbrief.html +++ b/workspace/steckbrief.html @@ -9,10 +9,10 @@ - - - - + + + + @@ -113,10 +113,10 @@ - - - - - + + + + + diff --git a/workspace/uebersicht.html b/workspace/uebersicht.html index 19f7b182..ccc062a0 100644 --- a/workspace/uebersicht.html +++ b/workspace/uebersicht.html @@ -9,12 +9,12 @@ - - + + - - + + @@ -136,10 +136,10 @@ - + - - - + + + diff --git a/workspace/wissen.html b/workspace/wissen.html index c95f5014..f795c81e 100644 --- a/workspace/wissen.html +++ b/workspace/wissen.html @@ -9,10 +9,10 @@ - - - - + + + + @@ -177,10 +177,10 @@ - - - - - + + + + +