kantarci/KantSites
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 81 Wiki Activity
Files
042aef9a32f709c4aa47c47c66cfccf754101984
KantSites/public/assets/design.css
T
kantarciandClaude Opus 5 ee446f1ea1 Einwilligung, die tatsächlich zurückhält, und Pflichtseiten 
Ein Hinweis, der nur fragt und sonst nichts ändert, ist Theater. Deshalb zwei
Hälften, und die zweite ist die wichtigere.

Die Frage: serverseitig gerendert, per Formular beantwortet, ohne JavaScript -
die öffentlichen Seiten laufen mit script-src 'none', und ein Banner mit
Skript wäre das eine, was diese Regel bricht. "Alle akzeptieren" und "Nur
notwendige" sind dieselbe Art Knopf, gleich groß, nebeneinander. Die
Entscheidung steht in einem eigenen Cookie: Fassung der Frage, gewährte
Gruppen, Zeitpunkt. Keine Kennung, kein Serverabgleich, ein halbes Jahr. Kein
CSRF-Token, absichtlich: die Anfrage ändert nichts auf dem Server, und ein
Token bräuchte für jeden Besucher eine Sitzung - genau das, was ein
Einwilligungshinweis vermeiden soll. Geprüft wird stattdessen das
Rücksprungziel.

Das Zurückhalten: der neue Block "Externer Inhalt" (Dokumentschema v14) lädt
ohne Einwilligung nichts - kein iframe, keine Adresse im Markup, frame-src
'none'. Der Platzhalter nennt den Anbieter; sein Knopf gewährt genau diese
Gruppe und nimmt die vorher gewährten mit. Erst danach kommt der Host in die
Sicherheitsrichtlinie, und nur dieser. Im Editor bleibt es immer ein
Platzhalter.

Datenschutz und Impressum sind keine Einstellung mehr: fehlen sie, warnt die
Verwaltung und legt sie auf Knopfdruck als Gerüst an, mit NOCH AUSZUFÜLLEN an
jeder Pflichtangabe. Den Text schreibt das CMS nicht - das ist eine rechtliche
Aussage über eine Firma. Verlinkt werden beide aus dem Template, nicht aus dem
Fußbereich: ein Pflichtlink, den man löschen kann, ist keiner.

Dazu der Fehler, den Umut im Screenshot gesehen hat: die Wortmarke stand als
Buchstabenkolonne in einem 60 Pixel breiten Kasten. .site-header war noch ein
Flexcontainer aus der Zeit des handgeschriebenen Markups und quetschte die
Sektion zusammen, und design.css band jede Designklasse an #main - wo Kopf-
und Fußbereich seit ADR 026 nicht mehr liegen. Beides behoben.

Neu im Ausbauplan: Statistik (serverseitige, wiedererkennungsfreie Zählung,
die deshalb keine Einwilligung braucht), Inhalte und Ladeverhalten prüfen
(Blättern überall, minimal laden, Ladebudget), Installer (Schritt für Schritt
im Browser, Migration inklusive).

245 PHP-Tests / 976 Assertions unter PHP 8.2.12 und 8.4.22. Der Browsertest
fand zwei Fehler von mir: grauer Text auf dunklem Fußbereich mit 2,24:1, und
das fixierte Banner verdeckte den Einwilligungsknopf am Seitenende.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-12 19:27:41 +02:00

138 lines
7.0 KiB
CSS
Raw Blame History

/* Generated from design-tokens.json by npm run build:design. */
.kant .d-desktop-align-left{text-align:left;margin-inline:0}
.kant .d-desktop-align-center{text-align:center;margin-inline:auto}
.kant .d-desktop-align-right{text-align:right;margin-inline:auto 0}
.kant .d-desktop-fontSize-small{font-size:14px}
.kant .d-desktop-fontSize-body{font-size:18px}
.kant .d-desktop-fontSize-large{font-size:24px}
.kant .d-desktop-fontSize-title{font-size:36px}
.kant .d-desktop-fontSize-display{font-size:52px}
.kant .d-desktop-fontSize-hero{font-size:72px}
.kant .d-desktop-fontWeight-regular{font-weight:400}
.kant .d-desktop-fontWeight-medium{font-weight:500}
.kant .d-desktop-fontWeight-bold{font-weight:700}
.kant .d-desktop-lineHeight-tight{line-height:1.15}
.kant .d-desktop-lineHeight-normal{line-height:1.5}
.kant .d-desktop-lineHeight-relaxed{line-height:1.8}
.kant .d-desktop-paddingY-none{padding-block:0}
.kant .d-desktop-paddingY-small{padding-block:16px}
.kant .d-desktop-paddingY-medium{padding-block:32px}
.kant .d-desktop-paddingY-large{padding-block:64px}
.kant .d-desktop-paddingY-huge{padding-block:96px}
.kant .d-desktop-paddingX-none{padding-inline:0}
.kant .d-desktop-paddingX-small{padding-inline:16px}
.kant .d-desktop-paddingX-medium{padding-inline:32px}
.kant .d-desktop-paddingX-large{padding-inline:64px}
.kant .d-desktop-marginTop-none{margin-top:0}
.kant .d-desktop-marginTop-small{margin-top:8px}
.kant .d-desktop-marginTop-medium{margin-top:24px}
.kant .d-desktop-marginTop-large{margin-top:48px}
.kant .d-desktop-marginBottom-none{margin-bottom:0}
.kant .d-desktop-marginBottom-small{margin-bottom:8px}
.kant .d-desktop-marginBottom-medium{margin-bottom:24px}
.kant .d-desktop-marginBottom-large{margin-bottom:48px}
.kant .d-desktop-gap-none{gap:0}
.kant .d-desktop-gap-small{gap:12px}
.kant .d-desktop-gap-medium{gap:24px}
.kant .d-desktop-gap-large{gap:48px}
.kant .d-desktop-columns-auto{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.kant .d-desktop-columns-one{grid-template-columns:minmax(0,1fr)}
.kant .d-desktop-columns-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.kant .d-desktop-columns-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.kant .d-desktop-columns-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.kant .d-desktop-radius-none{border-radius:0}
.kant .d-desktop-radius-small{border-radius:8px}
.kant .d-desktop-radius-large{border-radius:24px}
@media(max-width:1024px){
.kant .d-tablet-align-left{text-align:left;margin-inline:0}
.kant .d-tablet-align-center{text-align:center;margin-inline:auto}
.kant .d-tablet-align-right{text-align:right;margin-inline:auto 0}
.kant .d-tablet-fontSize-small{font-size:14px}
.kant .d-tablet-fontSize-body{font-size:18px}
.kant .d-tablet-fontSize-large{font-size:24px}
.kant .d-tablet-fontSize-title{font-size:36px}
.kant .d-tablet-fontSize-display{font-size:52px}
.kant .d-tablet-fontSize-hero{font-size:72px}
.kant .d-tablet-fontWeight-regular{font-weight:400}
.kant .d-tablet-fontWeight-medium{font-weight:500}
.kant .d-tablet-fontWeight-bold{font-weight:700}
.kant .d-tablet-lineHeight-tight{line-height:1.15}
.kant .d-tablet-lineHeight-normal{line-height:1.5}
.kant .d-tablet-lineHeight-relaxed{line-height:1.8}
.kant .d-tablet-paddingY-none{padding-block:0}
.kant .d-tablet-paddingY-small{padding-block:16px}
.kant .d-tablet-paddingY-medium{padding-block:32px}
.kant .d-tablet-paddingY-large{padding-block:64px}
.kant .d-tablet-paddingY-huge{padding-block:96px}
.kant .d-tablet-paddingX-none{padding-inline:0}
.kant .d-tablet-paddingX-small{padding-inline:16px}
.kant .d-tablet-paddingX-medium{padding-inline:32px}
.kant .d-tablet-paddingX-large{padding-inline:64px}
.kant .d-tablet-marginTop-none{margin-top:0}
.kant .d-tablet-marginTop-small{margin-top:8px}
.kant .d-tablet-marginTop-medium{margin-top:24px}
.kant .d-tablet-marginTop-large{margin-top:48px}
.kant .d-tablet-marginBottom-none{margin-bottom:0}
.kant .d-tablet-marginBottom-small{margin-bottom:8px}
.kant .d-tablet-marginBottom-medium{margin-bottom:24px}
.kant .d-tablet-marginBottom-large{margin-bottom:48px}
.kant .d-tablet-gap-none{gap:0}
.kant .d-tablet-gap-small{gap:12px}
.kant .d-tablet-gap-medium{gap:24px}
.kant .d-tablet-gap-large{gap:48px}
.kant .d-tablet-columns-auto{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.kant .d-tablet-columns-one{grid-template-columns:minmax(0,1fr)}
.kant .d-tablet-columns-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.kant .d-tablet-columns-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.kant .d-tablet-columns-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.kant .d-tablet-radius-none{border-radius:0}
.kant .d-tablet-radius-small{border-radius:8px}
.kant .d-tablet-radius-large{border-radius:24px}
}
@media(max-width:650px){
.kant .d-mobile-align-left{text-align:left;margin-inline:0}
.kant .d-mobile-align-center{text-align:center;margin-inline:auto}
.kant .d-mobile-align-right{text-align:right;margin-inline:auto 0}
.kant .d-mobile-fontSize-small{font-size:14px}
.kant .d-mobile-fontSize-body{font-size:18px}
.kant .d-mobile-fontSize-large{font-size:24px}
.kant .d-mobile-fontSize-title{font-size:36px}
.kant .d-mobile-fontSize-display{font-size:52px}
.kant .d-mobile-fontSize-hero{font-size:72px}
.kant .d-mobile-fontWeight-regular{font-weight:400}
.kant .d-mobile-fontWeight-medium{font-weight:500}
.kant .d-mobile-fontWeight-bold{font-weight:700}
.kant .d-mobile-lineHeight-tight{line-height:1.15}
.kant .d-mobile-lineHeight-normal{line-height:1.5}
.kant .d-mobile-lineHeight-relaxed{line-height:1.8}
.kant .d-mobile-paddingY-none{padding-block:0}
.kant .d-mobile-paddingY-small{padding-block:16px}
.kant .d-mobile-paddingY-medium{padding-block:32px}
.kant .d-mobile-paddingY-large{padding-block:64px}
.kant .d-mobile-paddingY-huge{padding-block:96px}
.kant .d-mobile-paddingX-none{padding-inline:0}
.kant .d-mobile-paddingX-small{padding-inline:16px}
.kant .d-mobile-paddingX-medium{padding-inline:32px}
.kant .d-mobile-paddingX-large{padding-inline:64px}
.kant .d-mobile-marginTop-none{margin-top:0}
.kant .d-mobile-marginTop-small{margin-top:8px}
.kant .d-mobile-marginTop-medium{margin-top:24px}
.kant .d-mobile-marginTop-large{margin-top:48px}
.kant .d-mobile-marginBottom-none{margin-bottom:0}
.kant .d-mobile-marginBottom-small{margin-bottom:8px}
.kant .d-mobile-marginBottom-medium{margin-bottom:24px}
.kant .d-mobile-marginBottom-large{margin-bottom:48px}
.kant .d-mobile-gap-none{gap:0}
.kant .d-mobile-gap-small{gap:12px}
.kant .d-mobile-gap-medium{gap:24px}
.kant .d-mobile-gap-large{gap:48px}
.kant .d-mobile-columns-auto{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.kant .d-mobile-columns-one{grid-template-columns:minmax(0,1fr)}
.kant .d-mobile-columns-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.kant .d-mobile-columns-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.kant .d-mobile-columns-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.kant .d-mobile-radius-none{border-radius:0}
.kant .d-mobile-radius-small{border-radius:8px}
.kant .d-mobile-radius-large{border-radius:24px}
}
Reference in new issue View Git Blame Copy Permalink