From 4c0f41762edbc0edf6c55bcdf6a413f490da42d8 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Wed, 9 Sep 2026 00:41:24 +0200 Subject: [PATCH] screen18, zweite Haelfte: Die Tagesfelder werden Tasten in einer Platte Filipe: "...und die kacheln vom kalender selber sollen viel krasser und geiler aussehen bitte." Die dunklen Fugen zwischen den Tagen waren die eine Haelfte des Wunsches und stehen seit dem 08.09. Die andere Haelfte sind die Felder SELBST: flache Rechtecke in drei Grautoenen. Eine gefraeste Platte mit Fugen, in der flache Flaechen liegen, ist halb fertig -- die Fuge sagt "Werkstueck", die Flaeche sagt "Tabelle". ZWEI PIXEL MACHEN DEN UNTERSCHIED: eine Lichtkante oben, eine Schattenkante unten. Dieselbe Rechnung wie ueberall im Haus -- Licht faellt von oben, also ist die obere Kante hell und die untere dunkel. Aus einer Flaeche wird ein Koerper, der in der Platte SITZT. Kein zusaetzliches Element, keine Groessenaenderung, kein Umbruch. DER WOCHENENDUNTERSCHIED WAR MESSBAR ZU KLEIN -- und das ist der eigentliche Fund. Werktag lag bei `rgba(11,15,25,.74)`, Wochenende bei `rgba(9,12,20,.8)`. Auf dem Bildschirm sind die beiden Spalten nicht auseinanderzuhalten. Die Angabe war also da und wirkungslos, und das ist die unangenehmste Sorte Fehler: Sie sieht im Quelltext nach einer Funktion aus, und niemand vermisst, was scheinbar existiert. Jetzt liegt das Wochenende sichtbar tiefer und etwas kuehler. Man sieht den Wochenrhythmus, ohne die Spaltenkoepfe zu lesen -- das ist keine Zierde, sondern die Information, wegen der ein Kalender ueberhaupt in Wochen gegliedert ist. HEUTE BLEIBT DAS LAUTESTE FELD, und das war die Bedingung fuer alles andere: Wenn jedes Feld eine Kante bekommt, muss das eine, auf das es ankommt, weiter herausstechen. Voller Ring plus ein leiser Schein nach innen. AUGENSCHONEND: Alle Werte unter 8 Prozent Deckkraft. Auf sechs mal sieben Feldern summiert sich jede Helligkeit -- was auf einer Kachel dezent ist, ist auf 42 Kacheln ein Raster. Geprueft: pruef-kalender, pruef-buehne (kalender.html schlechtester Kontrast 5,58:1 bei noetigen 4,5:1, 13 Stellen gemessen), pruef-css-klassen -- alle in Ordnung. Co-Authored-By: Claude Opus 5 --- workspace/assets/css/kalender.css | 78 +++++++++++++++++++++++++++++++ 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 ++++---- 20 files changed, 269 insertions(+), 191 deletions(-) diff --git a/workspace/assets/css/kalender.css b/workspace/assets/css/kalender.css index bb673b62..7e134eb9 100644 --- a/workspace/assets/css/kalender.css +++ b/workspace/assets/css/kalender.css @@ -1266,3 +1266,81 @@ sonst steht die Kachel unten leer. */ .k-anlasskachel > .k-leiste { margin-bottom: 18px; } .k-anlasskachel > .k-leiste:last-of-type { margin-bottom: 12px; } + +/* ===================================================================== + DIE TAGESFELDER SIND TASTEN IN EINER PLATTE (screen18, 09.09.2026) + + Filipe: "...und die kacheln vom kalender selber sollen viel krasser + und geiler aussehen bitte." + + Die dunklen Fugen zwischen den Tagen waren die eine Haelfte seines + Wunsches und sind seit dem 08.09. gebaut (siehe weiter oben). Die + andere Haelfte sind die Felder SELBST: Sie waren flache Rechtecke in + drei Grautoenen. Eine gefraeste Platte mit Fugen, in der flache + Flaechen liegen, ist halb fertig -- die Fuge sagt "Werkstueck", die + Flaeche sagt "Tabelle". + + ZWEI PIXEL MACHEN DEN UNTERSCHIED: eine Lichtkante oben, eine + Schattenkante unten. Das ist dieselbe Rechnung wie ueberall in + diesem Haus -- Licht faellt von oben, also ist die obere Kante hell + und die untere dunkel. Aus einer Flaeche wird damit ein Koerper, der + in der Platte SITZT. Kein zusaetzliches Element, keine Groesse, kein + Umbruch: nur zwei innere Schatten. + + DER WOCHENENDUNTERSCHIED WAR MESSBAR ZU KLEIN. Werktag lag bei + `rgba(11,15,25,.74)`, Wochenende bei `rgba(9,12,20,.8)` -- auf dem + Bildschirmfoto sind die beiden Spalten nicht auseinanderzuhalten. + Damit war die Angabe zwar da, aber wirkungslos, und das ist die + unangenehmste Sorte: Sie sieht im Quelltext nach einer Funktion aus. + Jetzt liegt das Wochenende sichtbar tiefer und etwas kuehler -- man + sieht den Wochenrhythmus, ohne die Spaltenkoepfe zu lesen. Das ist + keine Zierde, das ist die Information, wegen der ein Kalender in + Wochen gegliedert ist. + + HEUTE BLEIBT DAS LAUTESTE FELD, und das war die Bedingung fuer alles + andere: Wenn jedes Feld eine Kante bekommt, muss das eine, auf das + es ankommt, weiter herausstechen. Es behaelt seinen vollen Ring und + bekommt zusaetzlich einen leisen Schein nach innen. + + AUGENSCHONEND: Alle Werte liegen unter 8 Prozent Deckkraft. Auf + sechs mal sieben Feldern summiert sich jede Helligkeit; was auf + einer Kachel dezent ist, ist auf 42 Kacheln ein Raster. Deshalb so + leise wie moeglich und keine Farbe ausser der, die schon da war. */ +.k-tag { + box-shadow: + inset 0 1px 0 rgba(170, 200, 230, .07), + inset 0 -1px 0 rgba(0, 0, 0, .45); +} +/* Beim Zeigen kommt die Lichtkante voll -- naeherkommen statt + aufleuchten, dieselbe Sprache wie ueberall. */ +.k-tag:hover { + box-shadow: + inset 0 1px 0 rgba(190, 218, 245, .16), + inset 0 -1px 0 rgba(0, 0, 0, .5); +} +/* Tage des Nachbarmonats sind zurueckgenommen -- auch ihre Kante. + Sonst waeren sie flach und trotzdem gleich stark gerahmt. */ +.k-tag[data-fremd="ja"] { + box-shadow: + inset 0 1px 0 rgba(170, 200, 230, .035), + inset 0 -1px 0 rgba(0, 0, 0, .45); +} +/* Das Wochenende liegt tiefer in der Platte und ist eine Spur kuehler. + Der Unterschied zum Werktag ist jetzt zu sehen, ohne aufzufallen. */ +.k-tag[data-wochenende="ja"] { + background: rgba(6, 9, 16, .86); + box-shadow: + inset 0 1px 0 rgba(150, 185, 220, .05), + inset 0 -1px 0 rgba(0, 0, 0, .55), + inset 0 8px 14px -12px rgba(0, 0, 0, .8); +} +.k-tag[data-wochenende="ja"]:hover { background: rgba(14, 20, 32, .9); } +/* Heute: voller Ring, dazu ein leiser Schein nach innen. Es ist das + einzige Feld, das seinen Zustand meldet -- alle anderen zeigen nur, + was auf ihnen steht. */ +.k-tag[data-heute="ja"] { + box-shadow: + inset 0 0 0 1px color-mix(in srgb, var(--akzent) 50%, transparent), + inset 0 1px 0 rgba(200, 230, 255, .14), + inset 0 0 22px -8px color-mix(in srgb, var(--akzent) 55%, transparent); +} diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html index 6d361cd7..4a88b5ea 100644 --- a/workspace/aufgaben.html +++ b/workspace/aufgaben.html @@ -14,10 +14,10 @@ - - - - + + + + @@ -217,10 +217,10 @@ - - - - - + + + + + diff --git a/workspace/automation.html b/workspace/automation.html index ddd233e1..ea071fbb 100644 --- a/workspace/automation.html +++ b/workspace/automation.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -140,10 +140,10 @@ - - - - - + + + + + diff --git a/workspace/bereich.html b/workspace/bereich.html index 1cdd5e2c..a6ddc127 100644 --- a/workspace/bereich.html +++ b/workspace/bereich.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -149,14 +149,14 @@ - - - - - - - - - + + + + + + + + + diff --git a/workspace/calls.html b/workspace/calls.html index 4de54eb6..252a6ba4 100644 --- a/workspace/calls.html +++ b/workspace/calls.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -82,11 +82,11 @@ - - - - - - + + + + + + diff --git a/workspace/chat.html b/workspace/chat.html index 93623c66..50b4c926 100644 --- a/workspace/chat.html +++ b/workspace/chat.html @@ -14,17 +14,17 @@ - - + + - - - + + + @@ -160,10 +160,10 @@ - - - - - + + + + + diff --git a/workspace/content.html b/workspace/content.html index 07fdd7b1..f989f27b 100644 --- a/workspace/content.html +++ b/workspace/content.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -172,12 +172,12 @@ - - - - - - - + + + + + + + diff --git a/workspace/dateien.html b/workspace/dateien.html index d6c8022c..2e90149b 100644 --- a/workspace/dateien.html +++ b/workspace/dateien.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -101,10 +101,10 @@ - - - - - + + + + + diff --git a/workspace/index.html b/workspace/index.html index 29d6b462..d4d166c1 100644 --- a/workspace/index.html +++ b/workspace/index.html @@ -32,7 +32,7 @@ - + @@ -382,6 +382,6 @@ - + diff --git a/workspace/kalender.html b/workspace/kalender.html index 0e98f342..644f9c09 100644 --- a/workspace/kalender.html +++ b/workspace/kalender.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -331,11 +331,11 @@ - - - - - - + + + + + + diff --git a/workspace/leistung.html b/workspace/leistung.html index 2f1e8aaa..82f18628 100644 --- a/workspace/leistung.html +++ b/workspace/leistung.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -217,10 +217,10 @@ - - - - - + + + + + diff --git a/workspace/personen.html b/workspace/personen.html index 5a71ca7f..b5782a2f 100644 --- a/workspace/personen.html +++ b/workspace/personen.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -305,10 +305,10 @@ - - - - - + + + + + diff --git a/workspace/profil.html b/workspace/profil.html index de7a4278..820e2da5 100644 --- a/workspace/profil.html +++ b/workspace/profil.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -207,11 +207,11 @@ - - - - - - + + + + + + diff --git a/workspace/report.html b/workspace/report.html index b0d16701..dec51afb 100644 --- a/workspace/report.html +++ b/workspace/report.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -99,11 +99,11 @@ - - - - - - + + + + + + diff --git a/workspace/scouting.html b/workspace/scouting.html index 9a8ced13..a0c48c39 100644 --- a/workspace/scouting.html +++ b/workspace/scouting.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -132,10 +132,10 @@ - - - - - + + + + + diff --git a/workspace/start.html b/workspace/start.html index ae0836d8..9ba79392 100644 --- a/workspace/start.html +++ b/workspace/start.html @@ -14,12 +14,12 @@ - - + + - - + + @@ -522,10 +522,10 @@

- - - - - + + + + + diff --git a/workspace/startcheck.html b/workspace/startcheck.html index 120e677f..2ffbdefe 100644 --- a/workspace/startcheck.html +++ b/workspace/startcheck.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -78,11 +78,11 @@ - - - - - - + + + + + + diff --git a/workspace/steckbrief.html b/workspace/steckbrief.html index 8154966a..4377cd8c 100644 --- a/workspace/steckbrief.html +++ b/workspace/steckbrief.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -119,10 +119,10 @@ - - - - - + + + + + diff --git a/workspace/uebersicht.html b/workspace/uebersicht.html index a41a4307..546504c0 100644 --- a/workspace/uebersicht.html +++ b/workspace/uebersicht.html @@ -14,13 +14,13 @@ - - + + - - - + + + @@ -142,11 +142,11 @@ - + - - - - + + + + diff --git a/workspace/wissen.html b/workspace/wissen.html index ced28086..7b1a21e0 100644 --- a/workspace/wissen.html +++ b/workspace/wissen.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -183,10 +183,10 @@ - - - - - + + + + +