Pipeline: die Stufenfarbe kommt endlich auf dem Bildschirm an
Filipe: "zuerst will ich dass du die kategorien und die kacheln viel
krasser geiler machst."
Beim Nachmessen stand fest, warum die Pipeline flach aussah: Drei
Regeln in scouting.css kamen gar nicht an, seit es den Baukasten
(module.css) gibt -- und module.css NENNT zwei davon im eigenen Text.
--ton war an JEDER Karte #db4b66, dem Rot der Seite.
Daraus nimmt der Baukasten Kantenlicht, die
drei Eckwinkel und das Licht beim Zeigen. Sechs
Stufenfarben in der Datei, eine auf dem Schirm.
.kk::before (3px) gemessen 560px breit -- das ist das Kantenlicht
des Baukastens, das dasselbe Pseudoelement
belegt. Die farbige Pipeline-Kante gab es nicht.
.kk { border } /:hover module.css setzt `border: 0`, gleich stark und
spaeter im Ladeweg.
Das Haus hatte die Lehre schon: aufgaben.css setzt `--ton` an fuenf
Spalten mit genau dieser Begruendung. Hierher uebertragen hat es nie
jemand.
WAS JETZT ANDERS IST
* Jede Stufe traegt ihren Ton -- Eckwinkel, Kantenlicht und Hover
laufen damit von kuehl (neu entdeckt) zu gruen (uebergeben).
* Die Farbkante der Karte liegt im HINTERGRUND statt auf einem
Pseudoelement (beide gehoeren dem Baukasten). 6px, weil das
Kantenlicht 1,6px davon verdeckt -- bei 3px blieb nichts Sichtbares.
* Etappennummern 01-05, abgeleitet aus WEITER statt daneben
geschrieben. "Abgelehnt" bekommt keine: keine Etappe nach vorn.
* Stufentitel in der eigenen Farbe (vorher einheitlich --akzent),
mit Weiss aufgehellt -- 4,3:1 waeren bei fett-versal 12,5px zu wenig.
* Faellig-Saum als inset-Schatten wie bei .kachel[data-warn], mit
(0,3,0) gegen die Modulliste; vorher border-color und damit wirkungslos.
* Karte: Plattform als Schild, Handle in gleichbreiter Schrift,
Haarlinie zwischen "wer" und "lohnt sich", Reichweite deutlicher.
DAS MESSGERAET, DAS GEFEHLT HAT: module.css notiert "NICHT
MITREPARIERT, weil es kein Messgeraet dafuer gibt ... Hover laesst sich
nicht pruefen." Doch -- pruef-scouting-felder faehrt den Zeiger jetzt
auf die Karte und liest nach (6px -> 9px).
DREI FUNDE IN DEN EIGENEN WERKZEUGEN, alle von Hauswachen oder der
eigenen Messung:
* bild-arten hatte keine Notbremse; page.hover() blieb haengen und
liess beim Abbrechen einen Server auf Port 4336 zurueck. Jetzt
notbremse(240s) und mouse.move statt hover().
* color-mix(in srgb, var(--rand)) -- mit EINER Farbe ungueltig; der
ganze Verlauf fiel aus, uebrig blieb Abstand ohne Linie.
* Im Pruefausdruck steckte ein Backspace-Byte (0x08), das die
Kommandozeile aus einer Zeichenfolge gemacht hatte. Sah im
Quelltext richtig aus, traf nie. Jetzt startsWith.
pruef-scouting-felder: 64 -> 72 Pruefungen, gruen. Gegenprobe gefahren
(einer Stufe den Ton genommen -> rot, mit #db4b66 als Beleg). Statt des
226-Sekunden-Hauslaufs pruef-handy misst die Datei jetzt selbst auf
320px: 97 Teile, keines ueber dem Rand, kein seitliches Schieben.
Dazu gruen: css-klassen, lesbarkeit, tippziele, fingermass,
haus-trennung, leerzustand, deutsche-texte, zeichen (der eine Rest dort
ist bereich.css und aelter).
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -37,52 +37,216 @@
|
||||
|
||||
/* ---------- Stufen -------------------------------------------------------- */
|
||||
|
||||
.stufe { margin-bottom: 30px; }
|
||||
.stufe { margin-bottom: 34px; }
|
||||
.stufe__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
|
||||
/* DER TITEL TRUG DEN SEITENAKZENT, NICHT SEINE STUFE (bis 06.10.2026).
|
||||
Hier stand `color: var(--akzent)` -- sechs Stufen, ein Blau. Jetzt
|
||||
die eigene Farbe, aber mit Weiss aufgehellt: #4c7fa8 direkt auf dem
|
||||
dunklen Grund kaeme nur auf rund 4,3:1, und fett-versal bei 12,5 px
|
||||
ist KEIN grosser Text im Sinne der Richtlinie -- 4,5:1 waere die
|
||||
Schwelle. Aufgehellt liegt jede der sechs Stufen weit darueber.
|
||||
Nachgemessen von pruef-lesbarkeit. */
|
||||
.stufe__titel {
|
||||
margin: 0; font-size: .78rem; font-weight: 700;
|
||||
letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
|
||||
margin: 0; font-size: .82rem; font-weight: 800;
|
||||
letter-spacing: .1em; text-transform: uppercase;
|
||||
color: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 68%, #ffffff);
|
||||
}
|
||||
.stufe__zahl {
|
||||
min-width: 22px; padding: 1px 7px; text-align: center;
|
||||
font-size: .74rem; font-weight: 700; color: var(--text-still);
|
||||
background: rgba(255, 255, 255, .06);
|
||||
min-width: 22px; padding: 1px 8px; text-align: center;
|
||||
font-size: .76rem; font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 55%, #ffffff);
|
||||
background: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 14%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 30%, transparent);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
/* ---- DIE ETAPPENNUMMER (06.10.2026) --------------------------------
|
||||
Die Pipeline hat eine RICHTUNG -- das stand bisher nur im Text der
|
||||
Datei und nirgends auf dem Bildschirm. Sechs Ueberschriften
|
||||
untereinander lesen sich wie eine Liste; "01" bis "05" lesen sich
|
||||
wie ein Weg.
|
||||
|
||||
"Abgelehnt" bekommt KEINE Nummer, sondern einen Strich: Eine Absage
|
||||
ist keine Etappe auf dem Weg nach vorn. Dieselbe Entscheidung wie im
|
||||
leeren Zustand der Seite, wo die Aufzaehlung ebenfalls bei fuenf
|
||||
aufhoert -- und sie steht jetzt nur noch an EINER Stelle im Code
|
||||
(STUFE_NR in scouting.js). */
|
||||
.stufe__nr {
|
||||
flex: none;
|
||||
display: grid; place-items: center;
|
||||
min-width: 30px; height: 30px; padding: 0 6px;
|
||||
font-size: .78rem; font-weight: 800;
|
||||
font-variant-numeric: tabular-nums; letter-spacing: .02em;
|
||||
color: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 45%, #ffffff);
|
||||
background: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 15%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 42%, transparent);
|
||||
/* Dieselbe Fase wie die Bauteile des Hauses, nur klein -- das Zeichen
|
||||
gehoert zur selben Formensprache und ist kein fremder Kreis. */
|
||||
clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
|
||||
}
|
||||
.stufe[data-stufe="abgelehnt"] .stufe__nr { opacity: .7; }
|
||||
|
||||
.stufe__karten { display: grid; gap: 10px; }
|
||||
|
||||
/* Farbverlauf entlang der Pipeline. */
|
||||
.stufe[data-stufe="neu"] { --stufe-farbe: #4c7fa8; }
|
||||
.stufe[data-stufe="angesprochen"] { --stufe-farbe: #5b8fd4; }
|
||||
.stufe[data-stufe="gespraech"] { --stufe-farbe: #7d84e0; }
|
||||
.stufe[data-stufe="interessiert"] { --stufe-farbe: #8ab8a0; }
|
||||
.stufe[data-stufe="uebergeben"] { --stufe-farbe: #79d1a2; }
|
||||
.stufe[data-stufe="abgelehnt"] { --stufe-farbe: #55606f; }
|
||||
/* ===== FARBVERLAUF ENTLANG DER PIPELINE ==============================
|
||||
|
||||
`--ton` WIRD MITGESETZT (06.10.2026) -- und das ist die eigentliche
|
||||
Reparatur dieser Seite.
|
||||
|
||||
Gemessen am 06.10.2026: An JEDER Karte der Pipeline stand
|
||||
`--ton: #db4b66` -- das Rot der Seite, bei „Neu entdeckt" genauso wie
|
||||
bei „Übergeben". Aus `--ton` nimmt der ganze Baukasten in module.css
|
||||
seine Farbe: das Kantenlicht, die drei Eckwinkel und das Licht beim
|
||||
Zeigen. Die Pipeline hatte also sechs Stufenfarben in der Datei und
|
||||
genau eine auf dem Bildschirm.
|
||||
|
||||
DAS HAUS HAT DIESE LEHRE SCHON EINMAL GEZOGEN. In aufgaben.css steht
|
||||
seit dem Aufgabenbrett wörtlich: „--ton mitgesetzt: Das Licht unter
|
||||
dem Zeiger nimmt seine Farbe von dort. Ohne diese Zeile leuchtete die
|
||||
gruene Erledigt-Spalte orange (der Farbton der SEITE), was aussah wie
|
||||
ein Fehler und einer war." Dort steht es an fünf Spalten -- hierher
|
||||
übertragen hat es nie jemand.
|
||||
|
||||
Die Töne bleiben dieselben wie bisher: kühl bei „neu entdeckt", warm
|
||||
und grün bei „übergeben", stumpf bei „abgelehnt". Gedeckt, nicht
|
||||
neon -- augenschonend ist Vorgabe, nicht Geschmack. */
|
||||
.stufe[data-stufe="neu"] { --stufe-farbe: #4c7fa8; --ton: #4c7fa8; }
|
||||
.stufe[data-stufe="angesprochen"] { --stufe-farbe: #5b8fd4; --ton: #5b8fd4; }
|
||||
.stufe[data-stufe="gespraech"] { --stufe-farbe: #7d84e0; --ton: #7d84e0; }
|
||||
.stufe[data-stufe="interessiert"] { --stufe-farbe: #8ab8a0; --ton: #8ab8a0; }
|
||||
.stufe[data-stufe="uebergeben"] { --stufe-farbe: #79d1a2; --ton: #79d1a2; }
|
||||
.stufe[data-stufe="abgelehnt"] { --stufe-farbe: #55606f; --ton: #55606f; }
|
||||
.stufe[data-stufe="abgelehnt"] .kk { opacity: .62; }
|
||||
.stufe[data-stufe="abgelehnt"] .kk:hover { opacity: 1; }
|
||||
|
||||
/* ---------- Karte --------------------------------------------------------- */
|
||||
|
||||
/* ===== DIE KARTE (neu gefasst am 06.10.2026) =========================
|
||||
|
||||
WAS HIER VORHER STAND UND NICHTS TAT -- drei Dinge, alle gemessen:
|
||||
|
||||
`border: 1px solid var(--rand)` module.css setzt `border: 0`
|
||||
`.kk::before` (3 px Farbkante) module.css belegt ::before mit
|
||||
dem Kantenlicht (gemessen: 560 px
|
||||
breit statt 3)
|
||||
`.kk:hover { border-color }` dasselbe
|
||||
|
||||
Keine davon war falsch geschrieben -- sie kamen nur nicht mehr an,
|
||||
seit es den Baukasten gibt. module.css sagt es im eigenen Text:
|
||||
„`.kk:hover` in scouting.css ... setzt border-color -- und die
|
||||
Grundregel oben setzt `border: 0`, gleich stark und spaeter im
|
||||
Ladeweg. Diese vier Regeln tun also vermutlich nichts." Und daneben:
|
||||
„NICHT MITREPARIERT, weil es kein Messgeraet dafuer gibt ... Hover
|
||||
laesst sich nicht pruefen."
|
||||
|
||||
DAS MESSGERAET GIBT ES JETZT: pruef-scouting-felder faehrt mit der
|
||||
Maus auf eine Karte und liest nach, was sich wirklich aendert.
|
||||
|
||||
WARUM `background` UND NICHT WIEDER EIN PSEUDOELEMENT: ::before und
|
||||
::after gehoeren beide dem Baukasten (Kantenlicht, Raster,
|
||||
Eckwinkel). Ein Hintergrund mit mehreren Ebenen braucht keines von
|
||||
beiden -- und er wird vom `clip-path` der Fase sauber beschnitten,
|
||||
die Kante folgt also der Schraege statt sie zu durchstossen. */
|
||||
.kk {
|
||||
position: relative;
|
||||
padding: 15px 18px 15px 21px;
|
||||
background: var(--flaeche);
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: var(--radius-klein);
|
||||
transition: border-color .18s ease, background .18s ease, opacity .18s ease;
|
||||
/* Links mehr: Dort laeuft jetzt die 6px-Stufenkante, und Text, der
|
||||
direkt daran klebt, laesst sie wie einen Fehler aussehen. */
|
||||
padding: 17px 20px 17px 26px;
|
||||
/* Wie breit die Farbkante ist. Als Wert, weil sie beim Zeigen
|
||||
waechst -- zwei Zahlen an zwei Stellen waeren zwei Zahlen.
|
||||
|
||||
6px UND NICHT 3px (nachgemessen am 06.10.2026): Das Kantenlicht des
|
||||
Baukastens liegt mit 1,6px DARUEBER (::before, z-index 2) und
|
||||
verdeckt genau so viel von links. Von drei Pixeln blieben gut
|
||||
eineinhalb uebrig -- in der Nahaufnahme nicht mehr als Kante zu
|
||||
erkennen. Von sechs bleiben viereinhalb, und die sieht man. */
|
||||
--kante: 6px;
|
||||
background:
|
||||
/* 1. Die Stufenkante links. Oben hell, nach unten auslaufend:
|
||||
eine durchgezogene Kante wirkt wie eine Trennwand, eine
|
||||
auslaufende wie eine Markierung (dieselbe Ueberlegung wie
|
||||
beim Streifen der Aufgabenspalten). */
|
||||
linear-gradient(180deg,
|
||||
color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 92%, #ffffff) 0%,
|
||||
color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 70%, transparent) 45%,
|
||||
color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 14%, transparent) 100%)
|
||||
left top / var(--kante) 100% no-repeat,
|
||||
/* 2. Ein Hauch der Stufenfarbe in der Ecke, aus der die Kante
|
||||
kommt. 11 % -- man soll es spueren, nicht lesen. */
|
||||
radial-gradient(135% 115% at 0% 0%,
|
||||
color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 11%, transparent) 0%,
|
||||
transparent 62%),
|
||||
var(--flaeche);
|
||||
transition: background-size var(--tempo, .18s) ease, opacity .18s ease;
|
||||
}
|
||||
.kk::before {
|
||||
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
background: var(--stufe-farbe, var(--akzent));
|
||||
opacity: .8;
|
||||
/* Beim Zeigen wird die Kante breiter. Den Rest (Anheben, farbiges
|
||||
Licht) macht der Baukasten schon -- und seit `--ton` je Stufe steht,
|
||||
leuchtet er in der Farbe DIESER Stufe statt im Rot der Seite. */
|
||||
.stufe .kk:hover { --kante: 9px; }
|
||||
|
||||
/* ---- Follow-up ueberfaellig ----------------------------------------
|
||||
Ein Saum im gedaempften Warnton, genau wie ihn module.css fuer
|
||||
`.kachel[data-warn]` fuehrt -- inklusive des Faseschattens, der in
|
||||
derselben Liste stehen MUSS: `box-shadow` ist eine Liste und keine
|
||||
Ergaenzung, wer ihn weglaesst nimmt der Karte ihre Fase.
|
||||
|
||||
SPEZIFITAET IST HIER KEIN DETAIL: Die Modulliste in module.css ist
|
||||
(0,2,0) und wird SPAETER geladen. `.kk[data-faellig="ja"]` waere
|
||||
gleich stark und verloere deshalb -- genau der Unfall, der die alte
|
||||
Regel unsichtbar gemacht hat. `.stufe .kk[...]` ist (0,3,0) und
|
||||
gewinnt. Beim Zeigen nimmt der Baukasten den Schatten ganz weg und
|
||||
arbeitet mit `filter`; der Saum muss dort also eigens wiederkommen,
|
||||
sonst verschwaende die Warnung in dem Moment, in dem jemand
|
||||
hinsieht. */
|
||||
.stufe .kk[data-faellig="ja"] {
|
||||
box-shadow:
|
||||
inset 0 0 0 1.5px rgba(240, 196, 138, .42),
|
||||
inset 7px 7px 14px -10px rgba(0, 0, 0, .95);
|
||||
}
|
||||
.stufe .kk[data-faellig="ja"]:hover {
|
||||
box-shadow: inset 0 0 0 1.5px rgba(240, 196, 138, .66);
|
||||
}
|
||||
@media (prefers-contrast: more) {
|
||||
.stufe .kk[data-faellig="ja"] { box-shadow: inset 0 0 0 2px #f0c48a; }
|
||||
}
|
||||
.kk:hover { border-color: rgba(255, 255, 255, .16); }
|
||||
.kk[data-faellig="ja"] { border-color: rgba(255, 190, 120, .34); }
|
||||
|
||||
.kk__kopf { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
|
||||
.kk__name { margin: 0; font-size: 1.02rem; font-weight: 650; }
|
||||
.kk__unter { margin: 2px 0 0; font-size: .82rem; color: var(--text-still); }
|
||||
/* DER NAME IST DIE UEBERSCHRIFT DER KARTE und sah aus wie Fliesstext
|
||||
(06.10.2026): 1,02rem bei Gewicht 650, keinen halben Schritt ueber
|
||||
dem, was darunter steht. Jetzt deutlich darueber -- in einer Spalte
|
||||
mit zwoelf Karten sucht das Auge zuerst den Namen. */
|
||||
.kk__name {
|
||||
margin: 0; font-size: 1.12rem; font-weight: 700;
|
||||
line-height: 1.25; letter-spacing: -.006em;
|
||||
}
|
||||
.kk__unter {
|
||||
margin: 6px 0 0;
|
||||
display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
|
||||
font-size: .8rem; color: var(--text-still);
|
||||
}
|
||||
/* Die Plattform ist eine EINORDNUNG -- davon gibt es eine Handvoll, und
|
||||
man vergleicht sie. Deshalb ein Schild in der Farbe der Stufe. */
|
||||
.kk__plattform {
|
||||
padding: 1px 8px; border-radius: 999px;
|
||||
/* .74rem = 11,8px. Unter 11,5px gilt Text im Grosscheck als zu klein;
|
||||
.72rem laegen bei 11,52 und damit auf dem Zehntel genau an der
|
||||
Schwelle -- eine Zahl, die bei der naechsten Schriftaenderung
|
||||
kippt. */
|
||||
font-size: .74rem; font-weight: 700;
|
||||
letter-spacing: .06em; text-transform: uppercase;
|
||||
color: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 42%, #ffffff);
|
||||
background: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 13%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 30%, transparent);
|
||||
}
|
||||
/* Das Handle ist eine KENNUNG -- einmalig, und man liest sie Zeichen
|
||||
fuer Zeichen. In gleichbreiter Schrift verwechselt man l und 1 nicht,
|
||||
und genau darum geht es bei einem @namen, den jemand abtippt. */
|
||||
.kk__handle {
|
||||
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
|
||||
font-size: .8rem; letter-spacing: -.01em;
|
||||
color: var(--text-leise);
|
||||
}
|
||||
|
||||
.kk__marken { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.marke-punkt, .marke-still, .marke-fertig {
|
||||
@@ -98,7 +262,28 @@
|
||||
color: #79d1a2; border-color: rgba(121, 209, 162, .35); background: rgba(121, 209, 162, .09);
|
||||
}
|
||||
|
||||
.kk__info { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: .78rem; }
|
||||
/* EINE HAARLINIE ZWISCHEN KOPF UND ZAHLEN (06.10.2026).
|
||||
Oben steht, WER es ist, darunter, ob es sich lohnt. Das sind zwei
|
||||
Fragen, und ohne eine Trennung liest sich die Karte als ein Block
|
||||
aus sieben gleich grossen Schnipseln. Die Linie traegt die
|
||||
Stufenfarbe und laeuft nach rechts aus -- dieselbe Sprache wie der
|
||||
Strich unter der Stufenueberschrift. */
|
||||
.kk__info {
|
||||
display: flex; flex-wrap: wrap; align-items: center;
|
||||
gap: 7px 14px;
|
||||
margin-top: 13px; padding-top: 12px;
|
||||
font-size: .78rem;
|
||||
border-top: 1px solid transparent;
|
||||
/* `color-mix(in srgb, var(--rand))` stand hier beim ersten Anlauf --
|
||||
color-mix braucht ZWEI Farben. Ein ungueltiger Farbwert macht den
|
||||
ganzen Verlauf ungueltig, die Erklaerung faellt weg, und uebrig
|
||||
bleibt `1px solid transparent`: Abstand ohne Linie. Im Bild war
|
||||
nichts zu sehen, im Quelltext sah alles richtig aus. */
|
||||
border-image: linear-gradient(90deg,
|
||||
color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 34%, transparent) 0%,
|
||||
color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 14%, transparent) 45%,
|
||||
transparent 92%) 1;
|
||||
}
|
||||
.kk__still { color: var(--text-still); }
|
||||
.kk__followup { color: var(--text-leise); }
|
||||
.kk__followup[data-faellig="ja"] { color: #f0c48a; font-weight: 600; }
|
||||
@@ -269,9 +454,20 @@
|
||||
/* Eine feine Kante in der Farbe der Stufe -- sie trennt die Abschnitte,
|
||||
ohne dass eine durchgehende Linie die Seite zerschneidet. */
|
||||
.stufe__kopf {
|
||||
align-items: flex-start;
|
||||
padding-bottom: 9px;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--stufe-farbe, var(--rand)) 34%, transparent);
|
||||
align-items: center;
|
||||
padding-bottom: 10px;
|
||||
/* AUSLAUFEND STATT DURCHGEZOGEN (06.10.2026). Eine Linie, die quer
|
||||
ueber die ganze Breite laeuft, wirkt wie eine Trennwand; eine, die
|
||||
nach rechts ausgeht, wie eine Markierung. Dieselbe Ueberlegung wie
|
||||
beim Streifen der Aufgabenspalten, dort schon ausgeschrieben.
|
||||
`border-image` statt `border-bottom`, weil ein Rand keinen Verlauf
|
||||
tragen kann -- die Breite steht deshalb getrennt davor. */
|
||||
border-style: solid;
|
||||
border-width: 0 0 1.5px;
|
||||
border-image: linear-gradient(90deg,
|
||||
color-mix(in srgb, var(--stufe-farbe, var(--rand)) 75%, transparent) 0%,
|
||||
color-mix(in srgb, var(--stufe-farbe, var(--rand)) 30%, transparent) 38%,
|
||||
transparent 92%) 1;
|
||||
}
|
||||
.stufe__zahl { margin-left: auto; flex: none; }
|
||||
|
||||
@@ -287,10 +483,16 @@
|
||||
color: var(--text-leise);
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* DIE REICHWEITE IST DIE ZAHL, NACH DER SORTIERT WIRD -- sie darf
|
||||
etwas lauter sein als „Deutschland" daneben. Gleichbreite Ziffern,
|
||||
damit 12k und 184k untereinander vergleichbar stehen. */
|
||||
.kk__fakt[data-art="follower"] {
|
||||
font-variant-numeric: tabular-nums;
|
||||
border-color: color-mix(in srgb, var(--akzent) 34%, transparent);
|
||||
color: color-mix(in srgb, var(--akzent) 62%, #ffffff);
|
||||
font-size: .8rem; font-weight: 700;
|
||||
padding: 3px 11px;
|
||||
border-color: color-mix(in srgb, var(--akzent) 40%, transparent);
|
||||
background: color-mix(in srgb, var(--akzent) 10%, transparent);
|
||||
color: color-mix(in srgb, var(--akzent) 55%, #ffffff);
|
||||
}
|
||||
|
||||
/* ---- „Schon im Netzwerk" ------------------------------------------
|
||||
|
||||
@@ -25,6 +25,26 @@
|
||||
gespraech: 'interessiert', interessiert: 'uebergeben',
|
||||
};
|
||||
|
||||
/* DIE ETAPPENNUMMER WIRD ABGELEITET, NICHT DANEBENGESCHRIEBEN
|
||||
(06.10.2026).
|
||||
|
||||
WEITER sagt bereits, welche Stufe auf welche folgt -- die
|
||||
Nummerierung ist genau dieser Weg, einmal durchgezaehlt. Eine
|
||||
zweite Liste `{ neu: 1, angesprochen: 2, ... }` waere die naechste
|
||||
Stelle, die beim Einfuegen einer Stufe vergessen wird; eine Liste,
|
||||
die niemand pflegt, kann nicht veralten.
|
||||
|
||||
„Abgelehnt" kommt in WEITER nicht vor und bekommt deshalb von
|
||||
selbst keine Nummer -- eine Absage ist keine Etappe auf dem Weg
|
||||
nach vorn. Dasselbe sagt der leere Zustand weiter unten, der
|
||||
ebenfalls nur bis fuenf zaehlt. */
|
||||
const STUFE_NR = (() => {
|
||||
const nummern = {};
|
||||
let stufe = 'neu', i = 1;
|
||||
while (stufe && !nummern[stufe]) { nummern[stufe] = String(i++).padStart(2, '0'); stufe = WEITER[stufe]; }
|
||||
return nummern;
|
||||
})();
|
||||
|
||||
/* WAS JEDE STUFE BEDEUTET -- an EINER Stelle.
|
||||
|
||||
Diese Saetze standen bis zum 11.09.2026 nur im leeren Zustand der
|
||||
@@ -127,8 +147,18 @@
|
||||
Ueberschriften durch die Seite bewegt, bekaeme die Trennung nicht
|
||||
mehr zu hoeren. */
|
||||
links.append(el('h4', 'kk__name', l.name));
|
||||
const unter = [l.plattform, l.handle].filter(Boolean).join(' · ');
|
||||
if (unter) links.append(el('p', 'kk__unter', unter));
|
||||
/* PLATTFORM UND HANDLE SIND ZWEI DINGE (06.10.2026).
|
||||
|
||||
Hier stand `[plattform, handle].join(' · ')` -- ein grauer Satz,
|
||||
in dem beides gleich aussah. Die Plattform ist eine Einordnung
|
||||
(davon gibt es eine Handvoll, man vergleicht sie), das Handle
|
||||
eine Kennung (einmalig, man liest sie Zeichen fuer Zeichen).
|
||||
Zwei Rollen, zwei Formen: die Plattform als kleines Schild, das
|
||||
Handle in gleichbreiter Schrift. */
|
||||
const unter = el('p', 'kk__unter');
|
||||
if (l.plattform) unter.append(el('span', 'kk__plattform', l.plattform));
|
||||
if (l.handle) unter.append(el('span', 'kk__handle', l.handle));
|
||||
if (unter.childNodes.length) links.append(unter);
|
||||
kopf.append(links);
|
||||
|
||||
const marken = el('div', 'kk__marken');
|
||||
@@ -513,6 +543,14 @@
|
||||
derselben Liste gelesen wie der leere Zustand -- nicht aus
|
||||
einer zweiten. */
|
||||
const kopf = el('div', 'stufe__kopf');
|
||||
/* Die Nummer ist eine OPTISCHE Angabe: Sie macht aus sechs
|
||||
Ueberschriften einen Weg. Fuer die Sprachausgabe ist sie
|
||||
ueberfluessig -- dort steht die Reihenfolge ohnehin in der
|
||||
Reihenfolge, und „null eins" vor jeder Ueberschrift waere
|
||||
Laerm. Was die Stufe BEDEUTET, sagt `.stufe__was` in Worten. */
|
||||
const nr = el('span', 'stufe__nr', STUFE_NR[wert] || '—');
|
||||
nr.setAttribute('aria-hidden', 'true');
|
||||
kopf.append(nr);
|
||||
const kt = el('div', 'stufe__text');
|
||||
kt.append(el('h2', 'stufe__titel', name));
|
||||
if (STUFE_WAS[wert]) kt.append(el('p', 'stufe__was', STUFE_WAS[wert]));
|
||||
|
||||
Reference in New Issue
Block a user