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 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -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; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user