From 9244149bac29ba575941a3f647e213380a17e032 Mon Sep 17 00:00:00 2001 From: fs Date: Fri, 31 Jul 2026 20:46:25 +0200 Subject: [PATCH] Sperrung der Kartentitel: neuer Token --ls-heading statt --ls-caps MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --ls-caps (0.08em) war zu viel: bei 34px sind das 2,7px und die Überschriften wirkten auseinandergezogen. Gewollt war ein Hauch Luft, etwa 0,4px (Felix). Dafür gibt es keinen Token, und rohe Werte verbietet die Token-Disziplin — also --ls-heading: 0.012em, was bei 34px genau 0,408px ergibt (nachgemessen). Der Fall trifft jede Coolvetica-Überschrift in h3-Größe, nicht nur diese Karten: der Schnitt ist condensed, bei 60px trägt er ohne Sperrung, bei 34px kleben die Versalien. --ls-caps bleibt für kleine Labels, wofür es gedacht ist. Klarstellung zum vorigen Commit: die Titel waren und bleiben Coolvetica. Der Verweis auf Abel in meiner Begründung war ein Zitat der CLAUDE.md-Regel für kleine Auszeichnungen, keine Änderung an der Schriftart. CLAUDE.md entsprechend berichtigt, inklusive der Warnung, hier nicht --ls-caps zu nehmen. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7 --- CLAUDE.md | 10 ++++++---- public/assets/css/components.css | 13 +++++++------ public/assets/css/tokens.css | 6 ++++++ 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 418c1f3..51df179 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -279,10 +279,12 @@ nicht durchgezogen. darunter unleserlich (mehrfach bestätigt: Footer-Headings, Timeline-Nav). Für kleinere Auszeichnungen Abel verwenden, ggf. mit `letter-spacing` + uppercase. `base.css` setzt das durch: `h1`–`h3` tragen Coolvetica, **`h4`–`h6` laufen über `--ff-body` + uppercase + `--ls-caps`**. -- **Coolvetica unter ~40px braucht `letter-spacing: var(--ls-caps)`.** Der Schnitt ist condensed: bei - 60px (Abschnitts-h2) trägt er ohne Sperrung, bei 34px in einer schmalen Spalte kleben die Versalien - aneinander und der Titel wird schwer lesbar (aufgefallen an den Beitragskarten, 31.07.2026). Die - globalen `h1`–`h3` stehen bewusst auf `letter-spacing: normal` — gesperrt wird pro Komponente. +- **Coolvetica unter ~40px braucht `letter-spacing: var(--ls-heading)`** (0.012em, also 0,4px bei + 34px). Der Schnitt ist condensed: bei 60px (Abschnitts-h2) trägt er ohne Sperrung, bei 34px in einer + schmalen Spalte kleben die Versalien und der Titel wird schwer lesbar (aufgefallen an den + Beitragskarten, 31.07.2026). **Nicht `--ls-caps` (0.08em) nehmen** — das ist für kleine Labels + gedacht und lässt eine Überschrift auseinandergezogen wirken. Die globalen `h1`–`h3` stehen + bewusst auf `letter-spacing: normal`, gesperrt wird pro Komponente. - Rot nie für Fließtext auf dunklem Grund (Kontrast!) — nur als Button-/Akzent-Fläche mit weißem Text. **Gemessene Zahl dazu:** `#e20612` auf der Glas-Karte (`rgba(0 0 0 / 0.22)` über `#222`) erreicht **3,50:1** und verfehlt die 4,5:1 für Fließtext; Weiß liegt bei 17,22:1. Genau daran sind die diff --git a/public/assets/css/components.css b/public/assets/css/components.css index f105646..551819f 100644 --- a/public/assets/css/components.css +++ b/public/assets/css/components.css @@ -4176,12 +4176,13 @@ 34px ist die nächste Stufe; --fs-690 (bis 44px) würde die langen Titel wie „Zusatzbeitrag für bestehende TSV-Mitglieder" in drei Zeilen brechen. */ font-size: var(--fs-675); - /* --ls-caps, weil Coolvetica ein Condensed-Schnitt ist: bei 60px (Abschnitts-h2) - trägt er ohne Sperrung, bei 34px in einer schmalen Kartenspalte klebten die - Versalien aneinander und „ZUSATZBEITRAG FÜR BESTEHENDE TSV-MITGLIEDER" war - schwer zu lesen (Felix, 31.07.2026). Gemessen war letter-spacing vorher - `normal`, also gar keins — nicht zu eng eingestellt, sondern nicht gesetzt. */ - letter-spacing: var(--ls-caps); + /* Coolvetica ist ein Condensed-Schnitt: bei 60px (Abschnitts-h2) trägt er ohne + Sperrung, bei 34px in einer schmalen Kartenspalte klebten die Versalien und + „ZUSATZBEITRAG FÜR BESTEHENDE TSV-MITGLIEDER" war schwer zu lesen. Gemessen war + letter-spacing vorher `normal`, also gar keins — nicht zu eng, sondern nicht + gesetzt. --ls-heading (0,4px bei 34px), NICHT --ls-caps: mit 0.08em wirkte die + Überschrift auseinandergezogen (Felix, 31.07.2026). */ + letter-spacing: var(--ls-heading); line-height: var(--lh-heading); margin-bottom: var(--space-s); } diff --git a/public/assets/css/tokens.css b/public/assets/css/tokens.css index e92d705..53c93a9 100644 --- a/public/assets/css/tokens.css +++ b/public/assets/css/tokens.css @@ -72,6 +72,12 @@ /* Sperrung. Coolvetica ist Condensed und hat nur einen Schnitt: unter 28px wird es in Uppercase unleserlich (siehe CLAUDE.md). Kleinere Auszeichnungen laufen deshalb über --ff-body + uppercase + --ls-caps statt --ff-heading. */ + --ls-heading: 0.012em; /* Coolvetica-Überschriften unter ~40px: nur ein Hauch Luft + zwischen den Versalien (0,4px bei 34px). Der Schnitt ist + condensed, ohne Sperrung kleben die Buchstaben — mit + --ls-caps (0.08em) wirkt eine Überschrift dagegen + auseinandergezogen. Nicht für kleine Labels, dafür + --ls-caps/--ls-wide. */ --ls-tight: 0.03em; /* dezente Straffung in Fließtext-Größen */ --ls-caps: 0.08em; /* Standard für gesperrte Uppercase-Auszeichnungen */ --ls-wide: 0.12em; /* kleine Labels, Meta-Zeilen */