Hinweisliste "Was ist dran": Zeichen, Zahl und Farbe der Zielkachel
Die Zeilen waren die letzten schmucklosen Elemente der Startseite. Jetzt
traegt jede das Zeichen UND die Farbe der Kachel, zu der sie fuehrt --
Hinweis und Ziel gehoeren dadurch sichtbar zusammen, ohne dass die
Zuordnung ein zweites Mal irgendwo steht (sie kommt aus derselben
Tabelle wie die Zahl auf der Kachel). Die Anzahl steht vorn, getrennt vom
Satz und in gleicher Zeichenbreite; beim Ueberfliegen von sieben Zeilen
liest man genau sie zuerst. Ueberfaellig schlaegt Bereichsfarbe und
bleibt rot -- wenn etwas brennt, zaehlt zuerst, DASS es brennt.
Dabei gefunden und behoben: Die Farbtoene hingen an .kachel[data-ton=n].
Um sie fuer die Hinweiszeilen mitzunutzen, wurde .kachel entfernt --
damit gewann aber die Voreinstellung ".kachel { --ton: var(--akzent) }"
weiter unten in der Datei den Wettstreit der Regeln, und alle siebzehn
Kacheln waeren blau gewesen. Die Voreinstellung steht jetzt in :where()
und zaehlt dabei als nicht vorhanden. Die Browserpruefung hat das
gemeldet ("1 Farbe auf 17 Kacheln"), nicht das Auge.
"Nichts offen" ist kein gestrichelter Kasten mehr, sondern eine gute
Nachricht mit ruhigem Gruen und Haken. Weil er jetzt display:flex hat,
war er staerker als das hidden des Browsers und haette IMMER dagestanden
-- eigene Regel dafuer plus eine Pruefung, die beide Richtungen misst.
Neue Pruefungen (pruef-start-ansicht): Zeichen, vorangestellte Zahl,
keine doppelte Zahl im Satz, ganzer Satz fuer Vorleseprogramme, Farbe
gleich der Kachelfarbe an echten Bildpunkten, rot nur bei ueberfaellig.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+133
-38
@@ -346,27 +346,38 @@ body.start > main { position: relative; z-index: 1; }
|
||||
genommen -- LIVE rot, Technik gelb, Reports grün, Personen rot-gold.
|
||||
|
||||
Geprüft gegen genau diesen Hintergrund: Helligkeitsband, Farbstärke
|
||||
und Kontrast bestehen für alle siebzehn. */
|
||||
.kachel[data-ton="1"] { --ton: #3e95e7; } /* 250° */
|
||||
.kachel[data-ton="2"] { --ton: #7089ea; } /* 271° */
|
||||
.kachel[data-ton="3"] { --ton: #947de2; } /* 292° */
|
||||
.kachel[data-ton="4"] { --ton: #b173d0; } /* 314° */
|
||||
.kachel[data-ton="5"] { --ton: #c66ab5; } /* 335° */
|
||||
.kachel[data-ton="6"] { --ton: #d56694; } /* 356° */
|
||||
.kachel[data-ton="7"] { --ton: #dc666f; } /* 17° */
|
||||
.kachel[data-ton="8"] { --ton: #db6c48; } /* 38° */
|
||||
.kachel[data-ton="9"] { --ton: #d17717; } /* 59° */
|
||||
.kachel[data-ton="10"] { --ton: #ba8610; } /* 81° */
|
||||
.kachel[data-ton="11"] { --ton: #a29205; } /* 102° */
|
||||
.kachel[data-ton="12"] { --ton: #809e23; } /* 123° */
|
||||
.kachel[data-ton="13"] { --ton: #50a752; } /* 144° */
|
||||
.kachel[data-ton="14"] { --ton: #07aa7c; } /* 165° */
|
||||
.kachel[data-ton="15"] { --ton: #12a69b; } /* 186° */
|
||||
.kachel[data-ton="16"] { --ton: #04a3b4; } /* 208° */
|
||||
.kachel[data-ton="17"] { --ton: #059ece; } /* 229° */
|
||||
und Kontrast bestehen für alle siebzehn.
|
||||
|
||||
Die Töne hängen bewusst NICHT an .kachel, sondern nur am Merkmal
|
||||
data-ton: Dieselbe Nummer färbt die Kachel und die Hinweiszeile, die
|
||||
dorthin führt. Eine Farbe gehört hier zu einem Bereich, nicht zu einem
|
||||
Bauteil. */
|
||||
[data-ton="1"] { --ton: #3e95e7; } /* 250° */
|
||||
[data-ton="2"] { --ton: #7089ea; } /* 271° */
|
||||
[data-ton="3"] { --ton: #947de2; } /* 292° */
|
||||
[data-ton="4"] { --ton: #b173d0; } /* 314° */
|
||||
[data-ton="5"] { --ton: #c66ab5; } /* 335° */
|
||||
[data-ton="6"] { --ton: #d56694; } /* 356° */
|
||||
[data-ton="7"] { --ton: #dc666f; } /* 17° */
|
||||
[data-ton="8"] { --ton: #db6c48; } /* 38° */
|
||||
[data-ton="9"] { --ton: #d17717; } /* 59° */
|
||||
[data-ton="10"] { --ton: #ba8610; } /* 81° */
|
||||
[data-ton="11"] { --ton: #a29205; } /* 102° */
|
||||
[data-ton="12"] { --ton: #809e23; } /* 123° */
|
||||
[data-ton="13"] { --ton: #50a752; } /* 144° */
|
||||
[data-ton="14"] { --ton: #07aa7c; } /* 165° */
|
||||
[data-ton="15"] { --ton: #12a69b; } /* 186° */
|
||||
[data-ton="16"] { --ton: #04a3b4; } /* 208° */
|
||||
[data-ton="17"] { --ton: #059ece; } /* 229° */
|
||||
|
||||
/* Rückfallwert für alles, was einen Ton braucht, aber keine Nummer hat.
|
||||
Steht bewusst in :where() -- damit zählt die Zeile beim Wettstreit der
|
||||
Regeln als NICHT vorhanden und die Nummer oben gewinnt immer. Ohne
|
||||
das Kniff hätte diese Zeile (eine Klasse, weiter unten in der Datei)
|
||||
alle siebzehn Töne überstimmt und jede Kachel wäre blau gewesen. */
|
||||
:where(.kachel, .dran__punkt) { --ton: var(--akzent); }
|
||||
|
||||
.kachel {
|
||||
--ton: var(--akzent);
|
||||
/* Wo der Zeiger steht. Wird von start.js gesetzt; die Mitte ist der
|
||||
Rückfallwert, damit ohne Zeiger nichts springt. */
|
||||
--mx: 50%;
|
||||
@@ -568,11 +579,35 @@ body.start > main { position: relative; z-index: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
/* Der leere Zustand ist kein Fehler, sondern das Ziel -- deshalb ein
|
||||
ruhiges Gruen statt gestrichelter Leere. Gedeckt gehalten, kein
|
||||
Signalgruen: Es soll freuen, nicht blenden. */
|
||||
.zahlen-leer {
|
||||
margin: 0; padding: 15px 17px;
|
||||
font-size: .88rem; color: var(--text-still);
|
||||
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
||||
display: flex; align-items: center; gap: 13px;
|
||||
margin: 0; padding: 14px 17px;
|
||||
font-size: .9rem; color: var(--text);
|
||||
border: 1px solid rgba(80, 167, 130, .28);
|
||||
border-radius: var(--radius-klein);
|
||||
background: linear-gradient(90deg, rgba(80, 167, 130, .1), transparent 60%);
|
||||
}
|
||||
.zahlen-leer__haken {
|
||||
flex: none; display: grid; place-items: center;
|
||||
width: 30px; height: 30px; border-radius: 50%;
|
||||
border: 1px solid rgba(80, 167, 130, .38);
|
||||
background: rgba(80, 167, 130, .14);
|
||||
}
|
||||
.zahlen-leer__haken svg {
|
||||
width: 16px; height: 16px;
|
||||
fill: none; stroke: #6fbd95; stroke-width: 2;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
/* Pflicht, sobald hier ein display steht: Das display der Klasse ist
|
||||
staerker als das hidden des Browsers -- ohne diese Zeile stuende der
|
||||
Satz IMMER da, auch wenn Aufgaben offen sind. */
|
||||
.zahlen-leer[hidden] { display: none; }
|
||||
.zahlen-leer__still { color: var(--text-leise); }
|
||||
.zahlen-leer strong { font-weight: 650; }
|
||||
.zahlen-leer strong::after { content: " "; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
@@ -629,49 +664,109 @@ body.start > main { position: relative; z-index: 1; }
|
||||
.willkommen, .dran__liste, .inhalt .fuss { max-width: 940px; }
|
||||
|
||||
.dran { margin-bottom: 30px; }
|
||||
.dran__liste { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
|
||||
.dran__liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
|
||||
|
||||
/* Jede Zeile traegt Zeichen und Farbe ihrer Kachel (data-ton kommt aus
|
||||
start.js). Ohne Zuordnung bleibt der Hausakzent -- eine Zeile ohne
|
||||
Farbe gibt es nicht. */
|
||||
.dran__punkt {
|
||||
/* --ton kommt aus data-ton bzw. dem Rückfallwert in :where() oben. */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: var(--radius-klein);
|
||||
background: rgba(255, 255, 255, .028);
|
||||
transition: border-color .18s ease, background .18s ease;
|
||||
background:
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--ton) 9%, transparent), transparent 46%),
|
||||
rgba(255, 255, 255, .028);
|
||||
transition: border-color .18s ease, background .18s ease, transform .18s ease;
|
||||
}
|
||||
/* Der Streifen links ist die Farbe der Kachel, zu der es geht -- oben
|
||||
kraeftig, unten auslaufend, damit er nicht wie ein Balken wirkt. */
|
||||
.dran__punkt::before {
|
||||
content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px;
|
||||
border-radius: 0 2px 2px 0;
|
||||
background: var(--rand);
|
||||
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
||||
background: linear-gradient(180deg,
|
||||
var(--ton),
|
||||
color-mix(in srgb, var(--ton) 35%, transparent));
|
||||
}
|
||||
|
||||
/* Ueberfaellig schlaegt Bereichsfarbe: Wenn etwas brennt, zaehlt zuerst
|
||||
DASS es brennt. Das Zeichen sagt weiterhin, wo. */
|
||||
.dran__punkt[data-stufe="warnung"] {
|
||||
--ton: var(--warn);
|
||||
border-color: rgba(255, 154, 162, .3);
|
||||
background: rgba(255, 154, 162, .055);
|
||||
}
|
||||
.dran__punkt[data-stufe="warnung"]::before { background: var(--warn); }
|
||||
.dran__punkt[data-stufe="offen"]::before { background: var(--akzent); opacity: .7; }
|
||||
.dran__punkt[data-stufe="ruhig"] { opacity: .78; }
|
||||
.dran__punkt:hover { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); }
|
||||
.dran__punkt[data-stufe="ruhig"] { opacity: .8; }
|
||||
.dran__punkt:hover {
|
||||
border-color: color-mix(in srgb, var(--ton) 42%, var(--rand));
|
||||
background:
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--ton) 15%, transparent), transparent 52%),
|
||||
rgba(255, 255, 255, .05);
|
||||
}
|
||||
.dran__punkt[data-stufe="ruhig"]:hover { opacity: 1; }
|
||||
|
||||
.dran__link {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 14px;
|
||||
padding: 12px 15px 12px 18px;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto 1fr auto;
|
||||
align-items: center; gap: 13px;
|
||||
padding: 11px 15px 11px 17px;
|
||||
color: var(--text); text-decoration: none; font-size: .9rem;
|
||||
}
|
||||
.dran__punkt[data-stufe="warnung"] .dran__text { font-weight: 600; }
|
||||
.dran__zeichen {
|
||||
display: grid; place-items: center;
|
||||
width: 30px; height: 30px; border-radius: 9px;
|
||||
border: 1px solid color-mix(in srgb, var(--ton) 30%, transparent);
|
||||
background: color-mix(in srgb, var(--ton) 13%, transparent);
|
||||
transition: transform .18s ease, background .18s ease;
|
||||
}
|
||||
.dran__svg {
|
||||
width: 16px; height: 16px;
|
||||
fill: none; stroke: var(--ton); stroke-width: 1.7;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
.dran__link:hover .dran__zeichen {
|
||||
transform: scale(1.07);
|
||||
background: color-mix(in srgb, var(--ton) 20%, transparent);
|
||||
}
|
||||
/* Die Zahl steht vorn und in gleicher Zeichenbreite: Beim Ueberfliegen
|
||||
von sieben Zeilen liest man sie zuerst, und sie sollen untereinander
|
||||
stehen, nicht huepfen. */
|
||||
.dran__zahl {
|
||||
font-size: 1.15rem; font-weight: 700; line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--ton);
|
||||
min-width: 1.6ch; text-align: right;
|
||||
}
|
||||
.dran__text { color: var(--text-leise); }
|
||||
.dran__punkt[data-stufe="warnung"] .dran__text { color: var(--text); font-weight: 600; }
|
||||
.dran__pfeil {
|
||||
color: var(--text-still); font-size: .95rem;
|
||||
transition: transform .18s ease, color .18s ease;
|
||||
}
|
||||
.dran__link:hover .dran__pfeil { color: var(--akzent); transform: translateX(3px); }
|
||||
.dran__link:hover .dran__pfeil { color: var(--ton); transform: translateX(3px); }
|
||||
|
||||
/* Auf dem Handy ist Platz das knappste Gut: Zeichen und Pfeil weichen,
|
||||
Zahl und Satz bleiben -- die tragen die Aussage. */
|
||||
@media (max-width: 460px) {
|
||||
.dran__link { grid-template-columns: auto 1fr; gap: 10px; padding: 11px 13px 11px 15px; }
|
||||
.dran__zeichen, .dran__pfeil { display: none; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.kachel__wasserzeichen, .kachel__zeichen { transition: none; }
|
||||
.kachel:hover .kachel__wasserzeichen { transform: rotate(-8deg); }
|
||||
.kachel:hover .kachel__zeichen { transform: none; }
|
||||
|
||||
.dran__punkt, .dran__pfeil { transition: none; }
|
||||
.dran__punkt, .dran__pfeil, .dran__zeichen { transition: none; }
|
||||
.dran__link:hover .dran__pfeil { transform: none; }
|
||||
.dran__link:hover .dran__zeichen { transform: none; }
|
||||
}
|
||||
|
||||
/* Ohne Farbverlaeufe (Kontrastmodus, Druck) bleibt der Streifen als
|
||||
einfarbige Kante -- sonst waere die Zuordnung dort ganz weg. */
|
||||
@media (forced-colors: active) {
|
||||
.dran__punkt::before { background: CanvasText; }
|
||||
.dran__svg { stroke: CanvasText; }
|
||||
.dran__zahl { color: CanvasText; }
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
|
||||
Reference in New Issue
Block a user