/** * Linux und Ich – Ergänzungen, die sich nicht über theme.json abbilden lassen. * Alle Grundwerte (Farben, Schrift, Abstände) kommen aus den Global Styles. * * Breakpoint-Skala (bewusst nur zwei Stufen, beide an WordPress-Kernwerte * angelehnt statt frei erfunden): * 599px – "Smartphone": Inhalte ausdünnen (Teaser/Sidebar ausblenden). * Liegt knapp unter dem festen 600px-Kollaps des Core-Nav-Blocks. * 781px – "Tablet/darunter": Layout umbrechen (zweispaltig -> einspaltig, * Header-Aktionen in eigene Zeile). Liegt knapp unter WordPress' * eigenem Adminbar-Breakpoint (782px). * Beide Zahlen NICHT ohne Grund verschieben – sie vermeiden Overlap mit den * genannten Core-Schwellen bei 600px bzw. 782px. */ /* View Transitions: weicher Übergang statt hartem Seitenwechsel zwischen Dokumenten. Reines CSS, keine Abhängigkeit – Browser ohne Unterstützung navigieren einfach wie bisher (progressive enhancement). Das passende view-transition-name je Beitragsbild kommt aus functions.php, damit das Aufmacherbild einer Karte sichtbar in das große Artikelbild überblendet. */ @view-transition { navigation: auto; } /* Dark Mode – automatisch (prefers-color-scheme) ODER manuell über den Umschalter im Header, der data-theme="dark"/"light" an setzt (siehe interactions.js sowie der früh im laufende Inline-Snippet in functions.php, der das Attribut vor dem ersten Rendern anhand von localStorage setzt, damit die gewählte Vorliebe nicht kurz aufblitzt). Alle Block- und Theme-Styles greifen auf die --wp--preset--color--* Custom Properties zu (nicht auf feste Hex-Werte) – ein Überschreiben dieser Variablen an :root reicht daher aus, um die gesamte Seite umzufärben, ohne jede einzelne Regel doppelt pflegen zu müssen. Die Werte stehen zweimal (Media Query + Attribut-Selektor), weil CSS beides nicht in einer Bedingung kombinieren kann – die Media-Query greift nur, wenn kein manuelles data-theme="light" das System-Dunkel übersteuert. */ @media ( prefers-color-scheme: dark ) { :root:not( [data-theme="light"] ) { --wp--preset--color--base: #131313; --wp--preset--color--base-2: #1e1e1e; --wp--preset--color--border: #333333; --wp--preset--color--contrast: #f2f1ed; --wp--preset--color--muted: #a19e97; --wp--preset--color--accent-dark: #ff6600; } :root:not( [data-theme="light"] ) .lui-header .wp-block-search__input { background-color: var( --wp--preset--color--base-2 ); color: var( --wp--preset--color--contrast ); } :root:not( [data-theme="light"] ) .lui-header .wp-block-search__input::placeholder { color: var( --wp--preset--color--muted ); } :root:not( [data-theme="light"] ) .wp-element-button, :root:not( [data-theme="light"] ) .wp-block-button:not( .is-style-lui-outline ) .wp-block-button__link { color: #ffffff !important; } } :root[data-theme="dark"] { --wp--preset--color--base: #131313; --wp--preset--color--base-2: #1e1e1e; --wp--preset--color--border: #333333; --wp--preset--color--contrast: #f2f1ed; --wp--preset--color--muted: #a19e97; --wp--preset--color--accent-dark: #ff6600; } :root[data-theme="dark"] .lui-header .wp-block-search__input { background-color: var( --wp--preset--color--base-2 ); color: var( --wp--preset--color--contrast ); } :root[data-theme="dark"] .lui-header .wp-block-search__input::placeholder { color: var( --wp--preset--color--muted ); } :root[data-theme="dark"] .wp-element-button, :root[data-theme="dark"] .wp-block-button:not( .is-style-lui-outline ) .wp-block-button__link { color: #ffffff !important; } /* Natives Aussehen von Formularelementen/Scrollbars je nach Modus. Der Platz für die vertikale Scrollbar wird IMMER reserviert (auch auf Seiten, die gar nicht scrollen, z. B. eine kurze Landingpage) – sonst verschiebt sich der nutzbare Breite zwischen einer kurzen und einer langen Seite um die Scrollbar-Breite (~15px), und rechtsbündige Elemente wie der Dark-Mode-Umschalter im Header springen sichtbar hin und her. */ html { color-scheme: light dark; scrollbar-gutter: stable; } :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* Footer, Kategorie-Badges, Code-Blöcke & Co.: "contrast"/"base" werden hier nicht als aktuelle Text-/Hintergrundfarbe, sondern als feste dunkle Marken-Farbe verwendet – unabhängig vom Farbmodus der übrigen Seite (der Footer ist schon im Light Mode dunkel). Deshalb UNBEDINGT, nicht an Dark Mode gekoppelt: Die Werte entsprechen exakt dem, was die jeweiligen Grundregeln im Light Mode ohnehin ergeben – hier nur robust gegen das Umklappen der Farb-Tokens im Dark Mode gemacht. */ .lui-on-dark .has-base-color, .lui-on-dark.has-base-color, .lui-on-dark a, .lui-on-dark h1, .lui-on-dark h2, .lui-on-dark h3, .lui-on-dark h4, .lui-on-dark .wp-block-site-title, .lui-on-dark .wp-block-site-title a { /* !important nötig: WPs eigene has-*-color-Utility-Klassen setzen selbst !important, eine normale Regel würde dagegen verlieren. */ color: #ffffff !important; } .lui-on-dark .has-contrast-background-color, .lui-on-dark.has-contrast-background-color { background-color: #1a1a1a !important; } .wp-block-post-terms.lui-badge { background: #1a1a1a !important; color: #ffffff !important; } .wp-block-post-terms.lui-badge a { color: #ffffff !important; } .lui-hero-overlay, .lui-hero-overlay .wp-block-post-title, .lui-hero-overlay .wp-block-post-title a { color: #ffffff !important; } .wp-block-code, .wp-block-preformatted, .lui-article-body pre { background-color: #1a1a1a !important; color: #f5f4f2 !important; } /* Tabellen (z. B. die Cookie-Übersicht in der Cookie-Richtlinie) sind in der schmalen Artikelspalte oft breiter als die verfügbare Breite – eigener Scroll-Container statt Überlauf in die Sidebar/über den Seitenrand hinaus. */ .lui-article-body .wp-block-table { overflow-x: auto; /* Nötig, damit der Scroll-Container innerhalb der Flex-Spalte (.lui-article-col) tatsächlich schrumpft, statt sie aufzudrücken – klassische Flexbox-Falle: ohne min-width:0 ignoriert ein Flex-Kind sein eigenes overflow:auto und wächst stattdessen über den verfügbaren Platz hinaus. */ min-width: 0; max-width: 100%; } .lui-article-body .wp-block-table table { border-collapse: collapse; width: 100%; } .lui-article-body .wp-block-table th, .lui-article-body .wp-block-table td { padding: 0.6em 0.8em; border: 1px solid var( --wp--preset--color--border ); text-align: left; vertical-align: top; } .lui-article-body .wp-block-table th { background-color: var( --wp--preset--color--base-2 ); } .entry-content a[href*='amzn.to']::after, .entry-content a[href*='amazon.de']::after, .wp-block-post-content a[href*='amzn.to']::after, .wp-block-post-content a[href*='amazon.de']::after { color: #ffffff !important; } .skip-link { background: #1a1a1a !important; color: #ffffff !important; } /* Überschrift in orangefarbenen Boxen (Spenden-CTA, Sidebar): braucht helle statt der global dunklen Überschriftfarbe. Als CSS-Regel statt Inline- style="" + Block-Attribut – Letzteres serialisierte auf dieser WP-Version beim Zurückwandeln offenbar anders als gespeichert ("ungültiger Inhalt"). */ .has-accent-background-color .wp-block-heading { color: var( --wp--preset--color--base ); } .lui-404-code { font-family: var( --wp--preset--font-family--mono ); font-size: 3.5rem; font-weight: 700; } /* Hinweis-/Warnung-/Tipp-Kästen im Beitragsinhalt ------------------------- */ .lui-callout { border-left: 3px solid var( --wp--preset--color--border ); border-radius: 0 6px 6px 0; padding: 1rem 1.25rem; margin: 1.75rem 0; } .lui-callout > *:first-child { margin-top: 0; } .lui-callout > *:last-child { margin-bottom: 0; } .lui-callout-label { font-family: var( --wp--preset--font-family--mono ); font-weight: 700; text-transform: uppercase; font-size: var( --wp--preset--font-size--small ); letter-spacing: 0.04em; margin: 0 0 0.5em !important; } .lui-callout.is-info { border-left-color: var( --wp--preset--color--info ); background: color-mix( in srgb, var( --wp--preset--color--info ) 7%, var( --wp--preset--color--base ) ); } .lui-callout.is-info .lui-callout-label { color: var( --wp--preset--color--info ); } .lui-callout.is-warning { border-left-color: var( --wp--preset--color--warning ); background: color-mix( in srgb, var( --wp--preset--color--warning ) 7%, var( --wp--preset--color--base ) ); } .lui-callout.is-warning .lui-callout-label { color: var( --wp--preset--color--warning ); } .lui-callout.is-tip { border-left-color: var( --wp--preset--color--tip ); background: color-mix( in srgb, var( --wp--preset--color--tip ) 7%, var( --wp--preset--color--base ) ); } .lui-callout.is-tip .lui-callout-label { color: var( --wp--preset--color--tip ); } /* Alt-Beiträge (bis in aktuelle Artikel hinein, 56 Beiträge betroffen) markieren Hinweis-/Update-Absätze manuell mit einer WordPress-Standard- Palettenfarbe statt der theme-eigenen .lui-callout-Klasse – jeder Beitrag in eigenen, teils uneinheitlichen Farbtönen. Statt jeden einzeln zu bearbeiten, bilden wir die dabei verwendeten Kernfarben hier automatisch auf denselben Callout-Stil ab. Rein optisch, der Beitragsinhalt (Klassen) bleibt unverändert – funktioniert daher auch für zukünftige Beiträge mit derselben Angewohnheit. */ .lui-article-body p[class*='has-pale-cyan-blue-background-color'], .lui-article-body p[class*='has-cyan-bluish-gray-background-color'], .lui-article-body p[class*='has-vivid-red-background-color'], .lui-article-body p[class*='has-vivid-green-cyan-background-color'], .lui-article-body p[class*='has-light-green-cyan-background-color'], .lui-article-body p[class*='has-luminous-vivid-amber-background-color'], .lui-article-body p[class*='has-luminous-vivid-orange-background-color'] { border-left: 3px solid var( --wp--preset--color--info ); border-radius: 0 6px 6px 0; padding: 1rem 1.25rem !important; margin: 1.75rem 0; background: color-mix( in srgb, var( --wp--preset--color--info ) 7%, var( --wp--preset--color--base ) ) !important; color: inherit !important; } .lui-article-body p[class*='has-vivid-red-background-color'] { border-left-color: var( --wp--preset--color--warning ); background: color-mix( in srgb, var( --wp--preset--color--warning ) 7%, var( --wp--preset--color--base ) ) !important; } .lui-article-body p[class*='has-luminous-vivid-amber-background-color'], .lui-article-body p[class*='has-luminous-vivid-orange-background-color'] { border-left-color: var( --wp--preset--color--warning ); background: color-mix( in srgb, var( --wp--preset--color--warning ) 7%, var( --wp--preset--color--base ) ) !important; } .lui-article-body p[class*='has-vivid-green-cyan-background-color'], .lui-article-body p[class*='has-light-green-cyan-background-color'] { border-left-color: var( --wp--preset--color--tip ); background: color-mix( in srgb, var( --wp--preset--color--tip ) 7%, var( --wp--preset--color--base ) ) !important; } /* Der Absatztext wird oben per color:inherit lesbar – Links darin waren im alten Editor aber oft zusätzlich über eine eigene "Element"-Linkfarbe (has-link-color, WordPress erzeugt dafür eine eindeutig nummerierte .wp-elements-N a-Regel) auf Weiß gesetzt, passend zum ursprünglich satten Hintergrund. Bei unserem deutlich helleren Callout-Hintergrund wäre das kaum noch lesbar – hier unabhängig von der jeweiligen Element- Nummer auf die reguläre Akzentfarbe zurückgesetzt. */ .lui-article-body p[class*='has-pale-cyan-blue-background-color'] a, .lui-article-body p[class*='has-cyan-bluish-gray-background-color'] a, .lui-article-body p[class*='has-vivid-red-background-color'] a, .lui-article-body p[class*='has-vivid-green-cyan-background-color'] a, .lui-article-body p[class*='has-light-green-cyan-background-color'] a, .lui-article-body p[class*='has-luminous-vivid-amber-background-color'] a, .lui-article-body p[class*='has-luminous-vivid-orange-background-color'] a { color: var( --wp--preset--color--accent ) !important; text-decoration: underline; } /* Inline-Code im Fließtext (nicht die Code-Block-Anzeige, siehe theme.json core/code). */ :where( .wp-block-post-content, .entry-content ) :where( p, li, h1, h2, h3, h4, h5, h6 ) code { font-family: var( --wp--preset--font-family--mono ); font-size: 0.875em; background: var( --wp--preset--color--base-2 ); color: var( --wp--preset--color--accent-dark ); padding: 0.15em 0.4em; border-radius: 4px; } /* Marken-Element: das "L" aus dem Logo, per CSS-Maske einfärbbar --------- */ /* Wird als wiederkehrendes Grafikelement genutzt: Eyebrow-Icons vor Sektionstiteln, Aufzählungspunkte in der Sidebar, Wasserzeichen in Footer/Zitaten, Leer-Zustände. Eine einzige SVG-Datei (assets/images/ l-glyph.svg) statt – wie zuvor – vier separat handkodierter Data-URIs mit je fest einprogrammierter Farbe: Als Maske eingebunden lässt sich die Form an jeder Stelle einfach über background-color/opacity gemäß dem jeweiligen Farb-Token einfärben, auch pro Dark-Mode-Override. */ .lui-section-title::before, .lui-sidebar .wp-block-categories li::before, .lui-on-dark::after, .wp-block-query-no-results::before, .wp-block-quote::after { -webkit-mask-image: url( '../images/l-glyph.svg' ); mask-image: url( '../images/l-glyph.svg' ); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .lui-section-title { display: flex; align-items: center; gap: 0.5em; } .lui-section-title::before { content: ''; display: inline-block; width: 0.7em; height: 0.7em; flex-shrink: 0; background-color: var( --wp--preset--color--accent ); } /* Kategorie-Spotlight-Boxen: eigene Akzentfarbe je Sektion über die Custom Property --lui-spotlight-color. Bewusst per CSS-Klasse gesetzt und NICHT per Inline-style="" am Block: Ein Inline-Style ohne passendes Block- Attribut lässt den Block-Editor den Block als "ungültig" melden, weil er sich beim Nachbauen aus den gespeicherten Attributen nicht reproduzieren lässt. Eine neue Kategorie-Box braucht dadurch nur eine zusätzliche Klasse + eine Zeile CSS (siehe .is-android unten) statt einer kompletten Regel-Kopie wie früher. Ohne eigene Klasse greift automatisch die normale Akzentfarbe. */ .lui-category-spotlight { border-top: 3px solid var( --lui-spotlight-color, var( --wp--preset--color--accent ) ); } .lui-category-spotlight .lui-section-title::before { background-color: var( --lui-spotlight-color, var( --wp--preset--color--accent ) ); } .lui-category-spotlight.is-android { --lui-spotlight-color: #0099ff; } /* "Weitere Themen" (Startseite): je eine Kachel für Allgemein, Hardware, Netz-/Politik, Webdesign/-hosting. Anders als bei .lui-category-spotlight oben (eine Akzentfarbe für die ganze Sektion, da dort nur EINE Kategorie gezeigt wird) trägt hier jede Kachel ihre EIGENE Kategoriefarbe – dieselben Farbwerte wie beim Bild-Platzhalter weiter oben (.category-hardware etc.). Farbklasse bewusst DIREKT am Label (lui-topic-{slug}, siehe templates/front-page.html), nicht wie zunächst versucht über ".category-{slug} .lui-topic-label": Das Label steht als eigener Absatz VOR dem jeweiligen Query-Loop-Block, WordPress hängt die category-{slug}- Klasse aber nur an das
  • INNERHALB der Query-Loop-Ausgabe – Label und category-Klasse haben in diesem Aufbau gar keine Vorfahre-Nachfahre- Beziehung, der Ahnen-Selektor konnte hier also nie greifen. Der Farbbalken sitzt als Unterstreichung UNTER dem Text-Label (nicht als Rahmen am Kachelbild selbst) – dort sah er optisch wie eine unpassende Kante über dem Beitragsbild aus. */ .lui-topic-label { font-family: var( --wp--preset--font-family--mono ); font-size: var( --wp--preset--font-size--small ); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 0.75em; padding-bottom: 0.5em; border-bottom: 3px solid var( --wp--preset--color--contrast-2 ); } .lui-topic-label a { color: inherit; text-decoration: none; } .lui-topic-allgemein { color: #52525b; border-bottom-color: #52525b; } .lui-topic-hardware { color: #b45309; border-bottom-color: #b45309; } .lui-topic-politik { color: #2563eb; border-bottom-color: #2563eb; } .lui-topic-webhosting { color: #0693e3; border-bottom-color: #0693e3; } /* Bug: Im Querformat auf Smartphones standen die 4 "Weitere Themen"-Kacheln untereinander statt nebeneinander, obwohl für dieselbe Bildschirmbreite quer genug Platz für 2 pro Zeile da wäre – anders als bei den Grid-basierten 4er-Reihen weiter oben ("Aus der Kategorie GNU/Linux" / Android, wp:post-template mit layout:grid), die erst deutlich schmaler auf weniger Spalten reduzieren. Ursache: Diese Kacheln stecken in vier wp:column-Blöcken (core/columns), und Core selbst erzwingt für JEDEN wp:columns-Block ohne "isStackedOnMobile":false einen kompletten Ein-Spalten-Stack bereits ab 781px (siehe wp-includes/blocks/columns/ style.min.css) – deutlich breiter als die 599px-Schwelle, die der Rest der Seite für "Smartphone" verwendet. Landscape-Handys liegen oft genau dazwischen (~700–780px CSS-Breite) und fielen dadurch schon unter Cores Stack-Regel, lange bevor die Seite selbst eng wird. Fix: In genau dieser Lücke (600–781px) alle 4 Kacheln in EINER Zeile erzwingen – wie bei den Grid-Sektionen darüber, und wie vom Nutzer bestätigt (4x1 statt 2x2). Echte Stapelung bleibt wie überall sonst auf der Seite erst unterhalb von 600px. Reines "25%" reichte dabei nicht: Der blockGap zwischen den Spalten (var:preset|spacing|30, siehe wp:columns-Attribut in front-page.html) zählt nicht zur Prozentbreite dazu – vier Kacheln à 25% PLUS drei Gaps dazwischen sind dadurch minimal breiter als die Zeile, wodurch der Flex-Umbruch trotzdem umbrach. Die drei Gaps (zwischen 4 Kacheln) müssen daher per calc() anteilig von jeder Kachel abgezogen werden. */ @media ( min-width: 600px ) and ( max-width: 781px ) { .lui-topic-row .wp-block-columns > .wp-block-column { flex-basis: calc( 25% - ( 3 * var( --wp--preset--spacing--30 ) / 4 ) ) !important; } } /* Vorschläge bei leerer Suche ([lui_search_suggestions], siehe functions.php) – im selben Karten-Stil wie "Ähnliche Beiträge" unter Artikeln (.lui-related-card, siehe templates/single.html), als festes 2x2-Raster statt der dortigen responsiven Spaltenzahl: Hier gibt es klar getrennt GENAU zwei Vier-Karten-Gruppen (Meistgelesen/Zum Entdecken), 2x2 macht diese Gruppierung visuell sofort erkennbar. Unter 600px (wie bei WordPress' eigenem Grid-Layout, siehe post-template/style.min.css) einspaltig, damit die Karten auf schmalen Bildschirmen nicht gequetscht werden. */ .lui-search-suggestions { margin-top: var( --wp--preset--spacing--50 ); /* .wp-block-query-no-results (siehe "Leerer Zustand" weiter unten) setzt text-align:center für den "keine Beiträge gefunden"-Hinweistext direkt darüber – dieser Block hier sitzt im selben Container und hat das bisher geerbt, wodurch Titel/Auszug in den Karten mittig statt wie beim Vorbild linksbündig standen. */ text-align: left; } .lui-search-suggestions-grid { display: grid; grid-template-columns: repeat( 2, 1fr ); gap: var( --wp--preset--spacing--30 ); margin-top: 0.75em; } @media ( max-width: 600px ) { .lui-search-suggestions-grid { grid-template-columns: 1fr; } } /* Bild-Platzhalter (.lui-media-frame / .lui-hero ohne Beitragsbild, siehe dort): Farbe je Kategorie über --lui-fallback-color, gesetzt anhand der category-{slug}-Klasse, die WordPress automatisch an das umschließende
  • jedes Beitrags in einer Query hängt. GNU/Linux und Allgemein bleiben bewusst ohne eigenen Eintrag (neutrales Anthrazit als Standard-/Marken- Look, da GNU/Linux die weit überwiegende Mehrheit der Beiträge stellt). */ .category-android .lui-media-frame:not( :has( img ) ), .category-android .lui-hero:not( :has( img ) ) { --lui-fallback-color: #0099ff; } .category-hardware .lui-media-frame:not( :has( img ) ), .category-hardware .lui-hero:not( :has( img ) ) { --lui-fallback-color: #b45309; } .category-politik .lui-media-frame:not( :has( img ) ), .category-politik .lui-hero:not( :has( img ) ) { --lui-fallback-color: #2563eb; } .category-news .lui-media-frame:not( :has( img ) ), .category-news .lui-hero:not( :has( img ) ) { --lui-fallback-color: #dc2626; } .category-raspberry-pi .lui-media-frame:not( :has( img ) ), .category-raspberry-pi .lui-hero:not( :has( img ) ) { --lui-fallback-color: #c51a4a; } .category-spass .lui-media-frame:not( :has( img ) ), .category-spass .lui-hero:not( :has( img ) ) { --lui-fallback-color: #9b51e0; } .category-sport-outdoor .lui-media-frame:not( :has( img ) ), .category-sport-outdoor .lui-hero:not( :has( img ) ) { --lui-fallback-color: #16a34a; } .category-webhosting .lui-media-frame:not( :has( img ) ), .category-webhosting .lui-hero:not( :has( img ) ) { --lui-fallback-color: #0693e3; } .category-webos .lui-media-frame:not( :has( img ) ), .category-webos .lui-hero:not( :has( img ) ) { --lui-fallback-color: #6366f1; } /* Verlinkter Sektionstitel + "Mehr"-Link (Kategorie-Boxen, Neueste Artikel) */ .lui-section-title a { color: inherit; text-decoration: none; } .lui-section-title a:hover { color: var( --wp--preset--color--accent ); } .lui-category-spotlight .lui-section-title a:hover { color: var( --lui-spotlight-color, var( --wp--preset--color--accent ) ); } .lui-more-link { font-family: var( --wp--preset--font-family--mono ); font-size: var( --wp--preset--font-size--small ); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; } .lui-more-link a { color: var( --wp--preset--color--accent ); text-decoration: none; } .lui-more-link a:hover { text-decoration: underline; } .lui-category-spotlight .lui-more-link a { color: var( --lui-spotlight-color, var( --wp--preset--color--accent ) ); } /* Barrierefreiheit: Skip-Link -------------------------------------------- */ .skip-link { background: var( --wp--preset--color--contrast ); color: var( --wp--preset--color--base ); padding: 0.75em 1.25em; position: fixed; top: -100px; left: 1rem; z-index: 100000; transition: top 0.2s ease; border-radius: 0 0 4px 4px; } .skip-link:focus { top: 0; } :focus-visible { outline: 3px solid var( --wp--preset--color--accent ); outline-offset: 2px; } /* Zweispaltige Ansichten (Artikel/Blog/Archiv + Sidebar): die Breite kommt jetzt direkt über die native "align":"wide"-Klasse (der äußere
    ist dafür "constrained", exakt wie .lui-header um .lui-header-row) – eine eigene max-width-Formel daneben hatte zuvor bei bestimmten Breiten ein paar Pixel abweichende Werte erzeugt (Header und Inhalt liefen dadurch leicht auseinander), weil sie root-padding anders berücksichtigte als WordPress' eigener alignwide-Mechanismus. */ @media ( max-width: 781px ) { .lui-two-col { flex-wrap: wrap !important; } } /* Artikel-/Listenspalte: proportionaler Flex-Anteil statt festem Breiten- deckel, damit Inhalt + Seitenleiste zusammen die volle Breite des Headers (wide-size) ausfüllen, nicht nur der äußere Container. Bewusst kein eigenes max-width auf inneren Blöcken mehr – nur hier, an einer Stelle. */ .lui-article-col { flex: 1 1 68%; min-width: 0; } /* Überschreibt Gutenbergs eigene, per verticalAlignment:"top" erzeugte Layout-Klasse (align-items:flex-start): Die Sidebar-Spalte soll auf die volle Höhe der (meist deutlich längeren) Artikelspalte gestreckt werden. Nötig, damit der "Blog unterstützen"-Kasten (position: sticky, siehe Sidebar-Regeln weiter unten) einen Rahmen hat, der bis zum Artikelende reicht – sonst würde er schon nach der eigenen, kurzen Sidebar-Höhe "andocken" statt bis zum Footer mitzuscrollen. Sichtbar ändert das nichts: Die einzelnen Sidebar-Kästen bleiben weiterhin oben ausgerichtet. */ .lui-two-col { align-items: stretch !important; } /* align-items:stretch allein reicht nicht: Zwischen dem gestreckten Flex-Item (.lui-sidebar-col, className am wp:group um den Sidebar-Template-Part in single.html/page.html) und dem eigentlichen .lui-sidebar liegt noch WordPress' eigener .wp-block-template-part-Wrapper. Ein Block-Kind erbt die gestreckte Höhe seines Flex-Eltern-Elements nicht automatisch (nur der Flex-Item selbst bekommt eine definierte Höhe) – die Kette muss über height:100% manuell bis zu .lui-sidebar durchgereicht werden, sonst bricht der sticky-Kontext schon bei der kurzen, natürlichen Sidebar-Höhe ab. */ .lui-sidebar-col > .wp-block-template-part, .lui-sidebar-col > .wp-block-template-part > .lui-sidebar { height: 100%; } /* Container Query: horizontale Artikel-Karte (Bild links, Text rechts) ----- Dieselbe Karte steckt in vier Templates (Startseite "Neueste Artikel", Blog-Übersicht, Archiv, Suche) mal neben einer Sidebar, mal ohne – die verfügbare Breite hängt also vom jeweiligen Template ab, nicht von der Viewport-Breite. Eine Viewport-Media-Query könnte das nicht abbilden; die Karte fragt daher ihre EIGENE gerenderte Breite ab und bricht bei echter Enge selbst um, unabhängig davon, wo sie eingebaut ist. */ /* Bild/Text-Aufteilung der Karte: als CSS-Regel statt über WordPress' Child-Layout-Attribute (style.layout.selfStretch/flexSize). Letzteres erzeugte auf dieser WP-Version beim Zurückserialisieren im Editor eine andere style="" als gespeichert -> "ungültiger Inhalt" bei jeder Karte der Query (das Post-Template steckt in jedem Ergebnis identisch). */ /* flex-shrink:0 + width (zusätzlich zu flex-basis) verhindert, dass die Bildspalte je nach Textlänge von Titel/Auszug im jeweiligen Beitrag unterschiedlich stark schrumpft – ohne das hätte z. B. ein Beitrag mit langem Titel ein sichtbar schmaleres Thumbnail als einer mit kurzem. */ .lui-list-card > .lui-media-frame { flex-basis: 240px; flex-shrink: 0; width: 240px; } .lui-list-card-body { flex-grow: 1; } /* Nutzerwunsch: Etwas mehr Abstand zwischen Thumbnail und Text (Titel/ Meta/Auszug) – einheitlich überall, wo .lui-list-card zum Einsatz kommt (Blog-Übersicht, Kategorie-/Tag-/Autor-Archive, Suche, "Neueste Artikel" auf der Startseite: home.html, index.html, archive.html, author.html, search.html, page-blog.html, front-page.html nutzen alle dieselbe Klasse mit identischem blockGap). Der Standard-Abstand kommt aus dem Block-Attribut "blockGap":"var:preset|spacing|20" (1rem) als WordPress-generierte, spezifitätsgleiche Regel – !important nötig, um ihn unabhängig von der Lade-Reihenfolge zuverlässig zu überschreiben, ohne alle sieben Templates einzeln anfassen zu müssen. */ .lui-list-card { gap: var( --wp--preset--spacing--30 ) !important; } /* Basis-Flex-Layout hier explizit statt nur über WordPress' generierte is-layout-flex-Klassen (die nur bei echten Gutenberg-Blöcken entstehen): [lui_search_suggestions] baut dieselbe Kartenklasse auch als reines PHP-HTML auf (siehe functions.php) und braucht die Flex-Anordnung daher unabhängig von Block-Editor-Attributen. */ .lui-related-card { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var( --wp--preset--spacing--20 ); } /* Textspalte explizit auf flex-grow schalten: Ohne eigenes flex-grow (Default 0) bestimmt allein der Inhalt ihre Breite statt den verbleibenden Platz in der Zeile auszufüllen – Titel/Auszug hätten dadurch ungleichmäßig schmal umgebrochen und wirkten "unsauber" statt wie beim Vorbild in templates/single.html sauber bis zum Kartenrand zu laufen. min-width:0 verhindert außerdem, dass ein einzelnes langes Wort im Titel die Spalte über die verfügbare Breite hinaus aufdrückt. margin-top:0 nimmt dem Titel den Standard-Absatz-Abstand einer Überschrift, damit er wirklich bündig mit der Bildoberkante beginnt statt sichtbar tiefer anzusetzen. margin-bottom:0 ebenso wichtig wie margin-top:0 – sonst bleibt trotz des knappen .lui-clamp-2-Abstands (0.25rem, siehe unten) eine große Lücke zwischen Titel und Auszug übrig, weil der Standard-Überschriftenabstand NACH dem Titel genauso groß ist wie DAVOR. */ .lui-related-card-body { flex: 1 1 0%; min-width: 0; } .lui-related-card-body .wp-block-post-title { margin-top: 0; margin-bottom: 0; } .lui-related-card > .lui-media-frame { flex-basis: 120px; flex-shrink: 0; width: 120px; } /* Datenschutzfreundliche Video-Vorschau (YouTube/Vimeo) --------------------- Ersetzt per PHP-Filter (lui_privacy_video_embed_facade()) den eigentlichen iframe durch dieses