Teil 1/7 von „Design auffrischen“. Den Prompt unten komplett an Claude Code geben.
Lies vorher CLAUDE.md und die dort verlinkten Dokumente, die für diese Aufgabe relevant sind
(mindestens docs/architektur.md und docs/redaktion.md). Halte dich an Coding und Documentation
Convention. Erst Plan vorstellen, auf mein OK warten, dann umsetzen.
Design-Leitplanken für alle Design-Aufgaben:
- Bestehende Tokens in wwwroot/app.css erweitern, keine Hardcode-Farben; jede neue Farbe mit
Dark-Mode-Variante im bestehenden prefers-color-scheme-Block; WCAG AA.
- Keine Hover-Bewegung (transform/translate) – bewusst entfernt in c67c71e. Hover = Farbe,
Schatten, Rahmen.
- Kommentarstil von app.css beibehalten (erklärt das Warum).
- Layout muss mit beliebigem Redaktions-Markdown und leeren/fehlenden Feldern funktionieren.
- UI-Texte deutsch, ohne Anglizismen.
- Tests: xUnit + Shouldly. Reine Logik als Unit-Test; Darstellung über RouteSmokeTests
(HTML der gerenderten Route prüfen) gegen den PocketBaseFixture. Keine neuen Test-Pakete
(bUnit, Playwright …) ohne Begründung und Rückfrage.
- KEINE Änderung am PocketBase-Datenmodell: keine neuen Collections, Felder, Select-Werte
oder Regeln, collections_schema.json bleibt unverändert. Grund: Es gibt noch keinen Weg,
Schemaänderungen nach Produktion zu übertragen. Wenn eine Lösung nur mit Schemaänderung
ginge: anhalten, Alternative ohne Schemaänderung vorschlagen und die Schema-Variante nur als
Notiz für später ausgeben. Neue Records im Dev-Seed und im Fixture sind erlaubt.
Aufgabe: Das visuelle Fundament aufwerten, ohne Seitenlayouts umzubauen.
1. Schrift: „Nunito“ (Variable, OFL) als WOFF2 nach wwwroot/fonts/, Subset Latin inkl.
Umlaute/ß/€/„“, @font-face mit font-display: swap, Lizenzdatei daneben. Systemschrift bleibt
Fallback. Begründe kurz Schnitt und Dateigröße.
2. Typo-Skala als Tokens (--font-size-*), fluid per clamp(): h1 ≈ 2–2.75rem, h2 ≈ 1.5–1.75rem,
h3 1.2rem, Fließtext 1.0625rem; Überschriften fetter (800) mit leicht negativem
letter-spacing.
3. Tokens ergänzen: --gradient-brand (Header-Blau → IGMH-Grün), --color-accent-tint,
--color-highlight (warmes Gelb, sparsam), --radius-lg, --shadow-lg, jeweils mit Dark-Mode.
--content-width auf 72rem; Fließtext-Absätze behalten ihre Lesebreite.
4. Icons: Komponente Shared/Icon.razor (Parameter Name, Size), rendert Inline-SVG aus einem
kleinen, fest im Code hinterlegten Lucide-Satz (MIT, Hinweis im Kommentar):
calendar, calendar-plus, clock, map-pin, file-text, download, mail, users,
heart-handshake, help-circle, newspaper, arrow-right, external-link, info.
stroke=currentColor, aria-hidden="true", focusable="false". Unbekannter Name → nichts.
Tests: Unit-Test für die Icon-Auswahl (bekannter/unbekannter Name). Smoke-Test, der prüft, dass
app.css und die gerenderte Startseite keine absolute URL auf einen fremden Host enthalten
(@font-face nur relativ).
Teil 1/7 von „Design auffrischen“. Den Prompt unten komplett an Claude Code geben.
```
Lies vorher CLAUDE.md und die dort verlinkten Dokumente, die für diese Aufgabe relevant sind
(mindestens docs/architektur.md und docs/redaktion.md). Halte dich an Coding und Documentation
Convention. Erst Plan vorstellen, auf mein OK warten, dann umsetzen.
Design-Leitplanken für alle Design-Aufgaben:
- Bestehende Tokens in wwwroot/app.css erweitern, keine Hardcode-Farben; jede neue Farbe mit
Dark-Mode-Variante im bestehenden prefers-color-scheme-Block; WCAG AA.
- Keine Hover-Bewegung (transform/translate) – bewusst entfernt in c67c71e. Hover = Farbe,
Schatten, Rahmen.
- Kommentarstil von app.css beibehalten (erklärt das Warum).
- Layout muss mit beliebigem Redaktions-Markdown und leeren/fehlenden Feldern funktionieren.
- UI-Texte deutsch, ohne Anglizismen.
- Tests: xUnit + Shouldly. Reine Logik als Unit-Test; Darstellung über RouteSmokeTests
(HTML der gerenderten Route prüfen) gegen den PocketBaseFixture. Keine neuen Test-Pakete
(bUnit, Playwright …) ohne Begründung und Rückfrage.
- KEINE Änderung am PocketBase-Datenmodell: keine neuen Collections, Felder, Select-Werte
oder Regeln, collections_schema.json bleibt unverändert. Grund: Es gibt noch keinen Weg,
Schemaänderungen nach Produktion zu übertragen. Wenn eine Lösung nur mit Schemaänderung
ginge: anhalten, Alternative ohne Schemaänderung vorschlagen und die Schema-Variante nur als
Notiz für später ausgeben. Neue Records im Dev-Seed und im Fixture sind erlaubt.
Aufgabe: Das visuelle Fundament aufwerten, ohne Seitenlayouts umzubauen.
1. Schrift: „Nunito“ (Variable, OFL) als WOFF2 nach wwwroot/fonts/, Subset Latin inkl.
Umlaute/ß/€/„“, @font-face mit font-display: swap, Lizenzdatei daneben. Systemschrift bleibt
Fallback. Begründe kurz Schnitt und Dateigröße.
2. Typo-Skala als Tokens (--font-size-*), fluid per clamp(): h1 ≈ 2–2.75rem, h2 ≈ 1.5–1.75rem,
h3 1.2rem, Fließtext 1.0625rem; Überschriften fetter (800) mit leicht negativem
letter-spacing.
3. Tokens ergänzen: --gradient-brand (Header-Blau → IGMH-Grün), --color-accent-tint,
--color-highlight (warmes Gelb, sparsam), --radius-lg, --shadow-lg, jeweils mit Dark-Mode.
--content-width auf 72rem; Fließtext-Absätze behalten ihre Lesebreite.
4. Icons: Komponente Shared/Icon.razor (Parameter Name, Size), rendert Inline-SVG aus einem
kleinen, fest im Code hinterlegten Lucide-Satz (MIT, Hinweis im Kommentar):
calendar, calendar-plus, clock, map-pin, file-text, download, mail, users,
heart-handshake, help-circle, newspaper, arrow-right, external-link, info.
stroke=currentColor, aria-hidden="true", focusable="false". Unbekannter Name → nichts.
Tests: Unit-Test für die Icon-Auswahl (bekannter/unbekannter Name). Smoke-Test, der prüft, dass
app.css und die gerenderte Startseite keine absolute URL auf einen fremden Host enthalten
(@font-face nur relativ).
```
Gehört zu #37.
Tom
added this to the Elternbeirat-Website milestone 2026-10-01 11:06:49 +02:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Teil 1/7 von „Design auffrischen“. Den Prompt unten komplett an Claude Code geben.
Gehört zu #37.