DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Zahlenkreise repariert und vier Prozessfarben durchgaengig

Browse Source 
"wieso sehen die zahlen immer noch so scheisse aus?" -- zu Recht, und die
Ursache war nicht Geschmack, sondern ein Fehler. Nachgemessen sass die
Ziffer 15px NEBEN der Kreismitte.

Ursache: ".po-leer-punkt span" (fuer den Beschreibungstext) trifft auch
den Zahlen-Span und ist spezifischer (Klasse + Element) als
".po-leer-nr" (nur Klasse). Sie erzwang display:block, 14,4px Schrift und
23px Zeilenhoehe -- exakt die gemessenen Werte. Meine eigene
"line-height: 1"-Regel kam gar nicht zum Zug.

Das ist derselbe Spezifitaets-Fehler wie zuvor beim Hauptknopf (blaue
Schrift auf blauem Grund) und bei den Namen auf der Zugangswand. Dreimal
dieselbe Falle, deshalb steht die Begruendung jetzt ausfuehrlich im Code.

Behoben ueber :not(.po-leer-nr) an beiden Textregeln. Nachgemessen:
  Versatz waagerecht  -15px -> 0px
  Versatz senkrecht    -8px -> -1,3px
  display             block -> grid
  Schrift/Zeile   14,4/23px -> 18,4/18,4px

Zweite Rueckmeldung: "es soll 4 farben geben wie 4 kategorien zum
prozess". Sehr gute Idee -- sie macht das System erst schluessig. Die
sieben Phasen sind in Wahrheit vier Abschnitte, und die vier
Merkmalskacheln trugen ohnehin schon vier Farben. Jetzt bedeuten diese
Farben ueberall dasselbe:

  1  Blau   Start        Briefing, Angebot
  2  Lila   Gestaltung   Design
  3  Gruen  Umsetzung    Entwicklung, Tests
  4  Gold   Abschluss    Abnahme, Uebergabe

Die Phasenleiste faerbt erledigte Abschnitte in IHRER Farbe statt
pauschal gruen -- man sieht dadurch, wie weit man ist, nicht nur DASS
etwas fertig ist. Die Vorschau laeuft in denselben Farben durch. Die
Legende nennt die vier Abschnitte beim Namen, damit Farbe nicht geraten
werden muss: Farbe allein ist nie Information.

45/45 Handy-Abnahme, i18n vollstaendig.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-08-22 22:26:04 +02:00
co-authored by Claude Opus 5
parent c597753abf
commit 2539fdea8d
3 changed files with 137 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/webdesign.css
+122 -2
View File
@@ -958,7 +958,17 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
border: 1px solid var(--wd-rand-stark);
}
.po-leer-punkt strong { display: block; color: var(--wd-text); font-size: .98rem; margin-bottom: .15rem; }
.po-leer-punkt span { display: block; font-size: .88rem; color: var(--wd-text-soft); line-height: 1.5; }
/* :not(.po-leer-nr) ist hier PFLICHT, kein Feinschliff.
Der Zahlenkreis ist ebenfalls ein <span> in dieser Kachel. Ohne den
Ausschluss trifft ihn diese Regel mit -- und sie ist spezifischer
(Klasse + Element) als ".po-leer-nr" (nur Klasse). Sie erzwang dadurch
display:block, Schriftgroesse 14,4px und Zeilenhoehe 23px; die Ziffer
sass 15px neben der Kreismitte, statt darin.
Gemeldet am 22.08.2026 ("wieso sehen die zahlen immer noch so
scheisse aus?") und per Messung bestaetigt. Derselbe Spezifitaets-
Fehler wie zuvor beim Hauptknopf (blau auf blau) und bei den Namen auf
der Zugangswand -- deshalb steht die Begruendung hier so ausfuehrlich. */
.po-leer-punkt span:not(.po-leer-nr) { display: block; font-size: .88rem; color: var(--wd-text-soft); line-height: 1.5; }
.po-leer-fuss { margin: 0; }
/* ---------------------------------------------------------------------
@@ -1136,7 +1146,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
letter-spacing: -.015em; line-height: 1.25;
margin-bottom: .3rem;
}
.po-leer-punkt span { font-size: .9rem; line-height: 1.6; }
.po-leer-punkt span:not(.po-leer-nr) { font-size: .9rem; line-height: 1.6; }
.po-leer h3 {
font-size: clamp(1.5rem, 3.6vw, 2rem);
@@ -1187,3 +1197,113 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
.po-legende .po-l-fertig { background: linear-gradient(90deg, #2e8f6b, var(--wd-ok)); }
.po-legende .po-l-jetzt { background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau)); }
.po-legende .po-l-offen { background: rgba(127, 208, 232, .18); }
/* ---------------------------------------------------------------------
21. ZAHLENKREISE REPARIERT + VIER PROZESSFARBEN
a) "wieso sehen die zahlen immer noch so scheisse aus?"
Zu Recht. Die Ziffer sass nicht mittig im Kreis. Ursache war die
geerbte Zeilenhoehe: body.wd setzt line-height 1.7, und in einem
40px hohen Kreis erzeugt das einen Textkasten von rund 28px, der
die Ziffer nach unten drueckt. Zusaetzlich hing die Zentrierung an
einer weiter oben stehenden Regel — verlaesst man sich darauf, ist
man beim naechsten Umbau wieder verlassen.
Deshalb hier ALLES explizit: eigenes Raster, place-items, und vor
allem line-height: 1. Eine Ziffer in einem Kreis braucht genau die
Hoehe ihrer selbst, nichts sonst.
b) "es soll 4 farben geben wie 4 kategorien zum prozess"
Sehr gute Idee — und sie macht das System erst schluessig. Die
sieben Phasen sind in Wahrheit vier Abschnitte, und die vier
Merkmalskacheln tragen ohnehin schon vier Farben. Jetzt bedeuten
diese Farben ueberall dasselbe:
1 Blau Start Briefing, Angebot
2 Lila Gestaltung Design
3 Gruen Umsetzung Entwicklung, Tests
4 Gold Abschluss Abnahme, Uebergabe
Damit ist die Farbe nicht mehr Dekoration, sondern Sprache: Wer
Gold sieht, weiss, dass es auf die Zielgerade geht.
--------------------------------------------------------------------- */
/* ---------- a) Der Kreis ---------- */
.po-leer-nr {
display: grid;
place-items: center;
width: 42px; height: 42px;
padding: 0;
border-radius: 50%;
/* Der entscheidende Wert: ohne ihn erbt die Ziffer 1.7 und rutscht. */
line-height: 1;
font-family: var(--font-head);
font-size: 1.15rem;
font-weight: 800;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
border: 2px solid transparent;
background:
linear-gradient(#0d1624, #0d1624) padding-box,
linear-gradient(140deg, var(--wd-blau), var(--wd-lila)) border-box;
}
/* Die Ziffer selbst noch einmal optisch ausrichten: Zahlen haben oben
mehr Luft als unten, rein geometrisch zentriert wirken sie deshalb
leicht zu tief. Ein Hauch nach oben gleicht das aus. */
.po-leer-nr { padding-bottom: .06em; }
/* ---------- b) Die vier Prozessfarben ---------- */
:root {
--wd-p1: #7fd0e8; /* Start — Briefing, Angebot */
--wd-p2: #b79dff; /* Gestaltung — Design */
--wd-p3: #6fd6a3; /* Umsetzung — Entwicklung, Tests */
--wd-p4: #e8c877; /* Abschluss — Abnahme, Übergabe */
}
.po-leer-punkt:nth-child(1)::before { background: linear-gradient(90deg, #3d9dbd, var(--wd-p1)); }
.po-leer-punkt:nth-child(2)::before { background: linear-gradient(90deg, #7c5cd6, var(--wd-p2)); }
.po-leer-punkt:nth-child(3)::before { background: linear-gradient(90deg, #2e8f6b, var(--wd-p3)); }
.po-leer-punkt:nth-child(4)::before { background: linear-gradient(90deg, #a8873a, var(--wd-p4)); }
.po-leer-punkt:nth-child(1) .po-leer-nr { color: var(--wd-p1); background: linear-gradient(#0d1624,#0d1624) padding-box, linear-gradient(140deg, var(--wd-p1), #3d9dbd) border-box; box-shadow: 0 0 20px -7px var(--wd-p1); }
.po-leer-punkt:nth-child(2) .po-leer-nr { color: var(--wd-p2); background: linear-gradient(#0d1624,#0d1624) padding-box, linear-gradient(140deg, var(--wd-p2), #7c5cd6) border-box; box-shadow: 0 0 20px -7px var(--wd-p2); }
.po-leer-punkt:nth-child(3) .po-leer-nr { color: var(--wd-p3); background: linear-gradient(#0d1624,#0d1624) padding-box, linear-gradient(140deg, var(--wd-p3), #2e8f6b) border-box; box-shadow: 0 0 20px -7px var(--wd-p3); }
.po-leer-punkt:nth-child(4) .po-leer-nr { color: var(--wd-p4); background: linear-gradient(#0d1624,#0d1624) padding-box, linear-gradient(140deg, var(--wd-p4), #a8873a) border-box; box-shadow: 0 0 20px -7px var(--wd-p4); }
/* ---------- Die Phasenleiste spricht dieselbe Sprache ----------
Erledigte Phasen tragen die Farbe IHRES Abschnitts, nicht pauschal
Gruen. So sieht man auf einen Blick, wie weit man im Prozess ist —
und nicht nur, dass etwas erledigt wurde. */
.po-phase { background: rgba(127, 208, 232, .12); }
.po-phase:nth-child(1).po-erledigt, .po-phase:nth-child(2).po-erledigt { background: var(--wd-p1); box-shadow: 0 0 9px -3px var(--wd-p1); }
.po-phase:nth-child(3).po-erledigt { background: var(--wd-p2); box-shadow: 0 0 9px -3px var(--wd-p2); }
.po-phase:nth-child(4).po-erledigt, .po-phase:nth-child(5).po-erledigt { background: var(--wd-p3); box-shadow: 0 0 9px -3px var(--wd-p3); }
.po-phase:nth-child(6).po-erledigt, .po-phase:nth-child(7).po-erledigt { background: var(--wd-p4); box-shadow: 0 0 9px -3px var(--wd-p4); }
.po-phase:nth-child(1).po-jetzt, .po-phase:nth-child(2).po-jetzt { background: var(--wd-p1); box-shadow: 0 0 16px -2px var(--wd-p1); }
.po-phase:nth-child(3).po-jetzt { background: var(--wd-p2); box-shadow: 0 0 16px -2px var(--wd-p2); }
.po-phase:nth-child(4).po-jetzt, .po-phase:nth-child(5).po-jetzt { background: var(--wd-p3); box-shadow: 0 0 16px -2px var(--wd-p3); }
.po-phase:nth-child(6).po-jetzt, .po-phase:nth-child(7).po-jetzt { background: var(--wd-p4); box-shadow: 0 0 16px -2px var(--wd-p4); }
/* Die Vorschau zeigt denselben Verlauf: jede Phase leuchtet in der Farbe
ihres Abschnitts auf, wenn sie an der Reihe ist. */
.po-vorschau-phasen span:nth-child(1), .po-vorschau-phasen span:nth-child(2) { --po-f: var(--wd-p1); }
.po-vorschau-phasen span:nth-child(3) { --po-f: var(--wd-p2); }
.po-vorschau-phasen span:nth-child(4), .po-vorschau-phasen span:nth-child(5) { --po-f: var(--wd-p3); }
.po-vorschau-phasen span:nth-child(6), .po-vorschau-phasen span:nth-child(7) { --po-f: var(--wd-p4); }
@keyframes po-phase-lauf {
0%, 8% { background: rgba(127,208,232,.12); box-shadow: none; }
14%, 60% { background: var(--po-f); box-shadow: 0 0 12px -3px var(--po-f); }
100% { background: rgba(127,208,232,.12); box-shadow: none; }
}
/* ---------- Legende: vier Abschnitte statt drei Zustände ----------
Die alte Legende erklärte den Zustand (erledigt / läuft / offen). Der
ist aus der Position ohnehin ablesbar. Wertvoller ist, WAS gerade
passiert — deshalb erklärt sie jetzt die vier Abschnitte. */
.po-legende { gap: .45rem .9rem; font-size: .76rem; }
.po-legende i { width: 14px; height: 7px; }
.po-legende .po-l-1 { background: var(--wd-p1); }
.po-legende .po-l-2 { background: var(--wd-p2); }
.po-legende .po-l-3 { background: var(--wd-p3); }
.po-legende .po-l-4 { background: var(--wd-p4); }