/* * Beitragsuebersicht (/blog/) im TerraCom-Design. * * Diese Datei wird ausschliesslich auf der Beitragsuebersicht geladen * (siehe tc-blog-archive.php). Deshalb sind die Selektoren bewusst nicht * zusaetzlich auf eine Body-Klasse eingegrenzt -- der traegt hier * keine "blog"-Klasse, ein solcher Praefix wuerde ins Leere laufen. * * Tatsaechliche Struktur von Astra: * div.ast-row > article > div.ast-article-inner > div.post-content * * Wichtig: Eine Theme-Regel faerbt den Titel-Link auf Archivseiten weiss * (weiss auf weissem Karton = unsichtbar). Das wird hier korrigiert. */ :root { --tc-pink: #e6007e; --tc-ink: #151616; --tc-ink2: #232529; --tc-grey: #65696F; --tc-line: #E6E4E4; --tc-soft: #F6F6F6; } /* ---------------------------------------------------------- Kopfbereich */ .tc-blog-kopf { text-align: center; max-width: 760px; margin: 0 auto 56px; padding: 8px 20px 0; } .tc-blog-kicker { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--tc-pink); margin: 0 0 12px; } .tc-blog-titel { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: 54px; line-height: 1.08; color: var(--tc-ink); margin: 0 0 18px; text-wrap: balance; } .tc-blog-einleitung { font-size: 19px; line-height: 1.6; color: var(--tc-grey); margin: 0; text-wrap: balance; } .tc-blog-kopf::after { content: ""; display: block; width: 56px; height: 3px; background: var(--tc-pink); margin: 32px auto 0; } /* ------------------------------------------------------------- Raster */ .site-main .ast-row { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1240px; margin: 0 auto !important; padding: 0 24px !important; } .site-main .ast-row > article { width: 100% !important; max-width: none !important; flex: none !important; margin: 0 !important; padding: 0 !important; display: flex; } .site-main .ast-grid-common-col { width: 100% !important; max-width: none !important; flex: 1 1 auto !important; padding: 0 !important; margin: 0 !important; } /* -------------------------------------------------------------- Kachel */ .ast-article-inner { display: flex !important; flex-direction: column; width: 100%; background: #fff; border: 1px solid var(--tc-line) !important; border-radius: 10px; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .ast-article-inner:hover { border-color: #D6D3D3 !important; box-shadow: 0 14px 34px -18px rgba(21, 22, 22, .28); transform: translateY(-3px); } .ast-article-inner > .post-content { display: flex; flex-direction: column; flex: 1 1 auto; padding: 0 !important; /* sonst polstern Astra und wir doppelt */ } .ast-article-inner { padding: 0 !important; } /* Bild */ .ast-blog-featured-section { margin: 0 !important; order: -1; } .ast-blog-featured-section img, .post-thumb-img-content img { display: block; width: 100% !important; height: auto !important; margin: 0; /* Kein object-fit/aspect-ratio: Die Beitragsbilder sind bereits 1200x630, ein Zuschnitt wuerde nur den Titel im Bild abschneiden. */ } /* Innenabstaende unterhalb des Bildes */ .ast-taxonomy-container, .entry-title, .ast-excerpt-container { padding-left: 26px !important; padding-right: 26px !important; } /* Kategorie -- Astra gibt sie selbst aus, wir gestalten sie nur */ .ast-taxonomy-container.cat-links { display: block !important; margin: 24px 0 8px !important; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; } .ast-taxonomy-container.cat-links a { color: var(--tc-pink) !important; text-decoration: none; } .ast-taxonomy-container.cat-links a:hover { text-decoration: underline; } /* Titel -- das Theme faerbt den Link sonst weiss auf weiss */ .entry-title { font-family: 'Barlow Semi Condensed', sans-serif !important; font-size: 25px !important; line-height: 1.2 !important; margin: 0 0 12px !important; } .entry-title a { color: var(--tc-ink) !important; text-decoration: none; transition: color .15s ease; } .entry-title a:hover, .entry-title a:focus { color: var(--tc-pink) !important; } /* Autor/Datum von Astra ausblenden -- steht in der Fusszeile */ .entry-meta, .ast-blog-meta-container { display: none !important; } /* Auszug */ .ast-excerpt-container { flex: 1 1 auto; display: flex; flex-direction: column; padding-bottom: 0 !important; } .ast-excerpt-container p { color: var(--tc-grey); font-size: 16px; line-height: 1.6; margin: 0 0 20px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .ast-excerpt-container .read-more, .ast-excerpt-container .ast-button { display: none !important; } /* Fusszeile */ .tc-karte-fuss { margin-top: auto; padding: 16px 0 22px; /* Der Auszug-Container polstert seitlich bereits */ border-top: 1px solid var(--tc-line); display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .tc-karte-info { font-size: 13px; color: var(--tc-grey); } .tc-karte-link { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: .03em; color: var(--tc-pink) !important; text-decoration: none; white-space: nowrap; } .tc-karte-link span { display: inline-block; transition: transform .15s ease; } .ast-article-inner:hover .tc-karte-link span, .tc-karte-link:hover span { transform: translateX(4px); } /* Beitraege ohne Bild bekommen einen ruhigen Platzhalter-Streifen */ .ast-no-thumb .post-content::before { content: ""; display: block; height: 6px; background: var(--tc-pink); } .ast-pagination { margin-top: 48px; } /* -------------------------------------------------------------- Mobil */ @media (max-width: 1100px) { .site-main .ast-row { grid-template-columns: repeat(2, 1fr); gap: 26px; } .tc-blog-titel { font-size: 42px; } } @media (max-width: 720px) { .site-main .ast-row { grid-template-columns: 1fr; gap: 24px; } .tc-blog-kopf { margin-bottom: 36px; } .tc-blog-titel { font-size: 32px; } .tc-blog-einleitung { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { .ast-article-inner, .tc-karte-link span { transition: none !important; } .ast-article-inner:hover { transform: none; } }