/* Theme Name: Brendan W. Riley Theme URI: http://underscores.me/ Author: Brendan W. Riley Author URI: http://brendanwriley.com Description: Description Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: brendanwriley-com Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. Brendan W. Riley is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ @import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap'); /* * BWR Chapter Layout System * brendanwriley.com * * Add to your theme's style.css or enqueue as a separate stylesheet. * * Typography: Epilogue from Google Fonts * Import at the top of style.css or in : * @import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap'); * * Color palette: * --bwr-bg : #E8E6E1 warm neutral grey — the ground * --bwr-text : #1A1A1A near-black — no drama * --bwr-muted : #7A7772 mid-grey — secondary text, dates * --bwr-rule : #C8C5BF light rule — barely there * --bwr-accent : #4A5568 grey-blue — almost not a color * --bwr-white : #F5F3EF off-white — not pure */ /* ───────────────────────────────────────────── ROOT VARIABLES ───────────────────────────────────────────── */ :root { --bwr-bg: #E8E6E1; --bwr-text: #1A1A1A; --bwr-muted: #7A7772; --bwr-rule: #C8C5BF; --bwr-accent: #4A5568; --bwr-white: #F5F3EF; --bwr-font: 'Epilogue', sans-serif; --bwr-size-base: 1rem; /* 16px */ --bwr-size-sm: 0.875rem; /* 14px */ --bwr-size-lg: 1.125rem; /* 18px */ --bwr-size-xl: 1.5rem; /* 24px */ --bwr-size-2xl: 2.5rem; /* 40px */ --bwr-size-3xl: 4rem; /* 64px */ --bwr-leading: 1.65; --bwr-leading-tight: 1.2; --bwr-space-xs: 0.5rem; --bwr-space-sm: 1rem; --bwr-space-md: 2rem; --bwr-space-lg: 4rem; --bwr-space-xl: 8rem; } /* ───────────────────────────────────────────── BASE ───────────────────────────────────────────── */ body { background-color: var(--bwr-bg); color: var(--bwr-text); font-family: var(--bwr-font); font-size: var(--bwr-size-base); font-weight: 300; line-height: var(--bwr-leading); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { box-sizing: border-box; margin: 0; padding: 0; } a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--bwr-rule); transition: border-color 0.2s ease; } a:hover { border-color: var(--bwr-text); } img { max-width: 100%; height: auto; display: block; } /* ───────────────────────────────────────────── NAVIGATION Plain. Present. Not announcing itself. ───────────────────────────────────────────── */ .bwr-nav { display: flex; justify-content: space-between; align-items: baseline; padding: var(--bwr-space-md) var(--bwr-space-md); border-bottom: 1px solid var(--bwr-rule); } .bwr-nav__name { font-size: var(--bwr-size-sm); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: none; } .bwr-nav__links { display: flex; gap: var(--bwr-space-md); list-style: none; } .bwr-nav__links a { font-size: var(--bwr-size-sm); font-weight: 300; letter-spacing: 0.04em; border-bottom: none; color: var(--bwr-muted); transition: color 0.2s ease; } .bwr-nav__links a:hover, .bwr-nav__links a.current { color: var(--bwr-text); } /* ───────────────────────────────────────────── HOMEPAGE Photograph. "You are here." Chapter word. Nothing else. ───────────────────────────────────────────── */ .bwr-home { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; } .bwr-home__image { width: 100%; height: 70vh; object-fit: cover; filter: saturate(0.3) brightness(0.95); /* Desaturated — your register */ display: block; } .bwr-home__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: var(--bwr-space-lg) var(--bwr-space-md); max-width: 480px; } .bwr-home__statement { font-size: var(--bwr-size-xl); font-weight: 300; letter-spacing: -0.01em; line-height: var(--bwr-leading-tight); margin-bottom: var(--bwr-space-lg); } /* The current chapter word — one threshold */ .bwr-home__chapter-link { font-size: var(--bwr-size-sm); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bwr-muted); border-bottom: none; display: inline-flex; align-items: center; gap: var(--bwr-space-xs); transition: color 0.2s ease; } .bwr-home__chapter-link:hover { color: var(--bwr-text); } .bwr-home__chapter-link::after { content: '→'; font-size: var(--bwr-size-sm); transition: transform 0.2s ease; } .bwr-home__chapter-link:hover::after { transform: translateX(4px); } /* ───────────────────────────────────────────── CHAPTER PAGE Two-column collage. Film and post span full width. ───────────────────────────────────────────── */ .bwr-chapter { max-width: 1100px; margin: 0 auto; padding: var(--bwr-space-lg) var(--bwr-space-md); } /* Chapter header — the territory word */ .bwr-chapter__header { margin-bottom: var(--bwr-space-xl); } .bwr-chapter__word { font-size: var(--bwr-size-3xl); font-weight: 300; letter-spacing: -0.03em; line-height: 1; margin-bottom: var(--bwr-space-sm); } .bwr-chapter__territory { font-size: var(--bwr-size-base); font-weight: 300; color: var(--bwr-muted); max-width: 480px; line-height: var(--bwr-leading); } .bwr-chapter__label { font-size: var(--bwr-size-sm); font-weight: 300; color: var(--bwr-muted); letter-spacing: 0.06em; margin-top: var(--bwr-space-md); } /* The two-column collage grid */ .bwr-chapter__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bwr-space-md) var(--bwr-space-lg); align-items: start; } /* Films and posts break out of the two-column grid — full width */ .bwr-entry--film, .bwr-entry--post { grid-column: 1 / -1; } /* Natural column offset — right-column notes start slightly lower */ /* Apply .bwr-entry--offset to every other note for collage feel */ .bwr-entry--offset { margin-top: var(--bwr-space-lg); } /* ───────────────────────────────────────────── ENTRY — NOTE Lighter. Smaller. The observation. ───────────────────────────────────────────── */ .bwr-entry--note { padding-bottom: var(--bwr-space-md); border-bottom: 1px solid var(--bwr-rule); } .bwr-entry--note .bwr-entry__date { font-size: var(--bwr-size-sm); color: var(--bwr-muted); font-weight: 300; letter-spacing: 0.04em; margin-bottom: var(--bwr-space-xs); display: block; } .bwr-entry--note .bwr-entry__title { font-size: var(--bwr-size-base); font-weight: 400; line-height: var(--bwr-leading-tight); margin-bottom: var(--bwr-space-xs); } .bwr-entry--note .bwr-entry__excerpt { font-size: var(--bwr-size-sm); font-weight: 300; color: var(--bwr-muted); line-height: var(--bwr-leading); } .bwr-entry--note .bwr-entry__title a { border-bottom: none; } .bwr-entry--note .bwr-entry__title a:hover { color: var(--bwr-muted); } /* ───────────────────────────────────────────── ENTRY — POST (Monthly) Slightly larger. More breathing room. Full width. ───────────────────────────────────────────── */ .bwr-entry--post { padding: var(--bwr-space-lg) 0; border-top: 1px solid var(--bwr-rule); border-bottom: 1px solid var(--bwr-rule); /* Inset from column edges — signals depth */ padding-left: var(--bwr-space-lg); padding-right: var(--bwr-space-lg); } .bwr-entry--post .bwr-entry__label { font-size: var(--bwr-size-sm); font-weight: 300; color: var(--bwr-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--bwr-space-sm); display: block; } .bwr-entry--post .bwr-entry__title { font-size: var(--bwr-size-xl); font-weight: 300; letter-spacing: -0.01em; line-height: var(--bwr-leading-tight); margin-bottom: var(--bwr-space-sm); max-width: 640px; } .bwr-entry--post .bwr-entry__excerpt { font-size: var(--bwr-size-base); font-weight: 300; color: var(--bwr-muted); line-height: var(--bwr-leading); max-width: 540px; } .bwr-entry--post .bwr-entry__title a { border-bottom: none; } /* ───────────────────────────────────────────── ENTRY — FILM Present but not elevated. Full width. Mid-sequence. ───────────────────────────────────────────── */ .bwr-entry--film { padding: var(--bwr-space-md) 0; } .bwr-entry--film .bwr-entry__still { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(0.3) brightness(0.95); /* Matches homepage image register */ margin-bottom: var(--bwr-space-sm); display: block; } .bwr-entry--film .bwr-entry__label { font-size: var(--bwr-size-sm); font-weight: 300; color: var(--bwr-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--bwr-space-xs); display: block; } .bwr-entry--film .bwr-entry__title { font-size: var(--bwr-size-lg); font-weight: 400; letter-spacing: -0.01em; line-height: var(--bwr-leading-tight); } .bwr-entry--film .bwr-entry__meta { font-size: var(--bwr-size-sm); color: var(--bwr-muted); font-weight: 300; margin-top: var(--bwr-space-xs); } .bwr-entry--film .bwr-entry__title a { border-bottom: none; } /* ───────────────────────────────────────────── CHAPTERS ARCHIVE A column of single words. Reads like a structural poem. ───────────────────────────────────────────── */ .bwr-chapters-archive { max-width: 640px; margin: 0 auto; padding: var(--bwr-space-lg) var(--bwr-space-md); } .bwr-chapters-archive__heading { font-size: var(--bwr-size-sm); font-weight: 300; color: var(--bwr-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--bwr-space-lg); } .bwr-chapter-item { display: flex; align-items: baseline; justify-content: space-between; padding: var(--bwr-space-sm) 0; border-bottom: 1px solid var(--bwr-rule); } .bwr-chapter-item__word { font-size: var(--bwr-size-2xl); font-weight: 300; letter-spacing: -0.02em; line-height: 1; } .bwr-chapter-item__word a { border-bottom: none; transition: color 0.2s ease; } .bwr-chapter-item__word a:hover { color: var(--bwr-muted); } .bwr-chapter-item__meta { font-size: var(--bwr-size-sm); color: var(--bwr-muted); font-weight: 300; letter-spacing: 0.04em; text-align: right; } /* Current chapter marker — barely visible */ .bwr-chapter-item--current .bwr-chapter-item__word { position: relative; } .bwr-chapter-item--current .bwr-chapter-item__word::before { content: ''; position: absolute; left: -1rem; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background-color: var(--bwr-text); } /* ───────────────────────────────────────────── SINGLE NOTE / POST Clean reading experience. No clutter. ───────────────────────────────────────────── */ .bwr-single { max-width: 640px; margin: 0 auto; padding: var(--bwr-space-lg) var(--bwr-space-md); } .bwr-single__back { font-size: var(--bwr-size-sm); color: var(--bwr-muted); font-weight: 300; letter-spacing: 0.04em; border-bottom: none; display: inline-flex; align-items: center; gap: var(--bwr-space-xs); margin-bottom: var(--bwr-space-lg); transition: color 0.2s ease; } .bwr-single__back::before { content: '←'; } .bwr-single__back:hover { color: var(--bwr-text); } .bwr-single__chapter { font-size: var(--bwr-size-sm); color: var(--bwr-muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 300; margin-bottom: var(--bwr-space-sm); display: block; border-bottom: none; } .bwr-single__title { font-size: var(--bwr-size-xl); font-weight: 300; letter-spacing: -0.01em; line-height: var(--bwr-leading-tight); margin-bottom: var(--bwr-space-md); } /* Notes: slightly smaller title */ .bwr-single--note .bwr-single__title { font-size: var(--bwr-size-lg); font-weight: 400; } .bwr-single__date { font-size: var(--bwr-size-sm); color: var(--bwr-muted); font-weight: 300; margin-bottom: var(--bwr-space-lg); display: block; } .bwr-single__body { font-size: var(--bwr-size-base); font-weight: 300; line-height: var(--bwr-leading); } .bwr-single__body p { margin-bottom: var(--bwr-space-md); } .bwr-single__body p:last-child { margin-bottom: 0; } /* The closing question — open, not resolved */ .bwr-single__body p:last-of-type { color: var(--bwr-muted); } /* ───────────────────────────────────────────── ABOUT PAGE Orientation, not biography. Short. ───────────────────────────────────────────── */ .bwr-about { max-width: 540px; margin: 0 auto; padding: var(--bwr-space-xl) var(--bwr-space-md); } .bwr-about__body { font-size: var(--bwr-size-lg); font-weight: 300; line-height: var(--bwr-leading); } .bwr-about__body p { margin-bottom: var(--bwr-space-md); } .bwr-about__subscribe { margin-top: var(--bwr-space-lg); font-size: var(--bwr-size-sm); color: var(--bwr-muted); font-weight: 300; letter-spacing: 0.04em; } /* ───────────────────────────────────────────── RESPONSIVE Two columns collapse to one. Everything else holds. ───────────────────────────────────────────── */ @media ( max-width: 768px ) { .bwr-chapter__grid { grid-template-columns: 1fr; gap: var(--bwr-space-md); } .bwr-entry--offset { margin-top: 0; } .bwr-chapter__word { font-size: var(--bwr-size-2xl); } .bwr-entry--post { padding-left: 0; padding-right: 0; } .bwr-nav { flex-direction: column; gap: var(--bwr-space-sm); } .bwr-nav__links { gap: var(--bwr-space-sm); } .bwr-home__image { height: 50vh; } } /* ───────────────────────────────────────────── UTILITY ───────────────────────────────────────────── */ /* Visually hidden but accessible */ .bwr-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Desaturation filter class — apply to any image */ .bwr-desaturate { filter: saturate(0.3) brightness(0.95); } /* Muted text */ .bwr-muted { color: var(--bwr-muted); } /* ───────────────────────────────────────────── FOOTER ───────────────────────────────────────────── */ .bwr-footer { display: flex; flex-direction: column; align-items: center; padding: var(--bwr-space-xl) var(--bwr-space-md); border-top: 1px solid var(--bwr-rule); gap: var(--bwr-space-xs); } .bwr-footer__name { font-size: var(--bwr-size-sm); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bwr-text); } .bwr-footer__sub { font-size: var(--bwr-size-sm); font-weight: 300; color: var(--bwr-muted); font-style: italic; } /* ───────────────────────────────────────────── FILM EMBED ───────────────────────────────────────────── */ .bwr-film__embed { width: 100%; aspect-ratio: 16 / 9; margin-bottom: var(--bwr-space-md); } .bwr-film__embed iframe { width: 100%; height: 100%; display: block; } /* ───────────────────────────────────────────── SINGLE FILM ───────────────────────────────────────────── */ .bwr-single--film { max-width: 1100px; } /* ───────────────────────────────────────────── FEATURED NOTE Full text. Spans full width above the collage. The reader encounters the format completely before navigating the rest. ───────────────────────────────────────────── */ .bwr-entry--featured { max-width: 640px; margin-bottom: var(--bwr-space-lg); } .bwr-entry--featured .bwr-entry__date { font-size: var(--bwr-size-sm); color: var(--bwr-muted); font-weight: 300; letter-spacing: 0.04em; margin-bottom: var(--bwr-space-xs); display: block; } .bwr-entry--featured .bwr-entry__title { font-size: var(--bwr-size-lg); font-weight: 400; line-height: var(--bwr-leading-tight); margin-bottom: var(--bwr-space-md); } .bwr-entry--featured .bwr-entry__body { font-size: var(--bwr-size-base); font-weight: 300; line-height: var(--bwr-leading); color: var(--bwr-text); } .bwr-entry--featured .bwr-entry__body p { margin-bottom: var(--bwr-space-md); } .bwr-entry--featured .bwr-entry__body p:last-child { color: var(--bwr-muted); /* The open question — slightly muted */ margin-bottom: 0; } .bwr-entry--featured .bwr-entry__permalink { display: inline-block; margin-top: var(--bwr-space-md); font-size: var(--bwr-size-sm); color: var(--bwr-muted); font-weight: 300; letter-spacing: 0.04em; border-bottom: none; transition: color 0.2s ease; } .bwr-entry--featured .bwr-entry__permalink:hover { color: var(--bwr-text); } /* Divider between featured note and the collage */ .bwr-chapter__divider { border: none; border-top: 1px solid var(--bwr-rule); margin: var(--bwr-space-lg) 0; } /* About page name — quiet close */ .bwr-about__name { margin-top: var(--bwr-space-lg); font-size: var(--bwr-size-sm); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bwr-muted); } /* ───────────────────────────────────────────── POST — SINGLE MONTHLY POST More generous line length than notes. Film gesture at the close. ───────────────────────────────────────────── */ .bwr-single--post { max-width: 680px; } .bwr-single--post .bwr-single__title { font-size: var(--bwr-size-2xl); font-weight: 300; letter-spacing: -0.02em; line-height: var(--bwr-leading-tight); margin-bottom: var(--bwr-space-sm); } .bwr-single--post .bwr-single__body p { margin-bottom: var(--bwr-space-md); font-size: var(--bwr-size-lg); font-weight: 300; line-height: 1.75; } .bwr-single--post .bwr-single__body p:last-of-type { color: var(--bwr-muted); } /* ───────────────────────────────────────────── FILM GESTURE The closing threshold. A citation that feels like a door, not a footnote. ───────────────────────────────────────────── */ .bwr-post__film-gesture { display: flex; align-items: baseline; gap: var(--bwr-space-md); margin-top: var(--bwr-space-xl); padding-top: var(--bwr-space-md); border-top: 1px solid var(--bwr-rule); } .bwr-post__film-label { font-size: var(--bwr-size-sm); font-weight: 300; color: var(--bwr-muted); letter-spacing: 0.08em; text-transform: uppercase; flex-shrink: 0; } .bwr-post__film-title { font-size: var(--bwr-size-base); font-weight: 300; font-style: italic; color: var(--bwr-text); border-bottom: 1px solid var(--bwr-rule); transition: border-color 0.2s ease, color 0.2s ease; } .bwr-post__film-title:hover { color: var(--bwr-muted); border-color: var(--bwr-muted); }