DogFatherGitandClaude Opus 5
69ba533cee
pruef-barrierefrei-workspace, wissen.html, Scout und Creator: Beim
Durchtabben veraendert sich an den Wissenskacheln NICHTS. Kein Rahmen,
kein Ring, keine Kante. Wer nicht mit der Maus arbeitet, tippt blind.
=== EIN SPEZIFITAETS-UNFALL, UND ER BETRIFFT NICHT NUR DIESE SEITE ===
Die Regel war da und richtig geschrieben:
wissen.css .kachel:focus-visible { box-shadow: 0 0 0 3px ... }
Sie kam nur nicht an. Gemessen mit einem neuen Werkzeug
(server/mess-fokus.mjs, echte Tastendruecke, kein focus()):
:focus true :focus-visible true
boxShadow gleich rgba(0,0,0,0.95) 7px 7px 14px -10px inset
outline gleich none
`:focus-visible` griff also, und trotzdem blieb alles, wie es war.
Der Grund steht in module.css, in einer Liste von 45 Klassennamen:
:is(.eintrag-karte, ..., .kachel, ..., .gruppe[data-gruppe], ...)
`:is()` uebernimmt die Spezifitaet seines STAERKSTEN Arguments.
`.gruppe[data-gruppe]` ist eine Klasse PLUS ein Attribut. Damit ist die
ganze Liste (0,2,0) statt (0,1,0) -- genau so stark wie
`.kachel:focus-visible`. Bei Gleichstand gewinnt, was spaeter geladen
wird, und module.css wird zuletzt geladen. Ein einziges Attribut in
einer Aufzaehlung, sechs Zeilen weiter rechts, hat den Fokusring von
jedem Bauteil im Haus verschluckt, dessen Fokusregel aus einer Klasse
besteht.
=== GELOEST WIRD DAS NICHT, INDEM MAN DIE LISTE SCHWAECHER MACHT ===
Das war schon einmal so (`:where()`, Spezifitaet null) und ergab einen
Zwitter aus neuer Form und alter Kante -- der Kommentar in module.css
beschreibt es. Wer die Zahl senkt, verschiebt das Problem auf die
naechste Regel.
Geloest wird es, indem die ANTWORT dort steht: ein Fokusring fuer die
ganze Modulliste, in derselben Datei wie die Form, mit
`:focus-visible` also eine Klasse staerker als die Grundregel. Er gilt
damit fuer jedes Modul im Haus -- auch fuer die, die es noch nicht
gibt, und auch dort, wo nie jemand an eine Fokusregel gedacht hat.
`outline-offset` ist NEGATIV, und das ist kein Geschmack: `clip-path`
(die Fase an der Ecke) schneidet alles ab, was ausserhalb der Form
liegt. Ein Ring mit positivem Abstand waere unsichtbar gewesen -- der
alte war es ja auch. Nach innen gezeichnet bleibt er stehen. Gemessen,
nicht geschlossen.
=== WAS NICHT MITREPARIERT WURDE, UND WARUM ES DASTEHT ===
Derselbe Gleichstand trifft auch Hover-Regeln in frueher geladenen
Dateien: `.ablage:hover` (dateien.css), `.call:hover` (calls.css),
`.kk:hover` (scouting.css), `.fortschritt:hover` (uebersicht.css)
setzen alle `border-color`, und die Grundregel setzt `border: 0`.
Diese vier tun vermutlich nichts.
Angefasst habe ich sie nicht -- es gibt kein Messgeraet dafuer. Fokus
laesst sich pruefen (die Pruefung tabbt und vergleicht), Hover nicht.
Und die naheliegende Loesung wuerde die Form von 45 Bauteilen auf 38
Seiten neu entscheiden; das ohne Messgeraet zu tun waere Raten mit viel
Einsatz. Der Befund steht deshalb als Absatz in module.css, damit der
Naechste nicht wieder bei null anfaengt.
=== UND EINE BEHAUPTUNG VON MIR WIRD ZURUECKGENOMMEN ===
Im Commit d7bb0f7e steht, ein Mindestabstand von 0,10 sei fuer 45
Kachelfarben „rechnerisch nicht mehr moeglich", mit einer Tabelle von
„Decken". Das ist falsch herum gelesen: Das Werkzeug SUCHT eine
Anordnung. Findet es nichts Besseres, sagt das etwas ueber das
Verfahren, nicht ueber die Welt. Nachweisbar ist nur, was es GEFUNDEN
hat -- und wie wenig das eine Decke ist, zeigt der eigene Lauf: Fuer
dieselben 45 Farben kam dasselbe Verfahren je nach Rasterweite einmal
auf 0,0974 und einmal auf 0,0876.
Die Pruefung sagt das jetzt so, und das Werkzeug heisst zwar weiter
kachelton-decke.mjs, erklaert aber in den ersten zwanzig Zeilen, dass
es keine Decke misst. Beide Werkzeuge liegen jetzt ueberhaupt im
Verzeichnis: Sie hiessen `tools/_toene-*.mjs`, und `tools/_*` ist
ausgenommen -- die Kommentare verwiesen also auf Dateien, die es nach
dem Klonen nirgends gibt.
GEMESSEN, alles nach den Aenderungen:
pruef-barrierefrei-workspace 18 Punkte, 0 Fehler (vorher 2)
pruef-buehne 230 Punkte, 0 Fehler
pruef-kachelraster 15 Punkte, 0 Fehler
pruef-start-ansicht 157 Punkte, 0 Fehler
pruef-kopfleiste-farbe 9 Punkte, 0 Fehler
pruef-rueckmeldung 30 Punkte, 0 Fehler
pruef-entwicklung-kacheln 34 Punkte, 0 Fehler
pruef-kachel-universum 13 Punkte, 0 Fehler
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=202609252349" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609252349" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609252349" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609252349" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609252349" />
|
||
<link rel="stylesheet" href="assets/css/treff.css?v=202609252349" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609252349" />
|
||
<!-- 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=202609252349" />
|
||
</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=202609252349" defer></script>
|
||
|
||
<script src="assets/js/wahl.js?v=202609252349" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609252349" defer></script>
|
||
<script src="assets/js/installieren.js?v=202609252349" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609252349" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609252349" defer></script>
|
||
<script src="assets/js/auskunft.js?v=202609252349" defer></script>
|
||
<script src="assets/js/treff-regeln.js?v=202609252349" defer></script>
|
||
</body>
|
||
</html>
|