DogFatherGitandClaude Opus 5
aa1d05a5c0
Filipe: "integriere die zugangskachel links nach rechts und passe sie
perfekt an damit sie in dem neuen bild rechts perfekt und die
vorgemachte kachel passt."
Das neue Motiv (Spicy Media x DogFather) hat rechts eine leere Tafel mit
Neonrahmen. Die Anmeldekarte sitzt jetzt DARIN -- und zwar wirklich
darin, nicht ungefaehr in der Gegend.
DAS PROBLEM, DAS MAN LEICHT UEBERSIEHT: Das Bild liegt mit
`object-fit: cover` unter der Seite; je nach Fensterform schneidet der
Browser oben/unten oder links/rechts etwas ab. Ein `left: 58%` bezieht
sich aber auf das FENSTER. Auf genau einer Bildschirmgroesse saehe es
richtig aus und ueberall sonst falsch. Deshalb rechnet `.tafel-anker`
dieselbe Cover-Formel noch einmal nach und ist damit deckungsgleich mit
dem Bild -- Prozentwerte darin sind Prozent DES BILDES.
Die vier Zahlen sind GEMESSEN (tools/gate-bauen.mjs), nicht geschaetzt.
Zwei Anlaeufe standen daneben und haben sich selbst verraten:
1. "Suche den leuchtenden Rahmen" fand den Mond, die roten Blueten und
jede Spiegelung -- Ergebnis: die ganze rechte Bildhaelfte. Eine
Messung, die das Offensichtliche zurueckgibt, hat nichts gemessen.
2. "Suche die groesste dunkle Flaeche" fand die Breite richtig, aber
94 % Hoehe: Ueber und unter der Tafel ist die Szene genauso
schwarz.
Richtig ist der dritte Weg: vom Mittelpunkt der Tafel nach aussen
laufen, bis es hell ODER farbig wird -- auf diesem Weg liegt nichts
anderes, denn die Tafel ist leer. Danach eine Plausibilitaetspruefung,
die abbricht statt vier geratene Zahlen auszugeben.
DREI FEHLER IM EIGENEN ENTWURF, alle gemessen statt angesehen:
* Die Karte hing 300 px unter dem Bildschirmrand. Auf `.tafel` liegt
die Einblend-Animation, deren Endbild `transform: none` ist -- mein
`translateY(-50%)` war damit wirkungslos. Zwei Wege, dasselbe
Element zu verschieben, vertragen sich nicht.
* Der Anker lag 3 % neben dem Bild: Das Bild traegt `scale(1.03)` als
Reserve fuer die Parallaxe. Jetzt tragen beide dieselbe Verwandlung,
und die Parallaxe laeuft ueber zwei CSS-Groessen am <body> -- so
wandert die Karte mit, statt dass der Rahmen unter ihr wegrutscht.
* Der Hochkant-Ausschnitt zeigte die LEERE Tafel: ein schwarzes
Rechteck mit ein paar Saeulen. Auf dem Handy liegt die Karte ohnehin
davor; dort gehoert das Logo hin. Jetzt faellt der Schriftzug
SPICY MEDIA in den sichtbaren Streifen -- nachgerechnet, nicht
probiert.
STARTSEITE: das Tresorbild als neuer Hintergrund. Die uebernommene
Abdunklung von 0,62 war zu viel (der Tresor ist von Haus aus dunkel) --
uebrig blieb ein Schemen. Und der "Leseweg" verdunkelte ausgerechnet die
MITTE: Bei den alten Szenen stand dort nichts, beim Tresor steht dort
die Tuer. Beides korrigiert und mit pruef-buehne an echten Bildpunkten
nachgemessen.
DABEI GEFUNDEN, ohne Zusammenhang mit dem Bild: Der abgeschaltete
"Ueberfaellig"-Filter kam auf 4,05:1 statt 4,5:1. Die Deckkraft zu
erhoehen half nichts -- die Pruefung rechnet mit der CSS-FARBE und dem
gemessenen Bildpunkt dahinter, und ein `opacity` am Elternknopf aendert
die Farbe nicht. Die Zahl blieb dreimal exakt gleich; genau das war der
Hinweis. Jetzt ein eigener, hellerer Ton. Der Kommentar daneben sagte
ohnehin, was gewollt ist: Man SOLL sehen, dass es null sind.
Und die vier Regeln von heute stehen in CLAUDE.md.
Co-Authored-By: Claude Opus 5 <[email protected]>
313 lines
12 KiB
CSS
313 lines
12 KiB
CSS
/* ===================================================================
|
|
Dashboard -- die Gesamtuebersicht je Creator.
|
|
|
|
Grundgedanke: eine Karte je Person, in der Reihenfolge des Drucks.
|
|
Ruhige Karten fuer alles, was laeuft; nur was Handlung braucht,
|
|
bekommt Farbe. Waere jede Zahl bunt, waere keine mehr auffaellig --
|
|
und die Augen haetten nichts, worauf sie sich ausruhen koennen.
|
|
=================================================================== */
|
|
|
|
/* ---------- Summen oben ---------------------------------------------------- */
|
|
|
|
.summen {
|
|
display: grid; gap: 8px; margin-bottom: 26px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
|
|
}
|
|
.summe {
|
|
display: grid; gap: 2px; padding: 14px 16px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
}
|
|
.summe[data-warn="ja"] {
|
|
border-color: rgba(255, 154, 162, .32);
|
|
background: rgba(255, 154, 162, .05);
|
|
}
|
|
.summe__zahl {
|
|
font-size: 1.6rem; font-weight: 700; line-height: 1.1;
|
|
font-variant-numeric: tabular-nums; color: var(--text);
|
|
}
|
|
.summe[data-warn="ja"] .summe__zahl { color: var(--warn); }
|
|
.summe__name {
|
|
font-size: .72rem; font-weight: 600; letter-spacing: .06em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
|
|
/* ---------- Karten --------------------------------------------------------- */
|
|
|
|
.creator-liste {
|
|
display: grid; gap: 12px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
|
|
}
|
|
.creator {
|
|
position: relative; overflow: hidden;
|
|
padding: 18px 20px 16px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
background: var(--flaeche);
|
|
}
|
|
/* Ein schmaler Streifen an der Kante statt einer eingefaerbten Karte:
|
|
sichtbar genug zum Ueberfliegen, ruhig genug zum Lesen. */
|
|
.creator::before {
|
|
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
|
background: linear-gradient(180deg, var(--akzent), transparent 85%);
|
|
opacity: .35;
|
|
}
|
|
.creator[data-achtung="ja"] {
|
|
border-color: rgba(255, 154, 162, .26);
|
|
}
|
|
.creator[data-achtung="ja"]::before {
|
|
background: linear-gradient(180deg, var(--warn), transparent 85%);
|
|
opacity: .75;
|
|
}
|
|
|
|
.creator__kopf {
|
|
display: flex; gap: 18px; align-items: flex-start;
|
|
justify-content: space-between; flex-wrap: wrap;
|
|
margin-bottom: 15px;
|
|
}
|
|
.creator__wer { min-width: 0; }
|
|
.creator__name {
|
|
margin: 0 0 3px; font-size: 1.14rem; font-weight: 700;
|
|
letter-spacing: -.01em; color: var(--text);
|
|
}
|
|
.creator__unter { margin: 0; font-size: .8rem; color: var(--text-still); }
|
|
.creator__unter[data-kalt="ja"] { color: var(--warn); opacity: .82; }
|
|
|
|
.naechstes { display: grid; gap: 2px; justify-items: end; text-align: right; flex: none; }
|
|
.naechstes__schild {
|
|
font-size: .66rem; font-weight: 700; letter-spacing: .08em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
.naechstes__wert {
|
|
font-size: .92rem; font-weight: 650; color: var(--text);
|
|
text-decoration: none; font-variant-numeric: tabular-nums;
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
a.naechstes__wert:hover { color: var(--akzent); border-bottom-color: rgba(63, 189, 245, .45); }
|
|
.naechstes__wert--leer { color: var(--text-still); font-weight: 500; }
|
|
|
|
/* ---------- Zahlenreihe ---------------------------------------------------- */
|
|
|
|
.werte {
|
|
display: grid; gap: 6px;
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
}
|
|
.wert {
|
|
display: grid; gap: 1px; padding: 9px 4px 8px;
|
|
text-align: center; text-decoration: none;
|
|
border: 1px solid transparent; border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
transition: border-color var(--tempo), background var(--tempo);
|
|
}
|
|
a.wert:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .06); }
|
|
.wert__zahl {
|
|
font-size: 1.22rem; font-weight: 700; line-height: 1.15;
|
|
font-variant-numeric: tabular-nums; color: var(--text);
|
|
}
|
|
/* Eine Zeile, ohne Umbruch: "ERLEDIGT 30 T." brach sonst als einziges
|
|
Feld um und zog die ganze Reihe in die Hoehe. Lieber eine Spur
|
|
kleiner als sechs Kaesten, von denen einer aus der Reihe faellt. */
|
|
/* 0,7 rem = 11,2 px statt 9,6. Unter 10 px ist auch auf einem grossen
|
|
Bildschirm keine Beschriftung mehr, sondern ein Muster -- und es sind
|
|
ausgerechnet die Woerter, die den Zahlen darueber ihre Bedeutung
|
|
geben ("ueberfaellig", "dringend", "offen"). Auf dem Handy stand
|
|
laengst eine Ausnahme auf 0,75 rem; nur der Rechner war vergessen
|
|
worden. */
|
|
.wert__name {
|
|
font-size: .7rem; font-weight: 600; letter-spacing: .03em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
/* Eine Null ist eine gute Nachricht -- sie darf zuruecktreten. */
|
|
.wert[data-leer="ja"] { background: rgba(255, 255, 255, .016); }
|
|
.wert[data-leer="ja"] .wert__zahl { color: var(--text-still); font-weight: 600; }
|
|
.wert[data-warn="ja"] {
|
|
border-color: rgba(255, 154, 162, .3); background: rgba(255, 154, 162, .07);
|
|
}
|
|
.wert[data-warn="ja"] .wert__zahl { color: var(--warn); }
|
|
/* EIN ECHTER FARBWERT, kein halbdurchsichtiges Rosa (06.09.2026).
|
|
|
|
Hier stand `rgba(255, 154, 162, .8)`. Halbdurchsichtige Schrift
|
|
nimmt die Farbe von dem an, was zufaellig dahinterliegt -- sie
|
|
sieht so lange gut aus, wie der Untergrund dunkel bleibt, und
|
|
wird still unlesbar, sobald sich daran etwas aendert. Gemessen
|
|
von pruef-buehne an echten Bildpunkten: 4,05:1 statt der
|
|
noetigen 4,5:1 fuer "Ueberfaellig".
|
|
|
|
Derselbe Fehler steht zwei Dateien weiter schon als Warnung in
|
|
gate.css: "Neutral braucht einen echten Farbwert.
|
|
Halbdurchsichtiges Weiss ergab in der Messung 1,1:1." Es hilft
|
|
offenbar nichts, ihn EINMAL aufzuschreiben. */
|
|
.wert[data-warn="ja"] .wert__name { color: var(--warn); }
|
|
|
|
/* ---------- Start-Check ---------------------------------------------------- */
|
|
|
|
.fortschritt {
|
|
display: block; margin-top: 13px; padding: 11px 13px 12px;
|
|
text-decoration: none;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
transition: border-color var(--tempo);
|
|
}
|
|
.fortschritt:hover { border-color: var(--rand-hell); }
|
|
.fortschritt__zeile {
|
|
display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
|
|
margin: 0 0 8px;
|
|
}
|
|
.fortschritt__schild {
|
|
font-size: .66rem; font-weight: 700; letter-spacing: .08em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
.fortschritt__text { font-size: .8rem; color: var(--text-leise); font-variant-numeric: tabular-nums; }
|
|
.fortschritt__warn {
|
|
margin-left: auto; padding: 1px 8px;
|
|
font-size: .7rem; font-weight: 650; color: var(--warn);
|
|
background: rgba(255, 154, 162, .1);
|
|
border: 1px solid rgba(255, 154, 162, .26); border-radius: 999px;
|
|
}
|
|
.fortschritt__balken {
|
|
display: block; height: 5px; border-radius: 999px; overflow: hidden;
|
|
background: rgba(255, 255, 255, .07);
|
|
}
|
|
.fortschritt__fuellung {
|
|
display: block; height: 100%; border-radius: 999px;
|
|
background: linear-gradient(90deg, var(--akzent-tief), var(--akzent));
|
|
transition: width .4s cubic-bezier(.4, 0, .2, 1);
|
|
}
|
|
.fortschritt__fuellung[data-warn="ja"] {
|
|
background: linear-gradient(90deg, rgba(255, 154, 162, .55), var(--warn));
|
|
}
|
|
.fortschritt[data-fertig="ja"] .fortschritt__text { color: var(--akzent); }
|
|
|
|
.creator__luecke {
|
|
display: block; margin: 10px 0 0; padding: 8px 12px;
|
|
font-size: .78rem; color: var(--text-leise); text-decoration: none;
|
|
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
|
}
|
|
.creator__luecke:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .35); }
|
|
|
|
/* ---------- Die Zahlen in der Karte (06.09.2026) --------------------------
|
|
|
|
Eine eigene Zeile unter den Arbeitszahlen, durch eine feine Linie
|
|
abgesetzt: Es sind zwei verschiedene Sorten Auskunft. Oben steht, was
|
|
WIR schulden (überfällig, im Review), unten, was der Kanal HERGIBT.
|
|
Ohne die Trennung liest man sie als eine Reihe und vergleicht Zahlen,
|
|
die nichts miteinander zu tun haben. */
|
|
.kzahlen {
|
|
display: flex; flex-wrap: wrap; gap: 8px 26px;
|
|
margin: 12px 0 0; padding: 12px 0 0;
|
|
border-top: 1px solid var(--rand);
|
|
text-decoration: none; color: inherit;
|
|
}
|
|
.kzahlen:hover .kzahlen__wert, .kzahlen:focus-visible .kzahlen__wert { color: var(--akzent); }
|
|
.kzahlen[data-leer="ja"] { border-top-style: dashed; }
|
|
|
|
.kzahlen__feld { display: grid; gap: 1px; min-width: 0; }
|
|
.kzahlen__name {
|
|
font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.kzahlen__wert {
|
|
font-size: 1.05rem; color: var(--text);
|
|
/* Tabellenziffern: gleiche Breite je Ziffer, damit die Werte mehrerer
|
|
Karten untereinander auf derselben Stelle sitzen. */
|
|
font-variant-numeric: tabular-nums;
|
|
transition: color var(--tempo);
|
|
}
|
|
.kzahlen__wandel { margin-left: 7px; font-size: .8rem; }
|
|
/* Gedeckt, nicht grell -- eine Auskunft, kein Alarm. */
|
|
.kzahlen__wandel[data-richtung="hoch"] { color: #6fc38a; }
|
|
.kzahlen__wandel[data-richtung="runter"] { color: #e08c93; }
|
|
.kzahlen__wandel[data-richtung="gleich"] { color: var(--text-still); }
|
|
|
|
.kzahlen__leer { font-size: .82rem; color: var(--text-still); }
|
|
|
|
/* ---------- Die Frühwarnung ------------------------------------------------
|
|
|
|
Bernstein, nicht Rot. "Hier würde ich nachfassen" ist ein Auftrag,
|
|
kein Fehler -- und Rot wäre auf einer Seite, die man jeden Morgen
|
|
aufmacht, nach drei Tagen Tapete. Dieselbe Farbe wie das Merkzeichen
|
|
in den Bereichen, aus demselben Grund. */
|
|
.warnblock { margin: 0 0 26px; }
|
|
|
|
.warnliste {
|
|
display: grid; gap: 12px;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
}
|
|
|
|
.warnkarte {
|
|
padding: 14px 16px 12px;
|
|
background:
|
|
radial-gradient(120% 100% at 0% 0%, rgba(217, 164, 65, .07), transparent 68%),
|
|
var(--flaeche);
|
|
border: 1px solid rgba(217, 164, 65, .28);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
.warnkarte__kopf {
|
|
display: flex; align-items: baseline; justify-content: space-between;
|
|
gap: 12px; margin-bottom: 10px;
|
|
}
|
|
.warnkarte__name {
|
|
font-size: 1rem; font-weight: 600; color: var(--text); text-decoration: none;
|
|
}
|
|
.warnkarte__name:hover, .warnkarte__name:focus-visible { color: var(--akzent); }
|
|
|
|
/* Der Weg zum Gespräch. Klein und ruhig -- er soll da sein, wenn man
|
|
ihn sucht, und nicht mit dem Namen um Aufmerksamkeit ringen. */
|
|
.warnkarte__weg {
|
|
flex: none;
|
|
padding: 5px 12px; min-height: 32px;
|
|
display: inline-flex; align-items: center;
|
|
font-size: .8rem; color: var(--text-leise); text-decoration: none;
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
transition: color var(--tempo), border-color var(--tempo);
|
|
}
|
|
.warnkarte__weg:hover, .warnkarte__weg:focus-visible {
|
|
color: var(--akzent); border-color: rgba(63, 189, 245, .35);
|
|
}
|
|
|
|
.warnkarte__signale { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
|
|
|
|
.warnsignal {
|
|
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
|
|
padding-left: 14px; position: relative;
|
|
}
|
|
/* Ein kleiner Punkt statt eines Aufzählungszeichens -- sechs Signale
|
|
untereinander mit Spiegelstrichen sähen aus wie eine Mängelliste. */
|
|
.warnsignal::before {
|
|
content: ''; position: absolute; left: 0; top: .55em;
|
|
width: 5px; height: 5px; border-radius: 50%;
|
|
background: rgba(217, 164, 65, .75);
|
|
}
|
|
.warnsignal__text { font-size: .84rem; line-height: 1.55; color: var(--text); }
|
|
.warnsignal__beleg {
|
|
font-size: .8rem; color: var(--text-still); font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ---------- Rest ----------------------------------------------------------- */
|
|
|
|
.stand {
|
|
margin: 20px 0 0; font-size: .74rem; color: var(--text-still); text-align: right;
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.creator-liste { grid-template-columns: 1fr; }
|
|
.creator { padding: 16px 15px 14px; }
|
|
/* Sechs Spalten waeren auf dem Handy je 45 px breit -- die Beschriftung
|
|
bricht dann mitten im Wort. Zwei Reihen zu dritt lesen sich sauber. */
|
|
.werte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.creator__kopf { gap: 10px; }
|
|
.naechstes { justify-items: flex-start; text-align: left; }
|
|
.summen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.stand { text-align: left; }
|
|
|
|
/* Drei Zahlen nebeneinander lassen auf 360 px je 100 px -- "Ø
|
|
Verweildauer" bricht dann in drei Zeilen um. Zwei Spalten, die
|
|
dritte darunter. */
|
|
.kzahlen { gap: 10px 20px; }
|
|
.warnliste { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.wert, .fortschritt, .fortschritt__fuellung { transition: none; }
|
|
}
|