Tom/Elternbeirat
1
0 Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

Design auffrischen #37

New Issue
Closed
opened 2026-10-01 11:06:48 +02:00 by Tom · 0 comments
Tom commented 2026-10-01 11:06:48 +02:00
Owner
Copy link
Copy source

Die Seite ist technisch sauber (Design-Tokens, Dark Mode, CMS-gesteuerte Navigation), wirkt aber langweilig: kein Einstieg auf der Startseite, flache Typo-Skala, keine Icons/Bildsprache, alle Karten gleich, Vorstand und Förderverein als lange Textlisten, das IGMH-Grün kaum genutzt.

Ziel: freundlich, schulisch, lebendig – aber ruhig. Jedes Sub-Issue enthält einen fertigen Prompt für Claude Code.

Befunde im Detail

Gut und beizubehalten: Design-Tokens in app.css mit IGMH-Blau/Grün und erklärenden Kommentaren, Dark Mode per OS, Karten-Optik, Hamburger ohne JS, CMS-gesteuerte Navigation (NavBuilder) und Embeds (PageEmbeds).

# Befund Wo
1 Kein Einstieg: Die Startseite ist eine 1,5rem-h1 mit einem Satz, ohne Blickfang und ohne Wegweiser. Start
2 Flache Typo-Skala (h1 1,5 / h2 1,2 / h3 1,05rem), nur Systemschrift. global
3 Keine Bildsprache: keine Icons, kein Logo, keine Illustration. global
4 Alle Karten sind gleich (Titel + Datum), ohne Teaser und ohne Anker fürs Auge. Start, Beiträge, Termine
5 Termin-Datum klein und grau statt Kalenderblatt. „Abonnieren“ ist nur ein Textlink. Termine
6 Das Vorstandsteam ist eine Markdown-Liste mit 10 Personen, wirkt wie ein Protokoll. /board
7 Starke Förderverein-Fakten (seit 1975, 500+ Mitglieder, ab 10 €) gehen im Fließtext unter. Die Beitrittserklärung ist ein normaler Link. /patrons
8 Das Grün wird kaum genutzt, die Fläche ist linksbündig schmal, Header nur Text, Footer eine Zeile. global
9 Kein :focus-visible-Stil, kein Skip-Link. global

Designrichtung

„Freundlich, schulisch, lebendig – aber ruhig“. Die IGMH-Farben bleiben und werden mutiger eingesetzt. Bewegung bleibt bewusst sparsam: Commit c67c71e hat Hover-Bewegung entfernt, das wird respektiert. Hover verändert nur Farbe, Schatten und Rahmen, nichts bewegt sich.

  • Kopfbereich der Startseite mit Blau→Grün-Verlauf und dezentem SVG-Muster
  • Selbst gehostete Variable-Font (z. B. Nunito) unter wwwroot/fonts/ (erlaubt laut AE-3), mit kräftigerer Typo-Skala
  • Inline-SVG-Icons (Lucide, MIT), lokal im Code
  • Karten mit Akzentstreifen, Kalenderblatt-Datum und Teaser
  • Grids statt Listen: Kacheln, Team und Kennzahlen
  • Redaktionsfreundlich: neue Gestaltungsmittel entweder automatisch (CSS auf Markdown) oder als einfache Markdown-Bausteine. Struktur ist Code, Inhalt ist PocketBase.

Leitplanken (stehen auch in jedem Prompt)

  • Keine Änderung am PocketBase-Datenmodell, solange es keinen Weg nach Produktion gibt (#39). Wo ein Feld die schönere Lösung wäre, steht es als „Notiz für später“ im Prompt.
  • Keine Hover-Bewegung (bewusst entfernt in c67c71e). Hover = Farbe, Schatten, Rahmen.
  • Keine externen Ressourcen; Schrift selbst ausgeliefert unter wwwroot/fonts/.
  • Tests mit xUnit + Shouldly + RouteSmokeTests; keine neuen Test-Pakete ohne Rückfrage.

Nebenbei gefundene Fehler (in den Sub-Issues enthalten)

  • Startseite zeigt fest verdrahtete h1/Einleitung, der Body des home-Records wird ignoriert.
  • Terminkarten verlinken auf /events selbst; Einleitung auf /events doppelt.
  • /downloads: Einträge nicht verlinkt, noch keine PDFs unter wwwroot.
  • Beitragstitel ist h2 statt h1.

Vorher erledigen

  • #38 (FAQ-Doku/FaqTopicsEmbed), damit sich die Arbeiten nicht überschneiden.

Sub-Issues (Reihenfolge)

Gehört zum Milestone „Elternbeirat-Website“ (fünfter Arbeitsstrang neben #6, #24, #25, #26).

Die Seite ist technisch sauber (Design-Tokens, Dark Mode, CMS-gesteuerte Navigation), wirkt aber langweilig: kein Einstieg auf der Startseite, flache Typo-Skala, keine Icons/Bildsprache, alle Karten gleich, Vorstand und Förderverein als lange Textlisten, das IGMH-Grün kaum genutzt. Ziel: **freundlich, schulisch, lebendig – aber ruhig.** Jedes Sub-Issue enthält einen fertigen Prompt für Claude Code. ## Befunde im Detail **Gut und beizubehalten:** Design-Tokens in `app.css` mit IGMH-Blau/Grün und erklärenden Kommentaren, Dark Mode per OS, Karten-Optik, Hamburger ohne JS, CMS-gesteuerte Navigation (`NavBuilder`) und Embeds (`PageEmbeds`). | # | Befund | Wo | |---|--------|----| | 1 | Kein Einstieg: Die Startseite ist eine 1,5rem-h1 mit einem Satz, ohne Blickfang und ohne Wegweiser. | Start | | 2 | Flache Typo-Skala (h1 1,5 / h2 1,2 / h3 1,05rem), nur Systemschrift. | global | | 3 | Keine Bildsprache: keine Icons, kein Logo, keine Illustration. | global | | 4 | Alle Karten sind gleich (Titel + Datum), ohne Teaser und ohne Anker fürs Auge. | Start, Beiträge, Termine | | 5 | Termin-Datum klein und grau statt Kalenderblatt. „Abonnieren“ ist nur ein Textlink. | Termine | | 6 | Das Vorstandsteam ist eine Markdown-Liste mit 10 Personen, wirkt wie ein Protokoll. | /board | | 7 | Starke Förderverein-Fakten (seit 1975, 500+ Mitglieder, ab 10 €) gehen im Fließtext unter. Die Beitrittserklärung ist ein normaler Link. | /patrons | | 8 | Das Grün wird kaum genutzt, die Fläche ist linksbündig schmal, Header nur Text, Footer eine Zeile. | global | | 9 | Kein `:focus-visible`-Stil, kein Skip-Link. | global | ## Designrichtung **„Freundlich, schulisch, lebendig – aber ruhig“.** Die IGMH-Farben bleiben und werden mutiger eingesetzt. Bewegung bleibt bewusst sparsam: Commit `c67c71e` hat Hover-Bewegung entfernt, das wird respektiert. Hover verändert nur Farbe, Schatten und Rahmen, nichts bewegt sich. - Kopfbereich der Startseite mit Blau→Grün-Verlauf und dezentem SVG-Muster - Selbst gehostete Variable-Font (z. B. *Nunito*) unter `wwwroot/fonts/` (erlaubt laut AE-3), mit kräftigerer Typo-Skala - Inline-SVG-Icons (Lucide, MIT), lokal im Code - Karten mit Akzentstreifen, Kalenderblatt-Datum und Teaser - Grids statt Listen: Kacheln, Team und Kennzahlen - **Redaktionsfreundlich:** neue Gestaltungsmittel entweder automatisch (CSS auf Markdown) oder als einfache Markdown-Bausteine. Struktur ist Code, Inhalt ist PocketBase. ## Leitplanken (stehen auch in jedem Prompt) - **Keine Änderung am PocketBase-Datenmodell**, solange es keinen Weg nach Produktion gibt (#39). Wo ein Feld die schönere Lösung wäre, steht es als „Notiz für später“ im Prompt. - **Keine Hover-Bewegung** (bewusst entfernt in `c67c71e`). Hover = Farbe, Schatten, Rahmen. - Keine externen Ressourcen; Schrift selbst ausgeliefert unter `wwwroot/fonts/`. - Tests mit xUnit + Shouldly + `RouteSmokeTests`; keine neuen Test-Pakete ohne Rückfrage. ## Nebenbei gefundene Fehler (in den Sub-Issues enthalten) - Startseite zeigt fest verdrahtete h1/Einleitung, der Body des `home`-Records wird ignoriert. - Terminkarten verlinken auf `/events` selbst; Einleitung auf `/events` doppelt. - `/downloads`: Einträge nicht verlinkt, noch keine PDFs unter `wwwroot`. - Beitragstitel ist `h2` statt `h1`. ## Vorher erledigen - #38 (FAQ-Doku/`FaqTopicsEmbed`), damit sich die Arbeiten nicht überschneiden. ## Sub-Issues (Reihenfolge) - [x] #40 - [x] #41 - [x] #42 - [x] #43 - [x] #44 - [x] #45 - [x] #46 - [x] #47 (Wartungsseite, unabhängig von 1–7) Gehört zum Milestone „Elternbeirat-Website“ (fünfter Arbeitsstrang neben #6, #24, #25, #26).
Tom added this to the Elternbeirat-Website milestone 2026-10-01 11:06:48 +02:00
Tom closed this issue 2026-10-01 17:13:00 +02:00
Sign in to join this conversation.
No Branch/Tag Specified
Labels
No items
No labels
Milestone
No items
No Milestone Elternbeirat-Website
Projects
Clear projects
No projects
Assignees
Clear assignees
Tom
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Tom/Elternbeirat#37