1040 lines
85 KiB
HTML
1040 lines
85 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>TopBar B1 — Responsive · Light & Dark · Overflow</title>
|
||
<style>
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||
body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1A1A;line-height:1.5}
|
||
.page{max-width:1360px;margin:0 auto;padding:48px 32px}
|
||
|
||
/* ── Masthead ── */
|
||
.mh{padding-bottom:24px;border-bottom:3px solid #012851;margin-bottom:48px}
|
||
.mh h1{font-size:22px;font-weight:900;color:#012851;letter-spacing:-.4px}
|
||
.mh p{font-size:12.5px;color:#555;max-width:680px;line-height:1.7;margin-top:6px}
|
||
.mh .byline{font-size:9px;color:#AAA;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-top:8px}
|
||
|
||
/* ── Section headers ── */
|
||
.sh{margin:56px 0 28px;padding-bottom:12px;border-bottom:2px solid #E0DDD6}
|
||
.sh h2{font-size:16px;font-weight:900;color:#012851}
|
||
.sh p{font-size:12px;color:#666;margin-top:4px;max-width:700px;line-height:1.6}
|
||
|
||
/* ── Screen grid ── */
|
||
.grid{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:32px;align-items:flex-start}
|
||
.col{display:flex;flex-direction:column;gap:6px}
|
||
.lbl{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#888;display:flex;align-items:center;gap:5px}
|
||
.tag{background:#E4E0DA;color:#666;padding:1px 5px;border-radius:2px;font-size:7px;font-weight:700;text-transform:none}
|
||
.cap{font-size:9.5px;color:#999;font-style:italic;line-height:1.55;max-width:460px}
|
||
|
||
/* ── Browser chrome ── */
|
||
.chrome{background:#F0EFE9;border:1.5px solid #C4C0BA;border-radius:7px;overflow:hidden;box-shadow:0 3px 14px rgba(0,0,0,.09)}
|
||
.chrome.dark{background:#060C12;border-color:#0A1520}
|
||
.bar{height:20px;background:#E0DDD6;border-bottom:1px solid #C4C0BA;display:flex;align-items:center;padding:0 7px;gap:3px}
|
||
.chrome.dark .bar{background:#0A1218;border-bottom-color:#0A1520}
|
||
.dot{width:5px;height:5px;border-radius:50%;background:#BDB8B1}
|
||
.chrome.dark .dot{background:#1A2A3A}
|
||
.url{flex:1;height:8px;background:#CCC8C2;border-radius:5px;margin-left:4px}
|
||
.chrome.dark .url{background:#1A2A3A}
|
||
|
||
/* ── Simulated nav ── */
|
||
.nav{height:32px;background:#012851;display:flex;align-items:center;padding:0 12px;gap:8px;flex-shrink:0}
|
||
.nav.dark{background:#060C12}
|
||
.nav-logo{font-size:7px;font-weight:900;color:#fff;letter-spacing:.8px;border-bottom:2px solid #A1DCD8;padding-bottom:1px}
|
||
.nav-link{font-size:5.5px;color:rgba(255,255,255,.4);font-weight:700;text-transform:uppercase}
|
||
.nav-r{margin-left:auto;display:flex;gap:5px;align-items:center}
|
||
.nav-av{width:16px;height:16px;background:rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:5px;font-weight:800;color:rgba(255,255,255,.5)}
|
||
|
||
/* ── PDF placeholder ── */
|
||
.pdf{background:#D4D0C8;display:flex;align-items:center;justify-content:center;flex-shrink:0}
|
||
.pdf.dark{background:#08121C}
|
||
.paper{background:#FFFEF8;width:55%;box-shadow:0 2px 8px rgba(0,0,0,.14);border-radius:1px;padding:9px 11px;display:flex;flex-direction:column;gap:2px}
|
||
.paper.dark{background:#0D1820}
|
||
.pl{height:3px;background:#C4BDB0;border-radius:1px;opacity:.5;margin-bottom:2px}
|
||
.ps{height:2px;background:#C4BDB0;border-radius:1px;opacity:.28;margin-bottom:1.5px}
|
||
.paper.dark .pl{background:#1E2D3D}
|
||
.paper.dark .ps{background:#162230}
|
||
|
||
/* ── Person chips ── */
|
||
.chip{display:inline-flex;align-items:center;gap:2px;padding:2px 6px 2px 3px;background:#F0EFE9;border:1px solid #DDD9D0;border-radius:10px;white-space:nowrap;flex-shrink:0}
|
||
.chip.dk{background:#0A1218;border-color:#1E2D3D}
|
||
.av{border-radius:50%;background:#012851;display:flex;align-items:center;justify-content:center;font-weight:800;color:#A1DCD8;flex-shrink:0}
|
||
.av.purple{background:#5A3080;color:#fff}
|
||
.av.teal{background:#007596;color:#fff}
|
||
.av.moss{background:#2A6040;color:#fff}
|
||
.av.rust{background:#803020;color:#fff}
|
||
.cn{font-weight:600;color:#333;white-space:nowrap}
|
||
.cn.dk{color:#8AAABB}
|
||
.ov{display:inline-flex;align-items:center;padding:2px 6px;background:#E8E4DC;border:1px solid #DDD9D0;border-radius:10px;font-weight:700;color:#666;white-space:nowrap;flex-shrink:0}
|
||
.ov.dk{background:#0A1218;border-color:#1E2D3D;color:#4E6070}
|
||
.arr{color:#C4C0B8;flex-shrink:0}
|
||
.arr.dk{color:#1E2D3D}
|
||
|
||
/* ── Buttons ── */
|
||
.btn-p{height:26px;padding:0 10px;background:#012851;color:#A1DCD8;font-size:6.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;border-radius:3px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;flex-shrink:0}
|
||
.btn-p.dk{background:#A1DCD8;color:#012851}
|
||
.btn-g{height:26px;padding:0 9px;border:1.5px solid #C8C4BE;color:#444;font-size:6.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;border-radius:3px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;flex-shrink:0}
|
||
.btn-g.dk{border-color:#1E2D3D;color:#6080A0}
|
||
.btn-g.on{background:#012851;border-color:#012851;color:#A1DCD8}
|
||
.btn-g.on.dk{background:#A1DCD8;border-color:#A1DCD8;color:#012851}
|
||
.ico{width:26px;height:26px;border:1.5px solid #C8C4BE;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:#888}
|
||
.ico.dk{border-color:#1E2D3D;color:#4E6070}
|
||
.dv{width:1px;background:#E4E2D8;flex-shrink:0}
|
||
.dv.dk{background:#1E2D3D}
|
||
|
||
/* Download icon */
|
||
.dl::before{content:'';display:block;width:2px;height:5px;background:currentColor;margin:0 auto}
|
||
.dl{width:9px;height:6px;border-bottom:2px solid currentColor;border-left:2px solid transparent;border-right:2px solid transparent}
|
||
|
||
/* ── Annotate hint strip ── */
|
||
.hint{height:18px;background:rgba(1,40,81,.05);border-top:1px dashed rgba(1,40,81,.12);display:flex;align-items:center;padding:0 14px;gap:8px}
|
||
.hint.dk{background:rgba(161,220,216,.04);border-top-color:rgba(161,220,216,.1)}
|
||
.hint-lbl{font-size:5.5px;font-weight:800;color:#012851;text-transform:uppercase;letter-spacing:.5px}
|
||
.hint-lbl.dk{color:#A1DCD8}
|
||
.hint-txt{font-size:5.5px;color:#888}
|
||
|
||
/* ── Ruler / divider ── */
|
||
hr{border:none;border-top:2px dashed #C8C4BE;margin:60px 0}
|
||
|
||
/* ── Rules table ── */
|
||
.rules{background:#fff;border:1px solid #E0DDD6;border-radius:6px;overflow:hidden;margin-top:28px}
|
||
.rules table{width:100%;border-collapse:collapse}
|
||
.rules th{background:#F4F2EC;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#888;padding:8px 12px;text-align:left;border-bottom:1px solid #E0DDD6}
|
||
.rules td{font-size:11px;color:#444;padding:8px 12px;border-bottom:1px solid #F0EEE8;vertical-align:top;line-height:1.55}
|
||
.rules tr:last-child td{border-bottom:none}
|
||
.rules td:first-child{font-size:9px;font-weight:700;color:#012851;white-space:nowrap;width:110px}
|
||
.rules td code{font-size:9px;background:#F0EFE9;padding:1px 4px;border-radius:2px;color:#555}
|
||
|
||
/* ── Status chips ── */
|
||
.st-up{display:inline-flex;align-items:center;gap:2px;padding:1px 5px;border-radius:3px;font-size:5.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;background:#D1FAE5;border:1px solid #6EE7B7;color:#065F46;flex-shrink:0}
|
||
.st-up.dk{background:rgba(209,250,229,.07);color:#6EE7B7;border-color:rgba(110,231,183,.2)}
|
||
.st-dot{width:4px;height:4px;border-radius:50%;background:#10B981}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
|
||
<div class="mh">
|
||
<h1>TopBar B1 — Responsive Spec · Light & Dark · Overflow</h1>
|
||
<p>Complete breakdown of the Refined Baseline across all five viewport widths, both themes, and all receiver counts (0–5+). Includes annotate-active states and the full responsive collapse rules.</p>
|
||
<div class="byline">Familienarchiv · 2026-03-30 · Leonie Voss, UX Lead</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
SECTION 1 — DESIGN TOKENS
|
||
══════════════════════════════════════════ -->
|
||
<div class="sh"><h2>1 · Design tokens</h2><p>All values used across this spec. The topbar uses only these tokens — no hardcoded colours in components.</p></div>
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:40px">
|
||
<!-- Light tokens -->
|
||
<div style="background:#fff;border:1px solid #E0DDD6;border-radius:6px;overflow:hidden">
|
||
<div style="background:#F4F2EC;padding:8px 14px;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#888;border-bottom:1px solid #E0DDD6">Light theme</div>
|
||
<table style="width:100%;border-collapse:collapse;font-size:11px">
|
||
<tr style="border-bottom:1px solid #F0EEE8"><td style="padding:6px 14px;color:#888;font-size:9px;font-weight:700;width:160px">bg-surface</td><td style="padding:6px 14px"><span style="display:inline-block;width:12px;height:12px;background:#fff;border:1px solid #DDD;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#FFFFFF — topbar background</td></tr>
|
||
<tr style="border-bottom:1px solid #F0EEE8"><td style="padding:6px 14px;color:#888;font-size:9px;font-weight:700">border-line</td><td style="padding:6px 14px"><span style="display:inline-block;width:12px;height:12px;background:#E4E2D8;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#E4E2D8 — bottom border, dividers</td></tr>
|
||
<tr style="border-bottom:1px solid #F0EEE8"><td style="padding:6px 14px;color:#888;font-size:9px;font-weight:700">bg-primary</td><td style="padding:6px 14px"><span style="display:inline-block;width:12px;height:12px;background:#012851;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#012851 — accent bar, primary btn, avatars</td></tr>
|
||
<tr style="border-bottom:1px solid #F0EEE8"><td style="padding:6px 14px;color:#888;font-size:9px;font-weight:700">text-primary-fg</td><td style="padding:6px 14px"><span style="display:inline-block;width:12px;height:12px;background:#A1DCD8;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#A1DCD8 — text on navy</td></tr>
|
||
<tr style="border-bottom:1px solid #F0EEE8"><td style="padding:6px 14px;color:#888;font-size:9px;font-weight:700">text-ink</td><td style="padding:6px 14px"><span style="display:inline-block;width:12px;height:12px;background:#1A1A1A;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#1A1A1A — title (mapped via bg-primary in nav)</td></tr>
|
||
<tr style="border-bottom:1px solid #F0EEE8"><td style="padding:6px 14px;color:#888;font-size:9px;font-weight:700">text-ink-3</td><td style="padding:6px 14px"><span style="display:inline-block;width:12px;height:12px;background:#AAA;border:1px solid #EEE;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#AAAAAA — date, meta</td></tr>
|
||
<tr style="border-bottom:1px solid #F0EEE8"><td style="padding:6px 14px;color:#888;font-size:9px;font-weight:700">bg-muted</td><td style="padding:6px 14px"><span style="display:inline-block;width:12px;height:12px;background:#F0EFE9;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#F0EFE9 — chip background, back btn</td></tr>
|
||
<tr><td style="padding:6px 14px;color:#888;font-size:9px;font-weight:700">Accent bar</td><td style="padding:6px 14px"><code style="font-size:9px;background:#F0EFE9;padding:1px 4px;border-radius:2px;color:#555">border-left: 3px solid var(--color-primary)</code></td></tr>
|
||
</table>
|
||
</div>
|
||
<!-- Dark tokens -->
|
||
<div style="background:#0F1923;border:1px solid #1E2D3D;border-radius:6px;overflow:hidden">
|
||
<div style="background:#0A1218;padding:8px 14px;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#4E6070;border-bottom:1px solid #1E2D3D">Dark theme</div>
|
||
<table style="width:100%;border-collapse:collapse;font-size:11px">
|
||
<tr style="border-bottom:1px solid #1A2830"><td style="padding:6px 14px;color:#4E6070;font-size:9px;font-weight:700;width:160px">bg-surface</td><td style="padding:6px 14px;color:#8AAABB"><span style="display:inline-block;width:12px;height:12px;background:#0F1923;border:1px solid #1E2D3D;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#0F1923 — topbar background</td></tr>
|
||
<tr style="border-bottom:1px solid #1A2830"><td style="padding:6px 14px;color:#4E6070;font-size:9px;font-weight:700">border-line</td><td style="padding:6px 14px;color:#8AAABB"><span style="display:inline-block;width:12px;height:12px;background:#1E2D3D;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#1E2D3D — bottom border, dividers</td></tr>
|
||
<tr style="border-bottom:1px solid #1A2830"><td style="padding:6px 14px;color:#4E6070;font-size:9px;font-weight:700">Accent bar</td><td style="padding:6px 14px;color:#8AAABB"><span style="display:inline-block;width:12px;height:12px;background:#A1DCD8;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#A1DCD8 (text-primary-fg) — teal replaces navy</td></tr>
|
||
<tr style="border-bottom:1px solid #1A2830"><td style="padding:6px 14px;color:#4E6070;font-size:9px;font-weight:700">Primary btn</td><td style="padding:6px 14px;color:#8AAABB"><span style="display:inline-block;width:12px;height:12px;background:#A1DCD8;border-radius:2px;vertical-align:middle;margin-right:6px"></span>bg #A1DCD8 · text #012851 — inverted</td></tr>
|
||
<tr style="border-bottom:1px solid #1A2830"><td style="padding:6px 14px;color:#4E6070;font-size:9px;font-weight:700">text-ink</td><td style="padding:6px 14px;color:#8AAABB"><span style="display:inline-block;width:12px;height:12px;background:#EAE8E2;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#EAE8E2 — title</td></tr>
|
||
<tr style="border-bottom:1px solid #1A2830"><td style="padding:6px 14px;color:#4E6070;font-size:9px;font-weight:700">text-ink-3</td><td style="padding:6px 14px;color:#8AAABB"><span style="display:inline-block;width:12px;height:12px;background:#3E5065;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#3E5065 — date, meta</td></tr>
|
||
<tr style="border-bottom:1px solid #1A2830"><td style="padding:6px 14px;color:#4E6070;font-size:9px;font-weight:700">Chip bg</td><td style="padding:6px 14px;color:#8AAABB"><span style="display:inline-block;width:12px;height:12px;background:#0A1218;border:1px solid #1E2D3D;border-radius:2px;vertical-align:middle;margin-right:6px"></span>#0A1218 · border #1E2D3D</td></tr>
|
||
<tr><td style="padding:6px 14px;color:#4E6070;font-size:9px;font-weight:700">Ghost btn</td><td style="padding:6px 14px;color:#8AAABB">border #1E2D3D · text #6080A0 · active: teal bg</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
SECTION 2 — OVERFLOW PATTERNS
|
||
══════════════════════════════════════════ -->
|
||
<div class="sh"><h2>2 · Receiver overflow patterns</h2><p>How the chip row adapts from 0 receivers to 5+, in both themes. The rule: always show the sender chip, always show the first receiver chip, collapse remaining into a "+N weitere" pill. 0 or 1 receiver: no overflow needed.</p></div>
|
||
|
||
<!-- overflow row light -->
|
||
<div style="background:#fff;border:1.5px solid #E0DDD6;border-radius:6px;overflow:hidden;margin-bottom:20px">
|
||
<div style="background:#F4F2EC;border-bottom:1px solid #E0DDD6;padding:7px 14px;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#012851">Light theme — all receiver counts</div>
|
||
<div style="padding:16px 14px;display:flex;flex-direction:column;gap:14px">
|
||
|
||
<!-- 0 receivers -->
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<div style="font-size:8px;font-weight:700;color:#AAA;text-transform:uppercase;letter-spacing:.5px;width:90px;flex-shrink:0">0 receivers</div>
|
||
<div style="display:flex;align-items:center;gap:5px;padding:6px 10px;background:#FAFAF8;border:1px dashed #E0DDD6;border-radius:4px">
|
||
<div class="chip"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
</div>
|
||
<div style="font-size:9.5px;color:#999;font-style:italic">Sender chip only. No arrow. Document without recipients (e.g. a diary entry or certificate).</div>
|
||
</div>
|
||
|
||
<!-- 1 receiver -->
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<div style="font-size:8px;font-weight:700;color:#AAA;text-transform:uppercase;letter-spacing:.5px;width:90px;flex-shrink:0">1 receiver</div>
|
||
<div style="display:flex;align-items:center;gap:5px;padding:6px 10px;background:#FAFAF8;border:1px dashed #E0DDD6;border-radius:4px">
|
||
<div class="chip"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
<span class="arr" style="font-size:9px">→</span>
|
||
<div class="chip"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
</div>
|
||
<div style="font-size:9.5px;color:#999;font-style:italic">Both shown in full. No overflow.</div>
|
||
</div>
|
||
|
||
<!-- 2 receivers -->
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<div style="font-size:8px;font-weight:700;color:#AAA;text-transform:uppercase;letter-spacing:.5px;width:90px;flex-shrink:0">2 receivers</div>
|
||
<div style="display:flex;align-items:center;gap:5px;padding:6px 10px;background:#FAFAF8;border:1px dashed #E0DDD6;border-radius:4px">
|
||
<div class="chip"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
<span class="arr" style="font-size:9px">→</span>
|
||
<div class="chip"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
<span style="font-size:8px;color:#DDD">·</span>
|
||
<div class="chip"><div class="av teal" style="width:14px;height:14px;font-size:5px">HR</div><div class="cn" style="font-size:6.5px">Hans Raddatz</div></div>
|
||
</div>
|
||
<div style="font-size:9.5px;color:#999;font-style:italic">Both receivers shown. No overflow. Edge case — only do this at ≥768 px. On narrow screens, collapse to 1 + "+1".</div>
|
||
</div>
|
||
|
||
<!-- 3 receivers -->
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<div style="font-size:8px;font-weight:700;color:#AAA;text-transform:uppercase;letter-spacing:.5px;width:90px;flex-shrink:0">3 receivers</div>
|
||
<div style="display:flex;align-items:center;gap:5px;padding:6px 10px;background:#FAFAF8;border:1px dashed #E0DDD6;border-radius:4px">
|
||
<div class="chip"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
<span class="arr" style="font-size:9px">→</span>
|
||
<div class="chip"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
<div class="ov" style="font-size:6.5px">+2 weitere</div>
|
||
</div>
|
||
<div style="font-size:9.5px;color:#999;font-style:italic">Sender + 1st receiver shown. Remaining 2 collapse into "+2 weitere" pill.</div>
|
||
</div>
|
||
|
||
<!-- 5+ receivers -->
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<div style="font-size:8px;font-weight:700;color:#AAA;text-transform:uppercase;letter-spacing:.5px;width:90px;flex-shrink:0">5 receivers</div>
|
||
<div style="display:flex;align-items:center;gap:5px;padding:6px 10px;background:#FAFAF8;border:1px dashed #E0DDD6;border-radius:4px">
|
||
<div class="chip"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
<span class="arr" style="font-size:9px">→</span>
|
||
<div class="chip"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
<div class="ov" style="font-size:6.5px">+4 weitere</div>
|
||
</div>
|
||
<div style="font-size:9.5px;color:#999;font-style:italic">Always sender + 1st receiver + "+N weitere" regardless of total count.</div>
|
||
</div>
|
||
|
||
<!-- No sender, 1 receiver -->
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<div style="font-size:8px;font-weight:700;color:#AAA;text-transform:uppercase;letter-spacing:.5px;width:90px;flex-shrink:0">No sender</div>
|
||
<div style="display:flex;align-items:center;gap:5px;padding:6px 10px;background:#FAFAF8;border:1px dashed #E0DDD6;border-radius:4px">
|
||
<div class="chip"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
</div>
|
||
<div style="font-size:9.5px;color:#999;font-style:italic">First available person shown. No arrow (direction unknown). Typical for photos, certificates, undated documents.</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- overflow row dark -->
|
||
<div style="background:#0F1923;border:1.5px solid #1E2D3D;border-radius:6px;overflow:hidden;margin-bottom:40px">
|
||
<div style="background:#0A1218;border-bottom:1px solid #1E2D3D;padding:7px 14px;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#A1DCD8">Dark theme — key overflow states</div>
|
||
<div style="padding:16px 14px;display:flex;flex-direction:column;gap:14px">
|
||
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<div style="font-size:8px;font-weight:700;color:#2E4050;text-transform:uppercase;letter-spacing:.5px;width:90px;flex-shrink:0">1 receiver</div>
|
||
<div style="display:flex;align-items:center;gap:5px;padding:6px 10px;background:#0A1218;border:1px dashed #1E2D3D;border-radius:4px">
|
||
<div class="chip dk"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn dk" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
<span class="arr dk" style="font-size:9px">→</span>
|
||
<div class="chip dk"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn dk" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<div style="font-size:8px;font-weight:700;color:#2E4050;text-transform:uppercase;letter-spacing:.5px;width:90px;flex-shrink:0">3 receivers</div>
|
||
<div style="display:flex;align-items:center;gap:5px;padding:6px 10px;background:#0A1218;border:1px dashed #1E2D3D;border-radius:4px">
|
||
<div class="chip dk"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn dk" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
<span class="arr dk" style="font-size:9px">→</span>
|
||
<div class="chip dk"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn dk" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
<div class="ov dk" style="font-size:6.5px">+2 weitere</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<div style="font-size:8px;font-weight:700;color:#2E4050;text-transform:uppercase;letter-spacing:.5px;width:90px;flex-shrink:0">5 receivers</div>
|
||
<div style="display:flex;align-items:center;gap:5px;padding:6px 10px;background:#0A1218;border:1px dashed #1E2D3D;border-radius:4px">
|
||
<div class="chip dk"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn dk" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
<span class="arr dk" style="font-size:9px">→</span>
|
||
<div class="chip dk"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn dk" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
<div class="ov dk" style="font-size:6.5px">+4 weitere</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
SECTION 3 — VIEWPORT BREAKDOWNS
|
||
══════════════════════════════════════════ -->
|
||
<div class="sh"><h2>3 · Viewport-by-viewport</h2><p>Each viewport shown in light + dark, with a 1-receiver (default) and 3-receiver (overflow) state side by side.</p></div>
|
||
|
||
<!-- ─── 320 px ─── -->
|
||
<div style="margin-bottom:10px;font-size:11px;font-weight:700;color:#012851;border-left:3px solid #012851;padding-left:10px">320 px · XS Mobile</div>
|
||
<div class="grid">
|
||
|
||
<!-- 320 light 1 receiver -->
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">320px</span>Light · 1 receiver</div>
|
||
<div class="chrome" style="width:200px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav"><div class="nav-logo">FA</div><div class="nav-r"><div class="nav-av">KL</div></div></div>
|
||
<!-- XS topbar: back icon + title only on row 1 / chip row hidden entirely -->
|
||
<div style="background:#fff;border-bottom:1.5px solid #E4E2D8;border-left:3px solid #012851">
|
||
<div style="display:flex;align-items:center;padding:0 9px;height:44px;gap:7px">
|
||
<div style="width:24px;height:24px;border-radius:3px;background:#F0EFE9;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||
<div style="width:5px;height:5px;border-left:1.5px solid #666;border-bottom:1.5px solid #666;transform:rotate(45deg);margin-left:1px"></div>
|
||
</div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="font-size:10px;font-weight:800;color:#012851;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,serif">Brief a. Großmutter</div>
|
||
<div style="font-size:6px;color:#AAA;margin-top:1px">K.Raddatz → E.Raddatz · 24.12.1943</div>
|
||
</div>
|
||
<div class="btn-p" style="height:24px;padding:0 7px;font-size:6px">Edit</div>
|
||
</div>
|
||
</div>
|
||
<div class="pdf" style="height:140px"><div class="paper" style="height:110px;width:80%"><div class="pl" style="width:65%"></div><div class="ps"></div><div class="ps" style="width:88%"></div><div class="ps" style="width:70%"></div><div class="ps"></div></div></div>
|
||
</div>
|
||
<div class="cap">At 320 px the chip row collapses completely. Sender and receiver are shown as plain text in the meta line below the title. Only Edit button shown.</div>
|
||
</div>
|
||
|
||
<!-- 320 dark 1 receiver -->
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">320px</span>Dark · 1 receiver</div>
|
||
<div class="chrome dark" style="width:200px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav dark"><div class="nav-logo">FA</div><div class="nav-r"><div class="nav-av">KL</div></div></div>
|
||
<div style="background:#0F1923;border-bottom:1.5px solid #1E2D3D;border-left:3px solid #A1DCD8">
|
||
<div style="display:flex;align-items:center;padding:0 9px;height:44px;gap:7px">
|
||
<div style="width:24px;height:24px;border-radius:3px;background:#0A1218;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||
<div style="width:5px;height:5px;border-left:1.5px solid #4E6070;border-bottom:1.5px solid #4E6070;transform:rotate(45deg);margin-left:1px"></div>
|
||
</div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="font-size:10px;font-weight:800;color:#EAE8E2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,serif">Brief a. Großmutter</div>
|
||
<div style="font-size:6px;color:#3E5065;margin-top:1px">K.Raddatz → E.Raddatz · 24.12.1943</div>
|
||
</div>
|
||
<div class="btn-p dk" style="height:24px;padding:0 7px;font-size:6px">Edit</div>
|
||
</div>
|
||
</div>
|
||
<div class="pdf dark" style="height:140px"><div class="paper dark" style="height:110px;width:80%"><div class="pl"></div><div class="ps"></div><div class="ps" style="width:88%"></div><div class="ps" style="width:70%"></div></div></div>
|
||
</div>
|
||
<div class="cap">Dark: teal accent bar, inverted primary button. Meta text uses ink-3 dark (#3E5065).</div>
|
||
</div>
|
||
|
||
<!-- 320 light overflow -->
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">320px</span>Light · 3+ receivers</div>
|
||
<div class="chrome" style="width:200px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav"><div class="nav-logo">FA</div><div class="nav-r"><div class="nav-av">KL</div></div></div>
|
||
<div style="background:#fff;border-bottom:1.5px solid #E4E2D8;border-left:3px solid #012851">
|
||
<div style="display:flex;align-items:center;padding:0 9px;height:44px;gap:7px">
|
||
<div style="width:24px;height:24px;border-radius:3px;background:#F0EFE9;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||
<div style="width:5px;height:5px;border-left:1.5px solid #666;border-bottom:1.5px solid #666;transform:rotate(45deg);margin-left:1px"></div>
|
||
</div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="font-size:10px;font-weight:800;color:#012851;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,serif">Rundbrief, 1951</div>
|
||
<div style="font-size:6px;color:#AAA;margin-top:1px">K.Raddatz → E.Raddatz +4 · 18.07.1951</div>
|
||
</div>
|
||
<div class="btn-p" style="height:24px;padding:0 7px;font-size:6px">Edit</div>
|
||
</div>
|
||
</div>
|
||
<div class="pdf" style="height:140px"><div class="paper" style="height:110px;width:80%"><div class="pl" style="width:65%"></div><div class="ps"></div><div class="ps" style="width:88%"></div></div></div>
|
||
</div>
|
||
<div class="cap">Overflow at 320 px: "+4" appended to the plain-text meta line (no chips rendered at this width).</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ─── 375 px ─── -->
|
||
<div style="margin:32px 0 10px;font-size:11px;font-weight:700;color:#012851;border-left:3px solid #012851;padding-left:10px">375 px · Standard Mobile</div>
|
||
<div class="grid">
|
||
|
||
<!-- 375 light 1 receiver -->
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">375px</span>Light · 1 receiver</div>
|
||
<div class="chrome" style="width:230px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav"><div class="nav-logo">FA</div><div class="nav-r"><div class="nav-av">KL</div></div></div>
|
||
<div style="background:#fff;border-bottom:1.5px solid #E4E2D8;border-left:3px solid #012851">
|
||
<div style="display:flex;align-items:center;padding:0 10px;height:50px;gap:8px">
|
||
<div style="width:26px;height:26px;border-radius:50%;border:1.5px solid #E0DDD6;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||
<div style="width:5px;height:5px;border-left:1.5px solid #666;border-bottom:1.5px solid #666;transform:rotate(45deg);margin-left:1px"></div>
|
||
</div>
|
||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:2px">
|
||
<div style="font-size:10.5px;font-weight:800;color:#012851;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,serif">Brief a. Großmutter, 1943</div>
|
||
<div style="display:flex;align-items:center;gap:3px">
|
||
<div class="chip" style="padding:1.5px 5px 1.5px 2px;gap:2px"><div class="av" style="width:12px;height:12px;font-size:4.5px">KR</div><div class="cn" style="font-size:6px">K. Raddatz</div></div>
|
||
<span class="arr" style="font-size:8px">→</span>
|
||
<div class="chip" style="padding:1.5px 5px 1.5px 2px;gap:2px"><div class="av purple" style="width:12px;height:12px;font-size:4.5px">ER</div><div class="cn" style="font-size:6px">E. Raddatz</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="btn-p" style="height:24px;padding:0 7px;font-size:6px">Edit</div>
|
||
</div>
|
||
</div>
|
||
<div class="pdf" style="height:150px"><div class="paper" style="height:118px;width:78%"><div class="pl" style="width:65%"></div><div class="ps"></div><div class="ps" style="width:88%"></div><div class="ps" style="width:70%"></div><div class="ps"></div></div></div>
|
||
</div>
|
||
<div class="cap">375 px: chips appear with abbreviated names (first initial + last name). Circle back button returns. Annotate hidden; only Edit shown.</div>
|
||
</div>
|
||
|
||
<!-- 375 dark 1 receiver -->
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">375px</span>Dark · 1 receiver</div>
|
||
<div class="chrome dark" style="width:230px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav dark"><div class="nav-logo">FA</div><div class="nav-r"><div class="nav-av">KL</div></div></div>
|
||
<div style="background:#0F1923;border-bottom:1.5px solid #1E2D3D;border-left:3px solid #A1DCD8">
|
||
<div style="display:flex;align-items:center;padding:0 10px;height:50px;gap:8px">
|
||
<div style="width:26px;height:26px;border-radius:50%;border:1.5px solid #1E2D3D;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||
<div style="width:5px;height:5px;border-left:1.5px solid #4E6070;border-bottom:1.5px solid #4E6070;transform:rotate(45deg);margin-left:1px"></div>
|
||
</div>
|
||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:2px">
|
||
<div style="font-size:10.5px;font-weight:800;color:#EAE8E2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,serif">Brief a. Großmutter, 1943</div>
|
||
<div style="display:flex;align-items:center;gap:3px">
|
||
<div class="chip dk" style="padding:1.5px 5px 1.5px 2px;gap:2px"><div class="av" style="width:12px;height:12px;font-size:4.5px">KR</div><div class="cn dk" style="font-size:6px">K. Raddatz</div></div>
|
||
<span class="arr dk" style="font-size:8px">→</span>
|
||
<div class="chip dk" style="padding:1.5px 5px 1.5px 2px;gap:2px"><div class="av purple" style="width:12px;height:12px;font-size:4.5px">ER</div><div class="cn dk" style="font-size:6px">E. Raddatz</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="btn-p dk" style="height:24px;padding:0 7px;font-size:6px">Edit</div>
|
||
</div>
|
||
</div>
|
||
<div class="pdf dark" style="height:150px"><div class="paper dark" style="height:118px;width:78%"><div class="pl"></div><div class="ps"></div><div class="ps" style="width:88%"></div><div class="ps" style="width:70%"></div></div></div>
|
||
</div>
|
||
<div class="cap">Dark 375 px: teal accent bar, dark chip bg (#0A1218 + #1E2D3D border), muted arrow colour.</div>
|
||
</div>
|
||
|
||
<!-- 375 overflow -->
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">375px</span>Light · 3+ receivers</div>
|
||
<div class="chrome" style="width:230px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav"><div class="nav-logo">FA</div><div class="nav-r"><div class="nav-av">KL</div></div></div>
|
||
<div style="background:#fff;border-bottom:1.5px solid #E4E2D8;border-left:3px solid #012851">
|
||
<div style="display:flex;align-items:center;padding:0 10px;height:50px;gap:8px">
|
||
<div style="width:26px;height:26px;border-radius:50%;border:1.5px solid #E0DDD6;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||
<div style="width:5px;height:5px;border-left:1.5px solid #666;border-bottom:1.5px solid #666;transform:rotate(45deg);margin-left:1px"></div>
|
||
</div>
|
||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:2px">
|
||
<div style="font-size:10.5px;font-weight:800;color:#012851;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,serif">Rundbrief, 1951</div>
|
||
<div style="display:flex;align-items:center;gap:3px">
|
||
<div class="chip" style="padding:1.5px 5px 1.5px 2px;gap:2px"><div class="av" style="width:12px;height:12px;font-size:4.5px">KR</div><div class="cn" style="font-size:6px">K. Raddatz</div></div>
|
||
<span class="arr" style="font-size:8px">→</span>
|
||
<div class="chip" style="padding:1.5px 5px 1.5px 2px;gap:2px"><div class="av purple" style="width:12px;height:12px;font-size:4.5px">ER</div><div class="cn" style="font-size:6px">E. Raddatz</div></div>
|
||
<div class="ov" style="font-size:6px;padding:1.5px 5px">+2</div>
|
||
</div>
|
||
</div>
|
||
<div class="btn-p" style="height:24px;padding:0 7px;font-size:6px">Edit</div>
|
||
</div>
|
||
</div>
|
||
<div class="pdf" style="height:150px"><div class="paper" style="height:118px;width:78%"><div class="pl" style="width:65%"></div><div class="ps"></div><div class="ps" style="width:88%"></div></div></div>
|
||
</div>
|
||
<div class="cap">At 375 px the overflow pill appears immediately after 1st receiver. Short form: "+2" (no "weitere" — space too tight).</div>
|
||
</div>
|
||
|
||
<!-- 375 dark overflow -->
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">375px</span>Dark · 3+ receivers</div>
|
||
<div class="chrome dark" style="width:230px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav dark"><div class="nav-logo">FA</div><div class="nav-r"><div class="nav-av">KL</div></div></div>
|
||
<div style="background:#0F1923;border-bottom:1.5px solid #1E2D3D;border-left:3px solid #A1DCD8">
|
||
<div style="display:flex;align-items:center;padding:0 10px;height:50px;gap:8px">
|
||
<div style="width:26px;height:26px;border-radius:50%;border:1.5px solid #1E2D3D;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||
<div style="width:5px;height:5px;border-left:1.5px solid #4E6070;border-bottom:1.5px solid #4E6070;transform:rotate(45deg);margin-left:1px"></div>
|
||
</div>
|
||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:2px">
|
||
<div style="font-size:10.5px;font-weight:800;color:#EAE8E2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,serif">Rundbrief, 1951</div>
|
||
<div style="display:flex;align-items:center;gap:3px">
|
||
<div class="chip dk" style="padding:1.5px 5px 1.5px 2px;gap:2px"><div class="av" style="width:12px;height:12px;font-size:4.5px">KR</div><div class="cn dk" style="font-size:6px">K. Raddatz</div></div>
|
||
<span class="arr dk" style="font-size:8px">→</span>
|
||
<div class="chip dk" style="padding:1.5px 5px 1.5px 2px;gap:2px"><div class="av purple" style="width:12px;height:12px;font-size:4.5px">ER</div><div class="cn dk" style="font-size:6px">E. Raddatz</div></div>
|
||
<div class="ov dk" style="font-size:6px;padding:1.5px 5px">+2</div>
|
||
</div>
|
||
</div>
|
||
<div class="btn-p dk" style="height:24px;padding:0 7px;font-size:6px">Edit</div>
|
||
</div>
|
||
</div>
|
||
<div class="pdf dark" style="height:150px"><div class="paper dark" style="height:118px;width:78%"><div class="pl"></div><div class="ps"></div><div class="ps" style="width:88%"></div></div></div>
|
||
</div>
|
||
<div class="cap">Dark overflow: "+2" pill uses dark bg (#0A1218) + muted border. Same pill shape as the chips.</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- ─── 768 px Tablet ─── -->
|
||
<div style="margin:32px 0 10px;font-size:11px;font-weight:700;color:#012851;border-left:3px solid #012851;padding-left:10px">768 px · Tablet</div>
|
||
<div class="grid">
|
||
|
||
<!-- 768 light default -->
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">768px</span>Light · 1 receiver</div>
|
||
<div class="chrome" style="width:420px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav"><div class="nav-logo">FAMILIENARCHIV</div><div class="nav-link">Dokumente</div><div class="nav-r"><div class="nav-av">KL</div></div></div>
|
||
<div style="background:#fff;border-bottom:1.5px solid #E4E2D8;border-left:3px solid #012851;display:flex;align-items:center;padding:0 12px;height:52px;gap:10px">
|
||
<div style="width:28px;height:28px;border-radius:50%;border:1.5px solid #E0DDD6;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||
<div style="width:6px;height:6px;border-left:1.5px solid #666;border-bottom:1.5px solid #666;transform:rotate(45deg);margin-left:2px"></div>
|
||
</div>
|
||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:3px">
|
||
<div style="display:flex;align-items:center;gap:5px">
|
||
<div style="font-size:11.5px;font-weight:800;color:#012851;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,serif">Brief an Großmutter, Weihnachten 1943</div>
|
||
<div class="st-up"><div class="st-dot"></div>Hochgeladen</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:4px">
|
||
<div style="font-size:6.5px;color:#AAA">24.12.1943</div>
|
||
<span style="font-size:8px;color:#DDD">·</span>
|
||
<div class="chip" style="padding:2px 6px 2px 3px"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
<span class="arr" style="font-size:9px">→</span>
|
||
<div class="chip" style="padding:2px 6px 2px 3px"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:4px;flex-shrink:0">
|
||
<div class="btn-g" style="display:inline-flex;align-items:center;gap:3px"><div style="width:7px;height:7px;border:1.5px solid #888;border-radius:50%"></div>Annotieren</div>
|
||
<div class="btn-p">Bearbeiten</div>
|
||
<div class="dv" style="height:16px"></div>
|
||
<div class="ico"><div class="dl" style="color:#888"></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="pdf" style="height:170px"><div class="paper" style="height:135px"><div class="pl" style="width:65%"></div><div class="ps"></div><div class="ps" style="width:88%"></div><div class="ps" style="width:72%"></div><div class="ps"></div></div></div>
|
||
</div>
|
||
<div class="cap">768 px: full chip row with full names. All three action buttons visible. Status chip shown.</div>
|
||
</div>
|
||
|
||
<!-- 768 dark default -->
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">768px</span>Dark · 1 receiver</div>
|
||
<div class="chrome dark" style="width:420px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav dark"><div class="nav-logo">FAMILIENARCHIV</div><div class="nav-r"><div class="nav-av">KL</div></div></div>
|
||
<div style="background:#0F1923;border-bottom:1.5px solid #1E2D3D;border-left:3px solid #A1DCD8;display:flex;align-items:center;padding:0 12px;height:52px;gap:10px">
|
||
<div style="width:28px;height:28px;border-radius:50%;border:1.5px solid #1E2D3D;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||
<div style="width:6px;height:6px;border-left:1.5px solid #4E6070;border-bottom:1.5px solid #4E6070;transform:rotate(45deg);margin-left:2px"></div>
|
||
</div>
|
||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:3px">
|
||
<div style="display:flex;align-items:center;gap:5px">
|
||
<div style="font-size:11.5px;font-weight:800;color:#EAE8E2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,serif">Brief an Großmutter, Weihnachten 1943</div>
|
||
<div class="st-up dk">Hochgeladen</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:4px">
|
||
<div style="font-size:6.5px;color:#3E5065">24.12.1943</div>
|
||
<span style="font-size:8px;color:#1E2D3D">·</span>
|
||
<div class="chip dk" style="padding:2px 6px 2px 3px"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn dk" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
<span class="arr dk" style="font-size:9px">→</span>
|
||
<div class="chip dk" style="padding:2px 6px 2px 3px"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn dk" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:4px;flex-shrink:0">
|
||
<div class="btn-g dk" style="display:inline-flex;align-items:center;gap:3px"><div style="width:7px;height:7px;border:1.5px solid #6080A0;border-radius:50%"></div>Annotieren</div>
|
||
<div class="btn-p dk">Bearbeiten</div>
|
||
<div class="dv dk" style="height:16px"></div>
|
||
<div class="ico dk"><div class="dl" style="color:#4E6070"></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="pdf dark" style="height:170px"><div class="paper dark" style="height:135px"><div class="pl"></div><div class="ps"></div><div class="ps" style="width:88%"></div><div class="ps" style="width:72%"></div><div class="ps"></div></div></div>
|
||
</div>
|
||
<div class="cap">Tablet dark: all elements visible, dark chip vocabulary throughout.</div>
|
||
</div>
|
||
|
||
<!-- 768 overflow light -->
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">768px</span>Light · 4 receivers</div>
|
||
<div class="chrome" style="width:420px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav"><div class="nav-logo">FAMILIENARCHIV</div><div class="nav-r"><div class="nav-av">KL</div></div></div>
|
||
<div style="background:#fff;border-bottom:1.5px solid #E4E2D8;border-left:3px solid #012851;display:flex;align-items:center;padding:0 12px;height:52px;gap:10px">
|
||
<div style="width:28px;height:28px;border-radius:50%;border:1.5px solid #E0DDD6;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||
<div style="width:6px;height:6px;border-left:1.5px solid #666;border-bottom:1.5px solid #666;transform:rotate(45deg);margin-left:2px"></div>
|
||
</div>
|
||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:3px">
|
||
<div style="display:flex;align-items:center;gap:5px">
|
||
<div style="font-size:11.5px;font-weight:800;color:#012851;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,serif">Rundbrief an die Familie, Sommer 1951</div>
|
||
<div class="st-up"><div class="st-dot"></div>Archiviert</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:4px">
|
||
<div style="font-size:6.5px;color:#AAA">18.07.1951</div>
|
||
<span style="font-size:8px;color:#DDD">·</span>
|
||
<div class="chip" style="padding:2px 6px 2px 3px"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
<span class="arr" style="font-size:9px">→</span>
|
||
<div class="chip" style="padding:2px 6px 2px 3px"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
<div class="ov" style="font-size:6.5px">+3 weitere</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:4px;flex-shrink:0">
|
||
<div class="btn-g" style="display:inline-flex;align-items:center;gap:3px"><div style="width:7px;height:7px;border:1.5px solid #888;border-radius:50%"></div>Annotieren</div>
|
||
<div class="btn-p">Bearbeiten</div>
|
||
<div class="dv" style="height:16px"></div>
|
||
<div class="ico"><div class="dl" style="color:#888"></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="pdf" style="height:170px"><div class="paper" style="height:135px"><div class="pl" style="width:65%"></div><div class="ps"></div><div class="ps" style="width:88%"></div><div class="ps" style="width:72%"></div></div></div>
|
||
</div>
|
||
<div class="cap">Tablet overflow: "+3 weitere" — full word fits comfortably. Chip row still has room for date + sender + 1st receiver + overflow pill.</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- ─── 1024 px Laptop ─── -->
|
||
<div style="margin:32px 0 10px;font-size:11px;font-weight:700;color:#012851;border-left:3px solid #012851;padding-left:10px">1024 px · Laptop</div>
|
||
<div class="grid">
|
||
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">1024px</span>Light · 1 receiver</div>
|
||
<div class="chrome" style="width:560px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav"><div class="nav-logo">FAMILIENARCHIV</div><div class="nav-link">Dokumente</div><div class="nav-link">Personen</div><div class="nav-r"><div class="nav-av">KL</div></div></div>
|
||
<div style="background:#fff;border-bottom:1.5px solid #E4E2D8;border-left:3px solid #012851;display:flex;align-items:center;padding:0 14px;height:52px;gap:10px">
|
||
<div style="width:28px;height:28px;border-radius:50%;border:1.5px solid #E0DDD6;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||
<div style="width:6px;height:6px;border-left:1.5px solid #666;border-bottom:1.5px solid #666;transform:rotate(45deg);margin-left:2px"></div>
|
||
</div>
|
||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:3px">
|
||
<div style="display:flex;align-items:center;gap:6px">
|
||
<div style="font-size:12px;font-weight:800;color:#012851;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,serif;letter-spacing:-.2px">Brief an Großmutter, Weihnachten 1943</div>
|
||
<div class="st-up"><div class="st-dot"></div>Hochgeladen</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:5px">
|
||
<div style="font-size:6.5px;color:#AAA">24.12.1943 · Hamburg</div>
|
||
<span style="font-size:8px;color:#DDD">·</span>
|
||
<div class="chip"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
<span class="arr" style="font-size:9px">→</span>
|
||
<div class="chip"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:5px;flex-shrink:0">
|
||
<div class="btn-g" style="display:inline-flex;align-items:center;gap:3px"><div style="width:7px;height:7px;border:1.5px solid #888;border-radius:50%"></div>Annotieren</div>
|
||
<div class="btn-p">Bearbeiten</div>
|
||
<div class="dv" style="height:16px"></div>
|
||
<div class="ico"><div class="dl" style="color:#888"></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="pdf" style="height:180px"><div class="paper" style="height:145px"><div class="pl" style="width:65%"></div><div class="ps"></div><div class="ps" style="width:88%"></div><div class="ps" style="width:72%"></div><div class="ps"></div><div class="ps" style="width:80%"></div></div></div>
|
||
</div>
|
||
<div class="cap">1024 px: location added to date in meta row ("24.12.1943 · Hamburg"). Full names, all buttons labelled.</div>
|
||
</div>
|
||
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">1024px</span>Dark · 1 receiver</div>
|
||
<div class="chrome dark" style="width:560px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav dark"><div class="nav-logo">FAMILIENARCHIV</div><div class="nav-link">Dokumente</div><div class="nav-r"><div class="nav-av">KL</div></div></div>
|
||
<div style="background:#0F1923;border-bottom:1.5px solid #1E2D3D;border-left:3px solid #A1DCD8;display:flex;align-items:center;padding:0 14px;height:52px;gap:10px">
|
||
<div style="width:28px;height:28px;border-radius:50%;border:1.5px solid #1E2D3D;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||
<div style="width:6px;height:6px;border-left:1.5px solid #4E6070;border-bottom:1.5px solid #4E6070;transform:rotate(45deg);margin-left:2px"></div>
|
||
</div>
|
||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:3px">
|
||
<div style="display:flex;align-items:center;gap:6px">
|
||
<div style="font-size:12px;font-weight:800;color:#EAE8E2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,serif">Brief an Großmutter, Weihnachten 1943</div>
|
||
<div class="st-up dk">Hochgeladen</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:5px">
|
||
<div style="font-size:6.5px;color:#3E5065">24.12.1943 · Hamburg</div>
|
||
<span style="font-size:8px;color:#1E2D3D">·</span>
|
||
<div class="chip dk"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn dk" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
<span class="arr dk" style="font-size:9px">→</span>
|
||
<div class="chip dk"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn dk" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:5px;flex-shrink:0">
|
||
<div class="btn-g dk" style="display:inline-flex;align-items:center;gap:3px"><div style="width:7px;height:7px;border:1.5px solid #6080A0;border-radius:50%"></div>Annotieren</div>
|
||
<div class="btn-p dk">Bearbeiten</div>
|
||
<div class="dv dk" style="height:16px"></div>
|
||
<div class="ico dk"><div class="dl" style="color:#4E6070"></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="pdf dark" style="height:180px"><div class="paper dark" style="height:145px"><div class="pl"></div><div class="ps"></div><div class="ps" style="width:88%"></div><div class="ps" style="width:72%"></div><div class="ps"></div></div></div>
|
||
</div>
|
||
<div class="cap">1024 dark: full layout, teal accent bar and inverted primary button.</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<!-- 1024 overflow light -->
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">1024px</span>Light · 5 receivers</div>
|
||
<div class="chrome" style="width:560px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav"><div class="nav-logo">FAMILIENARCHIV</div><div class="nav-link">Dokumente</div><div class="nav-r"><div class="nav-av">KL</div></div></div>
|
||
<div style="background:#fff;border-bottom:1.5px solid #E4E2D8;border-left:3px solid #012851;display:flex;align-items:center;padding:0 14px;height:52px;gap:10px">
|
||
<div style="width:28px;height:28px;border-radius:50%;border:1.5px solid #E0DDD6;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||
<div style="width:6px;height:6px;border-left:1.5px solid #666;border-bottom:1.5px solid #666;transform:rotate(45deg);margin-left:2px"></div>
|
||
</div>
|
||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:3px">
|
||
<div style="display:flex;align-items:center;gap:6px">
|
||
<div style="font-size:12px;font-weight:800;color:#012851;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,serif">Rundbrief an die Familie, Sommer 1951</div>
|
||
<div class="st-up"><div class="st-dot"></div>Archiviert</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:5px">
|
||
<div style="font-size:6.5px;color:#AAA">18.07.1951 · Berlin</div>
|
||
<span style="font-size:8px;color:#DDD">·</span>
|
||
<div class="chip"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
<span class="arr" style="font-size:9px">→</span>
|
||
<div class="chip"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
<div class="ov" style="font-size:6.5px">+4 weitere</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:5px;flex-shrink:0">
|
||
<div class="btn-g" style="display:inline-flex;align-items:center;gap:3px"><div style="width:7px;height:7px;border:1.5px solid #888;border-radius:50%"></div>Annotieren</div>
|
||
<div class="btn-p">Bearbeiten</div>
|
||
<div class="dv" style="height:16px"></div>
|
||
<div class="ico"><div class="dl" style="color:#888"></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="pdf" style="height:175px"><div class="paper" style="height:140px"><div class="pl" style="width:65%"></div><div class="ps"></div><div class="ps" style="width:88%"></div><div class="ps" style="width:72%"></div><div class="ps"></div></div></div>
|
||
</div>
|
||
<div class="cap">5 receivers at 1024 px: the chip row has room for date + location + sender + 1st receiver + "+4 weitere". No truncation needed.</div>
|
||
</div>
|
||
|
||
<!-- 1024 annotate light -->
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">1024px</span>Light · Annotate active</div>
|
||
<div class="chrome" style="width:480px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav"><div class="nav-logo">FAMILIENARCHIV</div><div class="nav-r"><div class="nav-av">KL</div></div></div>
|
||
<div style="background:#fff;border-bottom:1.5px solid #E4E2D8;border-left:3px solid #012851">
|
||
<div style="display:flex;align-items:center;padding:0 14px;height:52px;gap:10px">
|
||
<div style="width:28px;height:28px;border-radius:50%;border:1.5px solid #E0DDD6;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||
<div style="width:6px;height:6px;border-left:1.5px solid #666;border-bottom:1.5px solid #666;transform:rotate(45deg);margin-left:2px"></div>
|
||
</div>
|
||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:3px">
|
||
<div style="font-size:12px;font-weight:800;color:#012851;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,serif">Brief an Großmutter, Weihnachten 1943</div>
|
||
<div style="display:flex;align-items:center;gap:5px">
|
||
<div class="chip"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
<span class="arr" style="font-size:9px">→</span>
|
||
<div class="chip"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:5px;flex-shrink:0">
|
||
<div class="btn-g on" style="display:inline-flex;align-items:center;gap:3px">
|
||
<div style="width:7px;height:7px;border:1.5px solid #A1DCD8;border-radius:50%;background:rgba(161,220,216,.2)"></div>Beenden
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hint"><div class="hint-lbl">Annotierungsmodus aktiv</div><div class="hint-txt">Klicken Sie auf eine Textstelle im Dokument, um eine Anmerkung hinzuzufügen.</div></div>
|
||
</div>
|
||
<div class="pdf" style="height:168px;background:#C8C4BC"><div class="paper" style="height:133px;outline:2px solid rgba(1,40,81,.18)"><div class="pl" style="width:65%"></div><div class="ps"></div><div class="ps" style="width:88%"></div><div class="ps" style="width:72%"></div></div></div>
|
||
</div>
|
||
<div class="cap">Annotate active: Edit + Download removed. Ghost button fills navy. 18 px hint strip. PDF area gets a subtle navy outline to indicate click-target mode.</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ─── 1440 px Desktop ─── -->
|
||
<div style="margin:32px 0 10px;font-size:11px;font-weight:700;color:#012851;border-left:3px solid #012851;padding-left:10px">1440 px · Desktop</div>
|
||
<div class="grid">
|
||
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">1440px</span>Light · 1 receiver</div>
|
||
<div class="chrome" style="width:660px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav"><div class="nav-logo">FAMILIENARCHIV</div><div class="nav-link">Dokumente</div><div class="nav-link">Personen</div><div class="nav-link">Konversationen</div><div class="nav-r"><div class="nav-av">KL</div></div></div>
|
||
<div style="background:#fff;border-bottom:1.5px solid #E4E2D8;border-left:3px solid #012851;display:flex;align-items:center;padding:0 16px;height:52px;gap:12px">
|
||
<div style="width:28px;height:28px;border-radius:50%;border:1.5px solid #E0DDD6;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||
<div style="width:6px;height:6px;border-left:1.5px solid #666;border-bottom:1.5px solid #666;transform:rotate(45deg);margin-left:2px"></div>
|
||
</div>
|
||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:3px">
|
||
<div style="display:flex;align-items:center;gap:7px">
|
||
<div style="font-size:12.5px;font-weight:800;color:#012851;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,serif;letter-spacing:-.2px">Brief an Großmutter, Weihnachten 1943</div>
|
||
<div class="st-up"><div class="st-dot"></div>Hochgeladen</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:5px">
|
||
<div style="font-size:6.5px;color:#AAA">24. Dezember 1943 · Hamburg</div>
|
||
<span style="font-size:8px;color:#DDD">·</span>
|
||
<div class="chip"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
<span class="arr" style="font-size:9px">→</span>
|
||
<div class="chip"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:5px;flex-shrink:0">
|
||
<div class="btn-g" style="display:inline-flex;align-items:center;gap:3px"><div style="width:7px;height:7px;border:1.5px solid #888;border-radius:50%"></div>Annotieren</div>
|
||
<div class="btn-p">Bearbeiten</div>
|
||
<div class="dv" style="height:16px"></div>
|
||
<div class="ico"><div class="dl" style="color:#888"></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="pdf" style="height:190px"><div class="paper" style="height:155px"><div class="pl" style="width:65%"></div><div class="ps"></div><div class="ps" style="width:88%"></div><div class="ps" style="width:72%"></div><div class="ps"></div><div class="ps" style="width:80%"></div><div class="ps" style="width:60%"></div></div></div>
|
||
</div>
|
||
<div class="cap">1440 px: date written out in full ("24. Dezember 1943"). More breathing room in the chip row. All buttons with labels.</div>
|
||
</div>
|
||
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">1440px</span>Dark · 1 receiver</div>
|
||
<div class="chrome dark" style="width:660px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav dark"><div class="nav-logo">FAMILIENARCHIV</div><div class="nav-link">Dokumente</div><div class="nav-link">Personen</div><div class="nav-r"><div class="nav-av">KL</div></div></div>
|
||
<div style="background:#0F1923;border-bottom:1.5px solid #1E2D3D;border-left:3px solid #A1DCD8;display:flex;align-items:center;padding:0 16px;height:52px;gap:12px">
|
||
<div style="width:28px;height:28px;border-radius:50%;border:1.5px solid #1E2D3D;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||
<div style="width:6px;height:6px;border-left:1.5px solid #4E6070;border-bottom:1.5px solid #4E6070;transform:rotate(45deg);margin-left:2px"></div>
|
||
</div>
|
||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:3px">
|
||
<div style="display:flex;align-items:center;gap:7px">
|
||
<div style="font-size:12.5px;font-weight:800;color:#EAE8E2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,serif">Brief an Großmutter, Weihnachten 1943</div>
|
||
<div class="st-up dk">Hochgeladen</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:5px">
|
||
<div style="font-size:6.5px;color:#3E5065">24. Dezember 1943 · Hamburg</div>
|
||
<span style="font-size:8px;color:#1E2D3D">·</span>
|
||
<div class="chip dk"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn dk" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
<span class="arr dk" style="font-size:9px">→</span>
|
||
<div class="chip dk"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn dk" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:5px;flex-shrink:0">
|
||
<div class="btn-g dk" style="display:inline-flex;align-items:center;gap:3px"><div style="width:7px;height:7px;border:1.5px solid #6080A0;border-radius:50%"></div>Annotieren</div>
|
||
<div class="btn-p dk">Bearbeiten</div>
|
||
<div class="dv dk" style="height:16px"></div>
|
||
<div class="ico dk"><div class="dl" style="color:#4E6070"></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="pdf dark" style="height:190px"><div class="paper dark" style="height:155px"><div class="pl"></div><div class="ps"></div><div class="ps" style="width:88%"></div><div class="ps" style="width:72%"></div><div class="ps"></div><div class="ps" style="width:80%"></div></div></div>
|
||
</div>
|
||
<div class="cap">Desktop dark: full date text, teal border, all three actions visible.</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<!-- 1440 overflow light -->
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">1440px</span>Light · 5 receivers</div>
|
||
<div class="chrome" style="width:660px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav"><div class="nav-logo">FAMILIENARCHIV</div><div class="nav-link">Dokumente</div><div class="nav-r"><div class="nav-av">KL</div></div></div>
|
||
<div style="background:#fff;border-bottom:1.5px solid #E4E2D8;border-left:3px solid #012851;display:flex;align-items:center;padding:0 16px;height:52px;gap:12px">
|
||
<div style="width:28px;height:28px;border-radius:50%;border:1.5px solid #E0DDD6;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||
<div style="width:6px;height:6px;border-left:1.5px solid #666;border-bottom:1.5px solid #666;transform:rotate(45deg);margin-left:2px"></div>
|
||
</div>
|
||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:3px">
|
||
<div style="display:flex;align-items:center;gap:7px">
|
||
<div style="font-size:12.5px;font-weight:800;color:#012851;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,serif">Rundbrief an die Familie, Sommer 1951</div>
|
||
<div class="st-up"><div class="st-dot"></div>Archiviert</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:5px">
|
||
<div style="font-size:6.5px;color:#AAA">18. Juli 1951 · Berlin</div>
|
||
<span style="font-size:8px;color:#DDD">·</span>
|
||
<div class="chip"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
<span class="arr" style="font-size:9px">→</span>
|
||
<div class="chip"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
<div class="ov" style="font-size:6.5px">+4 weitere</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:5px;flex-shrink:0">
|
||
<div class="btn-g" style="display:inline-flex;align-items:center;gap:3px"><div style="width:7px;height:7px;border:1.5px solid #888;border-radius:50%"></div>Annotieren</div>
|
||
<div class="btn-p">Bearbeiten</div>
|
||
<div class="dv" style="height:16px"></div>
|
||
<div class="ico"><div class="dl" style="color:#888"></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="pdf" style="height:185px"><div class="paper" style="height:150px"><div class="pl" style="width:65%"></div><div class="ps"></div><div class="ps" style="width:88%"></div><div class="ps" style="width:72%"></div><div class="ps"></div></div></div>
|
||
</div>
|
||
<div class="cap">Desktop overflow: full date · sender · 1st receiver · "+4 weitere". The overflow pill never needs to grow beyond 7 chars ("+99 mehr" at most).</div>
|
||
</div>
|
||
|
||
<!-- 1440 annotate dark -->
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">1440px</span>Dark · Annotate active</div>
|
||
<div class="chrome dark" style="width:520px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav dark"><div class="nav-logo">FAMILIENARCHIV</div><div class="nav-r"><div class="nav-av">KL</div></div></div>
|
||
<div style="background:#0F1923;border-bottom:1.5px solid #1E2D3D;border-left:3px solid #A1DCD8">
|
||
<div style="display:flex;align-items:center;padding:0 16px;height:52px;gap:12px">
|
||
<div style="width:28px;height:28px;border-radius:50%;border:1.5px solid #1E2D3D;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||
<div style="width:6px;height:6px;border-left:1.5px solid #4E6070;border-bottom:1.5px solid #4E6070;transform:rotate(45deg);margin-left:2px"></div>
|
||
</div>
|
||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:3px">
|
||
<div style="font-size:12.5px;font-weight:800;color:#EAE8E2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,serif">Brief an Großmutter, Weihnachten 1943</div>
|
||
<div style="display:flex;align-items:center;gap:5px">
|
||
<div class="chip dk"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn dk" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
<span class="arr dk" style="font-size:9px">→</span>
|
||
<div class="chip dk"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn dk" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="btn-g on dk" style="display:inline-flex;align-items:center;gap:3px">
|
||
<div style="width:7px;height:7px;border:1.5px solid #012851;border-radius:50%;background:rgba(1,40,81,.3)"></div>Beenden
|
||
</div>
|
||
</div>
|
||
<div class="hint dk"><div class="hint-lbl dk">Annotierungsmodus aktiv</div><div class="hint-txt">Klicken Sie auf eine Textstelle im Dokument.</div></div>
|
||
</div>
|
||
<div class="pdf dark" style="height:172px;background:#060F18"><div class="paper dark" style="height:138px;outline:2px solid rgba(161,220,216,.15)"><div class="pl"></div><div class="ps"></div><div class="ps" style="width:88%"></div><div class="ps" style="width:72%"></div></div></div>
|
||
</div>
|
||
<div class="cap">Dark annotate: teal ghost button fills teal bg + navy text. Hint strip uses teal text on very dark bg. PDF outline uses 15% teal instead of navy.</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<hr>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
SECTION 4 — RESPONSIVE RULES TABLE
|
||
══════════════════════════════════════════ -->
|
||
<div class="sh"><h2>4 · Responsive behaviour rules</h2><p>Exact breakpoint decisions for every element. Implement these as Tailwind responsive classes.</p></div>
|
||
|
||
<div class="rules">
|
||
<table>
|
||
<thead><tr><th>Element</th><th>≤ 320 px</th><th>375–767 px</th><th>768–1023 px</th><th>≥ 1024 px</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Topbar height</td><td>44 px</td><td>50 px</td><td>52 px</td><td>52 px</td></tr>
|
||
<tr><td>Back button</td><td>Square icon (24×24 px, <code>border-radius: 3px</code>)</td><td>Circle (26×26, <code>border-radius: 50%</code>)</td><td>Circle (28×28)</td><td>Circle (28×28)</td></tr>
|
||
<tr><td>Title font</td><td>10 px / 800 / Georgia</td><td>10.5 px / 800</td><td>11.5 px / 800</td><td>12–12.5 px / 800</td></tr>
|
||
<tr><td>Meta row (chips)</td><td>Hidden — replaced by plain-text meta line below title</td><td>Shown — abbreviated names (first initial + last name)</td><td>Shown — full names</td><td>Shown — full names + location</td></tr>
|
||
<tr><td>Date format</td><td>Short: <code>24.12.1943</code> inline in meta text</td><td>Short: <code>24.12.1943</code></td><td>Short: <code>24.12.1943</code></td><td>Long: <code>24. Dezember 1943</code></td></tr>
|
||
<tr><td>Location in date</td><td>Hidden</td><td>Hidden</td><td>Shown if present</td><td>Shown if present</td></tr>
|
||
<tr><td>Status chip</td><td>Hidden</td><td>Hidden</td><td>Shown inline with title</td><td>Shown inline with title</td></tr>
|
||
<tr><td>Overflow threshold</td><td>N/A — chips hidden; overflow shown as "+N" in plain text</td><td>After 1st receiver → "+N" (no "weitere")</td><td>After 1st receiver → "+N weitere"</td><td>After 1st receiver → "+N weitere"</td></tr>
|
||
<tr><td>Annotate button</td><td>Hidden</td><td>Hidden</td><td>Shown with text label</td><td>Shown with text label</td></tr>
|
||
<tr><td>Edit button</td><td>Shown — text "Edit"</td><td>Shown — text "Edit"</td><td>Shown — text "Bearbeiten"</td><td>Shown — text "Bearbeiten"</td></tr>
|
||
<tr><td>Download button</td><td>Hidden</td><td>Hidden</td><td>Shown as icon</td><td>Shown as icon</td></tr>
|
||
<tr><td>Divider between actions</td><td>Hidden</td><td>Hidden</td><td>Shown</td><td>Shown</td></tr>
|
||
<tr><td>Accent bar</td><td><code>border-left: 3px</code> — always present</td><td><code>border-left: 3px</code></td><td><code>border-left: 3px</code></td><td><code>border-left: 3px</code></td></tr>
|
||
<tr><td>Hint strip (annotate)</td><td>Hidden — no annotation mode on mobile</td><td>Hidden</td><td>18 px strip below main row</td><td>18 px strip</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
SECTION 5 — OVERFLOW TOOLTIP
|
||
══════════════════════════════════════════ -->
|
||
<div class="sh"><h2>5 · Overflow tooltip — expanded state</h2><p>Clicking or tapping the "+N weitere" pill opens a compact floating panel listing all remaining recipients. Shown at desktop size, light and dark.</p></div>
|
||
|
||
<div class="grid">
|
||
<!-- tooltip light -->
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">1024px</span>Light · tooltip open</div>
|
||
<div class="chrome" style="width:560px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav"><div class="nav-logo">FAMILIENARCHIV</div><div class="nav-r"><div class="nav-av">KL</div></div></div>
|
||
<div style="background:#fff;border-bottom:1.5px solid #E4E2D8;border-left:3px solid #012851;display:flex;align-items:center;padding:0 14px;height:52px;gap:10px;position:relative">
|
||
<div style="width:28px;height:28px;border-radius:50%;border:1.5px solid #E0DDD6;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||
<div style="width:6px;height:6px;border-left:1.5px solid #666;border-bottom:1.5px solid #666;transform:rotate(45deg);margin-left:2px"></div>
|
||
</div>
|
||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:3px">
|
||
<div style="display:flex;align-items:center;gap:6px">
|
||
<div style="font-size:12px;font-weight:800;color:#012851;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,serif">Rundbrief an die Familie, Sommer 1951</div>
|
||
<div class="st-up"><div class="st-dot"></div>Archiviert</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:5px;position:relative">
|
||
<div style="font-size:6.5px;color:#AAA">18.07.1951</div>
|
||
<span style="font-size:8px;color:#DDD">·</span>
|
||
<div class="chip"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
<span class="arr" style="font-size:9px">→</span>
|
||
<div class="chip"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
<!-- Active overflow pill -->
|
||
<div style="display:inline-flex;align-items:center;padding:2px 6px;background:#012851;border:1px solid #012851;border-radius:10px;font-size:6.5px;font-weight:700;color:#A1DCD8;position:relative">
|
||
+3 weitere
|
||
<!-- Tooltip panel -->
|
||
<div style="position:absolute;top:18px;left:0;background:#fff;border:1.5px solid #E0DDD6;border-radius:5px;padding:10px 12px;min-width:160px;z-index:10;box-shadow:0 4px 16px rgba(0,0,0,.12)">
|
||
<div style="font-size:7px;font-weight:800;color:#AAA;text-transform:uppercase;letter-spacing:.6px;margin-bottom:7px;border-bottom:1px solid #F0EEE8;padding-bottom:5px">Weitere Empfänger</div>
|
||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:5px">
|
||
<div class="av teal" style="width:16px;height:16px;font-size:5.5px">HR</div>
|
||
<div style="font-size:9.5px;color:#333;font-weight:500">Hans Raddatz</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:5px">
|
||
<div class="av moss" style="width:16px;height:16px;font-size:5.5px">MR</div>
|
||
<div style="font-size:9.5px;color:#333;font-weight:500">Maria Raddatz</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:6px">
|
||
<div class="av rust" style="width:16px;height:16px;font-size:5.5px">GR</div>
|
||
<div style="font-size:9.5px;color:#333;font-weight:500">Gerhard Raddatz</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:5px;flex-shrink:0">
|
||
<div class="btn-g" style="display:inline-flex;align-items:center;gap:3px"><div style="width:7px;height:7px;border:1.5px solid #888;border-radius:50%"></div>Annotieren</div>
|
||
<div class="btn-p">Bearbeiten</div>
|
||
</div>
|
||
</div>
|
||
<div class="pdf" style="height:175px"><div class="paper" style="height:140px"><div class="pl" style="width:65%"></div><div class="ps"></div><div class="ps" style="width:88%"></div><div class="ps" style="width:72%"></div></div></div>
|
||
</div>
|
||
<div class="cap">Overflow pill fills navy on click/focus. White tooltip panel drops below with a heading "Weitere Empfänger" + each person as avatar + full name. Clicking a name navigates to their person profile.</div>
|
||
</div>
|
||
|
||
<!-- tooltip dark -->
|
||
<div class="col">
|
||
<div class="lbl"><span class="tag">1024px</span>Dark · tooltip open</div>
|
||
<div class="chrome dark" style="width:500px">
|
||
<div class="bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="url"></div></div>
|
||
<div class="nav dark"><div class="nav-logo">FAMILIENARCHIV</div><div class="nav-r"><div class="nav-av">KL</div></div></div>
|
||
<div style="background:#0F1923;border-bottom:1.5px solid #1E2D3D;border-left:3px solid #A1DCD8;display:flex;align-items:center;padding:0 14px;height:52px;gap:10px;position:relative">
|
||
<div style="width:28px;height:28px;border-radius:50%;border:1.5px solid #1E2D3D;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||
<div style="width:6px;height:6px;border-left:1.5px solid #4E6070;border-bottom:1.5px solid #4E6070;transform:rotate(45deg);margin-left:2px"></div>
|
||
</div>
|
||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:3px">
|
||
<div style="display:flex;align-items:center;gap:6px">
|
||
<div style="font-size:12px;font-weight:800;color:#EAE8E2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,serif">Rundbrief an die Familie, Sommer 1951</div>
|
||
<div class="st-up dk">Archiviert</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:5px;position:relative">
|
||
<div style="font-size:6.5px;color:#3E5065">18.07.1951</div>
|
||
<div class="chip dk"><div class="av" style="width:14px;height:14px;font-size:5px">KR</div><div class="cn dk" style="font-size:6.5px">Karl Raddatz</div></div>
|
||
<span class="arr dk" style="font-size:9px">→</span>
|
||
<div class="chip dk"><div class="av purple" style="width:14px;height:14px;font-size:5px">ER</div><div class="cn dk" style="font-size:6.5px">Elfriede Raddatz</div></div>
|
||
<!-- Active overflow pill dark -->
|
||
<div style="display:inline-flex;align-items:center;padding:2px 6px;background:#A1DCD8;border:1px solid #A1DCD8;border-radius:10px;font-size:6.5px;font-weight:700;color:#012851;position:relative">
|
||
+3 weitere
|
||
<div style="position:absolute;top:18px;left:0;background:#0F1923;border:1.5px solid #1E2D3D;border-radius:5px;padding:10px 12px;min-width:155px;z-index:10;box-shadow:0 4px 16px rgba(0,0,0,.4)">
|
||
<div style="font-size:7px;font-weight:800;color:#3E5065;text-transform:uppercase;letter-spacing:.6px;margin-bottom:7px;border-bottom:1px solid #1E2D3D;padding-bottom:5px">Weitere Empfänger</div>
|
||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:5px">
|
||
<div class="av teal" style="width:16px;height:16px;font-size:5.5px">HR</div>
|
||
<div style="font-size:9.5px;color:#8AAABB;font-weight:500">Hans Raddatz</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:5px">
|
||
<div class="av moss" style="width:16px;height:16px;font-size:5.5px">MR</div>
|
||
<div style="font-size:9.5px;color:#8AAABB;font-weight:500">Maria Raddatz</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:6px">
|
||
<div class="av rust" style="width:16px;height:16px;font-size:5.5px">GR</div>
|
||
<div style="font-size:9.5px;color:#8AAABB;font-weight:500">Gerhard Raddatz</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:5px;flex-shrink:0">
|
||
<div class="btn-g dk">Annotieren</div>
|
||
<div class="btn-p dk">Bearbeiten</div>
|
||
</div>
|
||
</div>
|
||
<div class="pdf dark" style="height:170px"><div class="paper dark" style="height:135px"><div class="pl"></div><div class="ps"></div><div class="ps" style="width:88%"></div><div class="ps" style="width:72%"></div></div></div>
|
||
</div>
|
||
<div class="cap">Dark tooltip: dark bg (#0F1923) + dark border, heading uses ink-3 dark, names use ink-2 dark (#8AAABB). Pill inverts to teal bg + navy text when active.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<!-- IMPLEMENTATION NOTES -->
|
||
<div class="sh"><h2>6 · Implementation notes</h2></div>
|
||
<div class="rules">
|
||
<table>
|
||
<tbody>
|
||
<tr><td>Chip overflow logic</td><td>Compute in Svelte: <code>$derived</code> — if <code>receivers.length > 1</code>, show <code>receivers[0]</code> + overflow pill with count <code>receivers.length - 1</code>. At ≥768 px only, show both receivers if count = 2 (no overflow needed for exactly 2).</td></tr>
|
||
<tr><td>Overflow tooltip</td><td>Use a Svelte <code>$state(false)</code> toggle + <code>onclick</code> on the pill. Render the tooltip as an absolutely positioned <code><div></code> inside the chip row container (overflow: visible on the row). Close on outside click via <code>onclickoutside</code>.</td></tr>
|
||
<tr><td>Tooltip accessibility</td><td>Pill: <code>role="button" aria-expanded={open} aria-label="{count} weitere Empfänger"</code>. Tooltip: <code>role="list"</code>. Each name: <code>role="listitem"</code>. Close on Escape via <code>onkeydown</code>.</td></tr>
|
||
<tr><td>Back button</td><td>Always an <code><a href="/documents"></code>, never a <code><button></code>. <code>aria-label="Zurück zur Dokumentenliste"</code>. Shape changes via CSS class: <code>rounded-sm</code> at <375 px, <code>rounded-full</code> at ≥375 px.</td></tr>
|
||
<tr><td>Dark mode accent bar</td><td><code>border-left: 3px solid var(--color-primary)</code> in light → <code>var(--color-primary-fg)</code> in dark. The component should not hardcode a colour — use the CSS custom property so it follows the theme automatically.</td></tr>
|
||
<tr><td>Annotate hint strip</td><td>Only mount the strip DOM element when <code>annotateMode === true</code> (Svelte <code>{#if}</code>). Don't use CSS height animation — avoids layout shift with the PDF viewer below. Hidden entirely on <768 px (annotation not available on touch).</td></tr>
|
||
<tr><td>Touch targets</td><td>Back (circle, 28 px rendered) → extend clickable area with <code>padding: 8px</code> (44 px total ✓). Overflow pill (≈55 px wide) → already ≥44 px ✓. Edit button (≥60 px wide) ✓.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</div><!-- /page -->
|
||
</body>
|
||
</html>
|