Peter Meier
289cdb3951
- PostOverview: neues design "featured" (1 großer Post links, Rest kompakt rechts als PostCardCompact – Bild links, Text rechts, keine Nested-Links) - CalendarCompact: Termine als Liste mit Datum-Badge + Kicker-Headline - QuoteCarousel: dunkle Full-Bleed-Sektion, Lora-Zitat mit «», Author-Split, Kicker mit Sektionsnummer, Pill-Pagination + Pfeile/Swipe - Typo-Regelwerk: Lora statt Aleo (Zitate), Headings semibold (600), H2/H3-Skala, "Weiterlesen"-Link-Muster, docs/typography.md - HeadlineBlock: \n → <br> für bewusste Umbrüche - Layout: neues spaceTop-Feld (mt-*), analog spaceBottom - OrganisationsBlock: CTA volle Breite, Button rechts Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
45 lines
1.5 KiB
Markdown
45 lines
1.5 KiB
Markdown
# Typo-Regelwerk – Windwiderstand
|
||
|
||
Verbindliche Typografie für die komplette Seite. Umsetzung in `src/app.css`.
|
||
|
||
## Schriften
|
||
|
||
- **Alles in Inter.** Lora nur für Zitate (kursiv). Sonst nie.
|
||
- Erlaubte Gewichte: **300 / 400 / 500 / 600 / 700**. Nie 800/900.
|
||
- Immer Satzschreibung (sentence case). Kein ALL-CAPS außer kleinen Labels.
|
||
- Keine Ausrufezeichen. Keine Emoji.
|
||
|
||
## Skala
|
||
|
||
| Rolle | Größe | Gewicht | Line-height | Letter-spacing |
|
||
|---|---|---|---|---|
|
||
| Hero-H1 | clamp(38–66px) | 700 | 1.05 | -0.025em |
|
||
| Leitstatement | clamp(26–38px) | 600 | 1.2 | -0.02em |
|
||
| H2 Sektion | 34px | 600 | — | -0.02em |
|
||
| H3 Karte/Sub | 22px | 600 | — | -0.01em |
|
||
| Fließtext | 18px | 400 | 1.6 | — (bewusst groß & luftig) |
|
||
| Klein/Meta | 13–14px | 400–500 | — | — |
|
||
| Kicker-Label | 12px | 600 | — | 0.14em, UPPERCASE |
|
||
|
||
## Schriftfarbe
|
||
|
||
- Fließtext `#333735` (stein-700), Überschriften `#1f2221` (stein-800) — kein reines Schwarz
|
||
- Links `#436e85` (himmel-500), hover `#375a6d`
|
||
- Kicker / Nummer-Akzent `#2d7a45` (wald)
|
||
|
||
## Betonung
|
||
|
||
Über `<strong>` mit Gewicht **600** — nie kursiv, nie farbig.
|
||
|
||
## Rhythmus
|
||
|
||
- Nummerierte Sektionen (01–05) + Kicker-Label als Sektionsmarke
|
||
- `text-wrap: balance` auf Headlines
|
||
- Fließtext auf ~60–62ch begrenzen
|
||
- Leitstatement zusätzlich auf ~24ch begrenzen
|
||
- Großzügiger Weißraum, klare Hierarchie, keine Effekte
|
||
|
||
## Weiterlesen-Link
|
||
|
||
15px, Gewicht 600, Farbe himmel-500, dünne Unterlinie `#b8c9d4`, mit `mdi:arrow-right`.
|