From 7ad1b13342221c9e0fdab77d9f2270dfc7fb11c9 Mon Sep 17 00:00:00 2001 From: Jan Sroka Date: Mon, 24 Aug 2026 00:00:22 +0200 Subject: [PATCH] docs(memory): note the Webflow p-margin reset and the
constraint MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Zwei Fallen, die in dieser Session je einen Fehlversuch gekostet haben: - `p { margin-bottom: 0 }` im Webflow-Export lässt Markdown-Absätze ohne Abstand rendern; der Fix muss auf `.content-box` begrenzt sein, sonst verkürzt er die Startseite (PR #30). - `
` im Adressblock ist nicht redundant: ohne die Tags rendert die Anschrift als eine Zeile, und die Markdown-Alternative (zwei Leerzeichen am Zeilenende) entfernt Prettier. --- memory/README.md | 1 + memory/webflow-css-traps.md | 53 +++++++++++++++++++++++++++++++++++++ 2 files changed, 54 insertions(+) create mode 100644 memory/webflow-css-traps.md diff --git a/memory/README.md b/memory/README.md index 5dd9c16..d5d33c2 100644 --- a/memory/README.md +++ b/memory/README.md @@ -9,3 +9,4 @@ and link them below. - [csp-policy.md](csp-policy.md) — the meta-tag CSP: what it allows and why, and what can't be enforced this way - [seo-and-metadata.md](seo-and-metadata.md) — SEO/metadata decisions (German-only, no JSON-LD, canonical/feed) - [finding-unused-assets.md](finding-unused-assets.md) — how to check if an image/PDF/CSS class is really unused (and the srcset / URL-encoding traps) +- [webflow-css-traps.md](webflow-css-traps.md) — warum Markdown-Absätze ohne Abstand rendern, und warum `
` im Adressblock bleiben muss diff --git a/memory/webflow-css-traps.md b/memory/webflow-css-traps.md new file mode 100644 index 0000000..f2586b1 --- /dev/null +++ b/memory/webflow-css-traps.md @@ -0,0 +1,53 @@ +# Webflow-CSS-Fallen bei Markdown-Seiten + +Die Seiten sind ein Webflow-Export. Zwei Regeln darin kollidieren mit +Markdown-generiertem HTML. + +## `p { margin-bottom: 0 }` — Absätze ohne Abstand + +`assets/css/inog-website.webflow.css:216` setzt global `p { margin-bottom: 0px }` +und überschreibt damit `webflow.css:233` (`10px`), weil es später in der Kaskade +steht. + +Solange Absätze als `

` **innerhalb eines** `

` gebaut waren, fiel das +nicht auf. Sobald echte `

`-Elemente aus Markdown entstehen, kleben sie +aneinander (26px Abstand = reine Zeilenhöhe). + +Fix in `custom.css`, nicht im Export: + +```css +.content-box p { + margin-bottom: 1em; +} +``` + +**Scope beachten.** `.content-box` existiert nur im `default`-Layout, also auf +den Markdown-Seiten. Eine weiter gefasste Regel auf `.block-content` — vor allem +zusammen mit `p:last-child { margin-bottom: 0 }` — hat die Startseite um 150px +verkürzt, weil dort sechs Absätze letzte Kinder ihres Containers sind und deren +Webflow-Abstand entfernt wurde. Siehe PR #30. + +`projekte.html` deklariert zwar `layout: home`, rendert aber trotzdem eine +`.content-box` (home verschachtelt default) — dort greift die Regel also mit. + +## `
` im Adressblock muss bleiben + +Markdown fasst einzelne Zeilenumbrüche zu Leerzeichen zusammen, und kein CSS im +Repo setzt `white-space` für `

`. Ohne `
` rendert die Anschrift als **eine +Zeile** (im Headless-Browser verifiziert: 18px statt 72px Höhe). + +Die Markdown-Alternative wären zwei Leerzeichen am Zeilenende — die entfernt +Prettier beim nächsten `npm run format`. Deshalb `
` innerhalb der Anschrift +behalten, für Absatztrennung dagegen Leerzeilen nutzen. + +## Verifikation von Layout-Änderungen + +Seitenhöhen im Headless-Browser gegen einen frischen Clone von `main` vergleichen, +**alle** Seiten, nicht nur die geänderte. Die Startseiten-Regression oben war +lokal nur so sichtbar: + +```bash +node -e "const p=require('puppeteer'); /* goto, document.body.scrollHeight */" +``` + +Siehe auch [[ci-and-verification]] und [[finding-unused-assets]].