fs/tsv08kulmbach-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design-System: Spacing auf Tokens migrieren

Browse Source 
Alle padding/margin/gap-Deklarationen in components.css, layout.css und
base.css nutzen jetzt die Spacing-Skala — 414 Token-Verwendungen, kein roher
rem-Wert mehr in einer Abstands-Deklaration.

Die Substitution lief mechanisch (nächste Rasterstufe, Gleichstand aufgerundet),
damit sie deterministisch und nachvollziehbar ist statt 450-mal von Hand
geraten. Rund 325 Werte lagen bereits exakt auf einer Stufe und sind
verlustfrei übernommen. 125 Werte verschieben sich:

  ±0,4–2,0px   106 Werte  (0.1/0.15/0.3/0.35/0.4/0.6/0.85/0.9/1.1/1.6rem …)
  ±4px          12 Werte  (2.25 -> 2.5, 2.75 -> 3rem)
  ±8px           8 Werte  (3.5 -> 4, 4.5 -> 5, 7.5 -> 7rem)

Die 8px-Sprünge treffen ausschließlich Sektionsabstände (padding-block großer
Bänder, margin-top von Blöcken), wo sie optisch nicht ins Gewicht fallen. Die
±4px-Gruppe ist 2.25rem, das exakt zwischen zwei Stufen lag.

em-Werte bleiben bewusst roh: sie skalieren mit der font-size (Button-Padding,
Badge-Innenabstände) und gehören damit nicht auf ein festes px-Raster. Nullen,
auto und Prozentwerte sind unangetastet, calc() wurde korrekt mitgezogen
(calc(var(--header-h) + var(--space-5xl))).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU
This commit is contained in:
Felix Schneider
2026-07-27 10:09:33 +02:00
parent 8304095dc3
commit 87055bd14b
7 changed files with 458 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
public/assets/css/layout.css
View File

@@ -30,14 +30,14 @@
.site-header__inner {
display: flex;
align-items: center;
gap: 1.5rem;
gap: var(--space-l);
min-height: var(--header-h);
}
.site-header__brand {
display: flex;
align-items: center;
gap: 0.75rem;
gap: var(--space-xs);
text-decoration: none;
color: var(--clr-text);
}
@@ -60,7 +60,7 @@
.site-header__actions {
display: flex;
align-items: center;
gap: 0.5rem;
gap: var(--space-2xs);
}
/* Header-CTAs haben eine eigene, kompakte Größe (kein generisches sm/lg-Preset):
@@ -84,7 +84,7 @@
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
gap: var(--space-l);
font-size: var(--fs-500);
}
@@ -162,11 +162,11 @@
transform-origin: top center;
z-index: 25;
display: grid;
gap: 0.2rem;
gap: var(--space-3xs);
min-width: 15rem;
margin: 0;
/* Gleichmäßiges Padding rundum — Pillen stehen oben/unten/seitlich gleich dezent frei. */
padding: 0.55rem;
padding: var(--space-2xs);
list-style: none;
/* Glasiges, leicht transluzentes Panel mit Tiefe über der Hintergrund-Textur. */
background: rgb(20 20 20 / 0.96);
@@ -199,7 +199,7 @@
.site-nav__list .site-nav__submenu a:not(.btn) {
position: relative;
display: block;
padding: 0.65rem 0.9rem 0.65rem 1rem;
padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-s);
border-bottom: 0;
border-radius: var(--radius-btn);
font-size: var(--fs-500);
@@ -226,7 +226,7 @@
.site-nav__list .site-nav__submenu a:not(.btn):hover,
.site-nav__list .site-nav__submenu a:not(.btn):focus-visible {
border-bottom: 0;
padding-left: 1.25rem;
padding-left: var(--space-m);
background: rgb(var(--clr-accent-rgb) / 0.14);
}
@@ -238,15 +238,15 @@
.site-nav__list .site-nav__submenu a:not(.btn)[aria-current="page"] {
border-bottom: 0;
padding-left: 1.25rem;
padding-left: var(--space-m);
background: rgb(var(--clr-accent-rgb) / 0.2);
}
/* Letzter Dropdown-Punkt mit optischer Trennung (hairline oben + etwas Abstand) */
.site-nav__submenu-sep {
border-top: 1px solid var(--clr-glass-border);
margin-top: 0.35rem;
padding-top: 0.35rem;
margin-top: var(--space-3xs);
padding-top: var(--space-3xs);
}
@media (max-width: 1249px) {
@@ -349,7 +349,7 @@
damit die Menüpunkte mit dem Logo fluchten. */
.site-nav .site-nav__list {
/* Oben: Header + Logo-Überhang (Logo ragt unter den Header) + Luft. */
padding: calc(var(--header-h) + 4rem) var(--container-pad) 3rem;
padding: calc(var(--header-h) + var(--space-5xl)) var(--container-pad) var(--space-4xl);
}
@supports (backdrop-filter: blur(1px)) {
@@ -378,7 +378,7 @@
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1rem 0.25rem;
padding: var(--space-s) var(--space-3xs);
border-bottom: 0;
font-family: var(--ff-heading);
font-size: var(--fs-650);
@@ -389,7 +389,7 @@
.site-nav__sublink[data-current] {
border-bottom: 0;
box-shadow: inset 3px 0 0 var(--clr-accent);
padding-left: 1rem;
padding-left: var(--space-s);
}
/* Volle Breite + zentrierter Text: Items und Untermenüs zentrieren sich am
@@ -422,7 +422,7 @@
overflow: hidden;
opacity: 0;
visibility: hidden;
gap: 0.25rem;
gap: var(--space-3xs);
min-width: 0;
justify-self: stretch;
margin: 0;
@@ -449,7 +449,7 @@
}
.site-nav__list .site-nav__submenu > li:last-child {
padding-bottom: 0.75rem;
padding-bottom: var(--space-xs);
}
/* Unterpunkte in Abel, Groß-/Kleinschreibung — wie im Desktop-Dropdown
@@ -457,7 +457,7 @@
den Hauptpunkten; die aktive Unterseite rückt per Desktop-Regel mit
Akzentbalken + Tint leicht ein. */
.site-nav__list .site-nav__submenu a:not(.btn) {
padding: 0.6rem 0.25rem;
padding: var(--space-2xs) var(--space-3xs);
font-family: var(--ff-body);
font-size: var(--fs-500);
text-transform: none;
@@ -552,8 +552,8 @@
.site-footer__grid {
display: grid;
grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
gap: 2.5rem 3rem;
padding-block: 4.5rem 3.5rem;
gap: var(--space-3xl) var(--space-4xl);
padding-block: var(--space-6xl) var(--space-5xl);
}
/* Brand-Block bleibt links stehen, Nav-Spalten rücken rechts daneben */
@@ -575,7 +575,7 @@
@media (max-width: 500px) {
.site-footer__grid {
grid-template-columns: 1fr;
gap: 2.25rem;
gap: var(--space-3xl);
}
}
@@ -583,7 +583,7 @@
.site-footer__brand {
display: grid;
justify-items: start;
gap: 1.25rem;
gap: var(--space-m);
}
.site-footer__claim {
@@ -593,14 +593,14 @@
.site-footer__social {
display: grid;
gap: 0.5rem;
gap: var(--space-2xs);
}
.site-footer__social a {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding-block: 0.3rem;
gap: var(--space-2xs);
padding-block: var(--space-3xs);
color: var(--clr-text-muted);
text-decoration: none;
transition: color var(--transition);
@@ -616,8 +616,8 @@
.site-footer__heading {
font-size: var(--fs-650);
letter-spacing: 0.06em;
margin-bottom: 1.1rem;
padding-bottom: 0.6rem;
margin-bottom: var(--space-s);
padding-bottom: var(--space-2xs);
position: relative;
}
@@ -646,12 +646,12 @@
font-style: normal;
color: var(--clr-text-muted);
display: grid;
gap: 1rem;
gap: var(--space-s);
}
.site-footer__address p {
display: flex;
gap: 0.6rem;
gap: var(--space-2xs);
margin: 0;
}
@@ -663,13 +663,13 @@
.site-footer__list {
display: grid;
gap: 0.25rem;
gap: var(--space-3xs);
}
.site-footer__list a,
.site-footer__address a {
display: inline-block;
padding-block: 0.3rem;
padding-block: var(--space-3xs);
color: var(--clr-text-muted);
text-decoration: none;
transition: color var(--transition);
@@ -686,8 +686,8 @@
/* Zusatzlinks (Startseite, Mitglied werden) unter dem Kontakt-Block */
.site-footer__list--extra {
margin-top: 1.25rem;
padding-top: 1.25rem;
margin-top: var(--space-m);
padding-top: var(--space-m);
border-top: 1px solid var(--clr-glass-border);
}
@@ -700,8 +700,8 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.5rem 2rem;
padding-block: 1.5rem;
gap: var(--space-2xs) var(--space-2xl);
padding-block: var(--space-l);
font-size: var(--fs-400);
color: var(--clr-text-muted);
}
@@ -713,7 +713,7 @@
.site-footer__legal {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.5rem;
gap: var(--space-2xs) var(--space-l);
margin: 0;
padding: 0;
list-style: none;