docs(spec): address review blockers and concerns in reader dashboard spec
Some checks failed
CI / Unit & Component Tests (pull_request) Failing after 3m35s
CI / OCR Service Tests (pull_request) Successful in 37s
CI / Backend Unit Tests (pull_request) Failing after 3m20s
CI / Unit & Component Tests (push) Failing after 3m30s
CI / OCR Service Tests (push) Successful in 42s
CI / Backend Unit Tests (push) Failing after 3m23s
Some checks failed
CI / Unit & Component Tests (pull_request) Failing after 3m35s
CI / OCR Service Tests (pull_request) Successful in 37s
CI / Backend Unit Tests (pull_request) Failing after 3m20s
CI / Unit & Component Tests (push) Failing after 3m30s
CI / OCR Service Tests (push) Successful in 42s
CI / Backend Unit Tests (push) Failing after 3m23s
- Fix 8 desktop + 8 mobile dark-mode CSS contrast failures (WCAG AA): muted #3A4568→#7080A8, labels #323850→#6070A0, dim #262E48→#5A6888 - Fix 4 light-mode contrast failures: HSTAT-LABEL/DOC-DATE/STORY-META #B8B4AE/#C8C4BE→#706C68; PERSONS-ALL opacity hack→direct #4A6E8A - Fix 3 inline style="color:#262E48" dash elements in dark body HTML - Add DK-→Tailwind dark: equivalent mapping to dark-mode CSS comment - Add impl-ref table with exact Tailwind classes per UI region - Add i18n key catalog annotation (10 new messages/*.json keys) - Annotate stat link routes (/documents, /persons, /geschichten) and update all spec hrefs to real routes - Update dark-mode annotation sidebar with corrected token values Addresses Leonie's 3 blockers (WCAG contrast + impl-ref table) and Felix's 4 suggestions. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit was merged in pull request #449.
This commit is contained in:
Marcel
@@ -81,7 +81,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
.HSTAT:last-child{border-right:none;padding-right:0}
|
||||
.HSTAT a{text-decoration:none;display:block}
|
||||
.HSTAT-NUM{font-size:14px;font-weight:900;color:#002850;line-height:1;display:block}
|
||||
.HSTAT-LABEL{font-size:5.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#B8B4AE;display:block;margin-top:2px}
|
||||
.HSTAT-LABEL{font-size:5.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#706C68;display:block;margin-top:2px}
|
||||
|
||||
/* ── Person portrait cards — B.3 avatar, no border line, mint pill ─── */
|
||||
.PERSON-GRID{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
|
||||
@@ -107,7 +107,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
padding:1px 6px;border-radius:10px
|
||||
}
|
||||
.PERSONS-FOOTER{text-align:right;margin-top:3px}
|
||||
.PERSONS-ALL{font-size:6.5px;color:#002850;font-weight:600;text-decoration:none;opacity:.55}
|
||||
.PERSONS-ALL{font-size:6.5px;color:#4A6E8A;font-weight:600;text-decoration:none}
|
||||
|
||||
/* ── Two-column 1:1 — B.1 ─── */
|
||||
.CONTENT-ROW{display:grid;grid-template-columns:1fr 1fr;gap:6px}
|
||||
@@ -126,14 +126,14 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
.DOC-TITLE{font-family:Georgia,serif;font-size:7.5px;color:#002850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.DOC-SENDER{font-size:6px;color:#888;margin-top:1px}
|
||||
.DOC-SENDER a{color:#002850;text-decoration:none;opacity:.7}
|
||||
.DOC-DATE{font-size:6px;color:#C8C4BE;white-space:nowrap;flex-shrink:0}
|
||||
.DOC-DATE{font-size:6px;color:#706C68;white-space:nowrap;flex-shrink:0}
|
||||
|
||||
/* ── Story rows — B.1: clean 2-line excerpt ─── */
|
||||
.STORY-ROW{padding:7px 10px;border-bottom:1px solid #F0EDE6}
|
||||
.STORY-ROW:last-child{border-bottom:none}
|
||||
.STORY-TITLE{font-family:Georgia,serif;font-size:8px;color:#002850;font-style:italic;margin-bottom:3px;line-height:1.3}
|
||||
.STORY-EXCERPT{font-size:6.5px;color:#888;line-height:1.5;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
|
||||
.STORY-META{font-size:6px;color:#B8B4AE}
|
||||
.STORY-META{font-size:6px;color:#706C68}
|
||||
|
||||
/* ── Drafts card ─── */
|
||||
.DRAFTS-CARD{background:#fff;border:1px solid #E0DDD5;border-left:3px solid #A6DAD8;border-radius:3px;overflow:hidden}
|
||||
@@ -153,8 +153,19 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
Compose alongside light structural classes, e.g. class="CARD DK-CARD"
|
||||
Real tokens live in layout.css / Tailwind dark: variants — these are approximations.
|
||||
Mapping: canvas #0F1219 · surface #161C27 · border rgba(255,255,255,.08)
|
||||
text #D0CCC4 · muted #3A4568 · dim #262E48
|
||||
mint #A6DAD8 (unchanged) · mint-pill rgba(166,218,216,.15)
|
||||
text #D0CCC4 · muted #7080A8 · labels #6070A0 · dim #5A6888
|
||||
mint #A6DAD8 (unchanged) · mint-pill rgba(166,218,216,.14)
|
||||
DK- → Tailwind dark: equivalents (implementation guide)
|
||||
DK-MAIN → dark:bg-canvas
|
||||
DK-HEADER-BAR → dark:bg-surface dark:border-white/8
|
||||
DK-HSTAT-LABEL → dark:text-ink-4 (#6070A0 — WCAG AA ≥ 4.5:1 on #161C27)
|
||||
DK-CARD → dark:bg-surface dark:border-white/8
|
||||
DK-CARD-HEAD h3 → dark:text-ink-4 (#6070A0)
|
||||
DK-DOC-SENDER → dark:text-ink-3 (#7080A8 — WCAG AA ≥ 4.5:1 on #161C27)
|
||||
DK-DOC-DATE → dark:text-ink-5 (#5A6888 — WCAG AA ≥ 4.5:1 on #161C27)
|
||||
DK-STORY-EXCERPT → dark:text-ink-3 (#7080A8)
|
||||
DK-STORY-META → dark:text-ink-5 (#5A6888)
|
||||
DK-DRAFT-META → dark:text-ink-3 (#7080A8)
|
||||
══════════════════════════════════ */
|
||||
.wf-dark .wf-bar{background:#1C1E26;border-bottom-color:#252830}
|
||||
.wf-dark .urlbar{background:#252830}
|
||||
@@ -167,31 +178,31 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
.DK-DIVIDER{background:rgba(255,255,255,.08) !important}
|
||||
.DK-HSTAT{border-right-color:rgba(255,255,255,.06) !important}
|
||||
.DK-HSTAT-NUM{color:#E8E4DC !important}
|
||||
.DK-HSTAT-LABEL{color:#323850 !important}
|
||||
.DK-HSTAT-LABEL{color:#6070A0 !important}
|
||||
.DK-PCARD{background:#161C27 !important;border-color:rgba(255,255,255,.08) !important}
|
||||
.DK-PCARD-NAME{color:#C0BDB6 !important}
|
||||
.DK-PCARD-COUNT{color:#A6DAD8 !important;background:rgba(166,218,216,.14) !important}
|
||||
.DK-PERSONS-ALL{color:#A6DAD8 !important;opacity:.65 !important}
|
||||
.DK-CARD{background:#161C27 !important;border-color:rgba(255,255,255,.08) !important}
|
||||
.DK-CARD-HEAD{border-bottom-color:rgba(255,255,255,.06) !important}
|
||||
.DK-CARD-HEAD h3{color:#323850 !important}
|
||||
.DK-CARD-HEAD h3{color:#6070A0 !important}
|
||||
.DK-CARD-HEAD a{color:#A6DAD8 !important;opacity:.5 !important}
|
||||
.DK-DOC-ROW{border-bottom-color:rgba(255,255,255,.04) !important}
|
||||
.DK-DOC-THUMB{background:#1E2638 !important;border-color:rgba(255,255,255,.07) !important}
|
||||
.DK-DOC-TITLE{color:#C0BDB6 !important}
|
||||
.DK-DOC-SENDER{color:#3A4568 !important}
|
||||
.DK-DOC-SENDER{color:#7080A8 !important}
|
||||
.DK-DOC-SENDER a{color:#A6DAD8 !important;opacity:.6 !important}
|
||||
.DK-DOC-DATE{color:#262E48 !important}
|
||||
.DK-DOC-DATE{color:#5A6888 !important}
|
||||
.DK-STORY-ROW{border-bottom-color:rgba(255,255,255,.04) !important}
|
||||
.DK-STORY-TITLE{color:#C0BDB6 !important}
|
||||
.DK-STORY-EXCERPT{color:#3A4568 !important}
|
||||
.DK-STORY-META{color:#262E48 !important}
|
||||
.DK-STORY-EXCERPT{color:#7080A8 !important}
|
||||
.DK-STORY-META{color:#5A6888 !important}
|
||||
.DK-DRAFTS-CARD{background:#161C27 !important;border-color:rgba(255,255,255,.08) !important}
|
||||
.DK-DRAFTS-HEAD{border-bottom-color:rgba(255,255,255,.06) !important}
|
||||
.DK-DRAFTS-HEAD h3{color:#323850 !important}
|
||||
.DK-DRAFTS-HEAD h3{color:#6070A0 !important}
|
||||
.DK-DRAFT-ROW{border-bottom-color:rgba(255,255,255,.04) !important}
|
||||
.DK-DRAFT-TITLE{color:#C0BDB6 !important}
|
||||
.DK-DRAFT-META{color:#3A4568 !important}
|
||||
.DK-DRAFT-META{color:#7080A8 !important}
|
||||
|
||||
/* ══════════════════════════════════
|
||||
MOBILE — phone chrome + stacked layout
|
||||
@@ -233,8 +244,8 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
.M-HSTAT a{text-decoration:none;display:block}
|
||||
.M-HSTAT-NUM{font-size:11px;font-weight:900;color:#002850;line-height:1;display:block}
|
||||
.M-HSTAT-NUM.dk{color:#E8E4DC}
|
||||
.M-HSTAT-LBL{font-size:5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#B8B4AE;display:block;margin-top:1px}
|
||||
.M-HSTAT-LBL.dk{color:#323850}
|
||||
.M-HSTAT-LBL{font-size:5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#706C68;display:block;margin-top:1px}
|
||||
.M-HSTAT-LBL.dk{color:#6070A0}
|
||||
|
||||
/* Mobile drafts */
|
||||
.M-DCARD{background:#fff;border:1px solid #E0DDD5;border-left:3px solid #A6DAD8;border-radius:3px;overflow:hidden}
|
||||
@@ -242,14 +253,14 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
.M-DCARD-HEAD{padding:5px 9px;border-bottom:1px solid #F0EDE6;display:flex;align-items:center}
|
||||
.M-DCARD-HEAD.dk{border-bottom-color:rgba(255,255,255,.06)}
|
||||
.M-DCARD-HEAD h3{font-size:6px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#999}
|
||||
.M-DCARD-HEAD.dk h3{color:#323850}
|
||||
.M-DCARD-HEAD.dk h3{color:#6070A0}
|
||||
.M-DRAFT-ROW{display:flex;align-items:center;justify-content:space-between;padding:5px 9px;border-bottom:1px solid #F0EDE6}
|
||||
.M-DRAFT-ROW:last-child{border-bottom:none}
|
||||
.M-DRAFT-ROW.dk{border-bottom-color:rgba(255,255,255,.04)}
|
||||
.M-DRAFT-TITLE{font-family:Georgia,serif;font-size:7px;color:#002850}
|
||||
.M-DRAFT-TITLE.dk{color:#C0BDB6}
|
||||
.M-DRAFT-META{font-size:5.5px;color:#AAA;margin-top:1px}
|
||||
.M-DRAFT-META.dk{color:#3A4568}
|
||||
.M-DRAFT-META.dk{color:#7080A8}
|
||||
|
||||
/* Mobile 2×2 person grid */
|
||||
.M-PGRID{display:grid;grid-template-columns:1fr 1fr;gap:5px}
|
||||
@@ -260,7 +271,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
.M-PNAME.dk{color:#C0BDB6}
|
||||
.M-PCOUNT{font-size:5px;font-weight:800;color:#002850;background:#D4F0EE;padding:1px 5px;border-radius:10px}
|
||||
.M-PCOUNT.dk{color:#A6DAD8;background:rgba(166,218,216,.14)}
|
||||
.M-PALL{font-size:5.5px;color:#002850;opacity:.55;text-decoration:none;display:block;text-align:right;margin-top:1px}
|
||||
.M-PALL{font-size:5.5px;color:#4A6E8A;text-decoration:none;display:block;text-align:right;margin-top:1px}
|
||||
.M-PALL.dk{color:#A6DAD8;opacity:.65}
|
||||
|
||||
/* Mobile single-column cards */
|
||||
@@ -269,7 +280,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
.M-CARD-HEAD{display:flex;align-items:center;justify-content:space-between;padding:5px 9px;border-bottom:1px solid #E0DDD5}
|
||||
.M-CARD-HEAD.dk{border-bottom-color:rgba(255,255,255,.06)}
|
||||
.M-CARD-HEAD h3{font-size:6px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#999}
|
||||
.M-CARD-HEAD.dk h3{color:#323850}
|
||||
.M-CARD-HEAD.dk h3{color:#6070A0}
|
||||
.M-CARD-HEAD a{font-size:6px;color:#002850;opacity:.4;text-decoration:none;font-weight:600}
|
||||
.M-CARD-HEAD.dk a{color:#A6DAD8;opacity:.5}
|
||||
.M-DROW{display:flex;align-items:center;gap:6px;padding:4px 9px;border-bottom:1px solid #F0EDE6}
|
||||
@@ -279,23 +290,35 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
.M-DTITLE{font-family:Georgia,serif;font-size:7px;color:#002850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.M-DTITLE.dk{color:#C0BDB6}
|
||||
.M-DSENDER{font-size:5.5px;color:#888}
|
||||
.M-DSENDER.dk{color:#3A4568}
|
||||
.M-DDATE{font-size:5.5px;color:#C8C4BE;white-space:nowrap;flex-shrink:0}
|
||||
.M-DDATE.dk{color:#262E48}
|
||||
.M-DSENDER.dk{color:#7080A8}
|
||||
.M-DDATE{font-size:5.5px;color:#706C68;white-space:nowrap;flex-shrink:0}
|
||||
.M-DDATE.dk{color:#5A6888}
|
||||
.M-SROW{padding:6px 9px;border-bottom:1px solid #F0EDE6}
|
||||
.M-SROW:last-child{border-bottom:none}
|
||||
.M-SROW.dk{border-bottom-color:rgba(255,255,255,.04)}
|
||||
.M-STITLE{font-family:Georgia,serif;font-size:7.5px;color:#002850;font-style:italic;margin-bottom:2px;line-height:1.3}
|
||||
.M-STITLE.dk{color:#C0BDB6}
|
||||
.M-SEXCERPT{font-size:6px;color:#888;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:2px}
|
||||
.M-SEXCERPT.dk{color:#3A4568}
|
||||
.M-SMETA{font-size:5.5px;color:#B8B4AE}
|
||||
.M-SMETA.dk{color:#262E48}
|
||||
.M-SEXCERPT.dk{color:#7080A8}
|
||||
.M-SMETA{font-size:5.5px;color:#706C68}
|
||||
.M-SMETA.dk{color:#5A6888}
|
||||
|
||||
/* Phone layout helper */
|
||||
.phones-row{display:flex;gap:20px;align-items:start;flex-wrap:wrap}
|
||||
.phone-label{font-size:8px;font-weight:800;color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
|
||||
.phone-col{display:flex;flex-direction:column}
|
||||
|
||||
/* ── impl-ref table ─── */
|
||||
.impl-ref-section{margin-top:64px;border-top:2px dashed #C8C4BE;padding-top:56px}
|
||||
.impl-ref-section .sec-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#888;margin-bottom:20px;display:flex;align-items:center;gap:10px}
|
||||
.impl-ref-section .sec-h::after{content:'';flex:1;height:1px;background:#D8D4CE}
|
||||
.impl-ref-table{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:24px}
|
||||
.impl-ref-table th{text-align:left;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#888;padding:6px 12px 6px 0;border-bottom:2px solid #E0DDD5}
|
||||
.impl-ref-table td{padding:7px 12px 7px 0;border-bottom:1px solid #F0EDE6;vertical-align:top;color:#1A1A1A}
|
||||
.impl-ref-table tr:last-child td{border-bottom:none}
|
||||
.impl-ref-table td:first-child{font-weight:700;color:#002850;white-space:nowrap;width:180px}
|
||||
.impl-ref-table td code{font-family:monospace;font-size:10px;background:#F0EDE6;padding:1px 4px;border-radius:3px;white-space:nowrap}
|
||||
.impl-ref-table td .note-cell{font-size:10px;color:#888;font-style:italic}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -372,9 +395,9 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
</div>
|
||||
<div class="DIVIDER"></div>
|
||||
<div class="HEADER-STATS">
|
||||
<div class="HSTAT"><a href="#"><span class="HSTAT-NUM">847</span><span class="HSTAT-LABEL">Dokumente</span></a></div>
|
||||
<div class="HSTAT"><a href="#"><span class="HSTAT-NUM">94</span><span class="HSTAT-LABEL">Personen</span></a></div>
|
||||
<div class="HSTAT"><a href="#"><span class="HSTAT-NUM">12</span><span class="HSTAT-LABEL">Geschichten</span></a></div>
|
||||
<div class="HSTAT"><a href="/documents"><span class="HSTAT-NUM">847</span><span class="HSTAT-LABEL">Dokumente</span></a></div>
|
||||
<div class="HSTAT"><a href="/persons"><span class="HSTAT-NUM">94</span><span class="HSTAT-LABEL">Personen</span></a></div>
|
||||
<div class="HSTAT"><a href="/geschichten"><span class="HSTAT-NUM">12</span><span class="HSTAT-LABEL">Geschichten</span></a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -402,13 +425,13 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
<div class="PCARD-COUNT">19 Dok.</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="PERSONS-FOOTER"><a class="PERSONS-ALL" href="#">Alle 94 Personen →</a></div>
|
||||
<div class="PERSONS-FOOTER"><a class="PERSONS-ALL" href="/persons">Alle 94 Personen →</a></div>
|
||||
</div>
|
||||
|
||||
<!-- Zone 5: 1:1 split (B.1) -->
|
||||
<div class="CONTENT-ROW">
|
||||
<div class="CARD">
|
||||
<div class="CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="#">Alle Dokumente</a></div>
|
||||
<div class="CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="/documents">Alle Dokumente</a></div>
|
||||
<div class="DOC-ROW">
|
||||
<div class="DOC-THUMB"><svg width="8" height="10" viewBox="0 0 20 26" fill="none" stroke="#C8C4BE" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div>
|
||||
<div class="DOC-INFO"><div class="DOC-TITLE">Brief von Ernst an Käthe, März 1923</div><div class="DOC-SENDER">von <a href="#">Käthe Raddatz</a></div></div>
|
||||
@@ -436,7 +459,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
</div>
|
||||
</div>
|
||||
<div class="CARD">
|
||||
<div class="CARD-HEAD"><h3>Geschichten</h3><a href="#">Alle Geschichten</a></div>
|
||||
<div class="CARD-HEAD"><h3>Geschichten</h3><a href="/geschichten">Alle Geschichten</a></div>
|
||||
<div class="STORY-ROW">
|
||||
<div class="STORY-TITLE">Die Reise nach Berlin</div>
|
||||
<div class="STORY-EXCERPT">Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …</div>
|
||||
@@ -494,6 +517,18 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
<li>Drafts-Card: white mit mint left-border (BLOG_WRITE-Variante)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="note">
|
||||
<strong>Stat-Links — Zielrouten</strong>
|
||||
<ul>
|
||||
<li>Dokumente-Zahl → <code>/documents</code></li>
|
||||
<li>Personen-Zahl → <code>/persons</code></li>
|
||||
<li>Geschichten-Zahl → <code>/geschichten</code></li>
|
||||
<li>„Alle N Personen →" → <code>/persons</code></li>
|
||||
<li>„Alle Dokumente" / „Alle" in Card-Head → <code>/documents</code></li>
|
||||
<li>„Alle Geschichten" / „Alle" in Card-Head → <code>/geschichten</code></li>
|
||||
<li>Personen-Kacheln → <code>/persons/{id}</code> (Instanz-spezifisch)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -515,9 +550,9 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
<div class="HEADER-LEFT"><div class="HEADER-TIME">Guten Morgen</div><div class="HEADER-NAME">Herzlich willkommen, Marcel.</div></div>
|
||||
<div class="DIVIDER"></div>
|
||||
<div class="HEADER-STATS">
|
||||
<div class="HSTAT"><a href="#"><span class="HSTAT-NUM">847</span><span class="HSTAT-LABEL">Dokumente</span></a></div>
|
||||
<div class="HSTAT"><a href="#"><span class="HSTAT-NUM">94</span><span class="HSTAT-LABEL">Personen</span></a></div>
|
||||
<div class="HSTAT"><a href="#"><span class="HSTAT-NUM">12</span><span class="HSTAT-LABEL">Geschichten</span></a></div>
|
||||
<div class="HSTAT"><a href="/documents"><span class="HSTAT-NUM">847</span><span class="HSTAT-LABEL">Dokumente</span></a></div>
|
||||
<div class="HSTAT"><a href="/persons"><span class="HSTAT-NUM">94</span><span class="HSTAT-LABEL">Personen</span></a></div>
|
||||
<div class="HSTAT"><a href="/geschichten"><span class="HSTAT-NUM">12</span><span class="HSTAT-LABEL">Geschichten</span></a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -540,19 +575,19 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
<a class="PCARD" href="#"><div class="PCARD-AV" style="background:#3D5A7A">FM</div><div class="PCARD-NAME">Frieda Müller</div><div class="PCARD-COUNT">28 Dok.</div></a>
|
||||
<a class="PCARD" href="#"><div class="PCARD-AV" style="background:#4A7A5A">HW</div><div class="PCARD-NAME">Heinrich Weber</div><div class="PCARD-COUNT">19 Dok.</div></a>
|
||||
</div>
|
||||
<div class="PERSONS-FOOTER"><a class="PERSONS-ALL" href="#">Alle 94 Personen →</a></div>
|
||||
<div class="PERSONS-FOOTER"><a class="PERSONS-ALL" href="/persons">Alle 94 Personen →</a></div>
|
||||
</div>
|
||||
|
||||
<div class="CONTENT-ROW">
|
||||
<div class="CARD">
|
||||
<div class="CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="#">Alle Dokumente</a></div>
|
||||
<div class="CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="/documents">Alle Dokumente</a></div>
|
||||
<div class="DOC-ROW"><div class="DOC-THUMB"><svg width="8" height="10" viewBox="0 0 20 26" fill="none" stroke="#C8C4BE" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div><div class="DOC-INFO"><div class="DOC-TITLE">Brief von Ernst an Käthe, März 1923</div><div class="DOC-SENDER">von <a href="#">Käthe Raddatz</a></div></div><div class="DOC-DATE">vor 2 Tagen</div></div>
|
||||
<div class="DOC-ROW"><div class="DOC-THUMB"><svg width="8" height="10" viewBox="0 0 20 26" fill="none" stroke="#C8C4BE" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div><div class="DOC-INFO"><div class="DOC-TITLE">Heiratsurkunde Raddatz-Müller, 1898</div><div class="DOC-SENDER" style="color:#E0DDD5">—</div></div><div class="DOC-DATE">vor 4 Tagen</div></div>
|
||||
<div class="DOC-ROW"><div class="DOC-THUMB"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#A6DAD8" stroke-width="1.5"><rect x="2" y="2" width="20" height="20" rx="2"/><circle cx="8" cy="8" r="2"/><polyline points="22 14 16 9 4 22"/></svg></div><div class="DOC-INFO"><div class="DOC-TITLE">Familienfoto, Sommer 1928</div><div class="DOC-SENDER">von <a href="#">Ernst Raddatz</a></div></div><div class="DOC-DATE">vor 1 Woche</div></div>
|
||||
<div style="padding:5px 10px;font-size:6px;color:#C8C4BE;border-top:1px solid #F0EDE6">+ 2 weitere Dokumente …</div>
|
||||
</div>
|
||||
<div class="CARD">
|
||||
<div class="CARD-HEAD"><h3>Geschichten</h3><a href="#">Alle</a></div>
|
||||
<div class="CARD-HEAD"><h3>Geschichten</h3><a href="/geschichten">Alle</a></div>
|
||||
<div class="STORY-ROW"><div class="STORY-TITLE">Die Reise nach Berlin</div><div class="STORY-EXCERPT">Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …</div><div class="STORY-META">vor 3 Tagen</div></div>
|
||||
<div class="STORY-ROW"><div class="STORY-TITLE">Sommer 1934 in Köln</div><div class="STORY-EXCERPT">Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten in Köln — die letzte unbeschwerte Reise vor dem Krieg …</div><div class="STORY-META">vor 2 Wochen</div></div>
|
||||
</div>
|
||||
@@ -609,9 +644,9 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
</div>
|
||||
<div class="DIVIDER DK-DIVIDER"></div>
|
||||
<div class="HEADER-STATS">
|
||||
<div class="HSTAT DK-HSTAT"><a href="#"><span class="HSTAT-NUM DK-HSTAT-NUM">847</span><span class="HSTAT-LABEL DK-HSTAT-LABEL">Dokumente</span></a></div>
|
||||
<div class="HSTAT DK-HSTAT"><a href="#"><span class="HSTAT-NUM DK-HSTAT-NUM">94</span><span class="HSTAT-LABEL DK-HSTAT-LABEL">Personen</span></a></div>
|
||||
<div class="HSTAT DK-HSTAT"><a href="#"><span class="HSTAT-NUM DK-HSTAT-NUM">12</span><span class="HSTAT-LABEL DK-HSTAT-LABEL">Geschichten</span></a></div>
|
||||
<div class="HSTAT DK-HSTAT"><a href="/documents"><span class="HSTAT-NUM DK-HSTAT-NUM">847</span><span class="HSTAT-LABEL DK-HSTAT-LABEL">Dokumente</span></a></div>
|
||||
<div class="HSTAT DK-HSTAT"><a href="/persons"><span class="HSTAT-NUM DK-HSTAT-NUM">94</span><span class="HSTAT-LABEL DK-HSTAT-LABEL">Personen</span></a></div>
|
||||
<div class="HSTAT DK-HSTAT"><a href="/geschichten"><span class="HSTAT-NUM DK-HSTAT-NUM">12</span><span class="HSTAT-LABEL DK-HSTAT-LABEL">Geschichten</span></a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -638,12 +673,12 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
<div class="PCARD-COUNT DK-PCARD-COUNT">19 Dok.</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="PERSONS-FOOTER"><a class="PERSONS-ALL DK-PERSONS-ALL" href="#">Alle 94 Personen →</a></div>
|
||||
<div class="PERSONS-FOOTER"><a class="PERSONS-ALL DK-PERSONS-ALL" href="/persons">Alle 94 Personen →</a></div>
|
||||
</div>
|
||||
|
||||
<div class="CONTENT-ROW">
|
||||
<div class="CARD DK-CARD">
|
||||
<div class="CARD-HEAD DK-CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="#">Alle Dokumente</a></div>
|
||||
<div class="CARD-HEAD DK-CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="/documents">Alle Dokumente</a></div>
|
||||
<div class="DOC-ROW DK-DOC-ROW">
|
||||
<div class="DOC-THUMB DK-DOC-THUMB"><svg width="8" height="10" viewBox="0 0 20 26" fill="none" stroke="#4A5880" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div>
|
||||
<div class="DOC-INFO"><div class="DOC-TITLE DK-DOC-TITLE">Brief von Ernst an Käthe, März 1923</div><div class="DOC-SENDER DK-DOC-SENDER">von <a href="#">Käthe Raddatz</a></div></div>
|
||||
@@ -651,7 +686,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
</div>
|
||||
<div class="DOC-ROW DK-DOC-ROW">
|
||||
<div class="DOC-THUMB DK-DOC-THUMB"><svg width="8" height="10" viewBox="0 0 20 26" fill="none" stroke="#4A5880" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div>
|
||||
<div class="DOC-INFO"><div class="DOC-TITLE DK-DOC-TITLE">Heiratsurkunde Raddatz-Müller, 1898</div><div class="DOC-SENDER DK-DOC-SENDER" style="color:#262E48">—</div></div>
|
||||
<div class="DOC-INFO"><div class="DOC-TITLE DK-DOC-TITLE">Heiratsurkunde Raddatz-Müller, 1898</div><div class="DOC-SENDER DK-DOC-SENDER" style="color:#5A6888">—</div></div>
|
||||
<div class="DOC-DATE DK-DOC-DATE">vor 4 Tagen</div>
|
||||
</div>
|
||||
<div class="DOC-ROW DK-DOC-ROW">
|
||||
@@ -661,7 +696,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
</div>
|
||||
<div class="DOC-ROW DK-DOC-ROW">
|
||||
<div class="DOC-THUMB DK-DOC-THUMB"><svg width="8" height="10" viewBox="0 0 20 26" fill="none" stroke="#4A5880" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div>
|
||||
<div class="DOC-INFO"><div class="DOC-TITLE DK-DOC-TITLE">Taufregister Heinrich Weber, 1902</div><div class="DOC-SENDER DK-DOC-SENDER" style="color:#262E48">—</div></div>
|
||||
<div class="DOC-INFO"><div class="DOC-TITLE DK-DOC-TITLE">Taufregister Heinrich Weber, 1902</div><div class="DOC-SENDER DK-DOC-SENDER" style="color:#5A6888">—</div></div>
|
||||
<div class="DOC-DATE DK-DOC-DATE">vor 2 Wo.</div>
|
||||
</div>
|
||||
<div class="DOC-ROW DK-DOC-ROW">
|
||||
@@ -671,7 +706,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
</div>
|
||||
</div>
|
||||
<div class="CARD DK-CARD">
|
||||
<div class="CARD-HEAD DK-CARD-HEAD"><h3>Geschichten</h3><a href="#">Alle Geschichten</a></div>
|
||||
<div class="CARD-HEAD DK-CARD-HEAD"><h3>Geschichten</h3><a href="/geschichten">Alle Geschichten</a></div>
|
||||
<div class="STORY-ROW DK-STORY-ROW">
|
||||
<div class="STORY-TITLE DK-STORY-TITLE">Die Reise nach Berlin</div>
|
||||
<div class="STORY-EXCERPT DK-STORY-EXCERPT">Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …</div>
|
||||
@@ -713,11 +748,12 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
</ul>
|
||||
</div>
|
||||
<div class="note">
|
||||
<strong>Typografie-Token im Dark Mode</strong>
|
||||
<strong>Typografie-Token im Dark Mode — WCAG AA</strong>
|
||||
<ul>
|
||||
<li>Primär-Text: <code>#D0CCC4</code> / <code>#C0BDB6</code> (warm, kein reines Weiß)</li>
|
||||
<li>Beschriftungen (Labels): <code>#323850</code></li>
|
||||
<li>Datum/Dim: <code>#262E48</code></li>
|
||||
<li>Gedämpft (muted): <code>#7080A8</code> — Absender, Excerpts, Entwurfs-Meta (≥ 4.5:1)</li>
|
||||
<li>Labels/Überschriften: <code>#6070A0</code> — HSTAT-Label, Card-Head h3 (≥ 4.5:1)</li>
|
||||
<li>Dim: <code>#5A6888</code> — Datum-Felder (≥ 4.5:1)</li>
|
||||
<li>Mint: <code>#A6DAD8</code> — unverändert, auch im Dark Mode</li>
|
||||
<li>Mint-Pill Hintergrund: <code>rgba(166,218,216,.14)</code></li>
|
||||
</ul>
|
||||
@@ -774,9 +810,9 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
<div class="M-HTIME">Guten Abend</div>
|
||||
<div class="M-HNAME">Herzlich willkommen, Brigitte.</div>
|
||||
<div class="M-HSTATS">
|
||||
<div class="M-HSTAT"><a href="#"><span class="M-HSTAT-NUM">847</span><span class="M-HSTAT-LBL">Dok.</span></a></div>
|
||||
<div class="M-HSTAT"><a href="#"><span class="M-HSTAT-NUM">94</span><span class="M-HSTAT-LBL">Pers.</span></a></div>
|
||||
<div class="M-HSTAT"><a href="#"><span class="M-HSTAT-NUM">12</span><span class="M-HSTAT-LBL">Gesch.</span></a></div>
|
||||
<div class="M-HSTAT"><a href="/documents"><span class="M-HSTAT-NUM">847</span><span class="M-HSTAT-LBL">Dok.</span></a></div>
|
||||
<div class="M-HSTAT"><a href="/persons"><span class="M-HSTAT-NUM">94</span><span class="M-HSTAT-LBL">Pers.</span></a></div>
|
||||
<div class="M-HSTAT"><a href="/geschichten"><span class="M-HSTAT-NUM">12</span><span class="M-HSTAT-LBL">Gesch.</span></a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -787,11 +823,11 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
<a class="M-PCARD" href="#"><div class="M-PAV" style="background:#3D5A7A">FM</div><div class="M-PNAME">Frieda Müller</div><div class="M-PCOUNT">28 Dok.</div></a>
|
||||
<a class="M-PCARD" href="#"><div class="M-PAV" style="background:#4A7A5A">HW</div><div class="M-PNAME">Heinrich Weber</div><div class="M-PCOUNT">19 Dok.</div></a>
|
||||
</div>
|
||||
<a class="M-PALL" href="#">Alle 94 Personen →</a>
|
||||
<a class="M-PALL" href="/persons">Alle 94 Personen →</a>
|
||||
</div>
|
||||
|
||||
<div class="M-CARD">
|
||||
<div class="M-CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="#">Alle</a></div>
|
||||
<div class="M-CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="/documents">Alle</a></div>
|
||||
<div class="M-DROW">
|
||||
<div style="width:15px;height:18px;background:#ECEAE4;border:1px solid #E0DDD5;border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center"><svg width="6" height="8" viewBox="0 0 20 26" fill="none" stroke="#C8C4BE" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div>
|
||||
<div class="M-DINFO"><div class="M-DTITLE">Brief von Ernst an Käthe, März 1923</div><div class="M-DSENDER">von Käthe Raddatz</div></div>
|
||||
@@ -810,7 +846,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
</div>
|
||||
|
||||
<div class="M-CARD">
|
||||
<div class="M-CARD-HEAD"><h3>Geschichten</h3><a href="#">Alle</a></div>
|
||||
<div class="M-CARD-HEAD"><h3>Geschichten</h3><a href="/geschichten">Alle</a></div>
|
||||
<div class="M-SROW">
|
||||
<div class="M-STITLE">Die Reise nach Berlin</div>
|
||||
<div class="M-SEXCERPT">Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …</div>
|
||||
@@ -857,9 +893,9 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
<div class="M-HTIME">Guten Morgen</div>
|
||||
<div class="M-HNAME">Herzlich willkommen, Marcel.</div>
|
||||
<div class="M-HSTATS">
|
||||
<div class="M-HSTAT"><a href="#"><span class="M-HSTAT-NUM">847</span><span class="M-HSTAT-LBL">Dok.</span></a></div>
|
||||
<div class="M-HSTAT"><a href="#"><span class="M-HSTAT-NUM">94</span><span class="M-HSTAT-LBL">Pers.</span></a></div>
|
||||
<div class="M-HSTAT"><a href="#"><span class="M-HSTAT-NUM">12</span><span class="M-HSTAT-LBL">Gesch.</span></a></div>
|
||||
<div class="M-HSTAT"><a href="/documents"><span class="M-HSTAT-NUM">847</span><span class="M-HSTAT-LBL">Dok.</span></a></div>
|
||||
<div class="M-HSTAT"><a href="/persons"><span class="M-HSTAT-NUM">94</span><span class="M-HSTAT-LBL">Pers.</span></a></div>
|
||||
<div class="M-HSTAT"><a href="/geschichten"><span class="M-HSTAT-NUM">12</span><span class="M-HSTAT-LBL">Gesch.</span></a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -882,11 +918,11 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
<a class="M-PCARD" href="#"><div class="M-PAV" style="background:#3D5A7A">FM</div><div class="M-PNAME">Frieda Müller</div><div class="M-PCOUNT">28 Dok.</div></a>
|
||||
<a class="M-PCARD" href="#"><div class="M-PAV" style="background:#4A7A5A">HW</div><div class="M-PNAME">Heinrich Weber</div><div class="M-PCOUNT">19 Dok.</div></a>
|
||||
</div>
|
||||
<a class="M-PALL" href="#">Alle 94 Personen →</a>
|
||||
<a class="M-PALL" href="/persons">Alle 94 Personen →</a>
|
||||
</div>
|
||||
|
||||
<div class="M-CARD">
|
||||
<div class="M-CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="#">Alle</a></div>
|
||||
<div class="M-CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="/documents">Alle</a></div>
|
||||
<div class="M-DROW">
|
||||
<div style="width:15px;height:18px;background:#ECEAE4;border:1px solid #E0DDD5;border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center"><svg width="6" height="8" viewBox="0 0 20 26" fill="none" stroke="#C8C4BE" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div>
|
||||
<div class="M-DINFO"><div class="M-DTITLE">Brief von Ernst an Käthe, März 1923</div><div class="M-DSENDER">von Käthe Raddatz</div></div>
|
||||
@@ -900,7 +936,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
</div>
|
||||
|
||||
<div class="M-CARD">
|
||||
<div class="M-CARD-HEAD"><h3>Geschichten</h3><a href="#">Alle</a></div>
|
||||
<div class="M-CARD-HEAD"><h3>Geschichten</h3><a href="/geschichten">Alle</a></div>
|
||||
<div class="M-SROW">
|
||||
<div class="M-STITLE">Die Reise nach Berlin</div>
|
||||
<div class="M-SEXCERPT">Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …</div>
|
||||
@@ -972,7 +1008,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
</div>
|
||||
<div class="M-DROW dk">
|
||||
<div style="width:15px;height:18px;background:#1E2638;border:1px solid rgba(255,255,255,.07);border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center"><svg width="6" height="8" viewBox="0 0 20 26" fill="none" stroke="#4A5880" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div>
|
||||
<div class="M-DINFO"><div class="M-DTITLE dk">Heiratsurkunde Raddatz-Müller, 1898</div><div class="M-DSENDER dk" style="color:#262E48">—</div></div>
|
||||
<div class="M-DINFO"><div class="M-DTITLE dk">Heiratsurkunde Raddatz-Müller, 1898</div><div class="M-DSENDER dk" style="color:#5A6888">—</div></div>
|
||||
<div class="M-DDATE dk">vor 4 T.</div>
|
||||
</div>
|
||||
<div class="M-DROW dk">
|
||||
@@ -1046,10 +1082,143 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
|
||||
<li>Avatare behalten ihre Farbe — Eigenfarbe, kein Token</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ann-block">
|
||||
<strong>Neue i18n-Schlüssel — messages/{de,en,es}.json</strong>
|
||||
<ul>
|
||||
<li><code>dashboard.greeting.morning</code> — „Guten Morgen" (vor 12:00)</li>
|
||||
<li><code>dashboard.greeting.afternoon</code> — „Guten Tag" (12:00–18:00)</li>
|
||||
<li><code>dashboard.greeting.evening</code> — „Guten Abend" (ab 18:00)</li>
|
||||
<li><code>dashboard.welcome</code> — „Herzlich willkommen, {name}." (parametrisch)</li>
|
||||
<li><code>dashboard.persons.viewAll</code> — „Alle {count} Personen →" (parametrisch)</li>
|
||||
<li><code>dashboard.recentlyUpdated</code> — „Zuletzt aktualisiert"</li>
|
||||
<li><code>dashboard.myDrafts</code> — „Meine Entwürfe"</li>
|
||||
<li><code>dashboard.stat.documents</code> — „Dokumente" / mobil: „Dok."</li>
|
||||
<li><code>dashboard.stat.persons</code> — „Personen" / mobil: „Pers."</li>
|
||||
<li><code>dashboard.stat.stories</code> — „Geschichten" / mobil: „Gesch."</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══ IMPL-REF TABLE ══ -->
|
||||
<div class="impl-ref-section">
|
||||
<div class="sec-h"><span class="sec-num" style="background:#4A6E8A">↗</span> Implementierungsreferenz — Tailwind-Klassen je Region</div>
|
||||
<p style="font-size:11px;color:#888;margin-bottom:20px">Exakte Tailwind CSS 4-Klassen und Pixel-Werte für jeden UI-Bereich. <strong>Diese Werte gelten für die Implementierung</strong>, nicht die skalierten Mockup-Werte.</p>
|
||||
|
||||
<table class="impl-ref-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Region</th>
|
||||
<th>Tailwind-Klassen</th>
|
||||
<th>Hinweise</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Seiten-Canvas</td>
|
||||
<td><code>bg-canvas w-full</code></td>
|
||||
<td class="note-cell">Vollbreite Viewport; Farbe: <code>--palette-sand</code> / <code>bg-canvas</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Inhalts-Wrapper</td>
|
||||
<td><code>max-w-7xl mx-auto px-8 py-8</code></td>
|
||||
<td class="note-cell">1280 px max-width, 32 px padding allseitig</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Header-Balken</td>
|
||||
<td><code>bg-white border border-line rounded-sm px-4 py-3 flex items-center gap-4</code></td>
|
||||
<td class="note-cell">Explizit <code>bg-white</code>, nicht <code>bg-surface</code> — weißer Hintergrund ist intentionell (B.1-Entscheidung)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Header: Gruß-Zeit</td>
|
||||
<td><code>text-[6px] font-bold uppercase tracking-[.8px] text-[#C8B8A0]</code></td>
|
||||
<td class="note-cell">Warm-beige, kein Design-Token — kandidiert für <code>--color-greeting-time</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Header: Begrüßungsname</td>
|
||||
<td><code>font-serif text-xl text-brand-navy</code></td>
|
||||
<td class="note-cell">Georgia/Tinos; <code>text-xl</code> (20 px real)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Header: Trennlinie</td>
|
||||
<td><code>w-px self-stretch bg-line flex-shrink-0</code></td>
|
||||
<td class="note-cell">1 px vertikal; <code>--palette-line</code> = <code>#E8E4DF</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Stat-Zahl</td>
|
||||
<td><code>text-2xl font-black text-brand-navy leading-none block</code></td>
|
||||
<td class="note-cell">Numerischer Wert; Block damit Label darunter sitzt</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Stat-Label</td>
|
||||
<td><code>text-[11px] font-bold uppercase tracking-[.8px] text-ink-3 block mt-0.5</code></td>
|
||||
<td class="note-cell">Licht: <code>#706C68</code> (WCAG AA); Tailwind-Token <code>text-ink-3</code> TBD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Personen-Grid</td>
|
||||
<td><code>grid grid-cols-4 gap-1.5</code></td>
|
||||
<td class="note-cell">Mobile: <code>grid-cols-2</code> bei <code>sm:</code> (640 px)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Personen-Kachel</td>
|
||||
<td><code>bg-surface border border-line rounded-sm p-2.5 flex flex-col items-center text-center gap-1.5 no-underline</code></td>
|
||||
<td class="note-cell"><code>bg-surface</code> = <code>--palette-surface</code>; kein Bottom-Accent</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Personen-Avatar</td>
|
||||
<td><code>w-9 h-9 rounded-full flex items-center justify-center font-black text-white text-[9px] shadow-sm flex-shrink-0</code></td>
|
||||
<td class="note-cell">34 px real ≈ <code>w-9</code> (36 px) — nächster Tailwind-Step; Avatar-Farbe per Person-Eigenfarbe</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mint-Pill Badge</td>
|
||||
<td><code>text-[11px] font-bold text-brand-navy bg-[#D4F0EE] px-1.5 py-px rounded-full</code></td>
|
||||
<td class="note-cell">Token-Kandidat: <code>--color-mint-pill</code> / <code>bg-mint-soft</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>„Alle N Personen →"</td>
|
||||
<td><code>text-xs font-semibold text-[#4A6E8A] no-underline text-right block mt-1</code></td>
|
||||
<td class="note-cell">Direkte Farbe (kein opacity-Trick) — WCAG AA auf <code>bg-canvas</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Content-Card</td>
|
||||
<td><code>bg-surface border border-line rounded-sm overflow-hidden flex flex-col</code></td>
|
||||
<td class="note-cell">Gleiche Card-Sprache wie restliche App</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Card-Kopfzeile</td>
|
||||
<td><code>flex items-center justify-between px-3 py-1.5 border-b border-line</code></td>
|
||||
<td class="note-cell">h3: <code>text-[11px] font-bold uppercase tracking-[.12em] text-ink-3</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dok.-Datum</td>
|
||||
<td><code>text-[12px] text-ink-3 whitespace-nowrap flex-shrink-0</code></td>
|
||||
<td class="note-cell">Licht: <code>#706C68</code> (WCAG AA); nicht <code>#C8C4BE</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Story-Excerpt</td>
|
||||
<td><code>text-xs text-ink-2 leading-relaxed line-clamp-2</code></td>
|
||||
<td class="note-cell">2 Zeilen max via Tailwind <code>line-clamp-2</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Story-Meta</td>
|
||||
<td><code>text-[11px] text-ink-3</code></td>
|
||||
<td class="note-cell">Licht: <code>#706C68</code> (WCAG AA)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Entwürfe-Card</td>
|
||||
<td><code>bg-surface border border-line border-l-[3px] border-l-brand-mint rounded-sm overflow-hidden</code></td>
|
||||
<td class="note-cell">Mint Left-Border als visueller Anker für BLOG_WRITE-Zone</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dark Mode</td>
|
||||
<td><code>dark:bg-surface dark:border-white/8 dark:text-ink</code> (via Tailwind <code>dark:</code>)</td>
|
||||
<td class="note-cell">Nicht <code>!important</code>-Overrides aus Spec — spec-DK- Klassen sind Annäherungen</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user