DogFatherGitandClaude Opus 5
db8dd2fbea
Filipe: „nur die kacheln noch viel geiler. so dass ich die texte auch
besser erkenne."
NAHELIEGEND WAERE GEWESEN, die Farben aufzuhellen. Erst gemessen,
dann gebaut -- und die Vermutung war falsch:
Kontrast .s-karte__text 15,7 : 1 (noetig 4,5)
Kontrast aller zehn Textarten 7,5 bis 15,7 : 1
ZEICHEN JE ZEILE 147 (angenehm 45-75)
Am Kontrast lag es nicht; der ist ueberall ueppig. Es lag an der
ZEILENLAENGE. Auf 1280 px lief der Meldungstext ueber die ganze
Kartenbreite: 1120 px, knapp 150 Zeichen. Beim Zeilenwechsel findet
das Auge die naechste Zeile nicht mehr sicher -- man liest dieselbe
zweimal oder ueberspringt eine. Das ist der groesste Hebel beim
Lesen, und er kostet nichts.
GEAENDERT
Meldungstext 15,2 -> 17 px, max-width 72ch, Zeilenhoehe 1.6
Verlaufstext 14,4 -> 15,2 px, max-width 70ch
Kartenrand 16/18/15/22 -> 18/20/16/24 px
Trennlinie zwischen Meldung und Verlauf
147 -> 78 Zeichen je Zeile (PC), 39 auf dem Handy
`ch` UND NICHT PIXEL: `ch` ist die Breite der Null und waechst mit
der Schrift mit. Eine Angabe in Pixeln waere bei der naechsten
Schriftgroesse wieder falsch -- dieselbe Falle wie jede feste Zahl.
MEHR RAND, WEIL DIE SCHRIFT GEWACHSEN IST. Bei unveraendertem Rand
haette sie die Kante beruehrt, und die Karte waere voller gewirkt
statt lesbarer. Links bleibt es breiter: dort laeuft die
Leuchtschiene in der Farbe des Stands.
DIE TRENNLINIE kostet einen Pixel und beantwortet „wo hoert die
Meldung auf und wo faengt die Vorgeschichte an?". Vorher lief beides
ohne Zaesur ineinander.
EIN FEHLER IN MEINER EIGENEN MESSUNG -- und er haette Schaden
angerichtet
Die erste Fassung der Kontrastrechnung meldete fuer drei gut lesbare
Texte einen Kontrast von 1,04. Ich war nah dran, Farben zu
„reparieren", die in Ordnung sind.
Der Grund: `rgb()` zaehlt 0..255, `color(srgb …)` zaehlt 0..1 -- und
genau das liefert Chrome fuer jedes `color-mix()`. 0,77 als 0,77/255
gelesen ist fast Schwarz. Aufgefallen ist es nur, weil die Zahl
nicht zum Bildschirmfoto passte: Dort waren die Texte deutlich
lesbar.
DESHALB STEHT IN DER PRUEFUNG EINE GEGENPROBE IM BROWSER: Ein
absichtlich zu blasser Absatz wird eingehaengt und MUSS auffallen
(gemessen 1,23 : 1). Ohne sie waere „alle ueber 4,5" auch dann
gruen, wenn die Rechnung kaputt ist -- und genau das war sie.
GEPRUEFT -- pruef-support-bilder 56 -> 64 ok
9 Textarten in der Karte gemessen
der Meldungstext ist 16.96 px gross (mindestens 16)
und bricht nach etwa 78 Zeichen um (hoechstens 85, vorher 147)
der Verlaufstext: 15.2 px, etwa 75 Zeichen
jeder Text haelt die Kontrastschwelle (0 darunter)
— schwaechster 7.55 : 1
Gegenprobe: ein absichtlich blasser Text faellt auf (1.23 : 1)
auf 390 px ragt mit der groesseren Schrift nichts heraus (0 px)
und die Zeile bleibt lesbar lang (etwa 39 Zeichen)
Dazu gruen: pruef-css-klassen · pruef-fingermass.
Co-Authored-By: Claude Opus 5 <[email protected]>
99 lines
4.6 KiB
HTML
99 lines
4.6 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||
<title>Dein Team · Spicy & Dogi</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<link rel="manifest" href="/workspace/app.webmanifest" />
|
||
<meta name="theme-color" content="#06090f" />
|
||
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202610031234" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202610031234" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202610031234" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202610031234" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202610031234" />
|
||
<link rel="stylesheet" href="assets/css/team.css?v=202610031234" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202610031234" />
|
||
<!-- haus.css MUSS die letzte Stilvorlage sein (10.09.2026).
|
||
Auf der Agenturadresse ist sie leer -- das Haus hier IST der
|
||
Grundzustand. Auf der Adresse von Team Dogi biegt der Server
|
||
genau diesen Dateinamen auf crew-haus.css um, und die Seite
|
||
kommt schon beim ERSTEN Abruf in Lila und Babyblau an --
|
||
ohne Umfaerben im Browser, ohne Flackern. -->
|
||
<link rel="stylesheet" href="assets/css/haus.css?v=202610031234" />
|
||
</head>
|
||
|
||
<!-- `data-buehne` steht hier fest und nicht im Skript: Die Kachel zu
|
||
dieser Seite kommt vom Server, `zuSeite()` in bereiche.js findet
|
||
sie deshalb nicht -- und ohne Fund griff der Rueckfall, also die
|
||
Szene der anderen Marke. Eine Seite mit genau einer Buehne
|
||
braucht dafuer kein Skript. -->
|
||
<body class="start" data-buehne="eingang">
|
||
|
||
<div class="schleier" aria-hidden="true"></div>
|
||
|
||
<header class="kopfleiste">
|
||
<button type="button" class="zurueck-knopf" id="zurueck" hidden>
|
||
<svg class="zurueck-knopf__pfeil" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M14.5 5.5 8 12l6.5 6.5" />
|
||
</svg>
|
||
<span class="zurueck-knopf__text">Zurück</span>
|
||
</button>
|
||
<p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator Workspace</a> · Dein Team</span></p>
|
||
<div class="kopfleiste__rechts">
|
||
<span class="wer" id="wer">…</span>
|
||
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="inhalt inhalt--breit">
|
||
|
||
<!-- ==== DER KOPF ================================================
|
||
Er sagt, was diese Seite ist UND was sie nicht ist. Der zweite
|
||
Teil ist der wichtigere -- dieselbe Ueberlegung steht schon
|
||
ueber team.html: Eine Seite mit Zahlen ueber Kollegen wird sonst
|
||
als Kontrolle gelesen, und dann arbeitet niemand mehr offen
|
||
damit.
|
||
|
||
"Offen" heisst hier deshalb ausdruecklich: darueber habt ihr
|
||
noch nicht geredet. Es ist eine Liste fuer euch beide, keine
|
||
Note fuer den anderen. -->
|
||
<section class="t-kachel">
|
||
<div class="t-kopf">
|
||
<div class="t-kopf__text">
|
||
<p class="feldschild">Zusammen</p>
|
||
<h1 class="t-kopf__titel">Was auf dich wartet</h1>
|
||
<p class="t-kopf__unter" id="kopf-unter">…</p>
|
||
<p class="t-kopf__grenze">
|
||
Was hier steht, ist eine Merkliste für euch beide – keine Bewertung
|
||
von Menschen. „Offen“ heißt: darüber habt ihr noch nicht gesprochen.
|
||
Eingeschätzt wird dort, wo die Punkte stehen; jede Zahl führt dorthin.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||
</section>
|
||
|
||
<section class="t-lage" id="lage" aria-busy="true"></section>
|
||
|
||
</main>
|
||
|
||
<!-- wahl.js VOR kopf.js (nachgetragen 10.09.2026).
|
||
kopf.js baut den Sicht-Umschalter; ohne wahl.js sieht er aus wie
|
||
ein blankes Browser-Auswahlfeld statt wie der Rest des Hauses.
|
||
Kaputt ist dabei nichts -- er funktioniert. Genau deshalb faellt
|
||
es niemandem auf, und deshalb prueft pruef-css-klassen die
|
||
ABHAENGIGKEIT statt der Optik. Hier hat sie angeschlagen. -->
|
||
<script src="assets/js/meldung.js?v=202610031234" defer></script>
|
||
<script src="assets/js/nachfrage.js?v=202610031234" defer></script>
|
||
|
||
<script src="assets/js/wahl.js?v=202610031234" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202610031234" defer></script>
|
||
<script src="assets/js/installieren.js?v=202610031234" defer></script>
|
||
<script src="assets/js/kopf.js?v=202610031234" defer></script>
|
||
<script src="assets/js/glocke.js?v=202610031234" defer></script>
|
||
<script src="assets/js/holen.js?v=202610031234" defer></script>
|
||
<script src="assets/js/teamlage.js?v=202610031234" defer></script>
|
||
</body>
|
||
</html>
|