fs
3fa521eaf1
Zweiter Teil der Konsolidierung. Vorher standen 31 font-size-Werte außerhalb der Skala — beim Durchgehen stellte sich heraus, dass 20 davon gar keine Textgrößen sind: der icon()-Helper rendert 1em, also steuerte font-size dort die Icon-Größe. Dafür gibt es jetzt eine eigene, kleine Skala (--icon-s/m/l/xl in rem, --icon-inline-sm/--icon-inline/--icon-inline-lg in em für Icons, die im Textfluss mitwachsen sollen). Elf Ad-hoc-Werte fallen damit auf sieben Stufen. h4–h6 laufen nicht mehr über Coolvetica. Sie lagen mit 26px und 21px unter der --fs-650-Grenze aus CLAUDE.md, ab der der Condensed-Schnitt in Uppercase unleserlich wird — die Regel war also nur dokumentiert, nicht durchsetzbar. Jetzt tragen h1–h3 Coolvetica (alle über der Grenze) und h4–h6 Abel mit Sperrung. Bezeichnend: das einzige <h4> im Markup hatte sich genau dieses Muster bereits von Hand gebaut. Die Basisregel liefert es jetzt, die Komponente gibt ihre drei Duplikat-Deklarationen ab — sichtbar ändert sich dadurch nichts. Neue Stufen schließen die Lücken: --fs-550 (fluider Lead), --fs-690 (Karten- Überschrift) und --fs-1000 (Display-Hero). Vier fast deckungsgleiche clamp()- Rampen für Karten-Überschriften (bento__heading, bento__stat-value, group-card__name, team-card__name) laufen jetzt über --fs-690; team-card__name wächst dabei am Desktop um ~5px, die anderen drei bleiben im 1px-Bereich. Die Wappen-Initialen im Matchcenter hingen an zwei Mini-Schriftgrößen (10,4 und 11,2px) unterhalb der Skala. Sie sind in Wahrheit ~0,4 × Kreisdurchmesser, folgen jetzt also --crest-size statt einer eigenen font-size. Nebenbei fallen drei redundante Doppel-Selektoren weg: .crest--initials trägt immer auch .crest. Ebenfalls tokenisiert: 27 letter-spacing-Werte mit elf verschiedenen Zahlen auf vier Stufen (--ls-tight/caps/wide/wider), maximale Abweichung 0,02em. Danach steht kein font-size- und kein letter-spacing-Wert mehr außerhalb von tokens.css. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU
127 lines
3.0 KiB
CSS
127 lines
3.0 KiB
CSS
/* ============================================================
|
||
BASE — Fonts, Typografie, Links, Fokus, Skip-Link
|
||
============================================================ */
|
||
@font-face {
|
||
font-family: 'Coolvetica';
|
||
src: url('../fonts/coolvetica.woff2') format('woff2');
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Abel';
|
||
src: url('../fonts/abel.woff2') format('woff2');
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--ff-body);
|
||
font-size: var(--fs-600);
|
||
font-weight: var(--fw-regular);
|
||
line-height: var(--lh-body);
|
||
color: var(--clr-text);
|
||
background-color: var(--clr-bg);
|
||
/* WebP primär (deutlich sauberere Textur), JPEG-Fallback für Alt-Browser */
|
||
background-image: url('../img/background.jpg');
|
||
background-image: image-set(url('../img/background.webp') type('image/webp'));
|
||
background-size: 100% auto;
|
||
background-attachment: fixed;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
body {
|
||
/* fixed-Attachment ruckelt auf Mobile */
|
||
background-attachment: scroll;
|
||
background-size: auto;
|
||
}
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
font-weight: var(--fw-regular);
|
||
line-height: var(--lh-heading);
|
||
text-transform: uppercase;
|
||
text-wrap: balance;
|
||
}
|
||
|
||
/* h1–h3 tragen Coolvetica: alle liegen über der 28px-Grenze (--fs-650). */
|
||
h1,
|
||
h2,
|
||
h3 {
|
||
font-family: var(--ff-heading);
|
||
}
|
||
|
||
h1 { font-size: var(--fs-900); }
|
||
h2 { font-size: var(--fs-800); }
|
||
h3 { font-size: var(--fs-700); }
|
||
|
||
/* h4–h6 laufen über Abel statt Coolvetica. Coolvetica ist Condensed mit nur
|
||
einem Schnitt und wird in Uppercase unter --fs-650 (28px) unleserlich — diese
|
||
Ebenen liegen aber naturgemäß darunter. Abel + Sperrung hält sie lesbar und
|
||
trotzdem als Auszeichnung erkennbar; die Regel aus CLAUDE.md kann hier damit
|
||
gar nicht mehr verletzt werden. Zeilenhöhe zurück auf Fließtext-Maß, weil
|
||
--lh-heading (0.9) nur für die extremen Coolvetica-Größen gedacht ist. */
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
font-family: var(--ff-body);
|
||
line-height: 1.2;
|
||
letter-spacing: var(--ls-caps);
|
||
}
|
||
|
||
h4 { font-size: var(--fs-650); }
|
||
h5 { font-size: var(--fs-600); }
|
||
h6 { font-size: var(--fs-500); }
|
||
|
||
|
||
a {
|
||
color: inherit;
|
||
text-decoration-thickness: 1px;
|
||
text-underline-offset: 0.2em;
|
||
}
|
||
|
||
a:hover {
|
||
color: var(--clr-text-muted);
|
||
}
|
||
|
||
:focus-visible {
|
||
outline: 2px solid var(--clr-text);
|
||
outline-offset: 3px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
::selection {
|
||
background: var(--clr-accent);
|
||
color: var(--clr-text);
|
||
}
|
||
|
||
.skip-link {
|
||
position: absolute;
|
||
top: -100%;
|
||
left: 1rem;
|
||
z-index: 100;
|
||
padding: 0.75em 1.25em;
|
||
background: var(--clr-accent);
|
||
color: var(--clr-text);
|
||
text-decoration: none;
|
||
border-radius: 0 0 var(--radius-btn) var(--radius-btn);
|
||
}
|
||
|
||
.skip-link:focus-visible {
|
||
top: 0;
|
||
color: var(--clr-text);
|
||
}
|
||
|
||
/* Scrollbar dezent dunkel */
|
||
html {
|
||
scrollbar-width: thin;
|
||
scrollbar-color: var(--clr-bg-corporate) transparent;
|
||
}
|