From c2dd9d3ffb881999adf7dab2b3a32aa56a31df3c Mon Sep 17 00:00:00 2001 From: karim Date: Sun, 31 May 2026 20:03:20 +0200 Subject: [PATCH] =?UTF-8?q?ui:=20Journal-Karten=20kompakt=20(kein=20H?= =?UTF-8?q?=C3=B6hen-Stretch)=20+=20Wortmark=20=E2=80=9Eopenbureau"=20in?= =?UTF-8?q?=20Honk?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Journal-Startseite: - Karten-Kontext (.journal-list) nimmt die alten Vollflächen-Panel-Regeln zurück: kompakte 2-Spalten-Karten statt min-height:70vh + Hero-Padding. - Cover-Bild als 16/9-Block OBEN statt absolutem Overlay; Text darunter, linksbündig, dunkle Schrift (kein Weiß-auf-Bild mehr). - align-items:start → keine Zeilen-Stretchung; ein höherer Eintrag zieht den Nachbarn nicht mehr mit. Header: - Wortmark ist jetzt sichtbarer Kleintext „openbureau" in Honk (expressive COLRv1-Color-Font), self-gehostet als static/fonts/honk-latin.woff2 + @font-face. Ersetzt das bisherige logo.svg-Hintergrundbild. Beides nur per API/Build geprüft, nicht visuell (kein Headless-Browser). Co-Authored-By: Claude Opus 4.8 --- assets/css/custom.css | 123 +++++++++++++++++++++++++++++----- layouts/_default/baseof.html | 4 +- static/fonts/honk-latin.woff2 | Bin 0 -> 30156 bytes 3 files changed, 110 insertions(+), 17 deletions(-) create mode 100644 static/fonts/honk-latin.woff2 diff --git a/assets/css/custom.css b/assets/css/custom.css index 1dd9fe3..17f3278 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -153,30 +153,35 @@ 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"); +} + .wordmark-link { border: none; margin: 0; padding: 0; display: block; justify-self: center; - width: clamp(140px, 18vw, 200px); - height: clamp(22px, 2.8vw, 32px); - background-image: url("/logo/logo.svg"); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - color: transparent; - font-size: 0; + width: auto; + 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 */ } -.wordmark-sr { - 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 { color: #fff; border: none; opacity: 0.85; } +.wordmark-link:focus { border: none; opacity: 0.85; } .site-header .site-nav { justify-self: center; @@ -778,6 +783,94 @@ a.byline-author:hover, a.journal-author:hover { color: var(--accent); } .journal-tags { /* extends .tag-pills */ } +/* ════════════════════════════════════════════════════════════════════════ + Journal-Startseite: KARTEN-Kontext. Nimmt die Vollflächen-Panel-Regeln von + oben innerhalb von .journal-list zurück — kompakte 2-Spalten-Karten: + Bild als 16/9-Block OBEN (kein absolutes Overlay), dunkle Schrift, + 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; + padding: 1.25rem; + position: relative; + overflow: hidden; + border-radius: 12px; + align-self: start; +} +.journal-list .journal-entry--layout-image { + background: var(--color-bg-secondary); + color: var(--color-text-primary); +} +.journal-list .journal-entry-link { display: block; min-height: 0; } + +/* Bild: normaler Block oben statt absolutem Hintergrund-Overlay */ +.journal-list .journal-bg-image { + position: static; + inset: auto; + z-index: auto; + width: 100%; + height: auto; + aspect-ratio: 16 / 9; + object-fit: cover; + border-radius: 8px; + margin: 0 0 0.9rem; +} + +/* Body: linksbündig, normaler Textfluss, kompakt, dunkle Schrift */ +.journal-list .journal-entry-body { + position: static; + z-index: auto; + max-width: none; + margin: 0; + padding: 0; + display: grid; + justify-items: start; + text-align: left; + row-gap: 0.55rem; + color: var(--color-text-primary); +} +.journal-list .journal-entry-body > * { max-width: none; } + +/* Bild-Layout: Schrift wieder dunkel (kein Weiß-auf-Bild) */ +.journal-list .journal-entry--layout-image .journal-title, +.journal-list .journal-entry--layout-image .journal-rubric, +.journal-list .journal-entry--layout-image .journal-summary, +.journal-list .journal-entry--layout-image .journal-byline, +.journal-list .journal-entry--layout-image .journal-byline .journal-author, +.journal-list .journal-entry--layout-image .journal-byline .journal-date, +.journal-list .journal-entry--layout-image .journal-byline .journal-author::before { + color: var(--color-text-primary); + text-shadow: none; +} +.journal-list .journal-entry--layout-image .journal-section { + background: color-mix(in oklab, var(--section-color, var(--accent)) 35%, transparent); + color: var(--color-text-primary); + backdrop-filter: none; + -webkit-backdrop-filter: none; +} + +/* Kompaktere Karten-Typografie (nicht Hero-Größe) */ +.journal-list .journal-title { font-size: 1.4rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; } +.journal-list .journal-summary { font-size: 1rem; line-height: 1.45; max-width: none; } +.journal-list .journal-byline { font-size: 0.9rem; } + +/* Icon-Bild kleiner und linksbündig */ +.journal-list .journal-icon-image { max-width: 96px; max-height: 96px; margin: 0 0 0.6rem; } + +/* Tags innerhalb der Karte links, kompakt */ +.journal-list .journal-entry > .tag-pills { + margin: 0.6rem 0 0; + padding: 0; + max-width: none; + text-align: left; +} + .more { margin-top: var(--spacing-md); font-family: var(--font-family-mono); diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 397a7f4..72e7b2b 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -9,8 +9,8 @@