/* * Layout overrides, loaded after the original stylesheet. * * The site frame runs the full width of the viewport; only the reading * column on a single article stays inside a measured container. Both * widths are variables, so putting the whole site back inside a fixed * container is a one-line change: * * :root { --site-max: 1140px; } */ :root { --site-max: none; /* site frame — none = full width */ --site-gutter: clamp(16px, 2.5vw, 40px); --read-max: 1140px; /* the article reading column */ } /* ---------- Full-width frame ---------- */ .page, .container { max-width: var(--site-max); margin-inline: auto; padding-inline: var(--site-gutter); } /* ---------- Body-class collisions ---------- * WordPress adds `page` to on every Page and `tag` on every tag * archive. Both names are already layout classes in this theme, so without * this reset picks up the frame gutter (insetting the whole site by * an extra gutter and stopping the dark bars short of the edges) and, on a * tag archive, the uppercase pill type. Body is never a frame element. */ body.page, body.container { max-width: none; margin-inline: 0; padding-inline: 0; } body.tag { font-family: var(--serif); font-size: 1.0625rem; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--ink); } /* ---------- The article keeps its container ---------- * The gutters are added on top of --read-max, so the reading column itself * measures exactly --read-max, the same as the original static page. */ .single-post .page-hero__inner, .single-post .article-layout, .single-post main > .container, .dp-read-width { max-width: calc(var(--read-max) + var(--site-gutter) * 2); margin-inline: auto; } @media (max-width: 640px) { :root { --site-gutter: 16px; } } /* ---------- Active nav item keeps its state on hover (#6) ---------- * The base stylesheet's `.primary-nav ul a:hover` ties on specificity with * the aria-current rule and, coming later, wins — so hovering the current * page repainted it like any other hover. Pin the active look for hover and * focus too. */ .primary-nav ul a[aria-current="page"], .primary-nav ul a[aria-current="page"]:hover, .primary-nav ul a[aria-current="page"]:focus { background: var(--paper-deep); color: var(--ink); box-shadow: inset 0 2px 0 var(--accent); } .primary-nav a.nav-cta[aria-current="page"], .primary-nav a.nav-cta[aria-current="page"]:hover, .primary-nav a.nav-cta[aria-current="page"]:focus { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper); } /* ---------- Whole-card click + hover (#8) ---------- * Each card's heading link is stretched to cover the whole card via a * ::after overlay, so a click anywhere on the card opens the post. The * thumbnail's own is decorative (aria-hidden, tabindex -1) and sits * behind the overlay. On hover the whole card lifts the title into its * hover style (accent + underline), matching the original link hover. */ .story-list li, .feat-list li, .article-card, .mini-feature { position: relative; } .story-list li h3 > a::after, .feat-list li h3 > a::after, .article-card h3 > a::after, .mini-feature h3 > a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* Keep the decorative thumbnail link from stealing the click. */ .story-list li a.thumb, .feat-list li a.thumb, .article-card .article-card__thumb, .mini-feature .mini-feature__art { position: relative; z-index: 0; } /* Anything genuinely interactive inside a card (e.g. source links) stays * above the overlay so it remains clickable. */ .article-card .article-card__sources a, .story-list .summary a, .mini-feature p a { position: relative; z-index: 2; } /* Hover the whole card -> title takes its hover treatment. */ .story-list li:hover h3 a, .feat-list li:hover h3 a, .article-card:hover h3 a, .mini-feature:hover h3 a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .story-list li:hover .thumb img, .article-card:hover .article-card__thumb img, .mini-feature:hover .mini-feature__art img { transform: scale(1.03); } /* The card is a pointer target end to end. */ .story-list li, .feat-list li, .article-card, .mini-feature { cursor: pointer; } /* ---------- User-built primary menu (#2) ---------- * wp_nav_menu() outputs