f5438c4c36
Brainstorming artifact: 5 HTML mockups comparing approaches to fill the sparse right-hand space on /briefwechsel rows (reported by users as "feels empty"): 1. Rich Rows — dense metadata, no images 2. Thumbnail Rows — PDF preview on the left 3. Master-Detail Split — list + persistent preview panel 4. Gallery Cards — grid of letter cards, album style 5. Person Dashboard — insights live on /persons/[id], not here Picked: #2 (Thumbnail Rows) + #5 (Person Dashboard), followed up by final specs in separate commit. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
392 lines
22 KiB
HTML
392 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Spec 2 — Thumbnail Rows · Briefwechsel</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="_shared.css">
|
||
<style>
|
||
/* Spec 2 v2 — bigger thumbnails, postcard support, bilateral distribution bar */
|
||
.rlist{background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden}
|
||
|
||
.row{display:grid;grid-template-columns:104px 1fr auto;column-gap:20px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line-2);border-left:3px solid transparent;cursor:pointer;transition:background .12s,box-shadow .12s}
|
||
.row:hover{background:var(--muted)}
|
||
.row:hover .row-thumb .thumb{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.1),inset 0 0 0 1px #fff}
|
||
.row:last-child{border-bottom:0}
|
||
.row.out{border-left-color:var(--primary)}
|
||
.row.in{border-left-color:var(--accent)}
|
||
|
||
/* Thumbnail wrapper — fixed 104×104 cell, thumb centered */
|
||
.row-thumb{width:104px;height:120px;display:flex;align-items:center;justify-content:center;position:relative}
|
||
.thumb{transition:transform .12s,box-shadow .12s;box-shadow:0 1px 3px rgba(0,0,0,.08),inset 0 0 0 1px #fff}
|
||
.thumb.portrait{width:82px;height:106px}
|
||
.thumb.landscape{width:104px;height:72px}
|
||
.thumb.postcard{width:104px;height:66px}
|
||
.thumb-badge{position:absolute;top:2px;right:0;background:var(--brand-navy);color:#fff;font-size:9px;font-weight:800;padding:2px 6px;border-radius:10px;box-shadow:0 0 0 2px #fff}
|
||
|
||
/* Subtle paper variations for natural feel */
|
||
.thumb.paper-1{background:linear-gradient(180deg,#fdfcf7 0%,#f4efdf 100%)}
|
||
.thumb.paper-2{background:linear-gradient(180deg,#fefdf8 0%,#eee8d3 100%)}
|
||
.thumb.paper-3{background:linear-gradient(180deg,#fbf8ed 0%,#efe7cb 100%)}
|
||
.thumb.paper-4{background:linear-gradient(180deg,#fdfcf5 0%,#f0e9d5 100%)}
|
||
|
||
/* Kurrent-style handwriting — denser, angled */
|
||
.thumb.kurrent .thumb-lines{padding:14% 9%;gap:3.5px}
|
||
.thumb.kurrent .thumb-lines i{height:1.3px;background:rgba(24,40,70,.45);transform:rotate(-.5deg)}
|
||
.thumb.kurrent .thumb-lines i:nth-child(3n){width:65%}
|
||
.thumb.kurrent .thumb-lines i:nth-child(4n){width:92%}
|
||
.thumb.kurrent .thumb-lines i:nth-child(5n){width:48%;transform:rotate(.4deg)}
|
||
|
||
/* Typewriter — regular, crisp */
|
||
.thumb.typed .thumb-lines{padding:16% 12%;gap:2.5px}
|
||
.thumb.typed .thumb-lines i{height:1px;background:rgba(40,40,40,.45)}
|
||
.thumb.typed .thumb-lines i:nth-child(odd){width:93%}
|
||
.thumb.typed .thumb-lines i:nth-child(even){width:88%}
|
||
.thumb.typed .thumb-lines i:nth-child(7n){width:45%}
|
||
|
||
/* Postcard — stamp corner + postmark + short address lines */
|
||
.thumb.postcard .thumb-lines{padding:10% 10% 14% 10%;gap:4px}
|
||
.thumb.postcard .thumb-lines i{height:1.1px;background:rgba(24,40,70,.45)}
|
||
.thumb.postcard .thumb-lines i:nth-child(1){width:60%}
|
||
.thumb.postcard .thumb-lines i:nth-child(2){width:45%}
|
||
.thumb.postcard .thumb-lines i:nth-child(3){width:70%}
|
||
.thumb.postcard .thumb-lines i:nth-child(4){width:40%}
|
||
.thumb.postcard::after{content:'';position:absolute;top:6px;right:6px;width:16px;height:18px;background:linear-gradient(135deg,#b6c9d3,#8ba9b6);border:1px dashed rgba(0,0,0,.15);box-shadow:0 0 0 1px #fff}
|
||
.thumb.postcard::before{content:'';position:absolute;top:10px;right:26px;width:14px;height:14px;border:1.5px solid rgba(150,30,30,.4);border-radius:50%;background:radial-gradient(circle,rgba(150,30,30,.1) 40%,transparent 60%)}
|
||
|
||
/* Letter heading (typed with date/address at top) */
|
||
.thumb.typed::before{content:'';position:absolute;top:10%;left:12%;right:12%;height:2px;background:transparent;border-bottom:1.5px solid rgba(40,40,40,.35)}
|
||
|
||
.row-body{min-width:0;display:flex;flex-direction:column;gap:4px}
|
||
.row-title{font-family:'Merriweather',serif;font-size:16px;font-weight:700;color:var(--ink);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.row-summary{font-family:'Merriweather',serif;font-size:14px;color:#444;line-height:1.55;font-style:italic;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
|
||
.row-summary::before{content:'„';color:var(--brand-mint);font-size:22px;font-weight:700;line-height:0;position:relative;top:6px;margin-right:2px}
|
||
.row-summary::after{content:'”';color:var(--brand-mint);font-size:22px;font-weight:700;line-height:0;position:relative;top:6px;margin-left:2px}
|
||
.row-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--ink-3);align-items:center;margin-top:2px}
|
||
.row-meta .sep{color:#ccc}
|
||
.row-meta .dir-ch{color:var(--primary);font-weight:800;font-size:13px}
|
||
.row-meta .dir-ch.in{color:var(--accent)}
|
||
.row-meta .kind-chip{display:inline-flex;align-items:center;gap:3px;background:#F4F1EA;color:#666;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;letter-spacing:.3px;text-transform:uppercase}
|
||
.row-tags{display:flex;gap:4px;flex-wrap:wrap}
|
||
|
||
.row-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
|
||
.row-date{font-family:'Merriweather',serif;font-size:14px;color:#444;white-space:nowrap;font-weight:700}
|
||
.row-date-rel{font-size:10.5px;color:#aaa;font-weight:600;letter-spacing:.3px}
|
||
|
||
/* Bilateral distribution bar — lifted from production ConversationTimeline */
|
||
.distbar{display:flex;flex-direction:column;gap:6px;background:var(--muted);border:1px solid var(--line);border-bottom:0;padding:12px 20px}
|
||
.distbar-labels{display:flex;justify-content:space-between;font-size:13px;font-weight:700}
|
||
.distbar-labels .out{color:var(--primary);display:inline-flex;align-items:center;gap:6px}
|
||
.distbar-labels .in{color:var(--accent);display:inline-flex;align-items:center;gap:6px}
|
||
.distbar-labels .cnt{font-variant-numeric:tabular-nums}
|
||
.distbar-bar{height:6px;display:flex;border-radius:3px;overflow:hidden;background:var(--line)}
|
||
.distbar-bar .out{background:var(--primary)}
|
||
.distbar-bar .in{background:var(--accent)}
|
||
.distbar + .rlist{border-radius:0 0 2px 2px}
|
||
|
||
/* Section headings within the spec */
|
||
.example-h{font-family:'Merriweather',serif;font-size:18px;color:var(--brand-navy);margin:36px 0 10px;padding-top:24px;border-top:1px dashed var(--line);font-weight:700;display:flex;align-items:baseline;gap:10px}
|
||
.example-h .lbl{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:800;color:#888;letter-spacing:1px;text-transform:uppercase}
|
||
.example-h:first-of-type{border-top:0;padding-top:0;margin-top:20px}
|
||
.example-sub{font-size:12px;color:#777;margin-bottom:14px;line-height:1.55}
|
||
|
||
/* Swap-buttons and filter chrome for bilateral filter card */
|
||
.swap-inline{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid #C8C4BE;border-radius:50%;background:#F0EDE8;font-size:13px;color:var(--brand-navy);margin:0 -12px;position:relative;z-index:1}
|
||
|
||
@media (max-width: 760px){
|
||
.row{grid-template-columns:82px 1fr;column-gap:14px}
|
||
.row-right{grid-column:2;align-items:flex-start;margin-top:4px}
|
||
.thumb.portrait{width:72px;height:94px}
|
||
.thumb.landscape, .thumb.postcard{width:82px;height:58px}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="spec-meta">
|
||
<div class="spec-meta-inner">
|
||
<div>
|
||
<h1>Briefwechsel — <span>Fill the Empty Rows</span></h1>
|
||
<p>Five approaches to turning the empty right-hand space into information that helps users scan and decide.</p>
|
||
</div>
|
||
<div class="spec-meta-right">
|
||
<div><strong>Concept</strong>Thumbnail Rows <span style="color:var(--brand-mint);margin-left:6px">v2</span></div>
|
||
<div><strong>Spec</strong>2 / 5</div>
|
||
<div><strong>Effort</strong>Medium — needs PDF thumbnail service</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<nav class="spec-nav">
|
||
<div class="spec-nav-inner">
|
||
<span class="lbl">Specs</span>
|
||
<a href="index.html">Overview</a>
|
||
<a href="01-rich-rows.html">1 · Rich Rows</a>
|
||
<a class="on" href="02-thumbnail-rows.html">2 · Thumbnail Rows</a>
|
||
<a href="03-master-detail.html">3 · Master-Detail Split</a>
|
||
<a href="04-gallery-cards.html">4 · Gallery Cards</a>
|
||
<a href="05-person-dashboard.html">5 · Person Dashboard</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="page-wrap">
|
||
|
||
<div class="hdr">
|
||
<div class="hdr-logo">FAMILIENARCHIV</div>
|
||
<div class="hdr-nav"><a>Documents</a><a>Persons</a><a class="on">Letters</a><a>Admin</a></div>
|
||
<div class="hdr-right"><div class="hdr-upload">⬆ UPLOAD</div><span>DE · EN · ES</span><div class="hdr-avatar">MR</div></div>
|
||
</div>
|
||
|
||
<div class="page">
|
||
|
||
<div class="concept-intro">
|
||
<h2>Concept 2 · Thumbnail Rows — discovery through visual + summary</h2>
|
||
/briefwechsel is for fun discovery, not dense scanning. The row gets a bigger first-page thumbnail (portrait for letters, landscape for postcards); the <b>summary</b> reads like a quote next to it; the right column stays calm — just the date. Rows without a summary remain clean and uncrowded.
|
||
<div><span class="gain">✚ Visual recognition — letters and postcards look like what they are</span><span class="gain">✚ Summary reads as a quote, invites opening the letter</span><span class="gain">✚ Distribution bar gives the bilateral pair its own identity</span><span class="cost">− Depends on the PDF-thumbnail service (open issue)</span></div>
|
||
</div>
|
||
|
||
<!-- ───────── Example 1 · single person ───────── -->
|
||
<div class="example-h">Beispiel 1 <span class="lbl">alle Briefe von Walter de Gruyter · 851</span></div>
|
||
<div class="example-sub">Single-sender case: sender is filled, correspondent is open. Direction arrows tell sent vs received.</div>
|
||
|
||
<div class="card">
|
||
<div class="filter-row">
|
||
<div><div class="fl">Person</div><div class="fi">Walter de Gruyter</div></div>
|
||
<div><div class="fl">Korrespondent — optional</div><div class="fi empty">Alle Korrespondenten</div></div>
|
||
</div>
|
||
<div class="filter-actions">
|
||
<div class="btn">Newest ↓</div><div class="btn">▾ Filter</div>
|
||
<div class="count"><b>851</b> Briefe</div>
|
||
</div>
|
||
<div class="hintbar">📋 Alle Briefe von <b>Walter de Gruyter</b> — wähle einen Korrespondenten oben um einzugrenzen</div>
|
||
</div>
|
||
|
||
<div class="rlist">
|
||
<div class="year-divider"><span class="y">1940</span><span class="n">1 Brief</span></div>
|
||
|
||
<div class="row in">
|
||
<div class="row-thumb">
|
||
<div class="thumb portrait typed paper-1">
|
||
<div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="row-body">
|
||
<div class="row-title">Demo leserlicher Brief</div>
|
||
<div class="row-summary">letzte Lebenstage von W. Dörpfeld in Griechenland — ausführlicher Bericht aus Belgard mit persönlichen Anmerkungen</div>
|
||
<div class="row-meta"><span class="dir-ch in">← eingehend</span><span>Gertrud von Rofden</span><span class="sep">·</span><span>📍 Belgard</span><span class="sep">·</span><span class="row-tags"><span class="tag">Dörpfeld</span><span class="tag">Griechenland</span></span></div>
|
||
</div>
|
||
<div class="row-right">
|
||
<div class="row-date">31. Mai 1940</div>
|
||
<div class="row-date-rel">vor 85 Jahren</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="year-divider"><span class="y">1923</span><span class="n">5 Briefe</span></div>
|
||
|
||
<div class="row out">
|
||
<div class="row-thumb">
|
||
<div class="thumb portrait kurrent paper-2">
|
||
<div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="row-body">
|
||
<div class="row-title">W-0397 – 2. September 1923 – B.Lichterfelde</div>
|
||
<div class="row-summary">von Elsbeth geschriebener Kommentar, den Herbert zum Brief erzählte — Notiz auf der Rückseite mit Korrekturen</div>
|
||
<div class="row-meta"><span class="dir-ch">→ ausgehend</span><span>an Herbert Cram</span><span class="sep">·</span><span>📍 B.Lichterfelde</span><span class="sep">·</span><span class="row-tags"><span class="tag">Verlag</span><span class="tag">Familie</span></span></div>
|
||
</div>
|
||
<div class="row-right">
|
||
<div class="row-date">2. September 1923</div>
|
||
<div class="row-date-rel">vor 102 Jahren</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Postcard example -->
|
||
<div class="row out">
|
||
<div class="row-thumb">
|
||
<div class="thumb postcard kurrent paper-4">
|
||
<div class="thumb-lines"><i></i><i></i><i></i><i></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="row-body">
|
||
<div class="row-title">Ansichtskarte – 2. September 1923 – B.Lichterfelde</div>
|
||
<div class="row-summary">kurze Grüße aus B.Lichterfelde, Hinweis auf den kommenden Besuch</div>
|
||
<div class="row-meta"><span class="dir-ch">→ ausgehend</span><span>an Herbert Cram</span><span class="sep">·</span><span>📍 B.Lichterfelde</span><span class="sep">·</span><span class="kind-chip">✉ Postkarte</span></div>
|
||
</div>
|
||
<div class="row-right">
|
||
<div class="row-date">2. September 1923</div>
|
||
<div class="row-date-rel">vor 102 Jahren</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Multi-page letter -->
|
||
<div class="row out">
|
||
<div class="row-thumb">
|
||
<div class="thumb portrait kurrent paper-3">
|
||
<div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
|
||
</div>
|
||
<span class="thumb-badge">4 S.</span>
|
||
</div>
|
||
<div class="row-body">
|
||
<div class="row-title">W-0524 – 31. Juli 1923 – Berlin</div>
|
||
<div class="row-summary">Glückwunsch zum 60. Geburtstag, Bericht über den Verlag und den anstehenden Umzug nach B.Lichterfelde im kommenden Herbst</div>
|
||
<div class="row-meta"><span class="dir-ch">→ ausgehend</span><span>an Walter Dieckmann</span><span class="sep">·</span><span>📍 Berlin</span><span class="sep">·</span><span class="row-tags"><span class="tag">Geburtstag</span><span class="tag">Verlag</span></span></div>
|
||
</div>
|
||
<div class="row-right">
|
||
<div class="row-date">31. Juli 1923</div>
|
||
<div class="row-date-rel">vor 102 Jahren</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Without summary — still clean -->
|
||
<div class="row out">
|
||
<div class="row-thumb">
|
||
<div class="thumb portrait kurrent paper-1">
|
||
<div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="row-body">
|
||
<div class="row-title">W-0396 – 2. September 1923 – B.Lichterfelde</div>
|
||
<div class="row-meta"><span class="dir-ch">→ ausgehend</span><span>an Herbert Cram</span><span class="sep">·</span><span>📍 B.Lichterfelde</span></div>
|
||
</div>
|
||
<div class="row-right">
|
||
<div class="row-date">2. September 1923</div>
|
||
<div class="row-date-rel">vor 102 Jahren</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="year-divider"><span class="y">1922</span><span class="n">37 Briefe</span></div>
|
||
|
||
<div class="row out">
|
||
<div class="row-thumb">
|
||
<div class="thumb portrait kurrent paper-2">
|
||
<div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="row-body">
|
||
<div class="row-title">W-0521 – 24. Dezember 1922 – Berlin</div>
|
||
<div class="row-summary">Weihnachtsbrief, Erinnerungen an das Jahr und Bitte um ein Bild der Kinder zum Christfest</div>
|
||
<div class="row-meta"><span class="dir-ch">→ ausgehend</span><span>an Walter Dieckmann</span><span class="sep">·</span><span>📍 Berlin</span><span class="sep">·</span><span class="row-tags"><span class="tag">Weihnachten</span><span class="tag">Familie</span></span></div>
|
||
</div>
|
||
<div class="row-right">
|
||
<div class="row-date">24. Dezember 1922</div>
|
||
<div class="row-date-rel">vor 103 Jahren</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ───────── Example 2 · bilateral ───────── -->
|
||
<div class="example-h">Beispiel 2 <span class="lbl">Briefwechsel Walter ↔ Herbert · 143</span></div>
|
||
<div class="example-sub">Bilateral case: both filters are set. The distribution bar above the list shows how the correspondence is split — instantly visible who wrote more.</div>
|
||
|
||
<div class="card">
|
||
<div class="filter-row">
|
||
<div><div class="fl">Person</div><div class="fi">Walter de Gruyter</div></div>
|
||
<div><div class="fl">Korrespondent</div><div class="fi">Herbert Cram</div></div>
|
||
</div>
|
||
<div class="filter-actions">
|
||
<div class="btn">⇄ Tauschen</div>
|
||
<div class="btn">Newest ↓</div><div class="btn">▾ Filter</div>
|
||
<div class="count"><b>143</b> Briefe im Zeitraum</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="distbar" role="img" aria-label="Briefverteilung: 87 von Walter de Gruyter, 56 von Herbert Cram">
|
||
<div class="distbar-labels">
|
||
<span class="out"><span class="cnt">87</span> von Walter de Gruyter →</span>
|
||
<span class="in">← <span class="cnt">56</span> von Herbert Cram</span>
|
||
</div>
|
||
<div class="distbar-bar">
|
||
<span class="out" style="width:60.8%"></span>
|
||
<span class="in" style="width:39.2%"></span>
|
||
</div>
|
||
</div>
|
||
<div class="rlist" style="border-radius:0 0 2px 2px">
|
||
<div class="year-divider"><span class="y">1923</span><span class="n">12 Briefe</span></div>
|
||
|
||
<div class="row out">
|
||
<div class="row-thumb">
|
||
<div class="thumb portrait kurrent paper-2">
|
||
<div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="row-body">
|
||
<div class="row-title">W-0397 – 2. September 1923 – B.Lichterfelde</div>
|
||
<div class="row-summary">von Elsbeth geschriebener Kommentar, den Herbert zum Brief erzählte</div>
|
||
<div class="row-meta"><span class="dir-ch">→</span><span>Walter an Herbert</span><span class="sep">·</span><span>📍 B.Lichterfelde</span><span class="sep">·</span><span class="row-tags"><span class="tag">Verlag</span></span></div>
|
||
</div>
|
||
<div class="row-right">
|
||
<div class="row-date">2. September 1923</div>
|
||
<div class="row-date-rel">vor 102 Jahren</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row in">
|
||
<div class="row-thumb">
|
||
<div class="thumb portrait kurrent paper-3">
|
||
<div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="row-body">
|
||
<div class="row-title">H-0213 – 29. August 1923 – Leipzig</div>
|
||
<div class="row-summary">Antwort auf Walters Anfrage zur Herbstauslieferung, Bitte um Rückmeldung bis Monatsende</div>
|
||
<div class="row-meta"><span class="dir-ch in">←</span><span>Herbert an Walter</span><span class="sep">·</span><span>📍 Leipzig</span><span class="sep">·</span><span class="row-tags"><span class="tag">Verlag</span></span></div>
|
||
</div>
|
||
<div class="row-right">
|
||
<div class="row-date">29. August 1923</div>
|
||
<div class="row-date-rel">vor 102 Jahren</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row in">
|
||
<div class="row-thumb">
|
||
<div class="thumb postcard kurrent paper-4">
|
||
<div class="thumb-lines"><i></i><i></i><i></i><i></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="row-body">
|
||
<div class="row-title">Ansichtskarte – 20. August 1923 – Thüringer Wald</div>
|
||
<div class="row-summary">Urlaubsgruß, kurze Notiz über Wetter und geplante Rückkehr</div>
|
||
<div class="row-meta"><span class="dir-ch in">←</span><span>Herbert an Walter</span><span class="sep">·</span><span>📍 Thüringer Wald</span><span class="sep">·</span><span class="kind-chip">✉ Postkarte</span></div>
|
||
</div>
|
||
<div class="row-right">
|
||
<div class="row-date">20. August 1923</div>
|
||
<div class="row-date-rel">vor 102 Jahren</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row out">
|
||
<div class="row-thumb">
|
||
<div class="thumb portrait kurrent paper-1">
|
||
<div class="thumb-lines"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
|
||
</div>
|
||
<span class="thumb-badge">3 S.</span>
|
||
</div>
|
||
<div class="row-body">
|
||
<div class="row-title">W-0392 – 23. November 1921 – Bad Kissingen</div>
|
||
<div class="row-summary">Kurbericht aus Bad Kissingen, Gesundheitsupdate nach der ersten Woche, Grüße an die Familie Cram</div>
|
||
<div class="row-meta"><span class="dir-ch">→</span><span>Walter an Herbert</span><span class="sep">·</span><span>📍 Bad Kissingen</span><span class="sep">·</span><span class="row-tags"><span class="tag">Kuraufenthalt</span></span></div>
|
||
</div>
|
||
<div class="row-right">
|
||
<div class="row-date">23. November 1921</div>
|
||
<div class="row-date-rel">vor 104 Jahren</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Notes footer -->
|
||
<div style="margin-top:32px;padding:16px 20px;background:#fff;border-left:4px solid var(--brand-navy);font-size:13px;color:#333;line-height:1.7">
|
||
<b style="color:var(--brand-navy)">Details:</b>
|
||
<ul style="margin:8px 0 0 20px;padding:0">
|
||
<li><b>Thumbnail</b> — 82×106 for portrait, 104×72 for landscape/postcards. Postcards also get a stamp + postmark corner. Kurrent handwriting rendered with slight line skew; typewriter rendered with clean parallel lines. Multi-page letters get a "<code>4 S.</code>" badge.</li>
|
||
<li><b>Summary</b> — shown in serif italic with colored quote marks. Reads like a quote from the letter. If empty, the row simply omits the line — no apologetic placeholder.</li>
|
||
<li><b>Right column</b> — date only, in serif. We dropped archive box (only meaningful for one family archive) and any lookup metadata. The right column stays calm on purpose.</li>
|
||
<li><b>Distribution bar</b> — appears only in bilateral mode (both sender and receiver set). Pattern lifted from the existing <code>ConversationTimeline</code> so it's familiar.</li>
|
||
<li><b>Mobile</b> — thumbnail shrinks (72×94 portrait / 82×58 landscape) and the right column wraps under the body.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|