/** * Zone Six Worlds — the per-post world look. * * "The skin follows the post: a Marvel review wears the comic look wherever it appears, * including the post page." * * The plugin does not render a post's title or meta — Soledad does — so this file has to * reach the theme's own elements through the body class. That coupling is real and it is * kept in one place, the THEME HOOKS block at the bottom, with the selector list spelled * out. If a Soledad update renames a class, that block is the only thing to edit and the * worst case is a plain-looking title, not a broken page. * * Everything above that block is the plugin's own markup and is safe from theme changes. */ /* ---------------------------------------------------- the plugin's own markup */ /* The world bar above the body: chip, live count, way into the hub. */ .zsw-postbar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 0 0 28px; padding: 14px 18px; background: #f7f6f2; border-left: 5px solid var(--zsw-accent, #3b96e6); } .zsw-postbar__count { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--zsw-ink-faint); } .zsw-postbar__hub { margin-left: auto; padding: 8px 16px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; background: var(--zsw-accent, #3b96e6); color: #fff; transition: transform .25s ease; } .zsw-postbar__hub:hover { transform: translateY(-2px); } @media (max-width: 600px) { .zsw-postbar__hub { margin-left: 0; } } /* -------------------------------------------------------------- THEME HOOKS * * Soledad's own elements, restyled per world. Selector list, as of Soledad 8.7.3: * * .page-title, .entry-title the post title on a single post * .entry-header .cat > a the category links above the title * .single .post-entry blockquote pull quotes in the body * * Each world sets --zsw-accent, --zsw-display and --zsw-display-weight on , and * the shared rules below read those. Adding a seventh world means one more body block, * not another copy of the rules. */ body.zsw-w-marvel { --zsw-accent: #C8102E; --zsw-display: 'Bangers', Impact, 'Arial Narrow', sans-serif; --zsw-display-weight: 400; --zsw-display-spacing: 1px; --zsw-x-height: 0.46; } body.zsw-w-who { --zsw-accent: #534AB7; --zsw-display: 'Michroma', Eurostile, Arial, sans-serif; --zsw-display-weight: 400; --zsw-display-spacing: .5px; --zsw-x-height: 0.52; } body.zsw-w-bt { --zsw-accent: #1D9E75; --zsw-display: 'Chakra Petch', 'Arial Narrow', sans-serif; --zsw-display-weight: 700; --zsw-display-spacing: 1px; --zsw-x-height: 0.50; } body.zsw-w-dune { --zsw-accent: #BA7517; --zsw-display: 'Syncopate', Arial, sans-serif; --zsw-display-weight: 700; --zsw-display-spacing: 3px; --zsw-x-height: 0.54; } body.zsw-w-wot { --zsw-accent: #378ADD; --zsw-display: 'Cinzel', 'Times New Roman', serif; --zsw-display-weight: 700; --zsw-display-spacing: .5px; --zsw-x-height: 0.47; } body.zsw-w-lit { --zsw-accent: #639922; --zsw-display: 'VT323', 'Courier New', monospace; --zsw-display-weight: 400; --zsw-display-spacing: 0; --zsw-x-height: 0.44; } /** * The title takes the world's face — and ONLY the face. * * It does not set font-size. The first version tried to scale the theme's own size by * a per-world factor with `font-size: calc(1em * var(--zsw-title-scale))`, on the * assumption that `1em` meant "the size this element already is". It does not: in a * font-size declaration `em` resolves against the *parent's* size. So instead of * scaling Soledad's ~34px title it recomputed it from the 14px body text and rendered * every post title at about 15px. The theme's own responsive type scale is better than * anything this plugin can infer, so it is left alone. * * The six faces do render at noticeably different apparent sizes at the same px value, * which is what the scale was reaching for. `font-size-adjust` is the property actually * designed for that — it normalises by x-height — so it is applied per world instead, * inside @supports so a browser without it simply gets the theme's size untouched. */ body.zsw-skin.single .entry-title, body.zsw-skin.single .page-title, body.zsw-skin.single h1.entry-title { font-family: var(--zsw-display); font-weight: var(--zsw-display-weight); letter-spacing: var(--zsw-display-spacing); line-height: 1.06; } @supports (font-size-adjust: 0.5) { body.zsw-skin.single .entry-title, body.zsw-skin.single .page-title, body.zsw-skin.single h1.entry-title { font-size-adjust: var(--zsw-x-height); } } /* The category links above the title become the world's accent. */ body.zsw-skin.single .entry-header .cat > a, body.zsw-skin.single .entry-header .cat a { color: var(--zsw-accent); } /* Links in the body pick up the accent instead of the site blue, so a Dune review * reads as Dune all the way down. */ body.zsw-skin.single .post-entry a:not(.zsw-postbar__hub):not(.wp-block-button__link) { color: var(--zsw-accent); text-decoration-color: color-mix(in srgb, var(--zsw-accent) 45%, transparent); } /* A pull quote gets the accent rule down its edge. */ body.zsw-skin.single .post-entry blockquote { border-left: 5px solid var(--zsw-accent); } /* Marvel's face is all-caps by design and needs the extra weight of a shadow at * display size; the others do not. */ body.zsw-w-marvel.single .entry-title { text-shadow: 3px 3px 0 rgba(20, 18, 26, .12); }