/* =====================================================================
DEBORAH HEINLEN PHOTOGRAPHY: BLOG POST STYLES
Every blog post links to this file, right after site.css:
Change something here and it changes on every blog post at once.
Colors come from the CONTROL PANEL at the top of site.css.
===================================================================== */
/* Pushes the page below the fixed header and nav */
.page-content { padding-top: calc(var(--header-h) + var(--nav-h)); }
/* =====================================================================
POST HERO
Title and intro on the left, photo on the right.
===================================================================== */
.post-hero {
display: flex;
align-items: stretch;
min-height: 70vh;
border-bottom: 1px solid var(--line-faint);
}
.post-hero-content {
flex: 0 0 50%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 5rem 6vw;
}
/* Photo width: change the 50% to make it wider or narrower */
.post-hero-image {
flex: 0 0 50%;
position: relative;
overflow: hidden;
}
.post-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
filter: saturate(0.85);
display: block;
}
/* Soft fade on the edge of the photo that meets the text.
Works whether the photo is placed first (left) or second (right) in the HTML. */
.post-hero-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to left, transparent 65%, var(--bg) 100%);
pointer-events: none;
}
.post-hero-image:first-child::after {
background: linear-gradient(to right, transparent 65%, var(--bg) 100%);
}
/* Post title: change the last clamp value to make it larger or smaller */
.post-hero-content h1 {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(2rem, 3.5vw, 3.2rem);
color: var(--text);
letter-spacing: 0.03em;
line-height: 1.15;
margin-bottom: 1.5rem;
}
/* Italic intro under the title */
.post-intro {
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
font-size: clamp(1.1rem, 1.6vw, 1.35rem);
color: var(--text);
line-height: 1.6;
letter-spacing: 0.02em;
}
/* =====================================================================
DATE AND CATEGORY TAG
Used in the post hero and the related article cards.
===================================================================== */
.post-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.5rem;
}
.post-date {
font-family: var(--font-sans);
font-weight: 200;
font-size: 0.72rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--text);
}
/* The small outlined category tag: "Tips", "Pricing", etc. */
.post-tag {
font-family: var(--font-sans);
font-weight: 300;
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text);
border: 1px solid var(--line-strong);
padding: 0.2rem 0.6rem;
}
/* =====================================================================
ARTICLE BODY
Inside :