Beitragsblock: Sektions-Kopf nach Hausmuster, Preise größer
Drei Dinge, zwei aus deinem Feedback und eines von mir.
1) Der Einleitungstext klebte ohne Abstand an der Überschrift und lief über die
volle Breite, über 120 Zeichen je Zeile ("schaut weird aus"). Ursache: ich
hatte <p class="lead"> geschrieben — eine Klasse, die es im Projekt gar nicht
gibt, der Absatz war also völlig unformatiert. Jetzt das etablierte Muster
(.membership-signup__head, instagram, partners): zentrierter Kopf, 60ch breit,
Luft nach unten. Anmerkung im Code: dasselbe Kopf-Muster steht damit zum
vierten Mal fast gleich in components.css — ein gemeinsames .section__head
wäre die Aufräumung, aber ein eigener Umbau.
2) Preise von 28px auf 34px. Sie tragen die Hervorhebung allein, seit die Farbe
weg ist, und sind die Information, auf die man in einer Beitragstabelle sieht.
3) Selbst aufgefallen: die Überschrift "Austritt" lag in .prose und rendert dort
mit 21px Abel — exakt Fließtextgröße, also gar keine Auszeichnung. In
Impressum und Artikeln ist das richtig, deshalb .prose nicht angetastet,
sondern eigene Klassen für den Hinweis: 28px Coolvetica (die Untergrenze für
Versalien) mit derselben dezenten Sperrung wie die Kartentitel.
Außerdem: data/turnen.json ist wieder in seiner ursprünglichen Formatierung.
Mein JSON-Schreiber hatte im vorigen Commit die kompakten Arrays aufgeklappt
("widths": [640, 1000, 1600] wurde vierzeilig) — inhaltlich identisch, aber 371
Diff-Zeilen für eine Umbenennung. Jetzt textuell ersetzt statt neu geschrieben:
17 Diff-Zeilen, Inhalt per Vergleich identisch.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
This commit is contained in:
@@ -4140,6 +4140,41 @@
|
||||
}
|
||||
|
||||
/* === fee-table (Beitragstabellen) === */
|
||||
/* Sektions-Kopf der Beitragsseite. Dieselben Werte wie .membership-signup__head
|
||||
(und damit wie instagram/partners): zentriert, auf 60 Zeichen begrenzt, mit Luft
|
||||
nach unten. Hier stand zuerst ein linksbündiger h2 mit einem <p class="lead">
|
||||
darunter — eine Klasse, die es im Projekt gar nicht gibt. Der Absatz hatte
|
||||
dadurch keinen Abstand zur Überschrift und lief über die volle Breite, also über
|
||||
120 Zeichen je Zeile (Felix: „schaut weird aus", 31.07.2026).
|
||||
Anmerkung fürs nächste Mal: dieses Kopf-Muster steht jetzt zum vierten Mal
|
||||
fast gleich in dieser Datei. Ein gemeinsames .section__head wäre die Aufräumung,
|
||||
das ist aber ein eigener Umbau über mehrere Komponenten. */
|
||||
.fees__head {
|
||||
max-width: 60ch;
|
||||
margin: 0 auto var(--space-3xl);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fees__intro {
|
||||
margin-top: var(--space-s);
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
/* Austritts-Hinweis unter den Tabellen: Lesespalte, aber mit eigener Überschrift.
|
||||
--fs-650 ist die Untergrenze für Coolvetica in Versalien (CLAUDE.md), plus die
|
||||
dezente Sperrung aus demselben Grund wie bei den Kartentiteln. */
|
||||
.fees__note {
|
||||
max-width: 72ch;
|
||||
margin-top: var(--space-3xl);
|
||||
}
|
||||
|
||||
.fees__note-title {
|
||||
font-size: var(--fs-650);
|
||||
letter-spacing: var(--ls-heading);
|
||||
line-height: var(--lh-heading);
|
||||
margin-bottom: var(--space-s);
|
||||
}
|
||||
|
||||
/* Mehrere Tabellen nebeneinander (Turnen hat drei: Zusatzbeitrag, Neumitglieder,
|
||||
Förderstufen). auto-fit mit 22rem Mindestbreite statt einer festen Spaltenzahl:
|
||||
bei drei Tabellen ergibt das auf Desktop eine Reihe, am Handy eine Spalte, und
|
||||
@@ -4212,7 +4247,11 @@
|
||||
margin: 0;
|
||||
flex: none;
|
||||
font-family: var(--ff-heading);
|
||||
font-size: var(--fs-650);
|
||||
/* --fs-675 (34px) statt --fs-650: der Preis ist die Information, auf die man in
|
||||
einer Beitragstabelle schaut, und trägt hier allein die Hervorhebung, seit die
|
||||
Farbe weg ist. Gleiche Stufe wie der Kartentitel, aber an anderer Position —
|
||||
sie konkurrieren nicht. */
|
||||
font-size: var(--fs-675);
|
||||
line-height: 1;
|
||||
/* WEISS, nicht Akzentrot. Rot auf dem Kartengrund erreicht nur 3,50:1 und
|
||||
verfehlt damit die 4,5:1 für Fließtext — und ein Beitrag ist Information, die
|
||||
|
||||
Reference in New Issue
Block a user