From 90d5898640a4f2e53f9a1ad537347f9ea61a4be3 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Mon, 7 Sep 2026 13:37:29 +0200 Subject: [PATCH] Drei Stufen auf die Kacheln -- Fase, Rahmung, gefasstes Schild Filipe: "perfektionier alle kacheln die du vorhin gewechselt hast auf der ganzen website, mach sie alle noch geiler und geiler und noch spezieller. sie gehen aber in eine gute richtung schon." Alle drei Stufen sind FORM, keine neue Farbe -- das war die Lehre der letzten Runden. Sie gelten fuer alle 35 Bauteile auf allen 18 Seiten, weil sie in module.css stehen. STUFE 1 -- DIE SCHRAEGE WIRD EINE ECHTE FASE Bisher war die abgeschnittene Ecke ein Loch: Material, das fehlt. Eine gefraeste Fase hat eine FLAECHE, und auf der liegt Schatten, weil sie schraeg zum Licht steht. Ein Innenschatten aus der Richtung der Schraege macht daraus ein bearbeitetes Werkstueck. STUFE 2 -- ECKWINKEL AN DREI ECKEN STATT AN EINER Eine einzelne Ecke liest sich als Verzierung, drei lesen sich als RAHMUNG: Das Auge schliesst sie zu einem Ausschnitt. Die vierte bleibt frei, dort sitzt die Fase -- ein Winkel auf einer abgeschnittenen Ecke zeigte ins Leere. STUFE 3 -- DAS ZEICHEN BEKOMMT EINE METALLFASSUNG Die Plakette war ein abgerundetes Quadrat mit Farbschleier, also dieselbe Form wie ueberall sonst im Netz. Jetzt ist sie ein gefasstes Schild: dieselbe abgeschnittene Ecke wie ihre Karte, ein 2 px breiter Ring aus gebuerstetem Metall, und die Kategoriefarbe INNEN. Damit spricht die Anwendung EINE Materialsprache -- Konsole, Luenette der Uhr und Schild sind dasselbe Metall. ZWEI FEHLER DABEI, BEIDE GEMESSEN STATT VERMUTET * DIE RUNDUNG BLIEB. `.kachel[data-gross="ja"] .kachel__zeichen` setzt in start.css zweimal einen Radius (21 px, 18 px) und ist staerker als eine einzelne Klasse. Gemessen: 18 px, obwohl module.css 0 setzt und zuletzt geladen wird. Heraus kam ein Schild mit abgeschnittener Ecke UND runden Ecken. Das ist heute die dritte Spielart derselben Falle -- `:where()` war zu schwach, `body.start .willkommen` zu stark, hier ist es die Verschachtelung. * DIE FASSUNG WAR ZU GRELL. Fast weiss auf 2 px Breite las sich als Rahmen, der lauter ist als das Zeichen darin. Eine Fassung soll das Schild halten, nicht mit ihm konkurrieren -- dieselben Stopps, eine Blende dunkler. 18 Pruefungen gelaufen, alle gruen, keine mit gesunkener Anzahl. Rechner und Handy (412 px) angesehen. Co-Authored-By: Claude Opus 5 --- workspace/assets/css/module.css | 152 ++++++++++++++++++++++++++++++-- workspace/aufgaben.html | 18 ++-- workspace/automation.html | 20 ++--- workspace/bereich.html | 28 +++--- workspace/calls.html | 22 ++--- workspace/chat.html | 18 ++-- 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 | 18 ++-- workspace/wissen.html | 20 ++--- 20 files changed, 336 insertions(+), 194 deletions(-) diff --git a/workspace/assets/css/module.css b/workspace/assets/css/module.css index 9f556115..7d89ffb2 100644 --- a/workspace/assets/css/module.css +++ b/workspace/assets/css/module.css @@ -94,7 +94,20 @@ clip-path: polygon(var(--fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase)); border-radius: 0; border: 0; - box-shadow: none; + /* STUFE 1: DIE SCHRAEGE WIRD EINE ECHTE FASE. + + Bisher war die abgeschnittene Ecke ein Loch -- Material, das fehlt. + Eine gefraeste Fase ist etwas anderes: Sie hat eine FLAECHE, und + auf der liegt Schatten, weil sie schraeg zum Licht steht. Genau + das macht dieser Innenschatten aus der Richtung der Schraege. Der + Unterschied ist klein zu beschreiben und gross zu sehen: Aus einer + weggeschnittenen Ecke wird ein bearbeitetes Werkstueck. + + `inset` und nicht aussen: Ein aeusserer Schatten liegt hier im + `filter` (siehe unten), weil `clip-path` einen `box-shadow` nach + der Form abschneiden wuerde. Ein INNERER Schatten wird von + derselben Form sauber begrenzt -- er soll ja hineinreichen. */ + box-shadow: inset 7px 7px 14px -10px rgba(0, 0, 0, .95); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)) drop-shadow(0 12px 22px rgba(0, 0, 0, .55)); @@ -132,12 +145,37 @@ position: absolute; inset: 0; pointer-events: none; z-index: 0; + /* STUFE 2: ECKWINKEL AN DREI ECKEN STATT AN EINER. + + Eine einzelne Ecke unten rechts liest sich als Verzierung. Drei + Ecken lesen sich als RAHMUNG -- das Auge schliesst sie zu einem + Ausschnitt, und genau diese Sprache benutzen Peilung, Zielmarke + und Messgeraet. + + Die vierte Ecke bleibt frei, und das ist Absicht: Dort sitzt die + Fase. Ein Winkel auf einer abgeschnittenen Ecke waere ein Winkel, + der ins Leere zeigt. + + Sechs Verlaufsebenen fuer sechs Striche. Jede Ebene ist eine + einfarbige Flaeche, die durch `background-size` auf einen Strich + zusammenschrumpft -- billiger als sechs Elemente im Baum, und sie + wandern beim Groessenwechsel automatisch mit. */ + --winkel: linear-gradient(var(--ton, var(--akzent)), var(--ton, var(--akzent))) no-repeat; background: - linear-gradient(var(--ton, var(--akzent)), var(--ton, var(--akzent))) no-repeat, - linear-gradient(var(--ton, var(--akzent)), var(--ton, var(--akzent))) no-repeat, + var(--winkel), var(--winkel), /* unten rechts */ + var(--winkel), var(--winkel), /* oben rechts */ + var(--winkel), var(--winkel), /* unten links */ var(--raster); - background-size: 18px 1.5px, 1.5px 18px, 26px 26px, 26px 26px; - background-position: right 10px bottom 10px, right 10px bottom 10px, 0 0, 0 0; + background-size: + 18px 1.5px, 1.5px 18px, + 18px 1.5px, 1.5px 18px, + 18px 1.5px, 1.5px 18px, + 26px 26px, 26px 26px; + background-position: + right 10px bottom 10px, right 10px bottom 10px, + right 10px top 10px, right 10px top 10px, + left 10px bottom 10px, left 10px bottom 10px, + 0 0, 0 0; /* .3 war zu laut: Das Raster soll man nicht LESEN, sondern spueren. Bei 26 px Abstand und einem Viertel Deckkraft bleibt der Eindruck "Messgeraet", ohne dass die Linien mit dem Text konkurrieren. */ @@ -212,3 +250,107 @@ display: none; } } + + +/* ===================================================================== + STUFE 3: DAS ZEICHEN BEKOMMT EINE METALLFASSUNG (07.09.2026) + + Filipe: "perfektionier alle kacheln die du vorhin gewechselt hast auf + der ganzen website, mach sie alle noch geiler und geiler und noch + spezieller. sie gehen aber in eine gute richtung schon." + + Die Plakette war ein abgerundetes Quadrat mit einem Farbschleier -- + also dieselbe Form wie ueberall sonst im Netz. Sie wird jetzt zu + einem GEFASSTEN Schild: + + * dieselbe abgeschnittene Ecke wie die Karte, nur kleiner. Ein + Bauteil, das zu seinem Gehaeuse passt. + * ein 2 px breiter Ring aus gebuerstetem Metall -- dieselbe + Handschrift wie die Luenette der Uhr und die Fassung der + Konsole. Damit spricht die ganze Anwendung EINE Materialsprache + statt drei. + * die Farbe der Kategorie liegt INNEN, im Schild, nicht im Ring. + So bleibt der Ring ueberall gleich und das Schild verschieden -- + genau die Aufteilung, die ein Typenschild auf einem Geraet hat. + + Diese Regeln stehen HIER und nicht in start.css: module.css wird + zuletzt geladen und ist der Ort fuer die FORM. In start.css + beschriebe man dieselbe Sache noch einmal an zweiter Stelle, und die + beiden liefen beim naechsten Mal auseinander. + ===================================================================== */ +.kachel__zeichen { + --z-fase: 9px; + position: relative; + border: 0; + border-radius: 0; + padding: 2px; + overflow: visible; + clip-path: polygon( + var(--z-fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--z-fase)); + /* Gebuerstetes Metall, rund gedreht -- rund heisst conic. Die Lehre + von heute Nachmittag: Die Verlaufsart muss zur FORM passen. */ + /* GEDAEMPFT, aber mit demselben Wechsel. Der erste Anlauf war fast + weiss -- auf 2 px Breite las sich das als greller Rahmen, und die + Fassung zog mehr Aufmerksamkeit als das Zeichen darin. Eine + Fassung ist Beiwerk; sie soll das Schild halten, nicht mit ihm + konkurrieren. Also dieselben Stopps, nur eine Blende dunkler -- + der Wechsel hell/dunkel bleibt, und mit ihm das Metall. */ + background: + conic-gradient(from 210deg, + #b9c8da 0deg, #5a6b80 44deg, #d6e2ef 88deg, #44536a 140deg, + #aebdd0 196deg, #64758c 244deg, #cddaea 296deg, #4e5d73 340deg, + #b9c8da 360deg); + box-shadow: + 0 6px 16px -8px rgba(0, 0, 0, .9), + 0 0 0 1px rgba(6, 10, 18, .55); +} +/* Das Schild IM Ring -- hier liegt die Farbe der Kategorie. */ +.kachel__zeichen::before { + content: ""; + position: absolute; inset: 2px; + z-index: 0; + pointer-events: none; + clip-path: polygon( + calc(var(--z-fase) - 2px) 0, 100% 0, 100% 100%, 0 100%, + 0 calc(var(--z-fase) - 2px)); + background: + linear-gradient(150deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .04) 26%, transparent 52%), + radial-gradient(120% 100% at 22% 8%, + color-mix(in srgb, var(--ton, var(--akzent)) 58%, transparent) 0%, + color-mix(in srgb, var(--ton, var(--akzent)) 26%, transparent) 48%, + color-mix(in srgb, var(--ton, var(--akzent)) 10%, transparent) 100%), + linear-gradient(#0a0f18, #0a0f18); +} +/* Beim Anfassen hebt sich das Schild leicht -- kein Leuchten, nur + Naehe. Dieselbe Sprache wie bei der Karte selbst. */ +.kachel:hover .kachel__zeichen { + transform: translateY(-1px); + border-color: transparent; + box-shadow: + 0 10px 22px -9px rgba(0, 0, 0, .95), + 0 0 0 1px rgba(6, 10, 18, .55), + 0 0 14px -4px color-mix(in srgb, var(--ton, var(--akzent)) 55%, transparent); +} +/* DIE GROSSE KACHEL FUEHRT IHRE EIGENE RUNDUNG -- zweimal sogar + (start.css, 21 px und 18 px), und beide sind mit `.kachel[…] .x` + staerker als eine einzelne Klasse. Gemessen: `border-radius: 18px`, + obwohl module.css `0` setzt und zuletzt geladen wird. Die Fase kam + durch (die setzt sonst niemand), die Rundung blieb -- heraus kam ein + Schild mit abgeschnittener Ecke UND runden Ecken. + + Dieselbe Falle wie heute schon zweimal: `:where()` war zu schwach, + `body.start .willkommen` zu stark, und hier ist es die Verschachtelung. + Deshalb steht die Antwort hier mit derselben Gewichtung wie die + Rundung, die sie ersetzt. */ +.kachel[data-gross="ja"] .kachel__zeichen, +.kachel .kachel__zeichen { + --z-fase: 11px; + border-radius: 0; +} + +@media (forced-colors: active) { + /* Im Kontrastmodus zaehlt die Kante. Die Fase bleibt -- sie ist + Geometrie, keine Farbe. */ + .kachel__zeichen { background: Canvas; border: 1px solid CanvasText; box-shadow: none; } + .kachel__zeichen::before { display: none; } +} diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html index 78ad5931..4075a7a7 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 a433d6b0..8d1febc8 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 fac97f15..4c9ec936 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 338dea8a..59e5be56 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 9abf069a..a6c3a095 100644 --- a/workspace/chat.html +++ b/workspace/chat.html @@ -9,17 +9,17 @@ - - + + - - - + + + @@ -155,9 +155,9 @@ - - - - + + + + diff --git a/workspace/content.html b/workspace/content.html index 173a2065..830fa757 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 da8db37b..727260f6 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 aa45fbf6..9a427ff6 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 9e1b60e1..1016ab73 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 023b83bd..fa506846 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 857eba14..0bd7da92 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 3640697f..9258e326 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 76d33e36..45e9c5cd 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 64f83543..01717b44 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 40fbfd78..7a627b19 100644 --- a/workspace/start.html +++ b/workspace/start.html @@ -9,12 +9,12 @@ - - + + - - + + @@ -264,10 +264,10 @@

- - - - - + + + + + diff --git a/workspace/startcheck.html b/workspace/startcheck.html index 2b3c4716..7decd43e 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 60e3256d..0c141057 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 a3d72c9c..441b06cb 100644 --- a/workspace/uebersicht.html +++ b/workspace/uebersicht.html @@ -9,13 +9,13 @@ - - + + - - - + + + @@ -137,10 +137,10 @@ - + - - - + + + diff --git a/workspace/wissen.html b/workspace/wissen.html index 3a36a683..672b88d4 100644 --- a/workspace/wissen.html +++ b/workspace/wissen.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -178,10 +178,10 @@ - - - - - + + + + +