diff --git a/workspace/assets/css/gate.css b/workspace/assets/css/gate.css index 61c0d0d3..dc322466 100644 --- a/workspace/assets/css/gate.css +++ b/workspace/assets/css/gate.css @@ -2303,3 +2303,88 @@ body.gate { @media (prefers-reduced-motion: reduce) { .rs-funkel { animation: none; -webkit-mask: none; mask: none; opacity: .25; } } + +/* ===================================================================== + DER TITEL IST IN DIE PLATTE GRAVIERT (screen29, 09.09.2026) + + Filipe: "sehr gut aber ich will es noch viel geiler bitte." + + "Creator Workspace" stand als flaches Weiss ueber der Karte -- + richtig gesetzt, aber ohne Material. Darunter liegt eine Karte aus + Glas und Metall, darum ein Rahmen aus Rot und Babyblau; nur die + Ueberschrift selbst gehoerte zu nichts davon. + + ZWEI SACHEN MACHEN AUS SCHRIFT EIN WERKSTUECK: + + 1. EIN VERLAUF VON OBEN NACH UNTEN, nicht von links nach rechts. + Gebuerstetes Metall ist oben hell, in der Mitte dunkel und + unten wieder hell -- weil es sich woelbt. Ein Verlauf, der nur + von hell nach dunkel laeuft, ist eine Flaeche mit Farbverlauf; + erst der WECHSEL liest sich als Metall. Dieselbe Ueberlegung + wie bei der Fassung der Zentrale, nur hochkant. + + 2. EIN HARTER SCHATTEN DIREKT DARUNTER, ein Pixel. Er macht aus + aufgelegter Schrift eingelassene: Das Auge liest die dunkle + Linie als Kante der Vertiefung. Weich waere es ein Schlagschatten + und damit das Gegenteil. + + DER RUECKFALL STEHT ZUERST UND IST VOLLWERTIG. `background-clip: + text` ist die Technik, die hier die Farbe traegt -- faellt sie aus, + waere durchsichtiger Text auf durchsichtigem Grund die Ueberschrift + der wichtigsten Seite des Hauses. Also: `color` bleibt gesetzt, und + erst ein `@supports` schaltet den Verlauf dazu. Dieselbe Vorsicht + wie beim Anmelde-Knopf, wo der Text aus genau diesem Grund weiss + geblieben ist. + + `filter: drop-shadow` UND NICHT `text-shadow`: Bei durchsichtigem + Text scheint ein Textschatten DURCH die Buchstaben hindurch -- man + saehe den Schatten im Buchstaben stehen. `drop-shadow` legt ihn um + die sichtbare Form, und die ist hier der Verlauf. + + AUGENSCHONEND UND NACHGERECHNET: Der dunkelste Punkt des Verlaufs ist + #9fb3c8. Gegen den Kartengrund kommt er auf 8,97:1 (bei #0a0e17), + 8,41:1 (#12161f) und im schlechtesten angenommenen Fall 7,54:1 + (#1a2030) -- grosse Schrift braucht 3:1, normale 4,5:1. Er liegt + ueber beidem. Die Zahlen stehen hier, weil ich an dieser Stelle + schon einmal "liegt weit darueber" geschrieben hatte, ohne es + auszurechnen, und beim Anmelde-Knopf damit danebenlag (4,20:1 statt + der behaupteten 4,5+). Eine Behauptung ueber Kontrast ohne Zahl ist + eine Vermutung. + + Nichts glaenzt, nichts wandert -- es ist Material, keine Animation. */ +.tafel .titel { + color: #eef5fd; +} +@supports ((-webkit-background-clip: text) or (background-clip: text)) { + .tafel .titel { + background: linear-gradient(178deg, + #ffffff 0%, + #e6eef8 26%, + #9fb3c8 56%, + #dceaf7 78%, + #ffffff 100%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + filter: drop-shadow(0 1px 0 rgba(3, 6, 12, .85)); + } +} +/* Ein feiner Lichtstrich unter der Markenzeile -- er trennt "wer sind + wir" von "was ist das hier", ohne ein Wort dafuer zu brauchen, und + nimmt die beiden Hausfarben in derselben Richtung auf wie der Rahmen: + Rot links, Babyblau rechts, Treffpunkt in der Mitte. */ +.tafel .marke--paar { + position: relative; + padding-bottom: .5em; + margin-bottom: .35em; +} +.tafel .marke--paar::after { + content: ""; + position: absolute; left: 0; right: 0; bottom: 0; + height: 1px; + background: linear-gradient(90deg, + rgba(255, 95, 109, .55) 0%, + rgba(226, 236, 248, .40) 46%, + rgba(143, 216, 255, .55) 78%, + transparent 100%); +} diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html index d37625d8..6d361cd7 100644 --- a/workspace/aufgaben.html +++ b/workspace/aufgaben.html @@ -14,10 +14,10 @@ - - - - + + + +
@@ -217,10 +217,10 @@ - - - - - + + + + +