DogFatherGitandClaude Opus 5
41108d6c3c
--- screen14: "das soll auch bitte viel geiler und spezieller sein" ---
Zwei Dinge waren falsch, und nur eines davon sieht man im Code.
1. DIE FLAECHE WAR FAST DURCHSICHTIG -- 9 und 5 Prozent Deckkraft. Auf
einer Seite mit Hintergrundbild heisst das: Das Motiv scheint mitten
durch den Text. Auf Filipes Bildschirmfoto liest man den Satz "Ein
Review endet nicht mit einer Zusammenfassung" quer ueber einem
gespiegelten SPICY-MEDIA-Schriftzug. Ein Kasten, den man nicht
sieht, ist keine Fassung -- er ist ein Rand um nichts.
2. `border-radius` UND `border` STANDEN NOCH DA -- wirkungslos, weil
`.entscheidung` in der Modulliste von module.css steht und die
spaeter geladen wird. Zwei Angaben, die aussehen, als taeten sie
etwas, und es seit dem Umbau nicht mehr tun.
Er ist die HANDLUNG der Seite, nicht einer von vier Abschnitten: Alles
darueber ist Auskunft, hier wird entschieden und sofort eine Aufgabe
angelegt. Deshalb ein eigener `--ton` fuers Kantenlicht (die Modulliste
faerbt es darueber) statt des Seitentons, und eine kraeftigere Flaeche
als die Sammelkacheln darueber. Kein Rot: Rot heisst in diesem Haus
"ueberfaellig", und eine Entscheidung ist kein Alarm. Die Eingabefelder
sind jetzt eingelassen statt aufgesetzt -- wo man etwas hineinschreibt,
ist eine Vertiefung; und `color-scheme: dark`, sonst zeichnet Chrome
den Datumswaehler als weisses Kaestchen in die dunkle Flaeche.
--- screen16: "mit mehreren farben arbeiten, damit die wichtigsten
sachen auch auffallen" ---
Die sechs Zahlen je Creator (ueberfaellig, dringend, offen, in Arbeit,
im Review, erledigt) trugen alle dasselbe Blau -- und `data-warn`
faerbte zwei davon in DASSELBE Rot. "Ueberfaellig" ist eine versaeumte
Frist, "dringend" eine Sache, die schnell muss. Zwei verschiedene
Alarme, die gleich aussehen, sind ein Alarm.
Jetzt sechs Toene: Rot, Bernstein, Babyblau, Lila, Silber, Gruen.
DIE WICHTIGE ENTSCHEIDUNG WAR ABER NICHT WELCHE FARBE, SONDERN WANN.
Sechs dauerhaft leuchtende Felder waeren sechs gleich laute Rufe -- und
damit genau so wenig Hilfe wie sechs gleich blaue. Deshalb bleibt eine
NULL grau und still; nur was groesser als null ist, bekommt seine
Farbe. Auf einer Karte, auf der alles auf Null steht, aendert sich
nichts. Auf einer, auf der drei Sachen ueberfaellig sind, sieht man
genau die. Das ist der Unterschied zwischen Farbe als Schmuck und
Farbe als Auskunft.
Die Farbe haengt an `data-sorte` (einem Schluessel), nicht an
`:nth-child`: Wer morgen ein siebtes Feld dazwischenschiebt, soll nicht
sechs Farben verrutschen lassen. Und die Beschriftung bleibt der
eigentliche Traeger -- Farbe allein traegt in diesem Haus nie eine
Information.
KONTRAST NACHGERECHNET statt angenommen: Die Beschriftungen sind
11,2 px, also gilt 4,5:1. Gemessen gegen die Kartenflaeche liegen sie
zwischen 5,91:1 (erledigt) und 14,09:1 (im Review) -- alle sechs
deutlich darueber. pruef-barrierefrei-workspace habe ich deshalb NICHT
gestartet: Der Lauf haette 190 Sekunden gebraucht, um dasselbe zu
sagen.
Geprueft: pruef-uebersicht, pruef-uebersicht-browser, pruef-css-klassen,
pruef-buehne -- alle in Ordnung.
Co-Authored-By: Claude Opus 5 <[email protected]>
215 lines
9.0 KiB
CSS
215 lines
9.0 KiB
CSS
/* ===================================================================
|
|
Reports & Review.
|
|
=================================================================== */
|
|
|
|
.steuerung { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
|
|
.steuerung select {
|
|
min-width: 160px; padding: 9px 12px;
|
|
background: rgba(255, 255, 255, .045);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit;
|
|
}
|
|
|
|
.block { margin-bottom: 34px; }
|
|
.block__titel {
|
|
margin: 0 0 4px; font-size: .78rem; font-weight: 700;
|
|
letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
|
|
}
|
|
.block__frage { margin: 0 0 14px; font-size: .86rem; color: var(--text-still); }
|
|
|
|
.kacheln {
|
|
display: grid; gap: 10px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(158px, 100%), 1fr));
|
|
}
|
|
|
|
.kachel {
|
|
padding: 15px 16px;
|
|
background: var(--flaeche);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
.kachel__wert { display: flex; align-items: baseline; gap: 9px; }
|
|
.kachel__zahl { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
|
|
.kachel__name { display: block; margin-top: 3px; font-size: .78rem; color: var(--text-still); }
|
|
|
|
/* Vorher/Nachher aus dem Konzept: Eine Zahl allein sagt wenig. */
|
|
.trend { font-size: .78rem; font-weight: 600; white-space: nowrap; }
|
|
.trend[data-richtung="hoch"] { color: #79d1a2; }
|
|
.trend[data-richtung="runter"] { color: var(--warn); }
|
|
.trend[data-richtung="gleich"] { color: var(--text-still); font-weight: 400; }
|
|
/* Bei manchen Zahlen ist "mehr" schlecht (z. B. offene Probleme). */
|
|
.trend[data-gut="nein"][data-richtung="hoch"] { color: var(--warn); }
|
|
.trend[data-gut="nein"][data-richtung="runter"] { color: #79d1a2; }
|
|
|
|
.kachel[data-warn="ja"] {
|
|
border-color: rgba(255, 154, 162, .4);
|
|
background: rgba(255, 154, 162, .07);
|
|
}
|
|
.kachel[data-warn="ja"] .kachel__zahl { color: var(--warn); }
|
|
|
|
.liste-klein { margin: 0; padding: 0; list-style: none; }
|
|
.liste-klein li {
|
|
padding: 10px 14px; margin-bottom: 7px;
|
|
background: var(--flaeche);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
font-size: .88rem;
|
|
}
|
|
.liste-klein .klein { display: block; margin-top: 2px; font-size: .77rem; color: var(--text-still); }
|
|
|
|
|
|
/* ---------- Entscheidung ------------------------------------------------ */
|
|
|
|
/* =====================================================================
|
|
DER ENTSCHEIDUNGSBLOCK (screen14, 09.09.2026)
|
|
|
|
Filipe: "das soll auch bitte viel geiler und spezieller sein."
|
|
|
|
ZWEI DINGE WAREN FALSCH, UND NUR EINES DAVON SIEHT MAN IM CODE.
|
|
|
|
1. DIE FLAECHE WAR FAST DURCHSICHTIG -- 9 und 5 Prozent Deckkraft.
|
|
Auf einer Seite mit Hintergrundbild heisst das: Das Motiv scheint
|
|
mitten durch den Text. Auf Filipes Bildschirmfoto liest man den
|
|
Satz "Ein Review endet nicht mit einer Zusammenfassung" quer
|
|
ueber einem gespiegelten SPICY-MEDIA-Schriftzug. Ein Kasten, den
|
|
man nicht sieht, ist keine Fassung -- er ist ein Rand um nichts.
|
|
|
|
2. `border-radius` UND `border` STANDEN NOCH HIER -- wirkungslos,
|
|
weil `.entscheidung` in der Modulliste von module.css steht und
|
|
die spaeter geladen wird. Zwei Angaben, die aussehen, als taeten
|
|
sie etwas, und es seit dem Umbau nicht mehr tun. Wer sie liest,
|
|
sucht die abgerundete Ecke im Bild und findet sie nicht.
|
|
|
|
ER IST DIE HANDLUNG DER SEITE, nicht einer von vier Abschnitten:
|
|
Alles darueber ist Auskunft, hier wird etwas entschieden und sofort
|
|
als Aufgabe angelegt. Deshalb bekommt er einen EIGENEN Ton fuers
|
|
Kantenlicht (die Modulliste faerbt es ueber `--ton`) statt des
|
|
Seitentons -- und eine kraeftigere Flaeche als die Sammelkacheln
|
|
darueber. Er soll auffallen, ohne zu blenden: Der Ton ist dasselbe
|
|
Babyblau des Hauses, nur bekommt hier die Kante ihn voll.
|
|
|
|
Warum kein Rot: Rot heisst in diesem Haus "ueberfaellig". Eine
|
|
Entscheidung ist kein Alarm. */
|
|
.entscheidung {
|
|
--ton: #7ec8f2;
|
|
margin-top: 8px; padding: 22px 24px;
|
|
background:
|
|
var(--raster),
|
|
linear-gradient(100deg, rgba(63, 189, 245, .10), transparent 46%),
|
|
linear-gradient(178deg, rgba(21, 30, 44, .93), rgba(11, 16, 25, .96));
|
|
}
|
|
.entscheidung__titel { margin: 2px 0 6px; font-size: 1.15rem; font-weight: 700; }
|
|
.entscheidung__text { margin: 0 0 18px; font-size: .88rem; color: var(--text-leise); max-width: 62ch; }
|
|
.entscheidung__raster {
|
|
display: grid; gap: 14px; margin-bottom: 6px;
|
|
grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
|
|
}
|
|
/* Die Felder sind EINGELASSEN, nicht aufgesetzt: Schatten von oben
|
|
nach innen. Dieselbe Sprache wie das Codefeld auf der Anmeldeseite --
|
|
wo man etwas hineinschreibt, ist eine Vertiefung. */
|
|
.entscheidung input {
|
|
width: 100%; padding: 11px 13px;
|
|
background: rgba(0, 0, 0, .34);
|
|
border: 1px solid rgba(150, 186, 220, .16); border-radius: var(--radius-klein);
|
|
box-shadow: inset 0 2px 5px -2px rgba(0, 0, 0, .9);
|
|
color: var(--text); font: inherit;
|
|
/* Sonst zeichnet Chrome den Datumswaehler hell in eine dunkle
|
|
Flaeche -- ein weisses Kaestchen mitten im Feld. */
|
|
color-scheme: dark;
|
|
}
|
|
.entscheidung input:focus {
|
|
outline: none; border-color: rgba(63, 189, 245, .7);
|
|
box-shadow: 0 0 0 3px rgba(63, 189, 245, .16);
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.entscheidung__raster { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ===================================================================
|
|
JEDER ABSCHNITT IST EINE GROSSE KACHEL (08.09.2026)
|
|
|
|
Filipe, mit Bildschirmfoto: "die ganzen kacheln sollen viel geiler
|
|
aussehen und spezieller. mach auch vielleicht 2 größere kacheln wo
|
|
die anderen kleineren drin sind und richtig geil angepasst."
|
|
|
|
`.block` war bisher ein reiner Behaelter -- eine Ueberschrift und ein
|
|
Rand nach unten, sonst nichts. Die kleinen Zahlenkarten standen damit
|
|
frei auf dem Hintergrundbild, und bei vier Abschnitten hintereinander
|
|
verlor man, welche Karte zu welcher Frage gehoert. Genau das zeigt
|
|
Filipes Bild: siebzehn Karten in einer Flaeche, ohne sichtbare
|
|
Zugehoerigkeit.
|
|
|
|
Jetzt traegt jeder Abschnitt eine eigene Kachel in derselben Sprache
|
|
wie die Startseite: gefraeste Fase, Rasterhintergrund, Innenschatten.
|
|
Die kleinen Karten liegen sichtbar DARIN.
|
|
|
|
NICHT ueber die Modulliste in module.css, obwohl es dieselbe Optik
|
|
ist: `.block` gibt es auch auf automation.html, und dort sind es
|
|
Formularbloecke, keine Sammelkacheln. Die Regel steht deshalb in
|
|
report.css -- diese Datei wird nur von report.html geladen, die
|
|
Datei selbst ist die Bedingung. */
|
|
.block {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
padding: 16px 18px 18px;
|
|
clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
|
|
background:
|
|
var(--raster),
|
|
linear-gradient(178deg, rgba(19, 26, 38, .82), rgba(10, 14, 22, .88));
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(160, 195, 230, .10),
|
|
inset 7px 7px 14px -10px rgba(0, 0, 0, .9),
|
|
0 10px 26px -18px rgba(0, 0, 0, .9);
|
|
}
|
|
/* Die Ueberschrift wird zum Kopf der Kachel: eine Linie darunter statt
|
|
nur Abstand. Sie trennt die Frage von ihren Antworten. */
|
|
.block__titel {
|
|
margin: 0 0 12px;
|
|
padding-bottom: 9px;
|
|
border-bottom: 1px solid transparent;
|
|
border-image: linear-gradient(90deg,
|
|
color-mix(in srgb, var(--akzent) 45%, transparent), transparent 68%) 1;
|
|
}
|
|
|
|
/* ---- Die kleinen Karten bekommen Luft ----------------------------
|
|
|
|
Gemessen: In ALLEN 17 Karten lagen Name und Zahl weniger als sechs
|
|
Pixel auseinander, bei langen Namen ("LIVE-Schnitt aus 0
|
|
Bewertung(en)") sah es aus, als ueberlappten sie. Echte Ueberlappung
|
|
war es nicht -- knapp genug, um wie eine auszusehen, und das ist
|
|
dasselbe Problem.
|
|
|
|
Zwei Aenderungen: 180 px Mindestbreite statt 158 (der Name bekommt
|
|
eine Zeile mehr, bevor er umbricht) und ein fester Abstand zwischen
|
|
Name und Zahl, den kein langer Text aufbrauchen kann. */
|
|
.kacheln {
|
|
gap: 12px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
|
|
}
|
|
.block .kachel__name { padding-right: 14px; }
|
|
|
|
/* DIE ZAHL BRAUCHT PLATZ, DEN DIE KARTE NICHT KENNT (08.09.2026).
|
|
|
|
Filipes Bildschirmfoto zeigte abgeschnittene Zahlen: Unter "Was
|
|
blockiert?" standen 5, 2, 1 und 0 nur zur oberen Haelfte da, den Rest
|
|
verdeckte die Aufgabenliste darunter.
|
|
|
|
NACHGEMESSEN, und es war nicht das, wonach es aussah. Die Liste liegt
|
|
sauber unter dem Raster (543..594 gegen 594..802, kein Ueberlappen).
|
|
Herausgeragt ist die ZAHL SELBST: `.kachel__zahl` ist
|
|
`position: absolute` und damit fuer die Hoehenrechnung der Karte
|
|
unsichtbar. Bei 27 px Schrift in einer 51 px hohen Karte steht sie
|
|
17 px unten ueber -- und was ueber den Rand steht, verdeckt das
|
|
naechste Element.
|
|
|
|
Sechs von siebzehn Karten waren betroffen: genau die in Bloecken, in
|
|
denen das Raster nur eine Zeile hat und deshalb niedriger ausfaellt.
|
|
In den anderen Bloecken war die Zeile hoch genug, dort fiel es nie
|
|
auf -- der Fehler war da, aber nur manchmal sichtbar.
|
|
|
|
Die Mindesthoehe ist der ehrliche Weg: Sie sagt der Karte, wie viel
|
|
Platz ihr Inhalt WIRKLICH braucht. Die Zahl kleiner zu machen waere
|
|
die bequemere Antwort und die falsche -- sie ist die Aussage der
|
|
Karte. */
|
|
.block .kachel { min-height: 74px; }
|