DogFatherGitandClaude Opus 5
a06184f24f
Weiter am Rundumcheck, diesmal der Handy-Rundgang. Von sechs Befunden war einer ein echter Layoutfehler, zwei waren zu kleine Schrift, und drei kamen daher, dass die Messung etwas nicht unterscheiden konnte. === AUF DEM HANDY KAPUTT === 1. DER NAME IN DER PERSONENKARTE WAR NULL PIXEL BREIT. Gemessen auf 412 px: `h3.tperson__name` mit `w=0` bzw. `w=15`. Der Name stand als Buchstabensaeule da oder gar nicht -- auf der Seite, die von Menschen handelt. `.tperson__text` trug `flex: 1; min-width: 0`. Das erlaubt dem Textblock, auf null zu schrumpfen, und Flexbox schrumpft lieber, als umzubrechen -- die Pille „zuletzt gesehen" daneben blieb stehen und nahm allen Platz. `min-width: 0` war trotzdem richtig gemeint (ohne sie blaeht ein langes Wort den Kasten auf); es fehlte nur die Untergrenze. Jetzt `min(14ch, 100%)`: vierzehn Zeichen, wenn so viel Platz ist, sonst der ganze Platz, der da ist. Die Pille bricht um -- `flex-wrap: wrap` stand am Kopf ohnehin schon, es fehlte nur der Grund, es zu benutzen. 2. ZWEI BESCHRIFTUNGEN UNTER DER LESBARKEITSGRENZE. `.u-weg__marke` 10,88 px, `.u-weg__aus` 11,2 px -- die Hausgrenze sind 11,5. Der Reflex dahinter: Eine Marke soll leise sein, also macht man sie klein. Leise wird sie aber durch Farbe und Gewicht; eine Schrift, die man nicht lesen kann, ist nicht leise, sondern weg. Derselbe Griff ist mir gestern dreimal an einem Tag passiert. === DREI MESSUNGEN, DIE ETWAS NICHT UNTERSCHEIDEN KONNTEN === 3. `pointer-events: none` IST KEIN BERUEHRZIEL. Die Terminpunkte im Monatsraster des Kalenders sind 8 x 8 px und nehmen ausdruecklich keine Beruehrung an -- angetippt wird die ZELLE. Sie als „zu klein" zu melden ist, als beanstande man die Groesse eines gemalten Knopfs. `pruef-breiten` kennt die Ausnahme seit jeher; im Handy-Rundgang hat sie gefehlt. 4. `font-size: 0` IST KEINE KLEINE SCHRIFT, SONDERN KEINE. Dieselben Punkte: Die Schrift wird auf null gesetzt, die Farbe bleibt. Gemeldet wurde „0px, zu klein". Die Grenze nach unten bleibt scharf -- alles zwischen 0,1 und 11,5 px ist weiterhin ein Befund, nur die glatte Null faellt heraus. Sie ist eine Aussage, keine Nachlaessigkeit. 5. `scrollWidth > clientWidth` SAGT BEI INLINE-ELEMENTEN NICHTS. Chromium liefert dort fuer `clientWidth` glatt null, und damit ist jeder Text breiter als sein Kasten. Der richtige Umgang mit einer unmoeglichen Messung ist, sie nicht zu machen -- nicht, ihr Ergebnis zu glauben. Dazu: Was per `clip-path: inset(50%)` fuer das Auge weggenommen ist (echte <select> unter selbst gebauten Umschaltern, Beschriftungen zu Symbolknoepfen), kann nicht abgeschnitten sein. === UND EINE MELDUNG, DIE JETZT SAGT, WO MAN SUCHEN MUSS === „abgeschnitten: Mara (18>0)" hat mich zwanzig Minuten gekostet -- drei Vermutungen, drei Messungen. Die Meldung nennt jetzt Element, Klasse, Darstellungsart und Breite: „Mara (18>0, h3.tperson__name, block, w=0)". Damit war der Fall in einem Blick klar. Eine Pruefung, die nur sagt DASS etwas ist, ist eine halbe. GEMESSEN: pruef-breiten 0 Fehler (9 Breiten, 38 Seiten), pruef-team 51/0, pruef-tippziele 11/0, pruef-css-klassen 33/0. Im Handy-Rundgang bleiben die Kopfleisten-Befunde bei 360/390/412 px -- die nehme ich mir als Naechstes vor, sie brauchen einen Umbau und keine Korrektur. Co-Authored-By: Claude Opus 5 <[email protected]>
104 lines
4.8 KiB
HTML
104 lines
4.8 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>Calls & Protokolle · Spicy & Dogi</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<link rel="manifest" href="/workspace/app.webmanifest" />
|
||
<!-- Die Farbe der Fensterleiste, wenn der Workspace als App laeuft.
|
||
Stand auf #0674b9 (kraeftiges Blau) und stach damit als einziger
|
||
heller Balken ueber einer durchweg dunklen Seite. Jetzt derselbe
|
||
Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite
|
||
eine Flaeche sind statt zweier. -->
|
||
<meta name="theme-color" content="#06090f" />
|
||
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609251327" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609251327" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609251327" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609251327" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609251327" />
|
||
<link rel="stylesheet" href="assets/css/calls.css?v=202609251327" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609251327" />
|
||
<!-- 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=202609251327" />
|
||
</head>
|
||
|
||
<body class="start">
|
||
|
||
<!-- Der Schleier ueber der Buehne (Casper und HasiDog in den unteren
|
||
Ecken, siehe start.css). Ein eigenes Element statt eines dritten
|
||
Pseudo-Elements -- body hat nur ::before und ::after. -->
|
||
<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> · Calls</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">
|
||
|
||
<section class="kopf-zeile">
|
||
<div>
|
||
<p class="marke">Gespräche</p>
|
||
<h1 class="titel">Calls & Protokolle</h1>
|
||
<p class="unterzeile">
|
||
Jeder Call endet mit klaren To-dos – die landen direkt im Aufgabenbrett,
|
||
nicht in einem Dokument, das niemand mehr öffnet.
|
||
</p>
|
||
</div>
|
||
<a class="knopf knopf--klein" href="kalender.html">Call planen</a>
|
||
</section>
|
||
|
||
<!-- Wo die Calls stattfinden. Einmal festgelegt, steht der Knopf
|
||
„Call beitreten" danach an JEDEM Gespräch – niemand muss mehr bei
|
||
jedem Termin einen Link eintippen, und die Frage „wo führe ich den
|
||
Call?" ist beantwortet, bevor sie jemand stellt. -->
|
||
<section class="call-raum" id="call-raum" hidden>
|
||
<p class="call-raum__zeile">
|
||
<span class="call-raum__schild">Call-Raum</span>
|
||
<a class="call-raum__link" id="call-raum-link" target="_blank" rel="noopener noreferrer" hidden></a>
|
||
<span class="call-raum__leer" id="call-raum-leer" hidden>noch nicht festgelegt</span>
|
||
</p>
|
||
<button type="button" class="knopf-still" id="call-raum-aendern" hidden>Ändern</button>
|
||
<form class="call-raum__form" id="call-raum-form" hidden>
|
||
<label class="feld-schild" for="call-raum-feld">Link zum Sprachkanal (Discord)</label>
|
||
<input id="call-raum-feld" type="url" maxlength="400"
|
||
placeholder="https://discord.com/channels/…" />
|
||
<button type="submit" class="knopf knopf--klein">Speichern</button>
|
||
<button type="button" class="abmelden" id="call-raum-abbrechen">Abbrechen</button>
|
||
</form>
|
||
</section>
|
||
|
||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<div id="listen" aria-busy="true"><p class="leise">Gespräche werden geladen …</p></div>
|
||
|
||
</main>
|
||
|
||
<script src="assets/js/meldung.js?v=202609251327" defer></script>
|
||
<script src="assets/js/nachfrage.js?v=202609251327" defer></script>
|
||
|
||
<script src="assets/js/ki.js?v=202609251327" defer></script>
|
||
<script src="assets/js/wahl.js?v=202609251327" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609251327" defer></script>
|
||
<script src="assets/js/installieren.js?v=202609251327" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609251327" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609251327" defer></script>
|
||
<script src="assets/js/calls.js?v=202609251327" defer></script>
|
||
</body>
|
||
</html>
|