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]>
262 lines
11 KiB
HTML
262 lines
11 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>Die Regeln · Das Rudel</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=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/treff.css?v=202609251327" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609251327" />
|
||
<!-- haus.css MUSS die letzte Stilvorlage sein. Auf der Adresse des
|
||
Rudels 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">
|
||
|
||
<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">Das Rudel</a> · Regeln</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">
|
||
|
||
<section class="kopf-zeile">
|
||
<div>
|
||
<p class="marke">Das Rudel</p>
|
||
<!-- HIESS BIS ZUM 18.09.2026 „Regeln & Hilfe" -- genau wie das
|
||
BRETT, auf das der Absatz weiter unten verweist. Auf dem
|
||
Brett stand damit ein Link „Regeln & Hilfe", der auf eine
|
||
Seite namens „Regeln & Hilfe" fuehrte; wer ihn drueckte,
|
||
glaubte, im Kreis gelaufen zu sein.
|
||
|
||
Die beiden sind verschiedene Dinge: Hier stehen die fuenf
|
||
Regeln, kurz und fest. Das Brett sammelt daneben haeufige
|
||
Fragen, Hilfe und was im Einzelfall passiert. Zwei Namen
|
||
fuer zwei Sachen. -->
|
||
<h1 class="titel">Die Regeln</h1>
|
||
<p class="unterzeile">
|
||
Kurz, in normaler Sprache, und alles, was hier steht, gilt auch.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<!-- ==================================================================
|
||
WARUM DER TEXT HIER STEHT UND DIE ZAHLEN NICHT
|
||
|
||
Die Saetze sind Text und gehoeren in eine Datei. Die ZAHLEN
|
||
darin (sieben Tage, dreissig Tage, drei Beitraege, drei
|
||
Anschlaege, 18 Jahre) kommen vom Server -- sie stehen im Code,
|
||
und ein Regeltext, der eine andere Zahl nennt als die Regel, ist
|
||
schlimmer als gar keiner: Niemand merkt es, und wer es merkt,
|
||
glaubt dem Text.
|
||
|
||
Die Platzhalter tragen deshalb "…" als Vorgabe. Kommt die
|
||
Antwort nicht, steht dort sichtbar nichts -- und nicht
|
||
versehentlich eine Zahl von gestern.
|
||
============================================================== -->
|
||
<!-- ==================================================================
|
||
EINE FLAECHE STATT SECHS KACHELN (22.09.2026)
|
||
|
||
Filipe: „lass bitte die ganzen regeln viel geiler und spezieller
|
||
aussehen und nicht sehr viele kacheln sondern eine riesige wo
|
||
alles schön aussieht und richtig geil, übersichtlich"
|
||
|
||
Vorher waren es sechs einzelne Kaesten untereinander. Jeder mit
|
||
eigenem Rand, eigenem Grund, eigenem Abstand -- und dazwischen
|
||
jedes Mal ein Schnitt. Beim Lesen faengt man damit sechsmal neu
|
||
an; Regeln lesen sich aber als EIN Text, nicht als sechs
|
||
Merkzettel.
|
||
|
||
Jetzt: eine Flaeche, und die Abschnitte darin sind durch eine
|
||
Linie getrennt statt durch eine Luecke.
|
||
|
||
UEBERSICHTLICH HEISST HIER: EINE SPRUNGLEISTE. Eine lange
|
||
Flaeche ohne Wegweiser ist nicht uebersichtlicher als sechs
|
||
Kaesten, sondern nur laenger. Die Leiste steht oben, nennt alle
|
||
Abschnitte und springt hin. Sie wird NICHT gepflegt, sondern aus
|
||
den Abschnitten gebaut (regeln.js) -- eine Liste von Hand waere
|
||
die, die beim siebten Abschnitt fehlt.
|
||
============================================================== -->
|
||
<div class="regelflaeche">
|
||
<nav class="regelflaeche__leiste" id="regel-sprung" aria-label="Zu einem Abschnitt springen"></nav>
|
||
|
||
<section class="treff-abschnitt" id="willkommen">
|
||
<h2 class="treff-abschnitt__titel">Schön, dass du da bist</h2>
|
||
<div class="treff-abschnitt__inhalt">
|
||
<p>
|
||
Das Rudel ist der Ort rund um DogFather: Hier steht, was gerade gilt,
|
||
was ansteht, und hier redet ihr miteinander. Er ist nicht öffentlich –
|
||
du bist hier, weil dir jemand einen Code gegeben hat.
|
||
</p>
|
||
<p class="leise">
|
||
Gib diesen Code nicht weiter. Er gehört zu dir, und was damit
|
||
geschrieben wird, steht unter deinem Namen.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="treff-abschnitt">
|
||
<h2 class="treff-abschnitt__titel">Die fünf Regeln</h2>
|
||
<div class="treff-abschnitt__inhalt">
|
||
<ol class="regel-liste">
|
||
<li><strong>Sei anständig.</strong> Keine Beleidigungen, keine Angriffe
|
||
auf Menschen, keine Hetze. Streiten über eine Sache ist in Ordnung –
|
||
über einen Menschen nicht.</li>
|
||
<li><strong>Keine privaten Daten.</strong> Keine Adressen, keine
|
||
Telefonnummern, keine Klarnamen von anderen. Auch nicht von dir
|
||
selbst, es liest mehr mit, als du denkst.</li>
|
||
<li><strong>Nichts Fremdes hochladen.</strong> Was du einstellst, muss
|
||
von dir sein oder dir gehören.</li>
|
||
<li><strong>Keine Werbung, kein Verkauf.</strong> Auch nicht für
|
||
andere Streams.</li>
|
||
<li><strong>Was hier passiert, bleibt hier.</strong> Keine
|
||
Bildschirmfotos nach draußen.</li>
|
||
</ol>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="treff-abschnitt">
|
||
<h2 class="treff-abschnitt__titel">Wie du weiterkommst</h2>
|
||
<div class="treff-abschnitt__inhalt">
|
||
<p>
|
||
In der ersten Zeit kannst du lesen und bei Wünschen mitstimmen.
|
||
Das ist kein Misstrauen gegen dich – es ist eines gegen
|
||
Wegwerf-Zugänge.
|
||
</p>
|
||
<ul class="regel-liste" id="stufen">
|
||
<li class="leise">wird geladen …</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="treff-abschnitt">
|
||
<h2 class="treff-abschnitt__titel">Wenn etwas nicht stimmt</h2>
|
||
<div class="treff-abschnitt__inhalt">
|
||
<p>
|
||
An jedem Beitrag, der nicht von dir ist, steht <strong>melden</strong>.
|
||
Schreib in einem Satz, was daran nicht in Ordnung ist – ohne das
|
||
können wir es nicht prüfen.
|
||
</p>
|
||
<p>
|
||
Wir sehen uns jede Meldung an. Wird ein Beitrag entfernt, halten wir
|
||
fest, <strong>warum</strong> – und die Person, die ihn geschrieben hat,
|
||
erfährt den Grund. Das ist keine Höflichkeit, sondern
|
||
<span class="leise">Artikel 17 des Digital Services Act</span>.
|
||
</p>
|
||
<p class="leise" id="kontakt">
|
||
Du erreichst uns außerdem direkt: Schreib es auf das Brett
|
||
<a href="bereich.html?b=treff">Das Rudel</a> oder sag es <span
|
||
id="kontakt-wem">jemandem aus dem Team</span>.
|
||
</p>
|
||
<p class="leise">
|
||
Häufige Fragen und Antworten stehen auf dem Brett
|
||
<a href="bereich.html?b=regeln">Regeln & Hilfe</a>.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="treff-abschnitt">
|
||
<h2 class="treff-abschnitt__titel">Was passiert, wenn jemand sich nicht daran hält</h2>
|
||
<div class="treff-abschnitt__inhalt">
|
||
<p>Wir gehen der Reihe nach vor, und niemand fliegt ohne Ansage:</p>
|
||
<ol class="regel-liste">
|
||
<li><strong>Hinweis.</strong> Jemand sagt dir, was nicht ging.</li>
|
||
<li><strong>Pause.</strong> Ein paar Tage nichts schreiben. Lesen
|
||
geht weiter.</li>
|
||
<li><strong>Ende.</strong> Der Zugang wird geschlossen.</li>
|
||
</ol>
|
||
<p class="leise" id="ausschluss">…</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="treff-abschnitt">
|
||
<h2 class="treff-abschnitt__titel">Das Kleingedruckte – kurz</h2>
|
||
<div class="treff-abschnitt__inhalt">
|
||
<p id="alter">…</p>
|
||
<p>
|
||
<strong>Was gespeichert wird:</strong> dein Name, dein Zugangscode
|
||
(verschlüsselt, niemand kann ihn lesen), was du schreibst, und wann
|
||
du dich anmeldest. Mehr nicht – kein Standort, keine Werbe-IDs,
|
||
keine Weitergabe an Dritte.
|
||
</p>
|
||
<p>
|
||
<strong>Du willst weg?</strong> Sag Bescheid. Dein Zugang wird
|
||
geschlossen und deine Beiträge werden entfernt.
|
||
</p>
|
||
<p class="leise">
|
||
Das Rudel ist ein kleiner, geschlossener Bereich. Es gibt keine
|
||
Direktnachrichten zwischen Mitgliedern – absichtlich: Ein
|
||
öffentlicher Raum lässt sich moderieren, ein privater nicht.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
</div><!-- /.regelflaeche -->
|
||
|
||
|
||
<!-- ==== WAS IST ÜBER MICH GESPEICHERT? (15.09.2026) ==============
|
||
Art. 15 DSGVO. Kein Antrag, kein Formular, kein Warten – ein
|
||
Knopf. Er steht auf den beiden Seiten, die einem Menschen selbst
|
||
gehören: dem Steckbrief und den Rudel-Regeln. Die Community hat
|
||
keinen Steckbrief; ohne die zweite Stelle hätte ausgerechnet die
|
||
Gruppe mit den wenigsten Rechten auch diesen nicht. -->
|
||
<section class="meine-daten">
|
||
<div class="meine-daten__kopf">
|
||
<h2 class="meine-daten__titel">Was ist über mich gespeichert?</h2>
|
||
<button type="button" class="knopf-still" id="auskunft-knopf">Datei herunterladen</button>
|
||
</div>
|
||
<p class="meine-daten__satz">
|
||
Alles, was dieser Workspace über dich weiß, als Datei zum Mitnehmen.
|
||
Zugangsgeheimnisse sind nicht dabei, und wo andere Menschen vorkommen,
|
||
stehen sie nicht mit Namen darin – ihre Daten gehören ihnen.
|
||
</p>
|
||
<p class="leise" id="auskunft-stand" hidden></p>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- WER kopf.js LAEDT, MUSS AUCH wahl.js LADEN (Regel seit 07.09.2026).
|
||
|
||
Der Umschalter "Meine Sicht" in der Kopfleiste ist ein selbst
|
||
gebautes Bedienelement; dahinter liegt ein unsichtbares Systemfeld
|
||
fuer Vorleseprogramme. Ohne wahl.js faellt kopf.js auf dieses Feld
|
||
zurueck -- ein grauer Kasten von 92 x 19 Pixeln mit weisser
|
||
Schrift, mitten in einer dunklen Leiste.
|
||
|
||
Beim ersten Anlauf fehlte die Zeile auf genau diesen beiden neuen
|
||
Seiten. Gefunden hat das nicht das Auge, sondern pruef-css-klassen,
|
||
die seit dem 07.09. jede Seite danach absucht. -->
|
||
<script src="assets/js/nachfrage.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/auskunft.js?v=202609251327" defer></script>
|
||
<script src="assets/js/treff-regeln.js?v=202609251327" defer></script>
|
||
</body>
|
||
</html>
|