/* ========================================================================== BLOG.CSS — Blog-spezifische Komponenten Gegenstueck zur style.css (dort: sitewide Chrome — Tokens, Header, Nav, Breadcrumbs, Footer, auf JEDER Seite inkl. 404 geladen). Diese Datei buendelt alles, was NUR auf Content-Seiten vorkommt: Sidebar-Boxen, Blog-Columns-Layout, Post-Meta, Kommentare, Content-Bilder/-Tabellen, Pagination, Social-Share. Bedingtes Enqueue in functions.php — ueberall AUSSER auf 404.html (dort kommt keine dieser Klassen vor). Analog zur front-page.css/cities-az.css-Konvention des Haupt-Themes: eigene Datei statt alles in einer monolithischen style.css. ========================================================================== */ /* ========================================================================== SIDEBAR – Shared component styles (mygc-sb-*) Box-Optik identisch zum Haupt-Theme (dort per Shortcode gerendert); auf dem Blog kommen die Boxen aus parts/sidebar-blog.html. ========================================================================== */ /* Outer box for each sidebar section */ .mygc-sb-section { background: var(--wp--preset--color--sidebar-box); border-radius: 4px; padding: 0.625rem 0.75rem 0.75rem; box-sizing: border-box; } /* Section label (

) — Abweichungen von der h3-Basisregel: kleinere font-size + knappe margin (erstes Element in der Box). */ .mygc-sb-title { font-size: var(--wp--preset--font-size--base); color: #000; margin: 0 0 0.375rem; } /* ========================================================================== BLOG – Sidebar (parts/sidebar-blog.html) Eine Spalte gestapelter .mygc-sb-section-Boxen (Newest Posts, Topics, Tags); Abstand zwischen den Boxen liefert der globale blockGap (1.5rem) des Flow-Layouts. Sticky wie die Sidebars des Haupt-Themes. Alle drei Boxen kommen aus Shortcodes (functions.php), nicht aus den core-Bloecken — Begruendung siehe dortiger Kommentar (volle Klickflaeche je Zeile + automatisches Ausblenden leerer Boxen). ========================================================================== */ .mygc-sidebar-blog { top: 1rem !important; /* override inline top:0 (Block-Editor-Sticky) */ } /* Tip: falls die Admin-Bar bei eingeloggten Redakteuren die Sidebar verdeckt, ergänzen: .admin-bar .mygc-sidebar-blog { top: calc(32px + 1rem) !important; } */ /* On mobile the wp:columns block stacks vertically — disable sticky */ @media (max-width: 781px) { .mygc-sidebar-blog { position: static !important; top: auto !important; } } /* Innerhalb einer Box: den globalen Flow-blockGap (1.5rem, ausgeliefert via :root :where(.is-layout-flow) > *, Spezifitaet 0,1,0) neutralisieren — .mygc-sb-title bringt seinen knappen Abstand selbst mit. Elevated specificity (0,2,0) statt !important (siehe Haupt-Theme-Learning zu global-styles-inline-css). */ .mygc-sidebar-blog .mygc-sb-section > * { margin-block-start: 0; } /* Newest Posts + Topics: eigenes Markup ([mygc_latest_posts_box] / [mygc_categories_box] in functions.php), Klasse .mygc-sb-list — identisch zur Sidebar-Link-Liste des Haupt-Themes (dort: sidebar-place.html / sidebar-region.html). Der ist bewusst display:block: er füllt damit die GESAMTE Zeile (nicht nur den Text) und ist dadurch auf voller Breite klickbar UND hover-aktiv — kein Umweg mehr über ein li:hover-Konstrukt nötig, da der Zähler "(26)" beim Categories-Markup jetzt INNERHALB des liegt statt danach. */ .mygc-sb-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.0625rem; } .mygc-sb-list li { line-height: 1.4; } .mygc-sb-list a { display: block; padding: 0.1875rem 0.375rem; margin-inline: -0.375rem; /* Innenabstand optisch neutralisieren, Text bleibt an der Boxkante ausgerichtet */ border-radius: 3px; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--link-blue); text-decoration: underline; transition: background-color 0.15s ease; } .mygc-sb-list a:hover { text-decoration: none; color: #0000cc; background-color: rgba(0, 0, 0, 0.06); } /* Topics-Variante: Label + Zähler in einer Zeile, Zähler DIREKT hinter dem Label (kein justify-content:space-between — das hätte den Zähler an den rechten Rand der Box gedrückt, unabhängig von der Textlänge). */ .mygc-sb-list--categories a { display: flex; align-items: baseline; gap: 0.3rem; text-decoration: none; } .mygc-sb-list--categories .mygc-sb-label { text-decoration: underline; } .mygc-sb-list--categories a:hover .mygc-sb-label { text-decoration: none; } .mygc-sb-list--categories .mygc-sb-count { color: var(--wp--preset--color--politics-gray); font-size: var(--wp--preset--font-size--x-small); flex-shrink: 0; } /* Tag-Cloud: Fliesstext-Wolke. Markup kommt jetzt vom [mygc_tag_cloud_box]- Shortcode (functions.php), nicht mehr vom core/tag-cloud-Block — der Shortcode blendet die ganze Box aus, solange keine Tags vergeben sind (leere Box mit Titel, aber ohne Cloud, waere sonst die Folge). Klasse .wp-block-tag-cloud bewusst beibehalten (Shortcode gibt sie selbst aus), daher hier keine CSS-Aenderung noetig. Schriftgroessen kommen weiterhin als Inline-Style vom generierten Markup (smallest/largest in der Shortcode-Funktion). */ .mygc-sidebar-blog .wp-block-tag-cloud { margin: 0; line-height: 1.7; } .mygc-sidebar-blog .wp-block-tag-cloud a { color: var(--wp--preset--color--link-blue); text-decoration: underline; white-space: nowrap; } .mygc-sidebar-blog .wp-block-tag-cloud a:hover { text-decoration: none; color: #0000cc; } /* ========================================================================== BLOG – Post-Meta ("Filed in …", "Tags: …") Genutzt auf home.html (unter jedem Post-Titel) und single.html. Margin-Anpassung mit Spezifitaet (0,2,0) gegen den globalen Flow-blockGap (0,1,0) — rueckt die Zeile dicht an den Titel darueber. ========================================================================== */ .mygc-post-meta { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--politics-gray); } .wp-block-post-terms.mygc-post-meta { margin-block-start: 0.25rem; } /* ========================================================================== BLOG – Kommentare (single.html) core/comments mit comment-template (parts siehe single.html). Kommentar-Datum bewusst NICHT gerendert (Posts sind evergreen, letzter Post 2012 — analog zur Datums-Entfernung an den Posts selbst). ========================================================================== */ .wp-block-comments { margin-top: var(--wp--preset--spacing--7); } /* Core rendert die Kommentarliste als
    */ .wp-block-comment-template { list-style: none; padding: 0; margin: 0; } .wp-block-comment-template li { border-top: 1px solid #e3e5e7; padding-block: var(--wp--preset--spacing--4); margin: 0; } /* Verschachtelte Antworten: eingerueckt, ohne Listenpunkte */ .wp-block-comment-template ol { list-style: none; padding-left: var(--wp--preset--spacing--6); margin: 0; } /* Avatar links, Textspalte rechts (flex-Group .mygc-comment) */ .mygc-comment { gap: var(--wp--preset--spacing--3); align-items: flex-start; } .mygc-comment-avatar img { border-radius: 4px; display: block; } .wp-block-comment-author-name { font-weight: 600; } /* Flow-blockGap (1.5rem) innerhalb der Kommentar-Textspalte verdichten — elevated specificity (0,2,0) gegen :root :where(.is-layout-flow) > * */ .mygc-comment .mygc-comment-body > * { margin-block-start: 0.25rem; } .mygc-comment .mygc-comment-body > :first-child { margin-block-start: 0; } .wp-block-comment-content p { margin-block: 0.25rem 0; } .wp-block-comment-reply-link { font-size: var(--wp--preset--font-size--small); } /* Kommentar-Formular (rendert nur, wenn Kommentare offen sind) */ .wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]), .wp-block-post-comments-form textarea { width: 100%; box-sizing: border-box; border: 1px solid #c5c8cc; border-radius: 4px; padding: 0.375rem 0.5rem; font-family: inherit; font-size: var(--wp--preset--font-size--small); } /* ========================================================================== CONTENT – IMAGES (identisch zum Haupt-Theme) ========================================================================== */ .wp-block-post-content img { max-width: 100%; height: auto; } .wp-block-post-content .wp-caption, .wp-block-post-content figcaption { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--politics-gray); } /* ========================================================================== CONTENT – TABLES (identisch zum Haupt-Theme) ========================================================================== */ .wp-block-post-content .wp-block-table table, .wp-block-post-content table { width: 100%; border-collapse: collapse; margin-block: 1rem; } .wp-block-post-content .wp-block-table td, .wp-block-post-content .wp-block-table th, .wp-block-post-content table td, .wp-block-post-content table th { padding: 0.5rem 0.75rem; border: 1px solid #e3e5e7; text-align: left; vertical-align: top; } .wp-block-post-content .wp-block-table thead th, .wp-block-post-content table thead th { background: var(--wp--preset--color--sidebar-box); font-weight: 600; } .wp-block-post-content .wp-block-table tbody tr:nth-child(even), .wp-block-post-content table tbody tr:nth-child(even) { background: #f9fafb; } /* Horizontal scroll container for wide tables on narrow screens */ .wp-block-post-content .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ========================================================================== QUERY PAGINATION (identisch zum Haupt-Theme; Begruendungen dort) ========================================================================== */ .wp-block-query-pagination .page-numbers { margin-inline: var(--wp--preset--spacing--1); } .wp-block-query-pagination .page-numbers.current { display: inline-block; padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3); background: var(--wp--preset--color--country-teal); color: #fff; border: 2px solid var(--wp--preset--color--country-teal); border-radius: 4px; line-height: 1.2; } /* ========================================================================== SOCIAL SHARE – patterns/social-share.php (identisch zum Haupt-Theme; der EMAIL SHARE DIALOG-Block entfaellt hier — auf dem Blog ist WP-EMail nicht installiert, der Email-Button faellt im Pattern automatisch auf mailto: zurueck.) ========================================================================== */ /* Wrapper: Label + button row side by side (wraps when space is tight) */ .mygc-social-share { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.875rem; padding: 1.25rem 0 0.25rem; padding-block: var(--wp--preset--spacing--6); } /* "Share:" label */ .mygc-share-label { font-weight: 600; white-space: nowrap; } /* Button list (horizontal, with wrap) */ .mygc-share-list { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } /* Rectangular share button (applies to both and