/** * Isarweiss Auto-Posts — Frontend Content Layout * * Wird NUR auf Beiträgen mit body-Klasse .iw-generated-post geladen * (Scope-Mechanik in src/Frontend/Scope.php). Stylesheet hat zwei * Aufgaben: * * 1. Hero-Teaser-Sektion am Anfang des Beitrags (Baustein A). * 2. Theme-/Plugin-unabhängige Bereinigung der Beitragsdarstellung * (Baustein C, Ebene 1): keine Sidebar, kein doppelter Titel, * keine Meta-Zeile, kein Featured Image über dem Content. * * Alle Regeln sind unter `.iw-generated-post`-Body-Scope gehängt, * damit die normale Blog-Darstellung des Vendors unverändert bleibt. * * Baustein B (Content-Layout-Rhythmus, Single/Split, alternierende * Bildseiten) kommt in einem separaten Folgeschritt über strukturierte * Daten aus dem Hauptrepo. Die hier definierten Selektoren * (.iw-content, .iw-content-single, .iw-content-split, ...) sind die * vereinbarte Naht — Layout-Regeln werden dort additiv ergänzt. * * @package Isarweiss\AutoPosts */ /* ───────────────────────────────────────────────────────────── * v1.5.2 — Block-Gap-Variablen * * Vertikale Abstände zwischen den Content-Blöcken (Hero → Single → * Split → Single → … → FAQ) zentral steuerbar. Werte hier anpassen * → wirkt überall (.iw-hero margin-bottom, .iw-content-single * margin-bottom, .iw-content-split margin-bottom). * * Default: 88px Desktop / 48px Mobile — luftig, "Apple-like". * 8er-Schritt-Skala, harmoniert mit dem Hero-clamp(480-640px). * ───────────────────────────────────────────────────────────── */ .iw-generated-post { --iw-block-gap: 88px; --iw-block-gap-mobile: 48px; } @media (max-width: 768px) { .iw-generated-post { --iw-block-gap: var(--iw-block-gap-mobile); } } /* ───────────────────────────────────────────────────────────── * Baustein A — Hero-Teaser-Sektion * ───────────────────────────────────────────────────────────── */ /* min-height: clamp-Werte aus v1.4.1 — Mobile-Override (320px) unten. * Fullwidth-Breakout via width:100vw + calc-Margin: viele Themes klemmen * den Content in einen max-width-Container. * * v1.5.1: margin-shorthand absichtlich VERMIEDEN. Frühere Form * `margin: 0 0 48px` + spätere margin-left/margin-right: calc(...) in * derselben Regel triggerte einen Autoptimize-Minifier-Bug, der die * Properties zwischen shorthand und expliziten left/right verschluckt * hat (siehe rankingrocks.de v1.5.0-Verifikation). Mit margin-bottom * statt margin-shorthand kein Konflikt mehr. * * Auch Mid-Rule-Kommentare bewusst rausgehalten — sind ein generelles * Risiko für CSS-Minifier. */ .iw-generated-post .iw-hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(480px, 60vh, 640px); padding: 64px 24px; margin-bottom: var(--iw-block-gap); background-size: cover; background-position: center center; background-repeat: no-repeat; overflow: hidden; box-sizing: border-box; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .iw-generated-post .iw-hero--no-image { /* Fallback ohne Teaser-Bild — dezent neutral, Titel bleibt sichtbar. * Kein hartes Schwarz/Grau, sondern ein neutraler dunkler Verlauf, * der zur Premium-Ästhetik passt. */ background-color: #2a2724; background-image: linear-gradient(135deg, #2a2724 0%, #3a3633 100%); } .iw-generated-post .iw-hero__overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.4); pointer-events: none; } .iw-generated-post .iw-hero__title { position: relative; z-index: 1; margin: 0 auto; color: #ffffff; text-align: center; font-size: clamp(32px, 5vw, 64px); line-height: 1.1; letter-spacing: -0.01em; /* v1.4.1: max-width gegen Über-die-volle-Hero-Breite-Laufen. Lange * Titel brechen jetzt sauber um, statt das Layout zu sprengen. */ max-width: 900px; width: 90%; /* Lokaler Reset gegen Theme-Defaults */ padding: 0; border: 0; background: transparent; } /* Mobile — kompakter, gleiche Logik */ @media (max-width: 640px) { .iw-generated-post .iw-hero { min-height: 320px; padding: 48px 20px; margin-bottom: 32px; } .iw-generated-post .iw-hero__title { font-size: clamp(26px, 7vw, 38px); max-width: 100%; width: 100%; } } /* ───────────────────────────────────────────────────────────── * v1.4.1 — Abstand zwischen gestapelten Content-Bildern * * Die Content-Bilder werden vom PostsController als Gutenberg- *
-Blöcke an den Beitrag angehängt. * Aufeinanderfolgende Bilder kleben optisch aneinander, weil das * Theme (GP) wenig vertikalen Default-Abstand setzt. Wir legen * scoped einen sauberen Abstand zwischen zwei aufeinanderfolgenden * Bild-Blöcken — sowohl direkt benachbart als auch durch ein * leeres

getrennt (wpautop-Eigenheit). * * Greift in allen üblichen Theme-Wrappern (.entry-content, * .iw-content) durch den Body-Scope. * ───────────────────────────────────────────────────────────── */ .iw-generated-post figure.wp-block-image + figure.wp-block-image, .iw-generated-post figure.wp-block-image + p:empty + figure.wp-block-image { margin-top: 24px; } /* ───────────────────────────────────────────────────────────── * Baustein D — V2-Layout-Naht * * Wrapper für den Content-Bereich (kommt nach dem Hero). Die * Modifier-Klasse iw-content--layout-standard erlaubt es, in * Baustein B pro Layout zu stylen, ohne den Renderer umzubauen. * * Aktuell nur Basis-Reset (box-sizing, margin-resets) — die echten * Layout-Regeln (Single 900px, Split-Reihen, Bildseiten-Alternierung) * kommen mit Baustein B additiv hinzu. * ───────────────────────────────────────────────────────────── */ .iw-generated-post .iw-content, .iw-generated-post .iw-content * { box-sizing: border-box; } /* Standard-Layout (v1.4.x-Pfad): Single-Spalte 900px, der Content-Blob * läuft komplett darin (keine inneren Single/Split-Wrapper). */ .iw-generated-post .iw-content--layout-standard { max-width: 900px; margin: 0 auto; padding: 0 20px; } /* Sections-Layout (v1.5.0-Pfad): outer wrapper ist FULL-WIDTH (1280er- * Range für Splits), die inneren .iw-content-single / .iw-content-split * Elemente cappen sich selbst. Kein padding hier — die inneren * Elemente bringen ihres mit. */ .iw-generated-post .iw-content--layout-sections { max-width: 1280px; margin: 0 auto; } /* ───────────────────────────────────────────────────────────── * Baustein B — Sections-Layout (v1.5.0) * * Single 900px ↔ Split (Text + Bild) 1280px alternierend. * Bildseiten-Alternierung per --image-left/--image-right Modifier. * Bild-Container nutzt aspect-ratio + object-fit:cover für editorial * konsistenten Look (hochkant + quer Bilder verzerren nicht). * * Mobile (< 768px): Split bricht auf eine Spalte um, Bild über Text. * ───────────────────────────────────────────────────────────── */ /* v1.5.2: margin-shorthand bewusst aufgespalten (Autoptimize-Resilienz * — auch wenn aktuell kein margin-left/right-Override hier folgt, * konsistent zur .iw-hero-Lehre aus v1.5.1). Block-Gap via Variable. */ .iw-generated-post .iw-content-single { max-width: 900px; margin-bottom: var(--iw-block-gap); margin-left: auto; margin-right: auto; padding: 0 20px; } .iw-generated-post .iw-content-single:last-child { margin-bottom: 0; } .iw-generated-post .iw-content-single--image { max-width: 900px; } .iw-generated-post .iw-content-single--image figure.wp-block-image { margin: 0; } /* v1.5.4: Tail-Bilder-Container. * * SectionsLayoutBuilder wrappt die Tail-Bilder (4., 5., ... Content- * Bilder, falls vorhanden) in

. Damit * regelt flex-gap den engen Abstand zwischen den Bildern direkt — * KEIN margin-collapse-Trick mehr (v1.5.3-Ansatz wurde durch * Autoptimize-CSS-Aggregation unzuverlässig). * * Strukturell robust: * - flex-gap: 24px → fester Abstand zwischen den Bildern (Mobile 16px) * - Container margin-bottom: var(--iw-block-gap) → großer Gap zur * Partner-Box (kommt automatisch, weil Container ein normaler Block ist) * - Gap vom letzten Text-Block zum Container kommt aus margin-bottom * des Text-Blocks (= var(--iw-block-gap)) * * max-width: 900px + margin:auto wiederholt die Single-Spalten-Geometrie * der .iw-content-single-Sektionen. Inner-Items behalten ihre * .iw-content-single-Padding (0 20px) und werden via flex-stretch * full-width im Container. */ .iw-generated-post .iw-tail-images { display: flex; flex-direction: column; gap: 24px; max-width: 900px; margin-bottom: var(--iw-block-gap); margin-left: auto; margin-right: auto; } .iw-generated-post .iw-tail-images > .iw-content-single--image { /* Container-gap übernimmt die Abstände — Child-margin-bottom muss * weg, sonst doppelt mit dem Container-gap. */ margin-bottom: 0; } @media (max-width: 768px) { .iw-generated-post .iw-tail-images { gap: 16px; } } /* v1.5.2: margin-shorthand aufgespalten, Block-Gap via Variable. */ .iw-generated-post .iw-content-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; max-width: 1280px; margin-bottom: var(--iw-block-gap); margin-left: auto; margin-right: auto; padding: 0 20px; } /* Bild-rechts ist Default — text in Spalte 1, media in Spalte 2. * Bild-links: grid-order vertauschen, DOM-Reihenfolge bleibt * (text vor media — wichtig für Screen-Reader-Reihenfolge). */ .iw-generated-post .iw-content-split--image-left .iw-content-split__text { grid-column: 2; grid-row: 1; } .iw-generated-post .iw-content-split--image-left .iw-content-split__media { grid-column: 1; grid-row: 1; } .iw-generated-post .iw-content-split__text > *:first-child { margin-top: 0; } .iw-generated-post .iw-content-split__text > *:last-child { margin-bottom: 0; } .iw-generated-post .iw-content-split__media { aspect-ratio: 4 / 3; overflow: hidden; } .iw-generated-post .iw-content-split__media figure.wp-block-image, .iw-generated-post .iw-content-split__media figure { width: 100%; height: 100%; margin: 0; } .iw-generated-post .iw-content-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Mobile-Reflow: Split wird zu Single-Column, Bild bewusst ÜBER Text * (mit grid-row:1 für media, grid-row:2 für text — egal welche * --image-left/--image-right Variante). aspect-ratio auf 3/2 lockern, * weil Mobile-Viewport schmal ist und 4/3 zu hoch wirkt. */ @media (max-width: 768px) { .iw-generated-post .iw-content-split { grid-template-columns: 1fr; gap: 24px; /* margin-bottom kommt aus var(--iw-block-gap), die im Mobile- * Override oben automatisch auf --iw-block-gap-mobile mappt. */ } .iw-generated-post .iw-content-split .iw-content-split__text { grid-column: 1; grid-row: 2; } .iw-generated-post .iw-content-split .iw-content-split__media { grid-column: 1; grid-row: 1; aspect-ratio: 3 / 2; } } /* ───────────────────────────────────────────────────────────── * Baustein C, Ebene 1 — Theme-/Plugin-unabhängige Bereinigung * * Alle Regeln strikt unter .iw-generated-post-Scope, damit die * normale Blog-Darstellung des Vendors NICHT betroffen ist. * * Selektoren decken die häufigsten Theme-Konventionen ab: * - WP-Core / Twenty*: .entry-header, .entry-title, .entry-meta * - GeneratePress: .page-header-image, .post-image, .featured-image, * .posted-on, .byline, .cat-links, .tags-links, .entry-footer * - Astra/OceanWP-Verwandte: vorsorglich mitabgedeckt * ───────────────────────────────────────────────────────────── */ /* Featured Image im Content (verschiedene Theme-Wrapper) */ .iw-generated-post .post-image, .iw-generated-post .featured-image, .iw-generated-post .page-header-image, .iw-generated-post .entry-thumbnail, .iw-generated-post .single-featured-image-header, .iw-generated-post .post-thumbnail, .iw-generated-post .entry-content > .wp-post-image:first-child { display: none !important; } /* Theme-Headline / Inhalts-Titel (Hero ist die führende h1) */ .iw-generated-post .entry-header, .iw-generated-post .entry-title, .iw-generated-post .page-header, .iw-generated-post .page-title, .iw-generated-post header.entry-header { display: none !important; } /* Beitrags-Meta — Datum, Autor, Kategorie, Tags */ .iw-generated-post .entry-meta, .iw-generated-post .entry-footer, .iw-generated-post .posted-on, .iw-generated-post .byline, .iw-generated-post .post-author, .iw-generated-post .author-bio, .iw-generated-post .cat-links, .iw-generated-post .tags-links, .iw-generated-post .post-categories, .iw-generated-post .post-meta, .iw-generated-post .entry-tags { display: none !important; } /* Sidebar — viele Themes rendern