/** * Justine Larbalestier — visual matching to the retired jl2013a theme. * * EVERY value in this file was measured from themes/jl2013a/style.css and * confirmed against a render of baseline-preswitch. None of it is inferred. * * Do not use themes/jl2013a/color-key.txt as a source. It is a designer's * swatch sheet listing 27 named colours, and exactly one of them (#716c66, * "mushroom") appears anywhere in the theme's actual CSS. The reds the site * really uses -- #933, #5E2221, #A83938 -- are not in that file at all, and * its beige (#e9dcd4) appears in no stylesheet, template, or PHP file. * * Sources, by line, in themes/jl2013a/style.css: * 314-323 link colours * 518-537 cover image stacking * 594-640 type scale * 656-665 page ground * 667-678 heading letterpress * 700-704 container width * 746-764 colophon * 766-790 primary navigation * 815-829 content column and sidebar * * @package ClockpunkLarbalestier * @since 1.0.0 */ :root { /* --- Reds, as actually declared ---------------------------------------- * #933 is shorthand for #993333 in the source; expanded here for clarity. */ --jl-red: #993333; /* links, page ground behind the photograph */ --jl-red-dark: #5e2221; /* visited links, nav and sidebar fallback */ --jl-red-hover: #a83938; /* :hover, :focus, :active */ /* --- Neutrals ---------------------------------------------------------- */ --jl-text: #141414; /* body copy */ --jl-mushroom: #716c66; /* blockquotes, post-edit links */ --jl-cite: #2f2d2c; /* cite on front-page book entries */ --jl-subhead-muted: #888888; /* subheads in the older-books columns */ --jl-meta: #888888; /* post and comment meta (style.css:949) */ --jl-meta-link: #555555; /* links inside it (style.css:954) */ --jl-comment-badge-bg: #dddddd; /* the numbered badge on each comment */ --jl-comment-badge: #666666; /* its digits */ --jl-code: #6c8e1b; /* inline code */ --jl-content-bg: #ffffff; /* the white content column */ --jl-buylink-bg: #8c2c31; /* purchase-link buttons (style.css:800) */ --jl-buylink-hover: #ffffcc; /* their hover text */ --jl-rule: #cccccc; /* jl2013a's only rule/separator colour: hr { background-color: #ccc } (style.css:108-109) */ /* --- Translucent overlays that sit on the photograph ------------------- * These are why the sidebar and nav read as darker red without declaring * a red: they are black at low alpha over the background image. */ --jl-overlay: rgba(0, 0, 0, 0.2); --jl-nav-top: rgba(0, 0, 0, 0.4); --jl-nav-bottom: rgba(0, 0, 0, 0.2); --jl-on-dark: rgba(255, 255, 255, 0.8); --jl-on-dark-strong: #ffffff; --jl-on-dark-muted: rgba(255, 255, 255, 0.6); --jl-on-dark-faint: rgba(255, 255, 255, 0.5); --jl-tagline: rgba(0, 0, 0, 0.6); --jl-selection: rgb(255, 255, 158); /* --- Type ------------------------------------------------------------- * jl2013a's body rule named "ff-meta-serif-web-pro-1" (fonts.com), but * that loader was commented out at functions.php:4, so the family never * resolved and the site fell through to Typekit's proxima-nova, which the * kit config applied to body at runtime. The rendered face has therefore * been Proxima Nova, not a serif. Declared explicitly here. */ --jl-font-body: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; --jl-size-base: 16px; --jl-leading-base: 24px; --jl-size-h1: 42px; --jl-leading-h1: 48px; --jl-size-h2: 26px; --jl-leading-h2: 36px; --jl-size-h3: 22px; --jl-leading-h3: 30px; --jl-size-h4: 20px; --jl-leading-h4: 24px; --jl-size-small: 13px; --jl-leading-small: 18px; --jl-size-gigantic: 110px; --jl-leading-gigantic: 120px; /* --- Layout metrics --------------------------------------------------- * Consumed by Tasks 11-15. Applied through Astra's own settings where * Astra owns the box, rather than fought with overrides here. */ --jl-page-width: 992px; /* #page, desktop */ /* DESCRIPTIVE, NOT PRESCRIPTIVE -- and deliberately unreferenced. * * The columns are fluid: Astra emits `#primary{width:72%}` and * `#secondary{width:28%}` from its `site-sidebar-width` setting (28), * inside a container capped at `site-content-width` (992px). The two * values below are simply what those percentages come to at full desktop * width, recorded so the numbers in jl2013a's old fixed layout can still * be compared against what renders now. * * Do NOT consume these in a rule -- doing so would convert a fluid layout * into a fixed one -- and do not reason about a minimum viewport width * from them. There isn't one. */ --jl-content-width: 664px; /* == 72% of 992px (#primary) */ --jl-sidebar-width: 230px; /* == 28% of 992px minus padding (#secondary) */ --jl-colophon-width: 896px; /* #colophon */ --jl-gutter: 24px; --jl-body-pad: 36px; /* body padding-top/bottom */ /* --- Letterpress ------------------------------------------------------ * The six-shadow effect on every heading. Reproduced verbatim; it is a * signature of the design and cheap to keep. */ --jl-letterpress: rgba(0, 0, 0, 0.1) -1px 0, rgba(0, 0, 0, 0.1) 0 -1px, rgba(255, 255, 255, 0.1) 1px 0, rgba(255, 255, 255, 0.1) 0 1px, rgba(0, 0, 0, 0.1) -1px -1px, rgba(255, 255, 255, 0.1) 1px 1px; --jl-text-shadow-on-dark: 1px 2px 2px rgba(0, 0, 0, 0.8); /* --- Map onto the tokens clockpunk-author/css/_variables.css consumes -- * Those defaults are Bootstrap blue (#007bff); without this block the * child theme's components render off-palette. */ --color-primary: var(--jl-red); --color-primary-dark: var(--jl-red-dark); --color-text-primary: var(--jl-text); --color-text-secondary: var(--jl-mushroom); --color-text-light: var(--jl-on-dark-strong); --color-background: var(--jl-content-bg); --color-background-alt: var(--jl-overlay); --color-border: rgba(113, 108, 102, 0.25); --color-border-light: #e4dbd4; --font-size-base: var(--jl-size-base); --line-height-base: 1.5; /* 24px / 16px */ } /* ========================================================================== Page ground -------------------------------------------------------------------------- The fixed, cover-sized floral photograph is the dominant visual feature of the site. The image is served from this plugin, not from themes/jl2013a, so the design does not depend on a theme that is retired at cutover. ========================================================================== */ /* Two deliberate choices here, both found by measuring the computed style * rather than by reading the stylesheets: * * 1. `html body`, not `body`. Astra sets a white body background through a * selector that outranks a bare `body`, so a bare `body` rule in this file * lost the background-colour even though this file loads last. Specificity, * not order, was the deciding factor. No !important is needed or used -- * verified by confirming a plain inline style still overrides everything * here, which it would not if an !important rule were in play. * 2. Background longhands, not the `background:` shorthand. A shorthand * containing var() becomes a CSSOM pending-substitution value, which makes * the cascade hard to reason about and impossible to introspect. * * Later tasks in this file should assume Astra may outrank a single element * selector, and should verify against getComputedStyle rather than the source. */ html body { padding: var(--jl-body-pad) 0; color: var(--jl-text); /* KNOWN, DIAGNOSED, RESOLVED IN TASK 11 -- not a mystery, do not "fix" here. * This declaration does not currently win. Astra's dynamic CSS emits * .ast-plain-container, .ast-page-builder-template * { background-color: var(--ast-global-color-4) } * where --ast-global-color-4 resolves to #FFFFFF, and * .ast-plain-container (0,1,0) outranks html body (0,0,2). The site * background is also set correctly in Astra itself, which emits * body, .ast-separate-container { background-color:#993333 } * so the fix is the container LAYOUT, not more specificity: jl2013a's * white content box over a coloured ground is Astra's separate-container, * whereas the site currently resolves to plain-container. Task 11 sets * site-content-style / site-sidebar-style to boxed, at which point both * Astra's rule and this one agree and the ground is #993333. * Visually masked meanwhile: the flowers image is `cover`, so it paints * every pixel and the colour only shows if the image fails to load. */ background-color: var(--jl-red); background-image: url("../img/flowers.jpg"); /* RESOLVED IN TASK 11. The declaration above now wins. The site had resolved * to Astra's plain-container, whose dynamic CSS emits * .ast-plain-container { background-color: var(--ast-global-color-4) } * (#FFFFFF), and .ast-plain-container (0,1,0) outranked html body (0,0,2). * No !important was ever involved. The fix was the container LAYOUT, not * more specificity here: site-content-style and site-sidebar-style are now * `boxed` and site-content-width is 992, so body carries * `ast-separate-container ast-two-container` and Astra's own rule agrees. * * Two page-type overrides had to go with it. Astra ships * single-page-content-style and single-page-sidebar-style defaulting to * `unboxed` on structural-setup installs * (themes/astra/inc/core/class-astra-theme-options.php:730-731), and those * beat the global on every Page — which is most of this site. Both are now * `default`, i.e. "inherit the global". */ background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; -webkit-text-size-adjust: 100%; font-family: var(--jl-font-body); font-size: var(--jl-size-base); line-height: var(--jl-leading-base); } /* The `color` is NOT decoration and must not be dropped as redundant. jl2013a * set only a background here, which was correct in 2013 because an unspecified * ::selection colour leaves the text its own. Astra now emits * `::selection{background-color:var(--ast-global-color-0);color:#ffffff}` into * every page. Our background wins on source order, but with no colour of our * own Astra's white applied unopposed -- white text on pale yellow, which is * effectively invisible. Declaring both is what keeps selected text readable. */ ::selection { background: var(--jl-selection); color: var(--jl-text); } ::-moz-selection { background: var(--jl-selection); color: var(--jl-text); } img::selection { background: transparent; } img::-moz-selection { background: transparent; } /* ========================================================================== Links ========================================================================== */ a { color: var(--jl-red); } a:visited { color: var(--jl-red-dark); } a:hover, a:focus, a:active { color: var(--jl-red-hover); } /* ========================================================================== Type scale -------------------------------------------------------------------------- Headings inherit the body family. Sizes are absolute px in the source, not relative units, so they are reproduced as px rather than converted. ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--jl-font-body); } h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none; text-shadow: var(--jl-letterpress); } /* The rule above loses inside post and page content. Astra emits * .ast-single-post .entry-content a { text-decoration: underline } * at (0,2,1), which outranks `h2 a` at (0,0,2), so every heading that is * itself a link came back underlined — the front-page book titles among them, * where the baseline has none. Body links stay underlined; jl2013a underlined * those too. Only headings are excepted, exactly as style.css:667 has it. * * `#primary` is Astra's content wrapper, the same lever Task 12 used on the * entry-title type scale. It makes the win unambiguous instead of dependent on * a body class Astra could rename. * * NOT a mistake to leave the books landing alone: there the anchor WRAPS the * h2, so `h2 a` does not match it and its titles keep the underline the * baseline shows. See templates/parts/content-page-books.php. */ #primary .entry-content h1 a, #primary .entry-content h2 a, #primary .entry-content h3 a, #primary .entry-content h4 a, #primary .entry-content h5 a, #primary .entry-content h6 a { text-decoration: none; } /* jl2013a declared no colour on headings at all, so every heading inherited * `body { color: #141414 }` and any anchor inside one took the link red. * Astra colours them explicitly instead: * body,h1,…,h6,.entry-title a,.entry-content :where(h1,…,h6) * { color: var(--ast-global-color-3) } * which is #1e293b, a slate blue. Every heading on the site rendered in it. * * `inherit` rather than a literal, because it restores the original behaviour * in both nestings at once: an `

` heading keeps the near-black h2 and * lets the anchor go red, and a `

` heading — the books landing, where * the anchor is the PARENT — inherits the red through it. Task 12 had to spell * that second case out as a one-off `#primary .book-list__item … .entry-title * { color: inherit }`; this generalises it. That rule is left in place, since * it also carries the type scale. * * Specificity: Astra's in-content selector is (0,1,0), so the plain-element * list below it would lose on the `.entry-content` half. Restated at (0,1,1) * so the win does not depend on stylesheet order. */ /* Heading weight is the other half of the same problem. jl2013a's reset * (style.css:13-29) sets `font-weight: inherit` on h1-h6, so every heading on * the site renders at the body's 400 — Proxima Nova regular at 26px and 42px, * carrying the letterpress shadow above rather than bold weight. Astra emits * `h1,…,h6,.entry-content :where(h1,…,h6),.site-title,.site-title a * { font-weight: 600 }`, which made every heading semibold. * * `.site-title` is left to Astra: its own selector is (0,1,0) and outranks the * element list here, which is correct — the masthead is Task 11's, configured * through the header builder, and is not this rule's business. * * Measured, not inferred: the same heading in baseline-preswitch/__root.html * computes to 400, and the Magic subhead wrapped to two lines at 600 where the * baseline fits it on one. */ h1, h2, h3, h4, h5, h6, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { color: inherit; font-weight: inherit; } /* --- The three base-typography rules, adopted globally at Task 16 Step 0 ----- * Deferred through Tasks 13-15 because each re-flows the vertical rhythm of * every page and post, which would have invalidated the spacing half of every * sign-off taken before it. Task 16 re-renders every URL anyway, so all three * land together, ahead of the sweep. * * 1. `margin: 0` on h1-h6 (jl2013a/style.css:13-29, the reset). jl2013a's * headings carry no margin at all — every gap on that site is an explicit * per-element rule. Astra sets * `.entry-content :where(h1,…,h6) { margin-bottom: 20px }` at (0,1,0), * so the element list has to be spelled out at (0,1,1) to beat it; * `:where()` contributes nothing to specificity, which is the only reason * a single class can be outranked this cheaply. Outside `.entry-content`, * Astra's own reset already gives 0, and `#secondary .wp-block-group h2` * at (0,1,2) keeps the sidebar's widget-title spacing, as verified. * 2. `p { margin-bottom: 1.5em }` (style.css:116) against Astra's 1.75em * bare and 1.6em in content. 1.4px at 16px text. * 3. `ul, ol { margin: 0 0 1.5em 1.5em }` (style.css:119) against Astra's * 3em left indent — every list in every post was indented twice as far as * production has it. Astra's own `li > ol, li > ul` nested rule is already * identical to jl2013a's, so nesting needs nothing. * * All three sit at the same specificity as Astra's and win on load order: * custom-styles.css is the last stylesheet on the page. */ h1, h2, h3, h4, h5, h6, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { margin: 0; } p, .entry-content p { margin-bottom: 1.5em; } ul, ol { margin: 0 0 1.5em 1.5em; } /* The in-content restatement is not redundant, and finding out why cost a * measurement. Astra prints * * .entry-content ul, .entry-content ol { * margin: revert; padding-left: 20px; ... } * * as INLINE dynamic CSS in `wp_head`, at (0,1,1). `margin: revert` hands the * margin back to the UA stylesheet — 16px top and bottom, nothing on the left — * and replaces the indent with 20px of padding. So the bare `ul, ol` rule above * was outranked on exactly the lists that matter, the ones inside post and page * content, and every one of them still rendered at Astra's geometry. `padding- * left: 0` has to be spelled out for the same reason: jl2013a indents with * margin and leaves padding at the reset's zero. * * Measured against baseline-preswitch/books_magic.html, where `ul.childpages` * computes to margin 0/0/24px/24px and padding-left 0. */ .entry-content ul, .entry-content ol { margin: 0 0 1.5em 1.5em; padding-left: 0; } /* jl2013a/style.css:128 — a nested list keeps the indent and drops the gap, so * a tree reads as one block. Astra's own `li > ol, li > ul` says the same thing * at (0,0,2), which the restatement above would have outranked. */ .entry-content ul ul, .entry-content ol ol, .entry-content ul ol, .entry-content ol ul { margin-bottom: 0; margin-left: 1.5em; } /* Astra closes every entry with * .entry-content > :last-child { margin-bottom: 0 } * which is a reasonable default and is not what this site does: jl2013a has no * such rule, so the final paragraph or list of a page keeps its 1.5em and the * text stops 24px short of the bottom of the white column. Measured on * baseline-preswitch/bio.html — last `

`, margin-bottom 24px. * * Restated per element rather than reverted, because there is no cascade * keyword for "let the previous rule apply": `unset` on margin-bottom resolves * to 0, which is the value being removed. Headings are absent by design — their * adopted margin IS 0, so Astra's rule and this file already agree on them. */ .entry-content > p:last-child, .entry-content > ul:last-child, .entry-content > ol:last-child { margin-bottom: 1.5em; } h1, .huge { font-size: var(--jl-size-h1); line-height: var(--jl-leading-h1); letter-spacing: -1px; } h2, .large { font-size: var(--jl-size-h2); line-height: var(--jl-leading-h2); } h3, .bigger { font-size: var(--jl-size-h3); line-height: var(--jl-leading-h3); } h4, .big { font-size: var(--jl-size-h4); line-height: var(--jl-leading-h4); } .gigantic { font-size: var(--jl-size-gigantic); line-height: var(--jl-leading-gigantic); letter-spacing: -2px; } small, .small { font-size: var(--jl-size-small); line-height: var(--jl-leading-small); } h3.date { font-size: var(--jl-size-small); line-height: 16px; } /* ========================================================================== Inline elements carrying palette ========================================================================== */ /* jl2013a/style.css:147 is the whole of its blockquote styling: an indent, a * slightly smaller size, and the mushroom grey. Astra's `blockquote` adds a * 5px left border, 20px of padding and italics. Those three were not being * contested here — this rule simply did not mention them, so they survived and * every quotation on the site rendered as a bordered italic callout. * * Found on the front page: Team Human's excerpt ends in a pull quote, and the * padding plus italics took it from 216px tall in baseline-preswitch to 332px, * which was the only unexplained geometry difference left on the page. The * rule is global because blockquotes are, and this is a twenty-year blog. * * All three declarations are at (0,0,1), the same as Astra's, and this * stylesheet loads last — no specificity escalation needed. */ blockquote { margin: 1em 1.5em; padding: 0; border-left: 0; /* `position: static` is not cosmetic. Astra declares `position: relative` on * blockquote, and a positioned element with `z-index: auto` paints in the * positioned-descendants phase — above floats. Every blockquote therefore * covered whatever float it overlapped and swallowed its pointer events: * the "Buy in the US..." menu on the front page sat under one and could not * be hovered or clicked. jl2013a declares no position at all. */ position: static; font-size: 0.95em; font-style: normal; color: var(--jl-mushroom); } code, kbd, tt, var { color: var(--jl-code); } /* ========================================================================== Footnotes -------------------------------------------------------------------------- 656 published items use wp-footnotes' ((...)) syntax, so these two rules are the most widely applied in the file. The superscript rule did NOT come from jl2013a/style.css. It was in the Customizer's Additional CSS, which WordPress stores as a `custom_css` post keyed by stylesheet slug (post 15566, post_name `jl2013a`). That storage is per-theme, so activating clockpunk-author dropped it silently and every footnote identifier on the site started rendering as a full-size inline number. Found by diffing the Task 12 verification sweep, not by reading any stylesheet — nothing in the theme directory records it. The only other rule in that post styled `#menu-item-51519`, an item in the unassigned "Blog Menu", and is therefore dead. Deliberately not ported. ========================================================================== */ .footnote-identifier-link { vertical-align: super; font-size: 11px; } ol.footnotes li { color: var(--jl-red-dark); } /* ========================================================================== Task 11 — masthead, primary navigation, footer, content shell -------------------------------------------------------------------------- Every value below was read with getComputedStyle from a browser render of baseline-preswitch/__root.html, not from the source stylesheet. jl2013a set font sizes in ems off a 16px base, so the source says `.9em` where the rendered value is 14.4px; the rendered value is what has to be matched. Structure mapping — jl2013a element -> Astra header/footer builder element: #page .ast-container inside each builder row (992px) #masthead hgroup .ast-primary-header-bar (title, tagline) #masthead .covers header-html-1 -> [jl_header_covers] shortcode #masthead nav .ast-below-header-bar (menu-1, centred) #colophon .site-info .ast-footer-copyright (below-footer row) Astra's dynamic CSS reaches these with single-class selectors, so the rules here are prefixed with #masthead / #colophon to outrank it on specificity rather than with !important. The two exceptions are marked in place. ========================================================================== */ /* --- Row boxes ------------------------------------------------------------ * jl2013a's #page is exactly 992px with no side padding, and the navigation * band is INSIDE it — the dark band stops at the page edge rather than running * to the viewport edge. Astra's builder rows are full-bleed and its * .ast-container adds 20px of side padding (max-width 1032 = 992 + 40), so * both are unwound here. */ #masthead .ast-primary-header-bar, #masthead .ast-below-header-bar, #colophon .site-below-footer-wrap { max-width: var(--jl-page-width); margin-right: auto; margin-left: auto; padding-right: 0; padding-left: 0; border: 0; background-color: transparent; } #masthead .ast-primary-header-bar .ast-container, #masthead .ast-below-header-bar .ast-container, #colophon .ast-builder-grid-row-container-inner { max-width: none; padding-right: 0; padding-left: 0; } /* --- Masthead: title, tagline, covers ------------------------------------- * hgroup was 112px tall with 24px below it. The cover strip is 252px wide and * sat absolutely in the top right corner of that box; reproduced by making the * primary row the positioning context. */ #masthead .ast-primary-header-bar { position: relative; min-height: 112px; margin-bottom: 24px; } #masthead .site-primary-header-wrap, #masthead .ast-builder-layout-element[data-section="title_tagline"] { min-height: 0; padding: 0; } #masthead .site-title { margin: 0; font-size: var(--jl-size-h1); line-height: var(--jl-leading-h1); font-weight: 400; letter-spacing: -1px; text-shadow: var(--jl-letterpress); } #masthead .site-title a, #masthead .site-title a:visited, #masthead .site-title a:hover, #masthead .site-title a:focus, #masthead .site-title a:active { color: var(--jl-on-dark-strong); font-size: inherit; font-weight: inherit; text-decoration: none; } #masthead .site-description { margin: 0; color: var(--jl-tagline); font-size: var(--jl-size-h2); line-height: var(--jl-leading-h2); font-weight: 400; text-shadow: var(--jl-letterpress); } /* The three newest book covers, top right. The 252px box is 3 x 68px plus two * 24px gutters; the first cover has no gutter, which is what pins the strip * flush to the right edge. */ #masthead .ast-header-html-1 { position: absolute; top: 0; right: 0; padding: 0; } #masthead .covers { width: 252px; } #masthead .covers img { display: block; float: left; margin-left: var(--jl-gutter); box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); } #masthead .covers a:first-child img { margin-left: 0; } /* --- Primary navigation --------------------------------------------------- * The band is not a red fill: it is black at 40%-to-20% alpha over the floral * photograph, with #5E2221 behind it for the case where the image fails. */ #masthead .ast-below-header-bar { padding-top: 1em; padding-bottom: 1em; background-color: var(--jl-red-dark); background-image: linear-gradient(to bottom, var(--jl-nav-top) 0%, var(--jl-nav-bottom) 100%); } #masthead .ast-below-header-bar .site-below-header-wrap, #masthead .ast-below-header-bar .ast-builder-menu { min-height: 0; } #masthead .ast-below-header-bar .main-header-menu { justify-content: center; } #masthead .ast-below-header-bar .main-header-menu > .menu-item { margin: 0 2em; line-height: var(--jl-leading-base); } #masthead .ast-below-header-bar .main-header-menu > .menu-item > .menu-link { padding: 0; color: var(--jl-on-dark); font-size: 0.9em; line-height: var(--jl-leading-base); font-weight: 400; text-shadow: var(--jl-text-shadow-on-dark); } #masthead .ast-below-header-bar .main-header-menu > .menu-item > .menu-link:hover, #masthead .ast-below-header-bar .main-header-menu > .menu-item > .menu-link:focus { color: var(--jl-on-dark-strong); } #masthead .ast-below-header-bar .sub-menu { padding: 1em; border: 0; background-color: var(--jl-red-dark); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); text-align: left; } #masthead .ast-below-header-bar .sub-menu .menu-link { width: 200px; padding: 0.25em 0; border: 0; color: var(--jl-on-dark); font-size: 0.9em; text-shadow: var(--jl-text-shadow-on-dark); } #masthead .ast-below-header-bar .sub-menu .menu-link:hover, #masthead .ast-below-header-bar .sub-menu .menu-link:focus { background-color: transparent; color: var(--jl-on-dark-strong); } /* --- Colophon ------------------------------------------------------------- * 896px is the 10-column measure from jl2013a's grid comment (style.css:654), * i.e. the 992px page less a 48px margin each side. */ #colophon .site-below-footer-wrap { max-width: var(--jl-colophon-width); padding-top: 48px; color: var(--jl-on-dark-strong); font-size: 0.9em; line-height: var(--jl-leading-base); text-shadow: var(--jl-text-shadow-on-dark); } #colophon .ast-footer-copyright { color: inherit; font-size: inherit; text-align: left; } #colophon .ast-footer-copyright .copyright { margin: 0 0 1.5em; } #colophon .ast-footer-copyright a { color: var(--jl-on-dark); } #colophon .ast-footer-copyright a:hover, #colophon .ast-footer-copyright a:focus { color: var(--jl-on-dark-strong); } #colophon .ast-footer-copyright .site-credit { margin-top: 2em; margin-bottom: 0; color: var(--jl-on-dark-faint); font-size: 0.8em; } /* --- Content shell -------------------------------------------------------- * ONE white panel on #primary, not one per article. This is the shape of the * original and it took until Task 17 to get right, because Astra's model is * genuinely different rather than merely differently-valued. * * Measured, baseline-preswitch/blog.html at 1728px: * * #primary 712px, padding 24px, radius 0, #fff, 0 0 32px rgba(0,0,0,.5) * article 664px, padding 0, radius 0, transparent, margin-bottom 24px * * So the 24px between two consecutive posts is WHITE — the panel runs the * length of the page and the floral ground shows only to its left and right. * Astra instead paints each `.ast-article-inner` white and spaces the cards * apart, which stripes the ground between every post. Task 15 removed the card * padding (correctly — the card inset is not in the baseline) but nothing put * the gutter back anywhere, so until now body text ran flush to the edge of the * white on every post, archive and search page. * * Three things this replaces, all of which were the panel in a different place: * - `article.type-page { padding: 24px !important; background: #fff }`, the * Task 10 rule that made Pages look right while posts and archives did not. * - Astra's `.ast-separate-container .ast-article-post/-single` white at * `padding: 3.34em 2.4em`, and `.ast-article-inner`'s white on the grid. * - `.error404 #primary .error-404 { width: 72% }`, Task 15's way of stopping * the 404's white box running the full 992px. #primary is 712px on every * view now, including the sidebar-less 404, so the hack is gone. * * `#page #primary` at (2,0,0) is not belt-and-braces. Astra sets * `.ast-separate-container.ast-right-sidebar #primary { padding: 0 }` at * (1,2,0) inside `@media (min-width: 993px)`, which beats a bare `#primary` at * (1,0,0) — measured: the background applied and the padding silently did not. * * `box-sizing: border-box` is Astra's default, so 712 is the outer box and the * text column falls out at 712 - 48 = 664. */ #page #primary { padding: var(--jl-gutter); background-color: var(--jl-content-bg); box-shadow: 0 0 2em rgba(0, 0, 0, 0.5); border-radius: 0; } /* The articles inside the panel carry nothing. `!important` is unavoidable on * the background and is the only use of it in this file: * clockpunk-author/css/_utilities.css:53 declares * article.type-page { background: none !important; } * and :48 declares `.type-page { padding: 0 !important }` inside a min-width * media query. Those live in the shared child theme, which serves every * Clockpunk author site, so they are not this client's to edit. An !important * of equal-or-greater specificity in a stylesheet that loads later is the * correct lever; this file already depends on `clockpunk-child-style`, which * guarantees the ordering. * * `overflow: visible` on `.ast-article-inner` undoes the clipping Astra emits * beside the card radius — it is in the same declaration block as the radius, * so zeroing the radius through `post-card-border-radius` leaves it behind. * The baseline's #primary does not clip, and a floated cover that overhangs * its post would be cut off. */ #page #primary .ast-article-post, #page #primary .ast-article-single, #page #primary .ast-article-inner, #page #primary article.type-page, #page #primary .ast-404-layout-1 { padding: 0 !important; background: none !important; box-shadow: none; border-radius: 0; overflow: visible; } /* Fixed columns, as jl2013a had them: 712 + 278 inside a 992px page, floated * apart, with 2px left over that puts the sidebar at 1074.5 rather than 1072.5. * Astra sizes the same two children of its flex `.ast-container` at 72%/28% — * 714.23 + 277.76 — which is where the last 2.23px of the content column came * from. `margin-left: auto` reproduces the float's right edge without hard- * coding the 2px. * * The breakpoint is Astra's own 993px, not jl2013a's 992px. Below it Astra * stacks the sidebar under the content, which is what jl2013a does at 991px; * one pixel of disagreement in the changeover is not worth a second media * query. Only the widths are scoped — the white panel, its 24px gutter and its * shadow apply at every width, because `#primary { padding: 24px; background: * #fff }` (style.css:815) is outside every media query in the original and the * 768-991px and max-767px blocks change only `width` and `float`. */ @media (min-width: 993px) { #page #primary { width: 712px; max-width: 712px; flex: 0 0 712px; } #page #secondary { width: 278px; max-width: 278px; flex: 0 0 278px; margin-left: auto; } } /* ========================================================================== Task 12 — books landing -------------------------------------------------------------------------- Two covers per book, floated right, overlapping. jl2013a/style.css:518-537. The .primary / .secondary classes are positional, not semantic: whichever cover renders first is .primary and sits in front, dropped 20px; .secondary is pulled 40px right so it peeks out from behind. covers.php only applies the classes when there are actually two, because .primary's `top: 20px` would otherwise drop every single-cover book down the page. Scoped to .entry-content so the masthead strip, which floats LEFT with a 24px gutter and no overlap, is not caught by it. ========================================================================== */ .entry-content .covers { position: relative; } .entry-content .covers .attachment-cover_thumbnail, .entry-content .covers .attachment-cover_medium, .entry-content .covers .attachment-cover_large { position: relative; top: 0; right: 0; z-index: 0; float: right; margin: 0 0 1em 1em; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); } .entry-content .covers .attachment-cover_thumbnail.primary, .entry-content .covers .attachment-cover_medium.primary, .entry-content .covers .attachment-cover_large.primary { top: 20px; z-index: 10; } .entry-content .covers .attachment-cover_thumbnail.secondary, .entry-content .covers .attachment-cover_medium.secondary, .entry-content .covers .attachment-cover_large.secondary { margin-right: -40px; } /* jl2013a emitted the child pages as a flat sequence of header/covers/excerpt * with no wrapper, so each book's floated cover ran on into the next book's * text. .book-list__item exists to give the list a styling hook; it must not * establish a block formatting context, or the covers would be trapped and the * layout would stop matching the baseline. Clearing is left to the float * itself, exactly as before. */ .book-list__item { margin-bottom: 1.5em; } .book-list__item .entry-header { margin: 0; padding: 0; border: 0; } /* Entry titles. jl2013a declared no `.entry-title` rules at all, so titles just * took the h1/h2 sizes from the type scale — 42px for a page title, 26px for a * book heading. Astra's dynamic CSS emits * header.entry-header .entry-title { font-size: 2rem } * at (0,2,1), which beats every plain-element rule in the type scale above, so * the scale has to be restated at higher specificity. `#primary` is Astra's * content wrapper and makes the win unambiguous rather than order-dependent. * * The book heading additionally takes `color: inherit`: it sits INSIDE the * anchor, and Astra colours headings explicitly * (`h1,h2,… { color: var(--ast-global-color-2) }`), which blocks the link * colour it inherited on the baseline. */ #primary header.entry-header .entry-title { font-size: var(--jl-size-h1); line-height: var(--jl-leading-h1); letter-spacing: -1px; /* Astra emits a SECOND rule at this selector, `header.entry-header * .entry-title { font-weight: 600 }` (0,2,1), which the global * `font-weight: inherit` in the type scale cannot reach. Without this line * page titles stayed semibold while every heading inside the content had * gone back to 400 — a worse result than either weight consistently. */ font-weight: inherit; } #primary .book-list__item header.entry-header .entry-title { color: inherit; font-size: var(--jl-size-h2); line-height: var(--jl-leading-h2); letter-spacing: normal; } /* --- Purchase links ------------------------------------------------------- * render_covers() emits the `buylinks` meta inside .covers, exactly as * jl_get_switched_cover() did, so these buttons appear anywhere covers do. * Without this block the markup degrades to a nested bulleted list, which is * what /books/ showed before the rules were ported. jl2013a/style.css:793-812. * * The nested .sub-menu is a hover dropdown, hidden by default — collapsing it * would expose every retailer link at once on ten book entries. */ /* `float: right; clear: right` is the whole reason this block sits where it * does, and it was missed when these rules were ported. jl2013a declares it in * its own rule at style.css:1096, separate from the margin rule at :1101, and * only the second one was carried across. * * Without the float, the list is an ordinary block inside `.covers` — whose * images are all floated, leaving it zero-height — so the button rendered at * the far LEFT, immediately under the book title and above the blurb, while * the covers it belongs to sat on the right. `clear: right` is what puts it * BELOW them rather than beside them. * * Measured in baseline-preswitch/__root.html: the My Sister Rosa button is at * x=600 in a 664px column, y=1357, against cover bottoms of 1325 and 1345. * Bottom right, under the covers. Affects /books/ as well as the front page. */ #buylinks { float: right; clear: right; margin: 1em 0 0 1em; padding: 0; /* A DELIBERATE DEVIATION from jl2013a, and the only one in this block. * * The open dropdown is absolutely positioned with no z-index, so it paints * at tree order in the positioned phase — below `.covers .primary`, which * carries `z-index: 10`. On /books/ the menu opens across the NEXT book's * cover, and four of Razorhurst's five retailer links were unclickable: * elementFromPoint returned the image, not the anchor. * * The same latent bug is in jl2013a; its 664px column simply never let the * two overlap. Task 15 narrows this column back to 664px and would likely * hide it again, which is exactly why it is worth fixing now rather than * waiting for it to reappear at some other width. * * z-index here rather than on .sub-menu: it makes the whole menu one * stacking context above the covers, instead of leaving the button below * the dropdown it opens. */ position: relative; z-index: 20; } #buylinks li, #buylinks .sub-menu li { position: relative; display: inline-block; margin: 0; list-style-type: none; } /* `box-sizing: content-box` is not decoration. jl2013a predates border-box and * means 165px of text area PLUS the 10px padding either side, so the button is * 185px wide in baseline-preswitch. Astra sets border-box globally, which folds * the padding inward and gives a 165px button — 20px narrower than the * baseline, and tighter around "Buy in the US...". */ /* `#primary` in front so this outranks the content-link underline rule in the * Task 14 block, which is (1,1,1). These are buttons, not prose links. */ #primary #buylinks li a, #primary #buylinks .sub-menu li a { display: inline-block; box-sizing: content-box; width: 165px; padding: 0.2em 10px; background: var(--jl-buylink-bg); color: var(--jl-on-dark-strong); text-decoration: none; text-shadow: var(--jl-text-shadow-on-dark); } #buylinks .sub-menu li a { text-align: left; } #buylinks li a:hover, #buylinks li a:focus, #buylinks .sub-menu li a:hover, #buylinks .sub-menu li a:focus { color: var(--jl-buylink-hover); } #buylinks .sub-menu { display: none; position: absolute; top: 30px; left: 0; width: 100px; margin: 0; padding: 0; } #buylinks li:hover .sub-menu, #buylinks li:focus-within .sub-menu { display: block; } /* ========================================================================== Task 13 — front-page book list -------------------------------------------------------------------------- Ported from jl2013a/style.css:537-539 and 860-947, where every rule was scoped to `body.home`. WordPress still adds the `home` class to on a static front page under Astra, so the scope survives; it is written here as `.home` because Astra's own selectors do not qualify it with the element. TWO SPECIFICITY TRAPS, both already paid for once in Task 12: 1. Astra's dynamic CSS emits `.entry-content :where(h1,…,h6)` at (0,1,0), which beats every plain-element rule in the type scale above. Any heading size inside .entry-content has to be restated at (0,2,0) or better, which is why the book headings below are all qualified by .entry-content rather than by .home alone. 2. Astra colours headings explicitly. Book titles are anchors INSIDE an h2, so they take the `a` colour and need no help — but the h2 itself must not be given a colour here, or it would win over the link. HOW THE OLDER-BOOKS COLUMNS WORK. jl2013a floated four hardcoded slugs (#magic, #battle, #daughters-of-earth, #team-human) into a two-up grid. That pinned the layout to four particular titles, which would have made the _jl_starts_older_books flag half a feature: moving the divider would move the heading but leave the columns behind. The template wraps the older run in .book-grid__older instead, so the float grid and the reduced type follow the divider wherever it goes. The cover treatment below is still per title, and genuinely is per title: Magic's featured image is a horizontal trilogy strip, Team Human's two editions are hand-positioned at 60px with negative margins, and the rest are centred portraits. Art direction, not layout. Moving the divider to a title with different cover art will need a rule here. ========================================================================== */ /* Contains the floated older-book columns. jl2013a had no wrapper and got * below them via `body.home div.original { clear: both }` — a rule on the * page's OWN content, which Astra now emits through the_content() and this * plugin does not own. Containing the floats here is equivalent and does not * depend on markup we cannot reach. */ .home .book-grid, .home .book-grid__older { display: flow-root; } .home .book-grid .book { margin-bottom: 32px; -webkit-hyphens: auto; hyphens: auto; } /* Attribution lines under the cover blurbs. */ .home .book-grid .book cite { display: block; text-align: right; text-indent: 3em; color: var(--jl-cite); } /* `clear: both` is load-bearing, not tidiness. Each book's covers float right * and are taller than most of the blurbs beside them, so without it a cover * overhangs the NEXT book's title. jl2013a got this from a blanket * `h1,h2,h3,h4,h5,h6 { clear: both }` at style.css:96, which its front page * received in full because front-page.php rendered outside .entry-content — * the `.entry-content h3,h4,h5,h6 { clear: none }` exception at :101 never * applied there. Astra puts this list inside .entry-content, so the two rules * are restated together at the scope where they belong. * * That blanket rule has not been ported globally. Headings in ordinary post * and page content still do not clear floats here; see the note left for Task * 15. This block covers the front page only. */ .entry-content .book-grid .book-title, .entry-content .book-grid .subhead, .entry-content .book-grid__divider { clear: both; } .entry-content .book-grid .book-title { margin-bottom: 12px; font-size: var(--jl-size-h2); line-height: var(--jl-leading-h2); } /* jl2013a declared no .subhead rule, so a subhead took the plain h3 size. * Restated because Astra's h3 is 24px, not 22px. Only the two older titles * carry a subhead today; this is what a subhead on a current title would get. * * The `margin: 0` Task 13 put here has been removed: the reset's heading rule * is now global (see the base-typography block above), and keeping a scoped * copy would only let the two drift apart. */ .entry-content .book-grid .subhead { font-size: var(--jl-size-h3); line-height: var(--jl-leading-h3); } .entry-content .book-grid__divider { margin-bottom: 32px; font-size: var(--jl-size-h2); line-height: var(--jl-leading-h2); } /* --- The older-books grid ------------------------------------------------- */ .home .book-grid__older > .book { float: left; width: 300px; } /* jl2013a spelled this out per slug: 32px gutter on #team-human and * #daughters-of-earth, none on #magic and #battle, and `clear: both` on * #daughters-of-earth to start the second row. With the run wrapped, the same * result falls out of position — left column clears and carries the gutter, * right column closes the row. */ .home .book-grid__older > .book:nth-child(odd) { clear: both; margin-right: 32px; } .home .book-grid__older > .book:nth-child(even) { margin-right: 0; } .entry-content .book-grid__older .book-title { font-size: 18px; line-height: 24px; } .entry-content .book-grid__older .subhead { font-size: 14px; line-height: 18px; color: var(--jl-subhead-muted); text-shadow: none; } .home .book-grid__older p { font-size: 14px; line-height: 18px; } /* --- Cover art in the older columns --------------------------------------- */ /* Magic's trilogy strip and the two single portraits are centred rather than * floated: at 300px wide there is no room for text to wrap beside them. * jl2013a/style.css:537-542. Team Human is excluded there and here — it keeps * the floated pair, shrunk and overlapped by the rules below. */ .home .book-grid__older .book:not(#team-human) .covers img { display: block; float: none; margin: 1em auto; max-width: 200px; } .home #team-human .covers { height: 130px; } .home #team-human .covers .attachment-cover_thumbnail { max-width: 60px; margin-right: 140px; } .home #team-human .covers .attachment-cover_thumbnail.secondary { margin-right: 90px; margin-top: -80px; z-index: 10; } .home #team-human p { clear: both; } /* --- Per-book child navigation -------------------------------------------- */ .home .booknav { display: table; margin: 0 0 1em; padding: 0; list-style: none; } .home .booknav li { float: left; width: auto; margin-right: 2em; list-style: none; } .home .booknav::after { content: ""; display: block; clear: both; } /* ========================================================================== Task 14 — blog archive, single post, and comments -------------------------------------------------------------------------- Ported from jl2013a/style.css:424, 557-570 and 949-1040. The comment markup is the hard part. Astra and jl2013a agree on almost none of it — `ol.ast-comment-list` against `ol.commentlist`, `article.ast-comment` against `article.comment`, `.ast-comment-avatar-wrap` against `div.comment-author.avatar`, `.ast-comment-content` against `.comment-content` — so every rule below is rewritten against Astra's classes rather than the original's. Replacing Astra's comment walker would have made the CSS a straight copy, at the cost of owning a template that has to track Astra's markup forever. 26,202 comments make this worth getting right; a walker is not worth maintaining. ========================================================================== */ /* --- Post meta ------------------------------------------------------------ * jl2013a/style.css:949 greys all of it down to 0.8em. The same rule covers * the footer this plugin emits (categories, tags, comment link, short link) * and the comment bylines. */ /* `0.8rem`, not `0.8em`. Astra wraps the archive byline in * `.ast-blog-meta-container` at 13px, so a relative size compounds to 10.4px * where the baseline is 12.8px. rem takes it off the 16px root, which is what * jl2013a's `.8em` resolved against. Weight is restated for the same reason: * Astra sets `--ast-blog-meta-weight: 600`. */ #primary .entry-meta, #comments .ast-comment-meta, #comments .ast-comment-time { color: var(--jl-meta); font-size: 0.8rem; line-height: var(--jl-leading-base); font-weight: 400; } #primary .entry-meta a, #comments .ast-comment-meta a, #comments .ast-comment-time a { color: var(--jl-meta-link); } /* jl2013a never turned link underlines off, so body copy underlines * everywhere. Astra does turn them off globally and puts them back only under * `.ast-single-post .entry-content a` — which leaves the 50 posts on `/blog/` * with unmarked links. Restated for listing content as well. Heading links are * excepted at higher specificity above, and #buylinks below. */ #primary .entry-content a, #primary .ast-excerpt-container a { text-decoration: underline; } /* The footer meta is a block, not the inline header meta. jl2013a gave it no * top margin on the archive — the `.entry-content` above already carries the * spacing — so it sits directly under the post. */ #primary footer.entry-meta { clear: both; margin-top: 0; } /* 1.5em of the footer's own 12.8px, matching the global paragraph rhythm * jl2013a applied here. Astra's category styling reaches the paragraph too — * its blue, 600 weight — so the type is restated rather than inherited. */ #primary footer.entry-meta p { margin-bottom: 1.5em; color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } /* Astra styles `.cat-links` and the taxonomy containers on its own terms — * its blue, 600 weight, a tighter leading — and those class names collide with * the ones jl2013a used. Everything inside this footer takes the meta styling * from the parent instead. */ #primary footer.entry-meta span { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } /* Category and tag links keep the body underline; they read as prose ("Posted * in New York City/USA, The Mortons"), not as buttons. */ #primary footer.entry-meta a { color: var(--jl-meta-link); font-weight: inherit; line-height: inherit; text-decoration: underline; } /* --- Archive entry titles ------------------------------------------------- * jl2013a's content.php used `h1.entry-title` per post; Astra emits `h2`. The * element changed, the size did not — the baseline archive renders these at * the h1 scale. Astra's `header.entry-header .entry-title` rule is (0,2,1), so * this needs `#primary` in front of it, the same lever as Task 12. */ #primary .ast-article-post .entry-title { margin-bottom: 0; font-size: var(--jl-size-h1); line-height: var(--jl-leading-h1); font-weight: inherit; letter-spacing: -1px; } /* Astra colours `.entry-title a` explicitly, which blocks the link red the * baseline shows. `color: inherit` would give the h2's near-black instead, so * the red is named. */ #primary .ast-article-post .entry-title a { color: var(--jl-red); font-weight: inherit; } /* jl2013a/style.css:425 — `.entry-content { margin: 1.5em 0 0 }`. Astra's * archive wraps the post body in `.ast-excerpt-container` with no top margin, * which closed the gap under the byline; on single posts `.entry-content` * itself has none. Pages are excluded: their content sits directly under the * title with no byline between, and Task 12 already set that spacing. */ #primary .ast-excerpt-container, #primary .ast-article-single .entry-content { margin-top: 1.5em; } /* Single posts carry the same title treatment as the archive. Astra's * `.entry-title { margin-bottom: 0.6em }` is the one that has to go. */ #primary .ast-article-single .entry-title { margin-bottom: 0; } /* --- Post navigation ------------------------------------------------------ * jl2013a/style.css:557-570. Previous left, next right, each half the column. */ .site-content .site-navigation, .site-content .post-navigation, .site-content .paging-navigation { margin: 0 0 1.5em; overflow: hidden; } .site-content .nav-previous { float: left; width: 50%; } .site-content .nav-next { float: right; width: 50%; text-align: right; } /* Astra colours post navigation its own blue and styles the links as buttons. * jl2013a left the container at the body colour and the link an ordinary link * — red and underlined, like any other. */ #primary .nav-previous, #primary .nav-next { color: var(--jl-text); } #primary .nav-previous a, #primary .nav-next a { display: inline; margin: 0; color: var(--jl-red); font-weight: 400; line-height: var(--jl-leading-base); text-decoration: underline; } /* Screen-reader-only headings inside those navs. jl2013a/style.css:344. */ .assistive-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; } /* --- Comments ------------------------------------------------------------- * The counter, the gradient, and the author highlight are the three things * that make this comment list recognisably Justine's. */ /* `#comments` throughout this block, and not for decoration. Astra's comment * CSS is written at (0,2,x) — `.ast-separate-container .ast-comment-list * li.depth-1`, `.ast-separate-container .comments-title` — which outranks any * plain class selector here regardless of load order. The id is Astra's own * container and jl2013a's before it, so it is stable ground to stand on. */ #comments .comments-title { margin-bottom: 1em; padding: 0; font-weight: inherit; } #comments .ast-comment-list { margin-left: 0; padding-left: 0; list-style: none; counter-reset: comments; } #comments .ast-comment-list li { list-style: none; } /* jl2013a stacked six vendor-prefixed copies of this gradient plus an IE * filter. One unprefixed declaration is the same paint in every browser that * can load this site. * * The padding reset matters as much as the gradient: Astra gives every * top-level comment 2.5em of horizontal padding, which would inset the whole * thread and break the 100px avatar column below. */ #comments .ast-comment-list > li { margin-bottom: 2.6em; padding: 0 0 1em; border-bottom: 0; border-radius: 0 1.2em 0 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%); } /* Justine's own replies. The dark red is the nav colour; the wash beneath it * is what marks her answers out in a 356-comment thread. */ #comments .ast-comment-list > li.bypostauthor { background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgba(195, 160, 157, 0.75) 100%); } /* The numbered badge, top right of each comment. `counter-increment` is on the * pseudo-element exactly as jl2013a had it, so the count follows document * order and needs no PHP. */ #comments .ast-comment-meta::before { counter-increment: comments; content: counter(comments); float: right; min-width: 1.4em; height: 1.4em; padding: 0.2em; border-radius: 1.2em; background: var(--jl-comment-badge-bg); color: var(--jl-comment-badge); line-height: 1.4em; text-align: center; } #comments .ast-comment-list > li.bypostauthor .ast-comment-meta::before { background: var(--jl-red-dark); color: var(--jl-on-dark-strong); } /* Astra lays the byline out as a flex row inside `.ast-row`, which brings a * negative 20px gutter and 3.4em of padding with it. Both have to go, or the * floated badge above has nothing predictable to sit against. */ #comments .ast-comment-meta { display: block; margin-left: 0; margin-right: 0; padding: 0; line-height: 24px; } /* Astra separates comments with a 1px rule and 2.5em of vertical padding. * jl2013a used neither: the gradient IS the separator, fading into the gap * left by the 2.6em bottom margin. The border cut across it. */ #comments .ast-comment { padding: 0; border-top: 0; border-bottom: 0; } /* One byline on one line — "Dess on 1 June, 2007 at 11:39 AM" — as the * baseline has it. Astra makes the name a block and the timestamp a flex row, * which stacks them. `font-size: inherit` on both keeps them at the 0.8em set * on `.ast-comment-meta`; without it Astra's own sizes compound and the * timestamp lands at 10px. */ #comments .ast-comment-cite-wrap, #comments .ast-comment-time, #comments .ast-comment-time span, #comments .ast-comment-time time { display: inline; font-size: inherit; } /* Avatar in a 100px column with the body indented past it. Astra lays * `.ast-comment-info` out as a flex row, which would put the byline beside the * avatar and leave the comment text full width; jl2013a floats the avatar and * indents everything after it. `display: block` hands the layout back to the * float. */ #comments .ast-comment-info { display: block; } #comments .ast-comment-avatar-wrap { float: left; width: 100px; margin: 0 0 0.8em; padding: 0; } #comments .ast-comment-avatar-wrap img { width: 80px; height: 80px; border-radius: 0; } #comments .ast-comment-content, #comments .ast-comment-edit-reply-wrap { margin-left: 100px; padding: 0; } /* 1.1em applies once, on the `cite`. Astra nests a `` inside it; * repeating the size there compounds to 1.21em and the name comes out 1.4px * too big — invisible by eye, caught by the computed-style diff. */ #comments .ast-comment-cite-wrap cite { font-style: normal; font-weight: bold; font-size: 1.1em; } #comments .ast-comment-cite-wrap cite b { font-size: inherit; font-weight: inherit; } /* jl2013a/style.css:458 — images inside a comment never break the column. */ #comments .ast-comment-content img { max-width: 100%; height: auto; } #comments .ast-comment-content img.wp-smiley { display: inline; margin: 0; padding: 0; border: 0; } /* ========================================================================== Task 15 — the sidebar -------------------------------------------------------------------------- jl2013a/style.css:823-846. The sidebar is not a colour: it is black at 20% over the flower photograph, which is why it reads as a darker red than the page and shifts with whatever is behind it. The same trick is already used on the primary navigation (Task 11). Layout — the 230px column and the 664px content beside it — is Astra's job, set through `site-sidebar-width` rather than fought with here. ========================================================================== */ /* `.ast-right-sidebar #secondary.widget-area`, not a bare `#secondary`. Astra * sets `padding-left: 60px` at (1,1,0) inside a `min-width: 993px` media * query, so the plain id rule applies the padding on mobile and silently loses * it on desktop — the kind of half-applied rule a screenshot does not show. * (1,2,0) here settles it at every width. */ /* The top margin MIRRORS `#primary`, and must keep mirroring it, because the * two columns are meant to start level — that is what jl2013a showed, where * `#main` sat inside the body's own padding and neither column had a margin. * * `#primary`'s top margin is NOT a constant. Three rules decide it: * * #primary { margin: 4em 0 } (1,0,0), no media * .ast-separate-container #primary { margin: 0 } (1,1,0), no media * .ast-separate-container #primary { margin: 4em 0 } @media (min-width: 993px) * * The second outranks the first, so below 993px the content column has NO top * margin and only at 993px and up does it get 4em. A flat `4em` here therefore * matched the content only on desktop and dropped the sidebar 64px below it * everywhere narrower. * * That went unseen until 2026-08-13: the tablet breakpoint was 921, so the * 768-992 band stacked the columns and never rendered them side by side. * Lowering the breakpoint to 767 (see includes/breakpoints.php) made the band * two-column and exposed the mismatch. Reported from an iPad as "space at the * top of the sidebar" — it was 64px of unmatched margin. * * So: no top margin by default, 4em only where `#primary` also takes it. Keep * the 993px figure in step with Astra's rule above, NOT with our own 767 * breakpoint — they are different boundaries and only Astra owns this one. */ .ast-right-sidebar #secondary.widget-area, #secondary { margin: 0 0 2.5em; padding: var(--jl-gutter); background-color: var(--jl-overlay); color: var(--jl-on-dark-strong); line-height: var(--jl-leading-base); text-shadow: var(--jl-text-shadow-on-dark); } /* The other half of the mirror: 993px is Astra's own boundary for giving * `.ast-separate-container #primary` its 4em top margin, so the sidebar takes * the same margin at the same width and the columns stay level on desktop. */ @media (min-width: 993px) { .ast-right-sidebar #secondary.widget-area, #secondary { margin-top: 4em; } } /* Widget headings drop the letterpress shadow, which is built for dark text on * a light ground and disappears on this one, and take the drop shadow the rest * of the sidebar uses. Colour is set on the heading only — the anchor inside * takes the slightly translucent white from `#secondary a` below, as it does * in the baseline. */ #secondary .widget-title, #secondary h2, #secondary h3 { color: var(--jl-on-dark-strong); text-shadow: var(--jl-text-shadow-on-dark); } #secondary h2 a, #secondary h3 a { text-shadow: var(--jl-text-shadow-on-dark); } #secondary .widget-title { margin-bottom: 0; font-size: var(--jl-size-h3); line-height: var(--jl-leading-h3); font-weight: 400; } #secondary a { color: var(--jl-on-dark); } #secondary a:hover, #secondary a:focus { color: var(--jl-on-dark-strong); } /* Prose links inside a widget keep their underline; list items are navigation * and do not. jl2013a/style.css:843. */ #secondary li a { text-decoration: none; } /* Not Astra — the SHARED CHILD THEME. `clockpunk-author/css/_utilities.css:40` * declares * .ast-separate-container .site-content #secondary .widget * { padding: 1rem } (inside @media min-width: 768px) * at (1,3,0), which insets every widget and narrows its content from 230px to * 198px. jl2013a/style.css:580 gives widgets a bottom margin and nothing else. * Same situation as the `article.type-page` override above: the file serves * every Clockpunk author site and is not this client's to edit, so it is * outranked from here at (1,4,0) rather than changed there. * * This one cost an hour. The rule is invisible to a `document.styleSheets` * walk, because the child theme's `style.css` is six `@import` statements and * an import's rules live under `rule.styleSheet.cssRules`, not `rule.cssRules`. * Disabling stylesheets one at a time and watching the computed value is what * found it. */ .ast-separate-container .site-content #secondary.widget-area .widget, #secondary.widget-area .widget { margin: 0 0 1.5em; padding: 0; border: 0; background: none; } #secondary .widget li { margin-bottom: 0.6em; } #secondary .widget ul { margin-left: 0; padding-left: 0; list-style: none; } #secondary blockquote { font-size: 0.8em; color: var(--jl-on-dark-faint); } /* ========================================================================== Task 15 appends here: remaining templates. ========================================================================== */ /* --- The archive loop is a three-column grid ------------------------------- * Astra free lays every archive, search page and the blog itself out as a * 3-across card grid, and this site has never wanted that: jl2013a stacked * full-width posts, 664px wide with 24px between them. * * FOUND IN TASK 15, AND IT IS OLDER THAN TASK 15. It is on `/blog/`, on every * category and tag archive, and on the search results — every view Task 14 * signed off as matching. It hides below 921px, where Astra's own media query * returns the articles to `width: 100%`, so a verification pass run in a narrow * window sees the correct layout. It took a desktop-width render to see it: * a 1728px viewport puts full 3,000px-tall posts into 249px columns. * * There is no setting for it. `blog-grid` looks like the lever and is not: * class-astra-dynamic-css.php:4089 emits the 33.33% unconditionally whenever * the layout is `blog-layout-4` and Astra Pro's blog-pro addon is inactive, * which is this site. So it is overridden here. * * `#primary.ast-blog-layout-4-grid` — one selector, no descendant space, because * `.ast-blog-layout-4-grid` IS `#primary`. (1,2,0) against Astra's (0,3,0) puts * the win on specificity rather than on load order, which matters here: Astra * prints this block as inline dynamic CSS in `wp_head`, ahead of this file but * not reliably so. */ #primary.ast-blog-layout-4-grid .ast-row { display: block; margin-left: 0; margin-right: 0; } #primary.ast-blog-layout-4-grid .ast-article-post { width: 100%; margin-bottom: 1.5em; padding: 0; } /* The card treatment that came with the grid. `height: 100%` exists to make * cards in a flex row equal height and stretches nothing once they stack. * * The inset, the white and the 6px corner radius are handled with every other * per-article panel in the content-shell block near the top of this file — the * baseline has one white column on `#primary`, not fifty rounded cards. The * radius in particular came from Astra's `post-card-border-radius` setting, * which defaults to 6, and is now 0 in the database rather than overridden * here; its `overflow: hidden` sits in the same generated declaration block and * survives a zeroed radius, so that is unset there too. */ #primary.ast-blog-layout-4-grid .ast-article-inner { height: auto; } /* --- The heading above an archive or search page --------------------------- * jl2013a wrapped it in `header.page-header` and styled neither the header nor * the `h1.page-title` inside it, so the heading was simply an h1: 42px/48px, * regular weight, near-black, ranged left, no margin. * * Astra treats it as a page banner instead — `.ast-archive-description` centres * it and `.ast-archive-title` sizes it at 32px/600 in the slate `--ast-global-color-3`. * The global heading rules earlier in this file do not reach it: they are * element selectors and (0,1,0) class rules outrank them. * * Measured against baseline-preswitch/_s_magic.html at the "Search Results for: * magic" heading — 42px against 32px, 400 against 600, #141414 against #1e293b, * and centred where the baseline is ranged left. */ #primary .ast-archive-description { margin-bottom: 0; padding: 0; text-align: start; } /* The `*` is not defensive padding. Astra's search-page rule is * .search .ast-container section.ast-archive-description h1, * .search … h1 * { font-weight: 600; font-size: 2rem } * and jl2013a's markup puts the search term itself in a inside that h1, * so without the second selector the heading came out 42px with a 32px semibold * word in the middle of it. */ #primary .page-title, #primary .page-title * { margin-bottom: 0; font-size: var(--jl-size-h1); line-height: var(--jl-leading-h1); font-weight: inherit; letter-spacing: -1px; color: inherit; } /* --- Date archives -------------------------------------------------------- * jl2013a/date.php did not list posts; it printed a three-column table, one * row per post, grouped under an

per month on a year archive. The markup * is rebuilt in includes/archives.php. These are its rules — style.css:205-213 * for the base table and 1058-1080 for the list itself. * * Every declaration here has to unpick something Astra sets on tables. Astra * puts a 1px border on the table AND on every cell (style.min.css: `table,td,th * { border: 1px solid var(--ast-border-color) }`), pads cells to `.7em 1em`, and * gives the table `border-width: 1px 0 0 1px`. jl2013a's table has no outline at * all: one hairline under the head, one under each row, and .25em of padding. * * `border-collapse: separate` with zero spacing is not a long way of writing * `collapse`. It is what the original's `cellspacing="0"` produced, and the * difference is visible: each row's #ddd bottom border and the next row's #f0f0f0 * top border both paint, giving a 2px two-tone rule. Collapsing them would * discard one and halve it. */ .archive-list { width: 100%; margin: 0 0 1.5em; border: 0; border-bottom: 1px solid #f0f0f0; border-collapse: separate; border-spacing: 0; } .archive-list th { padding: 0; border: 0; border-bottom: 1px solid #ddd; text-align: right; font-weight: bold; } .archive-list td { padding: 0.25em; border: 0; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #ddd; } /* Wide enough for "31st" and for the "09 48:pm" a day archive prints. */ .archive-list td.day { width: 2.6em; } .archive-list td.comments-count { text-align: right; } /* jl2013a/style.css:843, the same rule that clears the underline in the * sidebar. A table of 50 titles reads as an index, not as prose. */ .archive-list td a { text-decoration: none; } /* --- The search field ----------------------------------------------------- * jl2013a/searchform.php was a plain text input and a submit button, styled by * two rules: the generic `input[type=text]` at style.css:299 (a 1px #ccc border, * 3px radius, #666 text) and `#searchsubmit { display: none }` at :585, which * hid the button and left the field alone in the column. The field kept the * browser's default width — 175px including its border. * * Astra ships a 40px-tall grey pill that fills its container, with a magnifier * button inside it. Measured against baseline-preswitch/blog.html: 175x27 white * with a #ccc border against 230x40 grey with a #d1d5db one. * * The form appears in the sidebar of every page and IS the whole content of the * 404, which is why this sits with the templates rather than with the sidebar * rules further up. Hiding the button is faithful — production submits on * Enter, and the `` inside it keeps the accessible * name either way. */ /* `.widget_search .search-form .search-field` is restated because Astra's own * copy of it is (0,3,0) and outranks the two-class selector on its own. The * 175x27 is the size the browser gave jl2013a's default-width text input; the * field is deliberately narrower than the 230px sidebar column, as the baseline * has it. `border-box` is what makes those two numbers the outer box, which is * how they were measured. */ .widget_search .search-form .search-field, .search-form .search-field, #searchform input[type="text"] { box-sizing: border-box; width: 175px; height: 27px; padding: 3px; border: 1px solid #cccccc; border-radius: 3px; line-height: normal; color: #666666; background-color: var(--jl-content-bg); } .search-form .search-submit, #searchsubmit { display: none; } /* --- 404 ------------------------------------------------------------------ * The wording is Astra's by owner decision — jl2013a's 404 searched for the * slug the visitor asked for and offered matches, and that feature is * deliberately not ported. The LAYOUT is not Astra's to choose: the baseline * puts the white column where every other page has it, ranged left at the same * width, with the text ranged left inside it. * * Astra centres the whole thing and, because a 404 has no sidebar, lets the * white box run the full 992px of the container — a third wider than any other * page on the site, and the only page where the floral ground does not show on * the right. * * Task 15 constrained `.error-404` to 72% here — 100% minus Astra's * `site-sidebar-width` of 28 — to stop the box running the full container. * That is now redundant and has been removed: Task 17 fixes `#primary` itself * at 712px on every view, the sidebar-less 404 included, so the white column * lands in the same place as everywhere else without a second lever. The * baseline's box is 712px, which is what that produces exactly. */ .error404 .ast-404-layout-1 { margin: 0; text-align: start; } /* Astra caps the search widget at 370px and centres it with an auto side * margin, which survives `text-align` on the ancestor because it is margin, not * alignment. jl2013a's 404 called `get_search_form()` inline in the entry * content, so the field starts at the left edge of the text above it. */ .error404 .ast-404-layout-1 .widget { max-width: none; margin-left: 0; margin-right: 0; } /* --- The Archives page ---------------------------------------------------- * /blog/archives/ (page 1404) is the only page using the Yearly Archives * template, and its whole body is one list of years. * * Task 15 scoped `margin-left: 1.5em` to `.yearly-archives` as a stand-in for * the sitewide `ul, ol` indent it could not yet adopt. Task 16 Step 0 adopted * that rule globally, so the scoped copy has been removed — this page now gets * its indent from the same rule as every other list on the site. */ /* ============================================================ * APPEARANCES (includes/appearances.php) * * The list sits inside the single white #primary panel established * in Task 17, so it needs no panel of its own -- only internal * rhythm. Deliberately NOT styled as cards: the owner rejected the * fifty-rounded-Astra-cards treatment on the blog archive (Task 15), * and the same judgement applies here. * * Checked astra-settings for a spacing/radius/margin option that * might already govern this before writing plain CSS: the only hit * is `post-card-border-radius`, already zeroed for the blog archive * and irrelevant to a plain list. Nothing else applies here, so this * is ordinary CSS rather than a fight with a customizer setting. * ============================================================ */ .appearances__heading { margin-top: 1.5em; } .appearance-list { margin: 0 0 2em; padding: 0; list-style: none; } /* A rule, not a card. Separates entries without boxing them. */ .appearance + .appearance { margin-top: 1.5em; padding-top: 1.5em; border-top: 1px solid var(--jl-rule); } .appearance__title { margin: 0 0 0.25em; } .appearance__when { margin: 0 0 0.25em; font-weight: 700; } .appearance__venue { margin: 0 0 0.5em; } .appearance__body { margin: 0 0 0.5em; } .appearance__body p:last-child { margin-bottom: 0; } /* The gap above the button lives HERE and nowhere else. `.appearance__body * p:last-child` above deliberately zeroes its own bottom margin so the body * prose never double-spaces against whatever follows it -- which left the * button sitting flush under the Lineup line. Putting the space on the button * keeps one owner for it, so the two rules cannot fight and re-open the gap * at some other size. */ .appearance__book { margin: 1.25em 0 0; } /* `#page #primary` and not `#primary` alone: Astra's * `.ast-separate-container .ast-article-single#primary` is (1,2,0) and * outranks a bare id. The Task 14 content-link underline rule is (1,1,1) * and would otherwise underline this button as prose. */ /* Astra's stock button is its own blue (--ast-global-color-0), which was the * only blue on a maroon-and-cream page. `--jl-buylink-bg` is the colour this * site's purchase-link buttons have always used (jl2013a style.css:800), so * adopting it here gives one button treatment sitewide rather than a second * one invented for appearances. Hover mirrors the buy links too: the ground * holds and the label lightens, rather than the ground shifting. */ #page #primary .appearance__book .ast-button { text-decoration: none; background-color: var(--jl-buylink-bg); border-color: var(--jl-buylink-bg); color: var(--jl-on-dark-strong); } #page #primary .appearance__book .ast-button:hover, #page #primary .appearance__book .ast-button:focus { background-color: var(--jl-buylink-bg); border-color: var(--jl-buylink-bg); color: var(--jl-buylink-hover); } .appearance-mini-list { margin: 0 0 0.75em; padding: 0; list-style: none; } .appearance-mini + .appearance-mini { margin-top: 0.75em; } .appearance-mini__when { font-weight: 700; } .appearance-mini__all { margin: 0; } /* Task 8: each entry now links to its single event page. Existing anchor * styling from `#secondary li a` and `#secondary a` already handles * underlines and link colour; this rule only needs to expand the clickable * area. The anchor wraps two lines (`.appearance-mini__when` and * `.appearance-mini__venue`) inline, leaving half the entry outside the click * target -- `block` makes the entire entry the hit area. */ .appearance-mini__link { display: block; }