florian.wildeandClaude Opus 5.5
4af07e9553
scripts/screenshots.ts nimmt Uebersicht und Schluesseldetail bei 1440x900 und 390x844 auf und meldet nebenbei horizontalen Ueberlauf, damit es fuer die Anleitung (#029) und als schneller Layout-Test taugt. Issue #002 ist damit erledigt. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
52 lines
3.1 KiB
Markdown
52 lines
3.1 KiB
Markdown
# #002 Design-System und Layout
|
||
**Status:** erledigt
|
||
**Meilenstein:** v0.1.0
|
||
**Labels:** ui
|
||
**Geschätzt:** 4 h **Tatsächlich:** 0,3 h (09:07–09:22)
|
||
|
||
## Ziel
|
||
Design laut Vorgabe (Tresor, Graphit + Messing): Tokens, Schriften, Logo, Favicon/PWA-Icons, Grundlayout mit Seitenleiste.
|
||
|
||
## Aufgaben
|
||
- [x] Design-Tokens als CSS-Variablen + Tailwind-Theme
|
||
- [x] Space Grotesk, IBM Plex Sans, JetBrains Mono selbst gehostet (`@fontsource`)
|
||
- [x] `public/brand/` mit `logo.svg`, `logo-light.svg`, `logo-mono.svg`, `favicon.svg`; PNG-Icons + Manifest per Skript
|
||
- [x] Seitenleiste (Logo, Navigation, Benutzer unten), einklappbar auf schmalen Bildschirmen
|
||
- [x] Grundkomponenten: Karte, Button (primär/sekundär/Gefahr), Badge, Statuspunkt, Tabelle, Diff-Box, Kennzahl-Kachel
|
||
|
||
## Akzeptanzkriterien
|
||
- [x] Kontrast ≥ 4,5:1, Fokusrahmen in Messing
|
||
- [x] Kein horizontales Scrollen bei 390 px
|
||
- [x] Klickflächen ≥ 44 px
|
||
|
||
## Abhängigkeiten
|
||
#001
|
||
|
||
## Notizen / Entscheidungen
|
||
- **Tokens:** CSS-Variablen in `:root`, an Tailwind per `@theme inline` gereicht (`bg-surface`,
|
||
`text-muted`, `border-border-strong`, `rounded-karte` …). So nutzen Inline-SVGs und Utilities
|
||
dieselbe Quelle. Nur dunkler Modus.
|
||
- **Schriften:** nur Latin-Ausschnitt und benutzte Gewichte, importiert in `src/app/layout.tsx`.
|
||
Zeichen außerhalb (z. B. „→“) fallen auf die Systemschrift zurück – unauffällig.
|
||
- **Kontrast** (gemessen): `--text-muted` auf `--surface` 5,8:1, auf `--raised` 5,3:1;
|
||
Messing auf `--accent-soft` 7,2:1; Koralle auf `--danger-soft` 5,8:1; Text auf Messing-Button 10,3:1.
|
||
- **Icons:** `pnpm icons` (`scripts/icons.mjs`) erzeugt `public/icons/*`, `src/app/favicon.ico`
|
||
(16/32/48, PNG-in-ICO), `src/app/icon.svg` und `src/app/apple-icon.png`; Ergebnisse sind
|
||
eingecheckt, damit Build und Laufzeitabbild kein sharp brauchen. App-Icons auf `#0D1013` mit
|
||
Rand (Logo 72 %), deshalb ohne `maskable`.
|
||
- **Aktiver Pfad:** Ein Layout kennt den Pfad nicht. `Huelle` nimmt `aktiverPfad` optional;
|
||
ohne Angabe ermittelt die Client-`Navigation` ihn per `usePathname()`.
|
||
- **Benutzer:** `src/app/(app)/huellen-benutzer.ts` → `huellenBenutzerErmitteln()` liefert bis
|
||
#004 einen festen Beispielbenutzer (TODO-Kommentar).
|
||
- **Mobil:** Unter 1024 px Kopfleiste mit Menü-Button, Leiste als Overlay (280 px) mit eigenem
|
||
Schließen-Knopf; Escape, Klick auf Abdunkler oder auf einen Link schließt. Geschlossen ist die
|
||
Leiste `invisible` und damit nicht per Tab erreichbar.
|
||
- **Desktop:** Seitenleiste als eigene Flex-Spalte, Inhalt darin `sticky` – Hintergrund und Rahmen
|
||
laufen auch bei langen Seiten (und in Full-Page-Screenshots) durch.
|
||
- **Tabellen** scrollen im eigenen Container; der Container ist `relative`, sonst entkommen
|
||
`sr-only`-Texte dem Scrollbereich und verbreitern die Seite (bei 390 px gefunden).
|
||
- **Prototyp:** Beispieldaten in `src/beispiel/` (Bezugszeit `BEISPIEL_JETZT`), Seiten sichtbar
|
||
als „Beispieldaten“ markiert. Platzhalterseiten nennen Phase und Issue.
|
||
- **Screenshots:** `pnpm exec tsx scripts/screenshots.ts` (ENV `SSHKV_URL`, `SSHKV_BILDER`,
|
||
`SSHKV_SEITEN`) → `docs/anleitung/bilder/`; meldet horizontalen Überlauf mit Exit-Code 1.
|