/* ============================================================================= Blog: magazine index (home.php), single post, archives, search results. ========================================================================== */ .blog-index { padding-block: clamp(2.5rem, 6vw, 4.5rem); } /* Events archive banner — single landscape photo between the "Events" heading and the list of events (see archive.php). */ .events-banner { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: clamp(2rem, 5vw, 3rem); } .events-banner__image { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; } /* ----------------------------------------------------------------------- Featured post banner -------------------------------------------------------------------- */ .featured-post { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-bottom: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--color-border); } .featured-post__image { display: block; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 10; } .featured-post__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .featured-post__image:hover img { transform: scale(1.04); } .featured-post__category { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 0.75rem; } .featured-post__title { font-family: var(--font-body); margin-bottom: 0.5rem; } .featured-post__title a { color: var(--color-dark); } .featured-post__title a:hover { color: var(--color-primary); } .featured-post__meta { font-size: 0.85rem; color: var(--color-accent); display: flex; gap: 0.5rem; margin-bottom: 1rem; } .featured-post__excerpt { color: var(--color-dark-soft); } /* ----------------------------------------------------------------------- Magazine grid (shared .post-grid / .post-card defined in main.css) -------------------------------------------------------------------- */ .post-grid--blog { margin-bottom: clamp(2rem, 5vw, 3rem); } /* ----------------------------------------------------------------------- Single post layout -------------------------------------------------------------------- */ /* Named .single-post-page rather than .single-post deliberately — WordPress core adds the literal class "single-post" to for every singular post (via body_class()), so using that same name on this
element made its own padding-block leak onto too, adding unwanted whitespace above the header and below the footer. Same root cause as the earlier .page-template/page-content-wrap fix. */ .single-post-page { padding-block: clamp(2.5rem, 6vw, 4.5rem); } .single-post__layout { display: block; max-width: 760px; } .single-post__header { text-align: center; margin-top: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 2rem; } .single-post__category { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 0.75rem; } .single-post__title { margin-bottom: 0.75rem; } .single-post__meta { font-size: 0.9rem; color: var(--color-accent); display: inline-flex; gap: 0.5rem; } .single-post__thumbnail { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 2.5rem; aspect-ratio: 16 / 9; } .single-post__thumbnail img { width: 100%; height: 100%; object-fit: cover; } /* Prose typography for post content */ .single-post__content { font-size: 1.05rem; line-height: 1.8; color: var(--color-dark-soft); } .single-post__content > * + * { margin-top: 1.25em; } .single-post__content h2, .single-post__content h3, .single-post__content h4, .single-post__content h5, .single-post__content h6 { font-family: var(--font-body); color: var(--color-dark); margin-top: 2em; } .single-post__content blockquote { border-left: 3px solid var(--color-primary); padding-left: 1.5rem; font-style: italic; font-family: var(--font-heading); font-size: 1.2rem; color: var(--color-dark); } .single-post__content img { max-width: 100%; height: auto; border-radius: var(--radius-lg); } /* Defensive: an editor could paste in a wide table or code block that's naturally wider than a phone screen — scope any such overflow to a local scrollbar on the element itself rather than the whole page. */ .single-post__content table { display: block; max-width: 100%; overflow-x: auto; } .single-post__content pre { max-width: 100%; overflow-x: auto; } .single-post__content a { text-decoration: underline; text-decoration-color: var(--color-accent); } .single-post__content a:hover { text-decoration-color: var(--color-primary); } .page-links { margin-top: 2rem; font-weight: 600; } /* Tags */ .single-post__tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2.5rem; } .single-post__tag { font-size: 0.8rem; font-weight: 500; padding: 0.4rem 1rem; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-dark-soft); transition: color var(--transition-base), border-color var(--transition-base); } .single-post__tag:hover { color: var(--color-primary); border-color: var(--color-primary); } /* Prev/Next post navigation */ .single-post__navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--color-border); } .single-post__nav-next { text-align: right; } .single-post__navigation a { color: var(--color-dark); font-family: var(--font-heading); font-size: 1.05rem; } .single-post__navigation a:hover { color: var(--color-primary); } .single-post__nav-label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); font-family: var(--font-body); margin-bottom: 0.3rem; } /* ----------------------------------------------------------------------- Responsive -------------------------------------------------------------------- */ @media (max-width: 900px) { .featured-post { grid-template-columns: 1fr; } } @media (max-width: 600px) { .single-post__navigation { grid-template-columns: 1fr; } .single-post__nav-next { text-align: left; } }