Teil 3/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: Kopf und Fuß (Components/Layout/MainLayout.razor + .razor.css; NavLink-Stile global
in app.css, siehe Kommentar dort) aufwerten. Navigation bleibt vollständig aus NavBuilder/
PocketBase.
Header: eigenes, schlichtes Signet als Inline-SVG links (z. B. Sprechblase oder stilisierte
Eltern-Kind-Form, weiß/grün), Schriftzug zweizeilig „Elternbeirat“ / „IGMH Mannheim“, Hintergrund
--gradient-brand (Kontrast weißer Text prüfen), aktiver Menüpunkt als halbtransparente
Pille + grüner Strich. Mobil: Hamburger wird beim Öffnen per :checked zum X (nur Form, keine
Verschiebung von Inhalten).
Footer: dreispaltig, mobil gestapelt: (1) Signet + „Elternbeirat der IGMH“ (wie bisher, kein
zusätzlicher Fließtext, der ins CMS gehörte); (2) header-Seiten als „Schnellzugriff“;
(3) footer-Seiten. Dunkles
Brand-Blau, heller Text, weiche SVG-Welle als Übergang. Copyright mit aktuellem Jahr.
Tests: Smoke-Test der Startseite: Footer enthält Links aller öffentlichen header- und
footer-Seiten des Fixtures in order-Reihenfolge, der nicht öffentliche Entwurf fehlt.
NavBuilderTests ggf. erweitern.
Nachtrag aus #41 (kleine Korrektur in app.css, im selben PR mit erledigen): Die Boxen
.markdown-body .aufruf, .markdown-body .hinweis und die PDF-Karte
(.lone-link > a[href$=".pdf" i] bzw. .lone-link > p > a[...]) haben max-width: 42rem, aber
content-box – ihr Innenpolster kommt dazu, sodass sie rechts über die Textbreite hinausstehen
(gemessen bei 1280 px: Text endet bei 749 px, Aufruf 801 px, Hinweis 825 px; auf /downloads
steht der Hinweis breiter als die PDF-Karten darüber). Lösung: box-sizing: border-box an
diesen drei Regeln (nicht global), sodass alle rechts bündig mit dem Fließtext enden.
Teil 3/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: Kopf und Fuß (Components/Layout/MainLayout.razor + .razor.css; NavLink-Stile global
in app.css, siehe Kommentar dort) aufwerten. Navigation bleibt vollständig aus NavBuilder/
PocketBase.
Header: eigenes, schlichtes Signet als Inline-SVG links (z. B. Sprechblase oder stilisierte
Eltern-Kind-Form, weiß/grün), Schriftzug zweizeilig „Elternbeirat“ / „IGMH Mannheim“, Hintergrund
--gradient-brand (Kontrast weißer Text prüfen), aktiver Menüpunkt als halbtransparente
Pille + grüner Strich. Mobil: Hamburger wird beim Öffnen per :checked zum X (nur Form, keine
Verschiebung von Inhalten).
Footer: dreispaltig, mobil gestapelt: (1) Signet + „Elternbeirat der IGMH“ (wie bisher, kein
zusätzlicher Fließtext, der ins CMS gehörte); (2) header-Seiten als „Schnellzugriff“;
(3) footer-Seiten. Dunkles
Brand-Blau, heller Text, weiche SVG-Welle als Übergang. Copyright mit aktuellem Jahr.
Tests: Smoke-Test der Startseite: Footer enthält Links aller öffentlichen header- und
footer-Seiten des Fixtures in order-Reihenfolge, der nicht öffentliche Entwurf fehlt.
NavBuilderTests ggf. erweitern.
Nachtrag aus #41 (kleine Korrektur in app.css, im selben PR mit erledigen): Die Boxen
.markdown-body .aufruf, .markdown-body .hinweis und die PDF-Karte
(.lone-link > a[href$=".pdf" i] bzw. .lone-link > p > a[...]) haben max-width: 42rem, aber
content-box – ihr Innenpolster kommt dazu, sodass sie rechts über die Textbreite hinausstehen
(gemessen bei 1280 px: Text endet bei 749 px, Aufruf 801 px, Hinweis 825 px; auf /downloads
steht der Hinweis breiter als die PDF-Karten darüber). Lösung: box-sizing: border-box an
diesen drei Regeln (nicht global), sodass alle rechts bündig mit dem Fließtext enden.
```
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 3/7 von „Design auffrischen“. Den Prompt unten komplett an Claude Code geben.
Gehört zu #37.