ui: Journal als Masonry (unabhängige Spalten) + Wortmark auf eigenes SVG

- Journal-Startseite: .journal-list von Grid auf Multi-Column umgestellt —
  linke/rechte Spalte packen unabhängig (keine gemeinsame Zeilenhöhe mehr),
  break-inside:avoid hält Karten zusammen. Mobil: eine Spalte.
- Wortmark: eigenes logo-ob2.svg als Hintergrund (Honk-Webfont wieder raus).
  Hinweis: SVG enthält noch lebenden Honk-Text — für korrektes Rendern als
  Hintergrundbild müssen die Buchstaben in Kurven umgewandelt werden.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-05-31 20:33:21 +02:00
parent c2dd9d3ffb
commit 58ede9005d
3 changed files with 61 additions and 29 deletions
+26 -29
View File
@@ -153,33 +153,27 @@ a:hover {
}
/* Logo as background image (paths-only SVG, no font dependency) */
/* Wordmark-Schrift: Honk (expressive Color-Font, COLRv1), self-gehostet.
Bei fehlender Color-Font-Unterstützung greift die Fallback-Farbe unten. */
@font-face {
font-family: 'Honk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/honk-latin.woff2") format("woff2");
}
/* Wortmark: eigener SVG-Schriftzug „openbureau" (logo-ob2.svg). */
.wordmark-link {
border: none;
margin: 0;
padding: 0;
display: block;
justify-self: center;
width: auto;
width: clamp(170px, 24vw, 280px);
aspect-ratio: 1772 / 284;
height: auto;
font-family: 'Honk', var(--font-family-display), system-ui, sans-serif;
font-weight: 400;
font-size: clamp(2rem, 5vw, 3.1rem);
line-height: 1;
letter-spacing: 0.01em;
text-transform: lowercase;
color: #fff; /* Fallback, falls Color-Font nicht unterstützt wird */
background-image: url("/logo/logo-ob2.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.wordmark-text {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.wordmark-text { display: inline-block; }
.wordmark-link:hover,
.wordmark-link:focus { border: none; opacity: 0.85; }
@@ -284,14 +278,16 @@ a:hover {
gap: 0;
}
/* ── Journal: 2-Spalten-Karten-Raster, durchgehend 10px Abstände ─────────── */
/* ── Journal: 2-Spalten-MASONRY (Multi-Column) — Spalten packen UNABHÄNGIG ──
Multi-Column statt Grid: jede Karte fließt frei, links und rechts sind nicht
auf gemeinsame Zeilenhöhen gekoppelt (ein hoher Eintrag links lässt rechts
eigenständig weiterlaufen). break-inside:avoid hält Karten zusammen. */
/* Volle Breite (aus der 72ch-Spalte ausbrechen) */
.journal { width: 100vw; position: relative; left: 50%; margin-left: -50vw; }
.journal-header { padding: 0 10px; }
.journal-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
columns: 2;
column-gap: 10px;
padding: 0 10px 10px;
margin: 0;
}
@@ -300,7 +296,9 @@ a:hover {
border-radius: 12px;
background: var(--color-bg-secondary);
padding: 1.5rem;
margin: 0;
margin: 0 0 10px;
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
.journal-entry:last-child { border: none; }
/* In den Karten links bündig statt zentriert */
@@ -311,7 +309,7 @@ a:hover {
border-radius: 8px; margin-bottom: 0.9rem;
}
@media (max-width: 720px) {
.journal-list { grid-template-columns: 1fr; }
.journal-list { columns: 1; }
}
/* Card link: image (optional) + body block */
@@ -790,18 +788,17 @@ a.byline-author:hover, a.journal-author:hover { color: var(--accent); }
natürliche Höhe (align-items:start → keine Zeilen-Stretchung; ein hoher
Eintrag zieht den Nachbarn NICHT mit).
════════════════════════════════════════════════════════════════════════ */
.journal-list { align-items: start; }
.journal-list .journal-entry,
.journal-list .journal-entry--layout-image,
.journal-list .journal-entry--layout-icon,
.journal-list .journal-entry--layout-text {
margin: 0;
margin: 0 0 10px;
padding: 1.25rem;
position: relative;
overflow: hidden;
border-radius: 12px;
align-self: start;
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
.journal-list .journal-entry--layout-image {
background: var(--color-bg-secondary);