From 58ede9005de9b44eca19d581db392af024bd94c6 Mon Sep 17 00:00:00 2001 From: karim Date: Sun, 31 May 2026 20:33:21 +0200 Subject: [PATCH] =?UTF-8?q?ui:=20Journal=20als=20Masonry=20(unabh=C3=A4ngi?= =?UTF-8?q?ge=20Spalten)=20+=20Wortmark=20auf=20eigenes=20SVG?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- assets/css/custom.css | 55 +++++++++++++++++++--------------------- static/logo/LOGO-OB.svg | 21 +++++++++++++++ static/logo/logo-ob2.svg | 14 ++++++++++ 3 files changed, 61 insertions(+), 29 deletions(-) create mode 100644 static/logo/LOGO-OB.svg create mode 100644 static/logo/logo-ob2.svg diff --git a/assets/css/custom.css b/assets/css/custom.css index 17f3278..ebd1501 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -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); diff --git a/static/logo/LOGO-OB.svg b/static/logo/LOGO-OB.svg new file mode 100644 index 0000000..6ebd313 --- /dev/null +++ b/static/logo/LOGO-OB.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/static/logo/logo-ob2.svg b/static/logo/logo-ob2.svg new file mode 100644 index 0000000..30db1ff --- /dev/null +++ b/static/logo/logo-ob2.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + openbureau + +