DogFatherGitandClaude Opus 5
1ad22b55c4
--- screen1: Glocke nach rechts, Ring so gross wie die Uhr ---
"dieser button links vom kreis soll rechts davon sein und der kreis
soll die gleiche groesse wie die uhr haben."
Die KAESTEN waren schon exakt gleich gross (248 x 248, seit gestern aus
einer Variablen). Der gezeichnete Ring aber nicht: Sein aeusserer Bogen
lag bei Radius 128 von 150, plus halbe Strichbreite also bei 132,5 --
88 Prozent des Kastens, gerendert 219 statt 248 px. Die Uhr daneben
fuellt ihren Kasten ganz aus, ihr Leuchtkranz ragt sogar 7 px darueber
hinaus. Zwei gleich grosse Kaesten mit ungleich grossem Inhalt sehen
ungleich gross aus.
Jetzt 145 statt 128 (aussen) und 120 statt 106 (die Segmente) --
dasselbe Verhaeltnis zueinander, nur bis an den Rand. 145 + 4,5 =
149,5 von 150: ein halber Pixel Luft, damit die runde Kappe nicht
abgeschnitten wird.
Die Glocke steht jetzt rechts vom Ring. Damit liegen beide Knoepfe
INNEN, zwischen den Instrumenten und dem Text -- vorher sassen sie an
den beiden Aussenkanten, so weit voneinander entfernt wie moeglich,
obwohl sie dasselbe tun: einstellen, was einen erreicht.
--- screen2: die Stunden ---
"die stunden muss noch perfektionnieren."
DIE LICHTKANTE WAR EIN KRATZER. Sie stand auf 50 Prozent Weiss bei 0,9
Breite. Auf den schmalen Sekunden- und Minutenbahnen ist das eine
Kante; auf dem 5,8 px breiten Stundenbalken war es ein zweiter,
weisser Balken auf dem roten. Der Grund ist Verhaeltnis UND Farbe:
0,9 von 3,2 sind 28 Prozent, 0,9 von 5,8 nur 16 -- aber die Stunde ist
die einzige deckende, kraeftig gefaerbte Bahn, und auf Rot faellt
dasselbe Weiss doppelt so stark auf wie auf Silber. Jetzt 22 Prozent
bei 0,6 Breite.
DER KOPF BLEIBT ROT. Er stand auf #ffd9dd, also fast weiss -- das
aktuelle Glied war zwar das hellste, hatte aber die Farbe seiner Bahn
verloren und sah aus wie ein Fremdkoerper zwischen den roten Balken.
Jetzt ein helles, deutliches Rot: Es hebt sich durch Helligkeit ab,
nicht durch eine andere Farbe.
--- screen3: die Report-Karten stehen gerade ---
"ich will dass alles passt, nicht bedeckt ist, schief steht oder zu
tief oder zu hoch."
NACHGEMESSEN, ALLE 17 KARTEN -- der Befund deckt sich genau mit dem,
was er beschreibt: Name und Zahl lagen 12 bis 28 px auf VERSCHIEDENEN
Hoehen, sie ueberlappten sich waagerecht (gemessener Abstand -183 bis
-524 px), und Karten in derselben Reihe waren verschieden hoch.
DIE URSACHE IST EINE ZEILE: `.kachel__zahl` steht `position: absolute`
bei top 13 / right 13. Auf der Startseite ist das richtig -- gleich
grosse Kacheln, einzeiliger Name. Hier bricht der Name um ("Community:
neue Eintraege"), die Karte waechst nach unten, die Zahl bleibt oben
kleben. Sie war ausserdem fuer die Hoehenrechnung unsichtbar, weshalb
es vorher schon eine `min-height` als Pflaster brauchte.
Jetzt ein echtes Raster: Name links (Zeile 1), Trend darunter, Zahl
rechts ueber beide Zeilen und mittig. `display: contents` auf dem
Wrapper -- so werden seine Kinder selbst zu Rasterfeldern, ohne dass am
HTML etwas geaendert werden muss und ohne dass die Startseite, die
dieselben Klassen benutzt, etwas davon mitbekommt.
Nachgemessen danach: 17 von 17 sauber -- nichts ragt heraus, nichts
ueberlappt, nichts abgeschnitten, kein Versatz ueber 5 px, und keine
Reihe mit ungleichen Hoehen.
--- screen4: Schutz & Regeln wird Magenta ---
"ich will dass die kategorie eine farbe bekommt die extrem krass
auffaellt. diese kategorie ist naemlich seeeehr wichtig."
MAGENTA, WEIL ES DAS EINZIGE IST, DAS ES SONST NICHT GIBT. Rot ist fuer
"ueberfaellig" und Spicy Media vergeben, Babyblau fuer DogFather, Lila
fuer Manager, Gruen fuer Scout, Bronze fuer Creator, Bernstein fuer
"dringend". #ff2fd0 stoesst mit keinem davon zusammen -- es faellt
nicht auf, weil es HELLER ist, sondern weil es einzigartig ist. Das
ist verlaesslicher: Helligkeit konkurriert mit den Nachbarn,
Einzigartigkeit nicht.
Gerechnet wie bei Ton 21: Abstand zum naechsten Nachbarn 0,1305 (die
Grenze im Satz liegt bei 0,0973), Buntheit 0,276 -- die hoechste im
ganzen Satz, das alte Gold lag bei 0,170 --, Kontrast 6,00:1. Von
sieben Kandidaten sind drei an der Abstandsgrenze gescheitert. Das
Saeuregelb #e0ff00 waere lauter gewesen (16,86:1), haette sich aber
mit dem Bernstein von "dringend" und dem Gold der Nachbarkacheln um
dieselbe Wirkung gestritten. Die Kachel bleibt gebaut wie alle
anderen; was sie heraushebt, ist die Farbe, keine Sonderform.
--- Eine Rueckwirkung, die pruef-buehne gefunden hat ---
Die Typenschilder von gestern nutzen `background-clip: text` -- dafuer
MUSS `color: transparent` sein. pruef-buehne las genau dieses `color`,
machte daraus Schwarz und meldete 1,07:1 fuer Text, der hell und gut
lesbar ist. Fuenf Fehlalarme auf drei Seiten.
Eine Warnung, die bei richtiger Arbeit anschlaegt, wird abgeschaltet.
Sie ist deshalb nicht weichgemacht, sondern GENAUER geworden: Bei
Verlaufsschrift zaehlt jetzt der DUNKELSTE Farbstopp der ersten
Hintergrundebene -- der schlechteste Punkt, den es auf dieser Schrift
wirklich gibt. Damit meldet start.html 4,74:1 (noetig 4,5), die
Pruefung findet also weiter die engste Stelle.
UND DIE GEGENPROBE HAT SOFORT EINEN FEHLER IN MEINEM EIGENEN CODE
GEFUNDEN: Ich suchte das Ende der ersten Ebene mit `"),"` -- diese
Zeichenfolge steht aber schon am Ende des ERSTEN `rgb(...)`. Die
Messung las damit immer nur den ersten Stopp und haette einen dunklen
Verlauf fuer hell gehalten. Jetzt wird ueber Klammern gezaehlt. Der
Helfer steht einmal und wird als Quelltext in beide Seiten-Aufrufe
gereicht -- zwei Kopien waeren zwei Gelegenheiten auseinanderzulaufen.
Geprueft: pruef-buehne (mit neuer Gegenprobe), pruef-start-ansicht,
pruef-css-klassen, pruef-handy, pruef-workspace-seiten -- alle in
Ordnung.
Co-Authored-By: Claude Opus 5 <[email protected]>
287 lines
12 KiB
CSS
287 lines
12 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; }
|
|
|
|
/* =====================================================================
|
|
DIE ZAHLENKARTEN STEHEN GERADE (screen3, 09.09.2026)
|
|
|
|
Filipe: "perfektionnier auch noch bitte die kacheln die schriften
|
|
drin und die zahlen. ich will dass alles passt, nicht bedeckt ist,
|
|
schief steht oder zu tief oder zu hoch."
|
|
|
|
NACHGEMESSEN, ALLE 17 KARTEN. Der Befund war eindeutig und deckt
|
|
sich genau mit dem, was er beschreibt:
|
|
|
|
* Name und Zahl lagen 12 bis 28 px auf VERSCHIEDENEN Hoehen.
|
|
* Sie ueberlappten sich waagerecht (gemessener Abstand -183 bis
|
|
-524 px, also weit ineinander).
|
|
* Karten in derselben Reihe waren verschieden hoch.
|
|
|
|
DIE URSACHE IST EINE EINZIGE ZEILE: `.kachel__zahl` steht
|
|
`position: absolute` bei top 13 / right 13. Auf der Startseite ist
|
|
das richtig -- dort sind die Kacheln gleich gross und der Name
|
|
einzeilig. Hier bricht der Name auf zwei Zeilen um ("Community:
|
|
neue Eintraege"), die Karte waechst nach unten, und die Zahl bleibt
|
|
oben kleben. Sie ist ausserdem fuer die Hoehenrechnung unsichtbar,
|
|
weshalb es vorher schon einmal eine `min-height` als Pflaster
|
|
brauchte.
|
|
|
|
JETZT EIN ECHTES RASTER, ohne absolute Position:
|
|
|
|
Spalte 1 Name (Zeile 1), Trend darunter (Zeile 2)
|
|
Spalte 2 die Zahl, ueber beide Zeilen, mittig
|
|
|
|
`display: contents` auf `.kachel__wert`: Der Wrapper verschwindet
|
|
als Kasten, seine Kinder werden selbst zu Rasterfeldern. So kommt
|
|
die Zahl nach rechts und der Trend unter den Namen, OHNE dass am
|
|
HTML etwas geaendert werden muss -- und ohne dass die Startseite,
|
|
die dieselben Klassen benutzt, davon etwas mitbekommt.
|
|
|
|
`align-items: center` statt der alten Mindesthoehe: Die Zahl ist
|
|
jetzt Teil des Flusses, also rechnet die Karte ihre Hoehe mit ihr
|
|
aus. Die `min-height` bleibt trotzdem stehen -- sie sorgt dafuer,
|
|
dass eine Karte mit kurzem Namen nicht flacher wird als ihre
|
|
Nachbarn.
|
|
===================================================================== */
|
|
.block .kachel {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
column-gap: 14px;
|
|
row-gap: 2px;
|
|
}
|
|
/* Der Wrapper verschwindet, seine Kinder werden Rasterfelder. */
|
|
.block .kachel__wert { display: contents; }
|
|
.block .kachel__zahl {
|
|
position: static;
|
|
grid-column: 2; grid-row: 1 / -1;
|
|
align-self: center;
|
|
/* Rechtsbuendig und mit gleichen Ziffernbreiten: Untereinander
|
|
stehende Zahlen sollen eine Spalte bilden, keine Treppe. */
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.block .kachel__name {
|
|
grid-column: 1; grid-row: 1;
|
|
margin: 0;
|
|
padding-right: 0; /* der Abstand kommt jetzt aus column-gap */
|
|
align-self: center;
|
|
}
|
|
.block .kachel .trend {
|
|
grid-column: 1; grid-row: 2;
|
|
justify-self: start;
|
|
}
|
|
/* Ohne Trend soll die zweite Zeile keinen Platz belegen. */
|
|
.block .kachel:not(:has(.trend)) { row-gap: 0; }
|