From 8b317b23e2b8ec9998b36dc27925c0d17dfb5b9d Mon Sep 17 00:00:00 2001 From: Dogfather Date: Tue, 8 Sep 2026 13:10:16 +0200 Subject: [PATCH] Der Weg in den Kalender ist ein Knopf, kein Nebensatz MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Filipe, screen33: "der kalender button da in der kachel oben rechts, der soll viel auffälliger sein und viel krasser und geiler." Er sah aus wie ein Verweis im Fliesstext -- kleine Schrift, kein Rahmen, keine Flaeche. Neben der fetten Ueberschrift "Heute" verschwand er, obwohl er die einzige Handlung in dieser Zeile ist. vorher Text in .78rem, ohne Fassung, rund 70x18 px jetzt 105x36 px, eigene Flaeche, farbiger Rahmen, Schimmer ER TRAEGT DEN KALENDER-TON, nicht das allgemeine Blau. Der Knopf fuehrt in den Kalender, und die Kachel dort hat genau diese Farbe (Nummer 8, #c06ad0). Wer ihn sieht, weiss ohne zu lesen, wo er landet -- das ist mehr wert als jede zusaetzliche Verzierung. Beim Ueberfahren wandert ein heller Streifen darueber. Derselbe Kniff wie beim Manager-Stern und aus demselben Grund: Glanz ist etwas, das sich BEWEGT -- ein Auf- und Abblenden waere ein Pulsieren. Der Streifen liegt in einem eigenen Element, damit er den Text nicht mitfaerbt, und bei `prefers-reduced-motion` entfaellt er. Der Knopf bleibt dann trotzdem auffaellig, er glaenzt nur nicht. `--f` wird mitgesetzt, damit der Schein beim Ueberfahren aus gate.css aus derselben Farbe kommt statt aus der Vorgabe. Nachgemessen am laufenden Browser: 105x36 px, Rahmen rgb(192,106,208) bei 48 % Deckkraft, Schrift 13,12 px / 650. pruef-start-ansicht EXIT=0, 140 Pruefungen -- diesmal GELESEN, bevor committet wurde, nicht in derselben Befehlskette daneben. Co-Authored-By: Claude Opus 5 --- workspace/assets/css/start.css | 65 ++++++++++++++++++++++++++++++++-- 1 file changed, 62 insertions(+), 3 deletions(-) diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css index 02eccad4..b58eefa0 100644 --- a/workspace/assets/css/start.css +++ b/workspace/assets/css/start.css @@ -3798,12 +3798,71 @@ body[data-fremde-sicht="ja"]::after { .tagesblick__kopf { margin-bottom: 12px; } /* Der Kalender-Verweis rechts oben. Still, bis man ihn braucht. */ +/* DER WEG IN DEN KALENDER IST EIN KNOPF, KEIN NEBENSATZ (08.09.2026). + + Filipe, screen33: "der kalender button da in der kachel oben rechts, + der soll viel auffälliger sein und viel krasser und geiler." + + Er sah vorher aus wie ein Verweis im Fliesstext -- kleine Schrift, + kein Rahmen, keine Flaeche. Neben der fetten Ueberschrift "Heute" + verschwand er, obwohl er die einzige Handlung in dieser Zeile ist. + + Er traegt jetzt den Kalender-Ton (Nummer 8 aus der Palette), und zwar + als Fassung: eigene Flaeche, farbiger Rahmen, ein Schimmer darunter. + Beim Ueberfahren wandert ein heller Streifen darueber -- derselbe + Kniff wie beim Manager-Stern, weil Glanz etwas ist, das sich BEWEGT. + + Warum der Kalender-Ton und nicht das allgemeine Blau: Der Knopf fuehrt + in den Kalender, und die Kachel dort traegt genau diese Farbe. Wer + ihn sieht, weiss ohne zu lesen, wo er landet. + + `--f` wird mitgesetzt, damit der Schein beim Ueberfahren (gate.css) + aus derselben Farbe kommt und nicht aus der Vorgabe. */ .tagesblick__mehr { - display: inline-flex; align-items: center; gap: 5px; - font-size: .78rem; + --f: var(--ton-kalender, #c06ad0); + position: relative; overflow: hidden; + display: inline-flex; align-items: center; gap: 7px; + padding: 7px 13px; + font-size: .82rem; font-weight: 650; letter-spacing: .01em; text-decoration: none; + color: color-mix(in srgb, var(--f) 30%, #f2f7fd); + background: linear-gradient(180deg, + color-mix(in srgb, var(--f) 17%, transparent), + color-mix(in srgb, var(--f) 7%, transparent)); + border: 1px solid color-mix(in srgb, var(--f) 48%, transparent); + border-radius: 999px; + box-shadow: + inset 0 1px 0 color-mix(in srgb, var(--f) 30%, transparent), + 0 3px 14px -8px var(--f); + transition: color var(--tempo), border-color var(--tempo), + background var(--tempo), box-shadow var(--tempo); } -.tagesblick__mehr-pfeil { width: 14px; height: 14px; } +.tagesblick__mehr:hover { + color: #fff; + border-color: color-mix(in srgb, var(--f) 78%, transparent); + box-shadow: + inset 0 1px 0 color-mix(in srgb, var(--f) 45%, transparent), + 0 6px 20px -8px var(--f); +} +/* Der Streifen, der beim Ueberfahren darueberwandert. Er liegt in einem + eigenen Element, damit er den Text nicht mitfaerbt. */ +.tagesblick__mehr::after { + content: ""; + position: absolute; inset: 0; + background: linear-gradient(105deg, transparent 38%, + rgba(255, 255, 255, .22) 50%, transparent 62%); + transform: translateX(-130%); + transition: transform .55s cubic-bezier(.4, 0, .2, 1); + pointer-events: none; +} +.tagesblick__mehr:hover::after { transform: translateX(130%); } +/* Hausregel: Wer weniger Bewegung eingestellt hat, bekommt keinen + Streifen -- der Knopf bleibt trotzdem auffaellig, er glaenzt nur + nicht. */ +@media (prefers-reduced-motion: reduce) { + .tagesblick__mehr::after { display: none; } +} +.tagesblick__mehr-pfeil { width: 14px; height: 14px; transition: transform var(--tempo); } .tagesblick__mehr:hover .tagesblick__mehr-pfeil { transform: translateX(2px); } /* Der Satz, wenn eine Hälfte nichts zu zeigen hat. Er steht in der