Reader Dashboard — Final

Zusammenführung von B.1 und B.3. Gesamtgestaltung aus B.1: weißer Header-Balken mit vertikaler Trennlinie, 1:1-Spaltenraster, Geschichten mit 2-Zeilen-Auszug, minimale Chrome-Dichte. Personen-Kacheln aus B.3: größerer Avatar (34 px, mit Schatten), mintgrüne Pill-Badge für die Dokumentzahl — kein unterer Akzentstreifen.

Final · Bereit zur Umsetzung
Header-Balken
B.1 — Weiß · vertikale Trennlinie
Personen-Avatar
B.3 — 34 px · rund · Schatten
B.1: 28 px, kein Schatten
Dokumentzahl
B.3 — Mint Pill (#D4F0EE)
B.1: Grau-Text, kein Badge
Kachel-Rand
Einfacher Border · kein Akzentstreifen
B.1: Mint Bottom-Border
Seitenlayout
max-w-7xl (1280 px) · px-8 py-8 (32 px) · Canvas vollbreit
📐 Mockup-Skalierung — alle Schriftgrößen, Abstände und Höhen sind auf ca. 55 % der Implementierungswerte skaliert. Werte nicht aus dem Mockup-CSS kopieren.
1 Desktop · READ_ALL — ohne BLOG_WRITE
Vollansicht ≥ 1024 px
familienarchiv.local /
Startseite Dokumente Personen Geschichten
BK
Guten Abend
Herzlich willkommen, Brigitte.
847Dokumente
94Personen
12Geschichten

Zuletzt aktualisiert

Alle Dokumente
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
vor 2 Tagen
Heiratsurkunde Raddatz-Müller, 1898
—
vor 4 Tagen
Familienfoto, Sommer 1928
von Ernst Raddatz
vor 1 Woche
Taufregister Heinrich Weber, 1902
—
vor 2 Wo.
Postkarte aus Berlin, 1930
von Frieda Müller
vor 3 Wo.

Geschichten

Alle Geschichten
Die Reise nach Berlin
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …
vor 3 Tagen
Sommer 1934 in Köln
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten in Köln — die letzte unbeschwerte Reise vor dem Krieg …
vor 2 Wochen
Briefe aus dem Krieg
Zwischen 1914 und 1918 schrieb Ernst Raddatz insgesamt 47 Briefe aus dem Feld an seine Frau Käthe in der Heimat …
vor 1 Monat
Header-Balken — unverändert B.1
  • Weißer Hintergrund, 1 px vertikale Trennlinie (#E8E4DF)
  • Gruß links in Georgia Serif, Stats rechts mit Inline-Trennern
Personen-Kacheln — B.3 Avatar, B.3 Pill, kein Streifen
  • Avatar: 34 px (statt 28 px), gleicher border-radius: 50 %
  • Avatar box-shadow: 0 2 px 6 px rgba(0,40,80,.2) — leichte Tiefe
  • Dokumentzahl: Mint Pill (#D4F0EE bg, #002850 text) statt grauem Plain-Text
  • Kein border-bottom-Akzent — plain 1 px #E0DDD5 rundum
Seitenlayout — reale Werte
  • Canvas (#F5F4EF) läuft vollbreit bis zum Viewport-Rand
  • Inhalts-Wrapper: max-w-7xl (1280 px) + px-8 py-8 (32 px) zentriert
  • Mockup-Äquivalent: max-width 704 px, padding 20 px links/rechts, 18 px oben
  • Nav-Bar bleibt vollbreit — kein max-width-Constraint
Alle anderen Elemente unverändert aus B.1
  • 1:1 Spaltenbreite, Docs-Thumb, Absender-Link, Datum
  • Story: kursiver Titel, 2-Zeilen-Auszug, Datum
  • Drafts-Card: white mit mint left-border (BLOG_WRITE-Variante)
2 Variante · BLOG_WRITE — Zone 3 „Meine Entwürfe"
READ_ALL + BLOG_WRITE
familienarchiv.local /
StartseiteDokumentePersonenGeschichten
MR
Guten Morgen
Herzlich willkommen, Marcel.
847Dokumente
94Personen
12Geschichten

Meine Entwürfe

Onkel Friedrichs Wanderjahre
Entwurf · zuletzt bearbeitet vor 1 Tag
Die Raddatz-Kinder
Entwurf · zuletzt bearbeitet vor 5 Tagen

Zuletzt aktualisiert

Alle Dokumente
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
vor 2 Tagen
Heiratsurkunde Raddatz-Müller, 1898
—
vor 4 Tagen
Familienfoto, Sommer 1928
von Ernst Raddatz
vor 1 Woche
+ 2 weitere Dokumente …

Geschichten

Alle
Die Reise nach Berlin
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …
vor 3 Tagen
Sommer 1934 in Köln
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten in Köln — die letzte unbeschwerte Reise vor dem Krieg …
vor 2 Wochen
Entwürfe-Card — unverändert B.1
  • Weiß mit 3 px mint Left-Border — gleiche Sprache wie restliche Cards
  • Titel in Georgia Serif, Metazeile in gedämpftem Grau
  • Nur sichtbar für BLOG_WRITE-Nutzer (isReader && canBlogWrite)
3 Desktop · Dark Theme — READ_ALL
Vollansicht ≥ 1024 px · dark mode
familienarchiv.local /
Startseite Dokumente Personen Geschichten
BK
Guten Abend
Herzlich willkommen, Brigitte.
847Dokumente
94Personen
12Geschichten

Zuletzt aktualisiert

Alle Dokumente
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
vor 2 Tagen
Heiratsurkunde Raddatz-Müller, 1898
—
vor 4 Tagen
Familienfoto, Sommer 1928
von Ernst Raddatz
vor 1 Woche
Taufregister Heinrich Weber, 1902
—
vor 2 Wo.
Postkarte aus Berlin, 1930
von Frieda Müller
vor 3 Wo.

Geschichten

Alle Geschichten
Die Reise nach Berlin
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …
vor 3 Tagen
Sommer 1934 in Köln
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten in Köln — die letzte unbeschwerte Reise vor dem Krieg …
vor 2 Wochen
Briefe aus dem Krieg
Zwischen 1914 und 1918 schrieb Ernst Raddatz insgesamt 47 Briefe aus dem Feld an seine Frau Käthe in der Heimat …
vor 1 Monat
Dark Canvas — DK-MAIN
  • Hintergrund: #0F1219 (tief dunkelblau, kein reines Schwarz)
  • Browser-Chromleiste: #1C1E26 · URL-Bar: #252830
  • Nav-Bar bleibt #002850 — keine Änderung im Dark Mode
Karten & Trennlinien — DK-CARD / DK-HEADER-BAR
  • Surface: #161C27 (dunkleres Blaugrau)
  • Rand: rgba(255,255,255,.08) — subtile Trennung statt Linie
  • Zeilentrennlinien: rgba(255,255,255,.04)
Typografie-Token im Dark Mode
  • Primär-Text: #D0CCC4 / #C0BDB6 (warm, kein reines Weiß)
  • Beschriftungen (Labels): #323850
  • Datum/Dim: #262E48
  • Mint: #A6DAD8 — unverändert, auch im Dark Mode
  • Mint-Pill Hintergrund: rgba(166,218,216,.14)
Kompositions-Muster — DK- als Zusatzklasse
  • Klassen addieren sich: class="CARD DK-CARD"
  • DK- nutzt !important zum Überschreiben von Light-Werten
  • Strukturelle Klassen bleiben unverändert — kein doppelter Markup
  • Impl.: Tailwind dark:-Varianten oder CSS-Variable-Swap
4 Mobile — 3 Varianten (375 px · ≈ 64 % Mockup-Skala)
Alle drei Varianten nebeneinander
READ_ALL Hell
19:43
BK
Guten Abend
Herzlich willkommen, Brigitte.
847Dok.
94Pers.
12Gesch.

Zuletzt aktualisiert

Alle
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
vor 2 T.
Heiratsurkunde Raddatz-Müller, 1898
—
vor 4 T.
Familienfoto, Sommer 1928
von Ernst Raddatz
vor 1 W.

Geschichten

Alle
Die Reise nach Berlin
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …
vor 3 Tagen
Sommer 1934 in Köln
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten …
vor 2 Wochen
BLOG_WRITE Hell + Entwürfe
08:17
MR
Guten Morgen
Herzlich willkommen, Marcel.
847Dok.
94Pers.
12Gesch.

Meine Entwürfe

Onkel Friedrichs Wanderjahre
Entwurf · vor 1 Tag
Die Raddatz-Kinder
Entwurf · vor 5 Tagen

Zuletzt aktualisiert

Alle
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
vor 2 T.
Familienfoto, Sommer 1928
von Ernst Raddatz
vor 1 W.

Geschichten

Alle
Die Reise nach Berlin
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …
vor 3 Tagen
Sommer 1934 in Köln
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten …
vor 2 Wochen
READ_ALL Dunkel
19:43
BK
Guten Abend
Herzlich willkommen, Brigitte.
847Dok.
94Pers.
12Gesch.

Zuletzt aktualisiert

Alle
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
vor 2 T.
Heiratsurkunde Raddatz-Müller, 1898
—
vor 4 T.
Familienfoto, Sommer 1928
von Ernst Raddatz
vor 1 W.

Geschichten

Alle
Die Reise nach Berlin
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …
vor 3 Tagen
Sommer 1934 in Köln
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten …
vor 2 Wochen
Header — stacked layout
  • Desktop: Greeting + Stats nebeneinander (Flexbox row, 1 px Divider)
  • Mobile: Greeting oben, Stats darunter nach border-top — kein Divider
  • Stat-Labels kürzen auf „Dok." / „Pers." / „Gesch." (Platzmangel)
Personen — 2×2 Grid (statt 4×1)
  • Desktop: grid-template-columns: repeat(4, 1fr)
  • Mobile: grid-template-columns: 1fr 1fr — Avatar 22 px (statt 34 px)
  • „Alle N Personen →" als Inline-Link unter dem Grid
Inhalt — einspaltig, Docs zuerst
  • Desktop: grid-template-columns: 1fr 1fr nebeneinander
  • Mobile: Spalten aufgelöst — Dokumente-Card oben, Geschichten-Card darunter
  • Breakpoint: Tailwind sm = 640 px
Navigation — Hamburger-Menü
  • Desktop: inline Nav-Links sichtbar
  • Mobile: Links ausgeblendet, stattdessen Hamburger-Icon (3 Striche) links neben Avatar
  • Nav-Bar Höhe und Farbe (#002850) bleiben identisch
Dark Mobile — .dk Modifier-Klasse
  • Selbe M- Strukturklassen + .dk für Dark-Werte
  • Nav-Bar bleibt #002850 — kein .dk nötig
  • PHONE-Status-Bar bleibt #002850 — unverändert
  • Avatare behalten ihre Farbe — Eigenfarbe, kein Token