/*
Theme Name: Porter Mason Toocheke
Theme URI: https://www.toocheke.com/
Description: Porter Mason's child theme of Toocheke
Author: Porter Mason
Template: toocheke-premium
Version: 1.0.0
Text Domain: porter-mason-toocheke
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* Write here your own personal stylesheet */
:root {
/* The black the live site draws every rule and border in; deliberately not
pure #000. Inside the "Keep reading" band it's Main Content Text Color
instead, and the band's other colours are Customizer settings too — see
.pm-next. */
--pm-ink: #1a1a1a;
/* Shared height for the share circles and the comic nav buttons, so
the two sides of that row match by construction. They used to be
sized differently (padding + em maths on one side, a fixed box on
the other) and drifted apart. */
--pm-comic-button-size: 2.5rem;
--pm-comic-row-padding: 1rem;
/* Gap between the strip and the row of buttons below it. */
--pm-comic-row-gap: .5rem;
/* Header height. Shorter on single comic pages so the strip itself
leads. The pattern scales to cover whatever height this is. */
--pm-header-height: 150px;
/* The bookmark/title/like cluster is centred by making the space to
its left equal the space to its right. The navigation group (5
buttons) is wider than the share group (2 circles), so a spacer of
the difference is inserted on the left. Retune this if the number
of nav or share buttons changes — too small shifts the title left,
too large shifts it right. Grown by 3.2rem for the views count after the
heart (Sep 16), measured on a one-digit count. */
--pm-comic-side-balance: 15.4rem;
}
/* Header: parent theme adds a 45px top margin meant for other home
layouts; on alt-4 it just leaves a gap above the header. Live site
has the header flush with the top plus a black bottom border.
Parent theme also sizes this box off a hidden ![]()
(.jumbotron-img,
width:100%, height:auto) inside a flex container, so height grows
uncapped with viewport width on large monitors. max-height + hidden
overflow caps it; background-size:contain (from parent) keeps the
logo art from cropping inside that cap. */
.jumbotron-header {
margin-top: 0;
/* 1px above the menu, 3px below it (on the navbar) — that's how the
live site does it: the 3px black line belongs to the wrapper around
BOTH logo and nav, so it lands under the menu, not above it. */
border-bottom: 1px solid #000;
/* Fixed, not max: a box taller than the art would show flat-colour
gaps above and below it. */
height: var(--pm-header-height);
overflow: hidden;
}
body.single-comic {
--pm-header-height: 100px;
}
/* On a phone the header art goes and the menu bar takes its place, carrying
the logo — see "The menu on a phone" and "The menu on a phone held
sideways". Upright, the header band was 150px of a 915px screen; sideways,
the art plus the menu took better than a third of a 390px-tall screen before
the strip started. Every page, home included (Porter's call, Sep 10): one
bar everywhere.
Collapsed by height rather than display:none on purpose. The site name and
tagline live inside this box, clipped off-screen for screen readers (see the
note below) — removing the box would take them out of the accessibility
tree with it, undoing that. */
@media (max-height: 450px), (max-width: 499px) {
.jumbotron-header {
height: 0;
border-bottom: 0;
}
}
/* Logged in, under 600px wide, WordPress stops pinning its toolbar: it pushes
down 46px and places the toolbar at the top of the page instead. But
Toocheke gives position: relative, so "the top of the page" is the top
of that pushed-down box, and the toolbar lands 46px low, over the menu bar,
with an empty strip above it. This pulls it back up by the 46px WordPress
pushed. Left alone: Toocheke's rule itself, which its copyright bar relies
on to sit at the bottom of the page. */
@media screen and (max-width: 600px) {
#wpadminbar {
top: -46px;
}
}
/* Site name and tagline, present in the DOM but off-screen.
The header is a background image, which can carry no alt text, and the
![]()
Toocheke also emits is visibility:hidden so it's out of the
accessibility tree entirely — meaning nothing announced the site name
at all. Toocheke ships the same clip pattern in inc/custom-header.php,
but only applies it when header text is turned OFF — at which point its
template stops rendering the markup, so there's nothing left to hide.
So: header text is switched ON (header_textcolor is no longer `blank`)
and hidden here instead, leaving a real h1 and tagline for screen
readers and search engines while the artwork shows visually.
Clipped rather than display:none deliberately — display:none is dropped
from the accessibility tree, which would defeat the point. */
.jumbotron-header .comic-info {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
white-space: nowrap;
}
/* Parent theme sets background-image inline (PHP, from the header_image
theme mod) directly on this element, so a plain background-image rule
here can't win without !important — and !important would replace it
outright, losing the logo. Instead: re-declare it as a 2-layer
background, both layers from the Customizer via functions.php — Header
Image on top, Header Pattern behind it at ~35% from left, the way
rooniecomics.com places its art.
The pattern COVERS the header rather than sitting at its natural size.
Toocheke Companion shrinks any upload wider than 1920px on the way in, so
a 3500x200 pattern arrives 1920x110: shorter than the header, and
narrower than a big screen. Cover fills both, cropping what overflows.
The `none` fallbacks matter: an unset variable voids the whole
declaration, and with !important that wipes BOTH layers, not just the
missing one. */
.jumbotron-header {
background-image: var(--pm-header-logo-url, none), var(--pm-header-pattern-url, none) !important;
background-repeat: no-repeat, no-repeat;
background-position: center center, 35% center;
background-size: contain, cover;
}
/* The logo's link. Toocheke wraps it round an invisible image and lets that
image size itself, so the clickable area only matched the visible logo by
luck: an SVG saying width="100%" made it far off, and on a page with a
featured image the invisible image IS that featured image. Sized here like
the background above — full height, width from the logo's proportions
(functions.php) — the two cover the same spot. */
.jumbotron-header > a {
display: flex;
height: 100%;
}
.jumbotron-header .jumbotron-img {
aspect-ratio: var(--pm-header-logo-ratio, auto);
width: auto;
max-width: 100%;
height: 100%;
}
/* Nav bar. Its colour is Toocheke's Customize > Colors > Navbar Background
Color, which paints the bar and its dropdown sheet. Every menu's darker
shades are black laid over that colour (see "The menu on a phone"), so the
one setting colours all three menus. Left at Toocheke's default, Toocheke
prints no colour at all and the bar is white.
The 3px black line below matches the live site (see .jumbotron-header note). */
#site-navigation.navbar {
border-bottom: 3px solid #000;
box-shadow: none;
}
/* Keep the menu in normal flow while scrolling.
Toocheke's functions.js runs a sticky-menu handler on window.onscroll:
past the header's height it adds .fixed-top to the menu and
.header-fixed to the masthead. Going fixed pulls the menu out of flow,
so the document loses its height; Toocheke compensates with a fixed
`padding-top: 30px` on #content, which only cancels out if the menu
happens to be 30px tall. It isn't here, so every toggle changed the
page height by the difference — and since the toggle point is the
header height, scrolling up across it fired repeatedly and the page
juddered by that difference each time.
rooniecomics.com has no sticky menu, so the fix is to neutralise both
halves rather than chase the compensation value. Remove these two
rules if a sticky menu is ever wanted — and then make the padding
match the menu's real height instead of 30px.
Relative, not static: Toocheke lifts the bar and its dropdown sheet over
the page with z-index:500, which only works on a positioned element.
Static, a sheet opened while scrolled past the header opened underneath
the page — and with the admin bar showing, clicking a menu item it
half-covers scrolls the page to exactly there. */
#site-navigation.navbar.fixed-top {
position: relative;
}
.home .header-fixed + main #content,
.single-comic .header-fixed + main #content,
.page .header-fixed + main #content {
padding-top: 0;
}
#site-navigation .navbar-nav .nav-link {
font-family: 'Kameron', Georgia, serif;
font-weight: 700;
font-size: 1rem;
color: var(--pm-navbar-link);
padding: 12px 8px;
text-decoration: none;
}
/* Menu text is Navbar Link Color in every state. Toocheke turns hovered and
current text Navbar Link Hover Color, which would vanish into the hover
fill below. */
#site-navigation .navbar-nav .nav-link:hover,
#site-navigation .navbar-nav .nav-link:focus,
#site-navigation .navbar-nav .active > .nav-link,
#site-navigation .navbar-nav .nav-link.active,
#site-navigation .navbar-nav .nav-link.show,
#site-navigation .navbar-nav .show > .nav-link {
color: var(--pm-navbar-link);
}
/* Hover fills with Navbar Link Hover Color, the same in every menu (see
--pm-menu-hover under "The menu on a phone").
:focus-visible, not :focus: a click leaves focus on the link, which kept a
parent filled after clicking its children shut — the same fill as open. */
#site-navigation .navbar-nav .nav-link:hover,
#site-navigation .navbar-nav .nav-link:focus-visible {
background-color: var(--pm-menu-hover);
}
/* The menu collapses to a hamburger at the SAME width the comic panels drop to
one across, rather than at its own separate one.
Toocheke marks the navbar `navbar-expand-md`, so Bootstrap expands it from
768px — a third reflow point between the page's two (see "Responsive panel
wrapping"). The class can't be changed without overriding a parent template,
and Bootstrap has no 500px tier, so these repeat what its own
`@media (min-width: 768px)` block does, just from 500px. Above 768 both
apply and agree; between 500 and 768 only these do.
If Bootstrap is ever upgraded, check this still matches what
`.navbar-expand-md` generates in dist/css/bootstrap.min.css. */
@media (min-width: 500px) {
#site-navigation.navbar-expand-md {
flex-flow: row nowrap;
justify-content: flex-start;
}
#site-navigation .navbar-nav {
flex-direction: row;
}
#site-navigation .navbar-nav .dropdown-menu {
position: absolute;
}
#site-navigation .navbar-collapse {
display: flex !important;
flex-basis: auto;
}
#site-navigation .navbar-toggler {
display: none;
}
}
/* The menu wants 515px on one line, which doesn't fit a 500px screen. Dropping
the icons below and trimming some horizontal padding brings it to 457 in the
484 available at 500px. The wide view keeps its original spacing.
Retune this if menu items are added: measure the menu's natural width with
white-space:nowrap and compare against the narrowest screen. */
@media (min-width: 500px) and (max-width: 767px) {
#site-navigation.navbar {
padding-left: .5rem;
padding-right: .5rem;
}
#site-navigation .navbar-nav .nav-link {
padding-left: 6px;
padding-right: 6px;
}
/* A menu item showing BOTH an icon and a label drops the icon here — the
label already says what it is, and the icon is pure width.
The two exclusions are the icon-ONLY items, which would be left with
nothing to click: Home wraps its label in .sr-only (Toocheke's navwalker
does that when a menu item's classes include sr-only), and the bookmark
shows no label (porter-mason-core gives it a hidden one). */
#site-navigation .navbar-nav .nav-item:not(.comic-bookmark-item) .nav-link:not(:has(.sr-only)) i {
display: none;
}
}
/* Toocheke's animated underline (.menu-item:before — a 3px #F15A5A bar
sweeping out from center) sits at z-index:-1, so the black hover
background above would bury it. Lifting it above keeps that underline
on top of the rooniecomics.com-style black hover. */
#site-navigation .navbar-nav > .menu-item:before {
z-index: 1;
}
/* Current-page underline, without the layout shift. The parent theme
marks the active item with a real border-bottom: 3px on the link, so
the whole nav bar renders 3px taller on pages that have a matching
menu item (e.g. home) than on ones that don't (e.g. single comics) —
the bar visibly jumps when moving between them. Drop that border and
draw the same underline with the absolutely-positioned ::before used
for hover, which adds no height.
!important because once a site sets Navbar Link Hover Color, Toocheke
prints that border with !important too — on Thunder Dog (Sep 11) the bar
measured 55px on home and 52px on a comic until this won (Porter's call). */
#site-navigation .navbar-nav > .active > .nav-link,
#site-navigation .navbar-nav > .active > .nav-link:hover,
#site-navigation .navbar-nav > .active > .nav-link:focus {
border-bottom: 0 !important;
}
#site-navigation .navbar-nav > .menu-item.active:before {
left: 0;
right: 0;
}
/* Dividers between nav items, wherever the menu is a row: the wide menu and
the sideways phone bar. Same rule as between the upright phone menu's rows,
so all three menus agree (Porter's call, Sep 10; the live site used a light
grey, #ccc). None before the first item — the bar's edge is there. */
@media (min-width: 500px) {
#site-navigation .navbar-nav > li + li > .nav-link {
border-left: 1px solid var(--pm-menu-rule);
}
}
/* The bookmark only appears in the menu once something is bookmarked, so it's
always "on": its icon is Navbar Link Hover Color, the menu's accent (Toocheke
draws the underline under the current page in it), in every menu. It sits on
a circle of Navbar Link Color, the menu's text colour, because the accent
straight on the bar can all but vanish — red on Roonie's olive measured 1.4:1
(Porter's pick, Sep 10). Both colours come from functions.php. */
#site-navigation .comic-bookmark-item .fa-bookmark {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--pm-menu-icon-box);
height: var(--pm-menu-icon-box);
border-radius: 50%;
background-color: var(--pm-navbar-link);
color: var(--pm-navbar-link-hover);
font-size: .95rem;
line-height: 1;
vertical-align: middle;
/* The circle is taller than a line of menu text (1rem at a 1.5 line height),
so on pages with a bookmark the wide menu's bar grew by the difference.
Negative margins give that back; the circle looks no smaller. */
margin-top: calc((1.5rem - var(--pm-menu-icon-box)) / 2);
margin-bottom: calc((1.5rem - var(--pm-menu-icon-box)) / 2);
}
/*--------------------------------------------------------------
# The menu on a phone
--------------------------------------------------------------*/
/* Built to "Mobile Menu Explorations" in Comic page layout exploration/: a
cream bar holding the logo and a boxed button, with the menu dropping out of
it as full-width olive rows.
The behaviour is nearly all Toocheke's. Bootstrap's collapse slides the
panel open and pushes the page down, Toocheke's toggler already turns from a
burger into an X, and SmartMenus opens nested items in place — functions.php
only gives SmartMenus its slide back. What's here is paint.
The rows are Navbar Background Color, the same as the wide bar. The nested
list and the sheet are black laid over it, in the proportions the design's
olives had, so they follow whatever colour a site picks. They go on as
background images, because Toocheke paints those two with !important and
only ever sets the colour.
In every menu, text is Navbar Link Color, and every hovered or open item
fills with Navbar Link Hover Color — which is Toocheke's own dropdown hover,
so there's nothing to fight. Both come from functions.php, which passes
Toocheke's own default for any colour a site hasn't set.
The bar behind the logo stands in for the header, so it takes Header and
Sidebar Background Color (functions.php passes it in as --pm-header-bg). */
#site-navigation {
--pm-menu-bar: var(--pm-header-bg);
--pm-menu-hover: var(--pm-navbar-link-hover);
--pm-menu-sub: rgba(0, 0, 0, .13);
--pm-menu-sheet: rgba(0, 0, 0, .28);
--pm-menu-text: var(--pm-navbar-link);
--pm-menu-rule: rgba(26, 26, 26, .16);
--pm-menu-icon-box: 1.875rem;
}
/* The logo link in the menu bar, for both phone layouts, where the header art
has collapsed. It's Toocheke Premium's own Custom Logo link, which
functions.php fills with the Mobile Header Image. It sits on the header's
colour, so a site with a dark header needs light lettering in that image.
Hidden on the wide bar, where it's empty — and Bootstrap's 1rem margin on it
still pushed the centred menu off centre. */
#site-navigation .navbar-brand {
display: none;
margin: 0;
}
/* Each layout states a height; the width follows the artwork's own shape. */
#site-navigation .navbar-brand img {
display: block;
width: auto;
max-width: 100%;
object-fit: contain;
object-position: left center;
}
@media (max-width: 499px) {
/* The nav keeps Navbar Background Color, and the rows show it through. No
padding: the rows run edge to edge, so the bar's two items space
themselves. */
#site-navigation.navbar {
isolation: isolate;
padding: 0;
}
/* The bar along the top is the header in small: Header Pattern covering
it, over Header and Sidebar Background Color, which is all a site
without a pattern shows (Porter, Sep 16). A layer of its own because a
background can't cover just a strip of the nav. 3.625rem is the bar's
height, the button's 2.5rem plus its two .5625rem margins, so change
them together. isolation above keeps it behind the bar's contents. */
#site-navigation.navbar::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
height: 3.625rem;
background: var(--pm-header-pattern-url, none) 35% center / cover no-repeat, var(--pm-menu-bar);
}
/* Beside the button, where the header art would have been. */
#site-navigation .navbar-brand {
display: block;
max-width: calc(100% - 5rem);
margin-left: 1.25rem;
}
#site-navigation .navbar-brand img {
height: 1.75rem;
}
/* Toocheke strips the toggler's box with !important
(button.navbar-toggler { background: none !important; border: none
!important }), so drawing one back needs it too.
The button is a piece of the menu it opens: Navbar Background Color
with Navbar Link Color bars, like the rows (Porter, Sep 16).
The three bars keep Toocheke's size and animation. A button centres its
contents vertically by itself, so only the horizontal needs saying. */
#site-navigation .navbar-toggler {
width: 2.5rem;
height: 2.5rem;
margin: .5625rem .75rem .5625rem auto;
padding: 0;
background: var(--pm-navbar-bg) !important;
border: 2.5px solid var(--pm-ink) !important;
border-radius: 6px;
}
#site-navigation .navbar-toggler .icon-bar {
margin-left: auto;
margin-right: auto;
background-color: var(--pm-menu-text);
transform-origin: center;
}
/* Toocheke pivots the X's two bars near their left ends, which leaves the X
about 3px left of centre. Pivoting each on its own centre and sliding it
onto the middle bar crosses them dead centre instead. 6px is one bar plus
the gap under it — 2px + 4px, from Toocheke's own CSS. */
#site-navigation .navbar-toggler:not(.collapsed) .icon-bar:nth-of-type(1) {
transform: translateY(6px) rotate(45deg);
}
#site-navigation .navbar-toggler:not(.collapsed) .icon-bar:nth-of-type(3) {
transform: translateY(-6px) rotate(-45deg);
}
/* Hovered, it fills like any hovered menu item. Toocheke also removes
this button's focus outline, so keyboard focus gets the same look
rather than nothing. */
#site-navigation .navbar-toggler:hover,
#site-navigation .navbar-toggler:focus-visible {
background: var(--pm-menu-hover) !important;
}
/* Toocheke fills a bar with Navbar Link Hover Color, !important, while the
pointer is on the bar itself, and it vanished into the fill above. The
bars stay Navbar Link Color throughout (Porter, Sep 16). */
#site-navigation .navbar-toggler .icon-bar:hover {
background-color: var(--pm-menu-text) !important;
}
/* The rule under the bar is drawn on the LIST, not the bar, so it's clipped
with the list while the panel slides. Closed, the nav's own bottom rule
sits under the bar; open, that same rule closes off the panel. */
#site-navigation .navbar-nav {
border-top: 3px solid var(--pm-ink);
}
#site-navigation .navbar-nav .nav-link {
display: flex;
align-items: center;
gap: .85rem;
min-height: 3.5rem;
padding: 0 1.25rem;
color: var(--pm-menu-text);
font-size: 1.1875rem;
transition: background-color .2s ease;
}
/* Icons have different widths, so each sits centred in a column as wide as
the bookmark's circle: every icon, circle included, shares one centre line,
and the labels after them start level. */
#site-navigation .navbar-nav .nav-link > i {
width: var(--pm-menu-icon-box);
text-align: center;
}
/* A phone keeps :hover on whatever was last tapped, and the tapped row has
focus too — so this clears the wide menu's hover fill off it. Hover
also skips the parent of nested items, so a closed parent loses its fill. */
#site-navigation .navbar-nav .nav-link:focus {
background-color: transparent;
}
#site-navigation .navbar-nav .nav-link:not(.has-submenu):hover,
#site-navigation .navbar-nav .nav-link:focus-visible,
#site-navigation .navbar-nav .nav-link.highlighted {
background-color: var(--pm-menu-hover);
color: var(--pm-navbar-link);
}
/* Dividers go on the items, not the links: the current page's link has its
bottom border zeroed further up (see "Current-page underline"), which
took its divider with it. The last item sits on the nav's own rule. */
#site-navigation .navbar-nav > li {
border-bottom: 1px solid var(--pm-menu-rule);
}
#site-navigation .navbar-nav > li:last-child {
border-bottom: 0;
}
/* Toocheke's sweeping underline is for a horizontal bar. */
#site-navigation .navbar-nav > .menu-item:before {
content: none;
}
/* Icon-only items show their names here: Home, and the bookmark. There's
the room, and a row holding only an icon reads as broken. The names are
already in the markup as .sr-only; this undoes Bootstrap's rule. */
#site-navigation .menu-item .sr-only {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
}
/* Nested items. SmartMenus opens them in place, marks the parent
.highlighted while they're open, and appends a .sub-arrow to it. Its own
stylesheet draws that arrow as a small +/- box; this is the design's
round button instead, pointing down when closed and up when open. The
chevron is Font Awesome, which Toocheke loads on every page. */
#site-navigation .navbar-nav .has-submenu {
justify-content: space-between;
padding-right: .75rem;
}
#site-navigation .navbar-nav .sub-arrow {
position: static;
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 2.125rem;
height: 2.125rem;
margin: 0;
border: 0;
border-radius: 50%;
background-color: color-mix(in srgb, var(--pm-menu-text) 25%, transparent);
color: var(--pm-menu-text);
font-size: .8rem;
transform: rotate(180deg);
transition: transform .3s ease, background-color .2s ease;
}
#site-navigation .navbar-nav .sub-arrow::before {
content: "\f077";
font-family: 'Font Awesome 6 Free';
font-weight: 900;
}
/* Open, the arrow matches the bookmark's circle. Its chevron is the bar's
colour half-mixed with black: the bar's own colour measured under 3:1 on
Roonie's cream. */
#site-navigation .navbar-nav .highlighted > .sub-arrow {
transform: none;
background-color: var(--pm-navbar-link);
color: color-mix(in srgb, var(--pm-navbar-bg), black 50%);
}
#site-navigation .navbar-nav .dropdown-menu {
margin: 0;
padding: .25rem 0;
border: 0;
border-top: 1px solid var(--pm-menu-rule);
border-radius: 0;
background-image: linear-gradient(var(--pm-menu-sub), var(--pm-menu-sub));
}
#site-navigation .navbar-nav .dropdown-item {
padding: .7rem 1.25rem .7rem 2.5rem;
font-family: 'Kameron', Georgia, serif;
font-size: 1.0625rem;
color: var(--pm-menu-text);
}
#site-navigation .navbar-nav .dropdown-item:hover,
#site-navigation .navbar-nav .dropdown-item:focus {
background-color: var(--pm-menu-hover);
color: var(--pm-navbar-link);
}
}
/*--------------------------------------------------------------
# The menu on a phone held sideways
--------------------------------------------------------------*/
/* Built to "Landscape bar cleanup" (1d) in Mobile Menu Explorations. The
header art has collapsed (see the top of this file) and the bar takes its
place: the logo on a cream plate at the left, olive running to the
right-hand edge, the bookmark out at the far end. Same colours as the
upright menu. Two departures from the mock-up, both Porter's: the items sit
against the plate rather than pushed right, and they keep the dividers all
three menus now share.
58px tall rather than the mock-up's 66, to match the upright bar and keep
the strip on a 375px-tall screen. */
@media (max-height: 450px) and (min-width: 500px) {
#site-navigation.navbar {
align-items: stretch;
padding: 0;
}
/* The mock-up is drawn 864px wide, and most phones on their side are
narrower. When the row is tight the plate gives way, not the menu: every
item stays on one line, and the logo shrinks inside its plate. */
#site-navigation .navbar-brand {
display: flex;
align-items: center;
flex: 0 1 auto;
min-width: 0;
padding: 0 1.25rem;
/* The header in small, as on the upright bar. */
background: var(--pm-header-pattern-url, none) 35% center / cover no-repeat, var(--pm-menu-bar);
border-right: 3px solid var(--pm-ink);
}
#site-navigation .navbar-brand img {
height: 1.5rem;
}
#site-navigation .navbar-collapse {
flex-shrink: 0;
}
/* The list fills the row, so the bookmark (below) can be pushed to the far
end — which also leaves the mx-auto Toocheke gives it nothing to share.
That comes from its Menu Alignment setting, still "center" because the
wide menu uses it. */
#site-navigation .navbar-nav {
flex-grow: 1;
}
#site-navigation .navbar-nav .nav-link {
display: flex;
align-items: center;
gap: .5rem;
min-height: 3.625rem;
padding-left: .8rem;
padding-right: .8rem;
color: var(--pm-menu-text);
white-space: nowrap;
}
#site-navigation .navbar-nav .nav-link:hover,
#site-navigation .navbar-nav .nav-link:focus-visible {
background-color: var(--pm-menu-hover);
color: var(--pm-navbar-link);
}
/* The logo links home, so the Home item would be a second way to do it. */
#site-navigation .menu-item-home {
display: none;
}
/* ...so the first item showing is the one after it, and the logo plate's
black edge already divides that one off. */
#site-navigation .navbar-nav > .menu-item-home + li > .nav-link {
border-left: 0;
}
/* Toocheke's sweeping underline; the hover fill does that job here. */
#site-navigation .navbar-nav > .menu-item:before {
content: none;
}
/* The bookmark out at the far end. The margin goes on the item, not the
link: Companion hides only the link until something's bookmarked, and an
empty item at the end takes no room. */
#site-navigation .navbar-nav > .comic-bookmark-item {
margin-left: auto;
}
/* Standing apart like that, a divider beside it would read as the edge of a
cell it doesn't have. */
#site-navigation .navbar-nav > .comic-bookmark-item > .nav-link {
border-left: 0;
}
}
/* Wherever the menu is a bar narrower than 782px, and on any phone held
sideways, the off-site links go (functions.php marks them .pm-offsite): they
are the widest items. The bar ran out of room for them with a bookmark
showing, and a wide phone on its side squeezed the logo plate to nothing.
The phone menu still has them (Porter, Sep 10, 12 and 16). */
@media (min-width: 500px) and (max-width: 781px), (max-height: 450px) and (min-width: 500px) {
#site-navigation .navbar-nav > .pm-offsite,
/* On a site with storylines, Topics goes the same way, and for the same
reason: with Characters and Storylines already there it's the item that
breaks the bar's width, and it matters least of the three (Porter,
Sep 23 and 26). The phone menu keeps it. */
#site-navigation .navbar-nav > .pm-crowded {
display: none;
}
}
/*--------------------------------------------------------------
# Nested items in the menu bar
--------------------------------------------------------------*/
/* Wherever the menu is a bar — the wide menu, and a phone on its side — a
parent's children drop out of it as a dark sheet. Built to "Landscape bar
cleanup" (1d) in Mobile Menu Explorations. The upright phone menu opens them
in place instead (see "The menu on a phone").
SmartMenus opens and closes the sheet on a click (set in functions.php),
marks the parent .highlighted while it's open, and positions the sheet
itself, with inline margins, under the bar's bottom rule. */
@media (min-width: 500px) {
/* Open, the parent takes the hover fill, and the sheet hangs from it. */
#site-navigation .navbar-nav .nav-link.highlighted {
background-color: var(--pm-menu-hover);
color: var(--pm-navbar-link);
}
/* SmartMenus' own caret, flipped while open. */
#site-navigation .navbar-nav .sub-arrow {
transition: transform .2s ease;
}
#site-navigation .navbar-nav .highlighted > .sub-arrow {
transform: rotate(180deg);
}
/* No top border: the bar's black rule is its top edge. The inset shadow is
the bar's, falling on it. */
#site-navigation .navbar-nav .dropdown-menu {
width: 15.25rem;
padding: 0;
border: 3px solid var(--pm-ink);
border-top: 0;
border-radius: 0;
background-image: linear-gradient(var(--pm-menu-sheet), var(--pm-menu-sheet));
box-shadow: inset 0 7px 9px rgba(0, 0, 0, .3);
}
/* The slide. SmartMenus only flips the sheet between display:none and
block; this animates that. The sheet moves up by its own height while the
clip shrinks from the top by the same amount, at the same pace — so its
top edge holds still at the rule, and it comes out from under the bar
instead of dropping in over it.
allow-discrete keeps it on screen until the slide back up has finished.
@starting-style is where the slide down starts, because a hidden element
has no earlier position to animate from. */
#site-navigation .navbar-nav .dropdown-menu {
transform: translateY(-100%);
clip-path: inset(100% 0 0 0);
transition: transform .3s ease, clip-path .3s ease, display .3s allow-discrete;
}
#site-navigation .navbar-nav .highlighted + .dropdown-menu {
transform: none;
clip-path: inset(0);
}
@starting-style {
#site-navigation .navbar-nav .highlighted + .dropdown-menu {
transform: translateY(-100%);
clip-path: inset(100% 0 0 0);
}
}
#site-navigation .navbar-nav .dropdown-item {
padding: .75rem 1.25rem;
font-family: 'Kameron', Georgia, serif;
font-size: 1rem;
line-height: 1.3;
color: var(--pm-navbar-link);
}
#site-navigation .navbar-nav .dropdown-menu > li + li {
border-top: 1px solid rgba(255, 255, 255, .16);
}
#site-navigation .navbar-nav .dropdown-item:hover,
#site-navigation .navbar-nav .dropdown-item:focus {
background-color: var(--pm-menu-hover);
color: var(--pm-navbar-link);
}
}
/*--------------------------------------------------------------
# Full-bleed comic strip (home + single comic pages)
--------------------------------------------------------------*/
/* rooniecomics.com is fluid end to end, so the strip just reaches the
window edges. Toocheke instead caps #content at 1140px, so the strip
has to break out of that container to get the same effect.
calc(-50vw + 50%) accounts for #content's own 15px padding: 50% is
half the content box, 50vw is half the viewport, so the negative
margin lands exactly on the viewport edge.
Two different targets because the markup differs: home nests the
strip in #latest-comic > .row > .col, single comic pages put
#comic.single-comic-wrapper straight into #content. */
#latest-comic,
.single-comic #comic.single-comic-wrapper {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
/* Bootstrap gutters would otherwise inset the panels 15px from each
edge; the live site's panels touch the edge exactly. Home only —
single comic pages have no row/col wrapper around the strip. */
#latest-comic #single-comic-row {
margin-left: 0;
margin-right: 0;
}
#latest-comic #single-comic-col {
padding-left: 0;
padding-right: 0;
}
/* Parent theme leaves a gap under the strip — 30px on home, 15px above the
band on single comic pages. The "what's next" band below is a full-width
block of colour with a rule along its top edge, so those gaps read as a grey
stripe between the two rather than as breathing room. */
#latest-comic {
margin-bottom: 0;
}
#above-footer.webtoon {
margin-top: 0;
}
/* #content has overflow:hidden in the parent theme, which would clip
the breakout above. Scoped to just these two page types to limit the
blast radius — everything else keeps the parent theme's clipping.
overflow-x on body absorbs the vw-vs-scrollbar rounding so this
can't introduce a horizontal scrollbar.
NOTE: this is the most fragile thing in this stylesheet. If odd
scrolling or clipping behaviour turns up later (sticky elements,
dropdowns cut off, stray horizontal scroll), suspect these two rules
first. See NOTES.md "Known fragile spots". */
.home #content,
.single-comic #content {
overflow: visible;
}
/* The strip is 100vw wide and vw includes the scrollbar, so it sits a
scrollbar-width wider than the visible viewport. Something has to
absorb that.
It must be `clip`, not `hidden`, and it must NOT be on body. Toocheke
already sets `body { overflow-x: hidden !important }`; once #content
above stopped containing the overflow it reached body, and an element
with overflow-x:hidden becomes a scroll container — so body and html
both scrolled and the page juddered against the menu. `clip` contains
the overflow without creating a scroll container, and doing it here
means body never sees any. */
.home #page,
.single-comic #page {
overflow-x: clip;
}
/* Close the gray band between the nav and the strip. The parent theme
paints the gray page background on body (%background_color%) and the
white content background on #comic / #left-col, so any gap above the
content boxes shows through as gray. Two gaps stack at desktop: 30px
from main (.header-below-jumbotron + main, in a min-width:991 media
query) and 15px from the comic wrapper itself. Scoped to the same two
page types as the full-bleed rules above; inner pages keep the parent
theme's spacing. */
.home .header-below-jumbotron + main,
.single-comic .header-below-jumbotron + main {
margin-top: 0;
}
.home .single-comic-wrapper,
.single-comic .single-comic-wrapper {
margin-top: 0;
}
/*--------------------------------------------------------------
# Responsive panel wrapping
--------------------------------------------------------------*/
/* Panel count per comic comes from the gallery's own columns setting,
not from a theme option — panel counts vary per comic (2, 3, 4, one
9-panel), so Toocheke's global comic_layout_setting can't express it.
These rules only degrade the small tiers; the gallery's own column
class still owns the wide tier.
Three markup shapes are covered because the four sites differ:
.gallery-item classic WP gallery (the local test comics)
figure wp:gallery block (Roonie / Format A)
.wp-block-column wp:columns block (Bassist Wanted, Thunder Dog)
Breakpoints are 782/500 to match rooniecomics.com, which in turn
matches WordPress core — core hard-codes single-panel stacking at
max-width:781px for wp:columns. Using Bootstrap's 992/576 instead
would make block-columns comics stack at 781 while classic-gallery
comics stayed 2-across to 576, i.e. the formats would disagree.
!important is load-bearing, not sloppiness: at 500-781px it has to
beat core's own `flex-basis: 100% !important` stacking. The live
theme does exactly the same thing for the same reason.
Both tiers also ask for 451px of height. A phone turned on its side is wide
but SHORT — 375px tall on an SE, 360 on a Galaxy — and stacking the panels
there buries the strip below the fold. Under that height the rules simply
don't apply and the gallery's own column count takes over, which puts the
whole strip on screen at once. Height rather than `orientation: landscape`
because that alone can't separate a phone on its side from a small laptop
window, which is landscape too and does want the panels stacked; in these
width bands, short enough already implies landscape. */
@media (min-width: 500px) and (max-width: 781px) and (min-height: 451px) {
:is(#comic, .pm-whole-comic) .gallery-item,
:is(#comic, .pm-whole-comic) .blocks-gallery-item,
:is(#comic, .pm-whole-comic) .wp-block-gallery figure,
:is(#comic, .pm-whole-comic) .wp-block-column {
max-width: 50% !important;
flex-basis: 50% !important;
}
}
@media (max-width: 499px) and (min-height: 451px) {
:is(#comic, .pm-whole-comic) .gallery-item,
:is(#comic, .pm-whole-comic) .blocks-gallery-item,
:is(#comic, .pm-whole-comic) .wp-block-gallery figure,
:is(#comic, .pm-whole-comic) .wp-block-column {
max-width: 100% !important;
flex-basis: 100% !important;
}
}
/* A tablet held upright is about 820px wide — past the 781 where the panels
drop to two across, but the strip is still cramped at four. Width alone
can't tell that apart from a laptop window at the same width, where four is
fine. The SHAPE of the viewport can: taller than it is wide.
Keyed off the viewport rather than the device on purpose. A browser window
dragged tall and narrow is the same situation and wants the same answer, and
it means no sniffing for tablets. 1024 is the widest tablet upright. */
@media (min-width: 782px) and (max-width: 1024px) and (orientation: portrait) {
:is(#comic, .pm-whole-comic) .gallery-item,
:is(#comic, .pm-whole-comic) .blocks-gallery-item,
:is(#comic, .pm-whole-comic) .wp-block-gallery figure,
:is(#comic, .pm-whole-comic) .wp-block-column {
max-width: 50% !important;
flex-basis: 50% !important;
/* Same row gap as below 781 — that rule doesn't reach up here. */
margin-bottom: 0;
}
}
/* Once the panels wrap, each one's bottom margin turns into a gap between the
rows — 16px of it, from the gallery's own styling. The strip reads as one
continuous image, so the rows should meet the way the columns already do. */
@media (max-width: 781px) {
:is(#comic, .pm-whole-comic) .gallery-item,
:is(#comic, .pm-whole-comic) .blocks-gallery-item,
:is(#comic, .pm-whole-comic) .wp-block-gallery figure,
:is(#comic, .pm-whole-comic) .wp-block-column {
margin-bottom: 0;
}
}
/* On a comic's own page that margin sits under the strip at every width, and
pushed the title away from it (Porter, Sep 24). */
#comic :is(.gallery-item, .blocks-gallery-item, .wp-block-gallery figure, .wp-block-column) {
margin-bottom: 0;
}
/*--------------------------------------------------------------
# Below the comic: title/date, share left, navigation right
--------------------------------------------------------------*/
/* One row under the strip: share buttons left, title/date centred,
comic navigation right — matching the live site.
#comic-social gets display:contents so the share links and the title
(which functions.php renders inside it) become items of this row
rather than a nested block. The title is absolutely centred against
the row, the same technique reference/roonie-theme uses, so it sits
dead centre regardless of how wide the two flanking groups are. */
.single-comic-navigation {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: var(--pm-comic-row-gap) var(--pm-comic-row-padding) var(--pm-comic-row-padding);
margin-bottom: 0;
}
/* Toocheke leaves 1.5em under the gallery, which pushed the row well
away from the strip. 1em matches the padding the live theme puts
either side of the strip (.comic .wp-block-gallery { padding: 0 1em }),
so the gap below reads about the same as the gap at the sides. */
#comic .gallery {
margin-bottom: 0;
}
#comic-social {
display: contents;
}
/* Premium prints this for its print-purchase links even with none to show,
padded 15px top and bottom; on a phone it took a line of its own above the
title (Porter, Sep 24). */
#purchase-options:not(:has(*)) {
display: none;
}
#comic-social > a {
order: 1;
}
.single-comic-navigation > a {
order: 7;
}
/* Title + date. Typography lifted from reference/roonie-theme: the title
uses that theme's heading stack (Kameron) at 1em bold with CSS-generated
quotes, the date is Open Sans italic at .75em in half-black. */
/* Bookmark, title, like sit together in normal flow so the icons hug the
title whatever its length — titles range from about 3.3rem to 11.9rem
half-width, far too wide a spread for a fixed offset from centre.
display:contents on both wrappers promotes their children into this
row so the three can be ordered as one cluster. */
#comic-analytics {
display: contents;
}
.pm-comic-meta {
order: 4;
display: flex;
flex-direction: column;
justify-content: center;
height: var(--pm-comic-button-size);
margin: 0 .6rem;
text-align: center;
white-space: nowrap;
}
/* Spacer making the left side match the wider navigation group, so the
cluster below lands centred rather than pushed left. */
.single-comic-navigation::before {
content: "";
order: 2;
flex: 0 0 var(--pm-comic-side-balance);
}
.single-comic-navigation .single-comic-bookmark {
order: 3;
margin-left: auto;
}
.single-comic-navigation .single-comic-total-views {
order: 5;
gap: .225em;
color: #6f6f6f;
}
/* Views before the like, as in the comic lists (Porter, Sep 17): the count to
skim, then the button to press. The like's auto margin holds the navigation
out to the right. */
.single-comic-navigation .single-comic-total-likes {
order: 6;
margin-left: .6rem;
margin-right: auto;
}
/* Both sides get their spacing from .pm-comic-meta's margin alone.
Left to themselves the gaps came out uneven: Toocheke's
`.single-comic-navigation a { margin: 0 10px }` lands on the bookmark,
while the like button adds its own .25em padding on top of that same
margin, so the heart sat a few px further from the title. */
.single-comic-navigation .single-comic-bookmark,
.single-comic-navigation .single-comic-total-likes,
.single-comic-navigation .single-comic-total-views {
display: flex;
align-items: center;
height: var(--pm-comic-button-size);
margin-top: 0;
margin-bottom: 0;
}
.single-comic-navigation .single-comic-bookmark {
margin-right: 0;
}
.single-comic-navigation .toocheke-likes-button {
margin-left: 0;
padding-left: 0;
}
/* Grey until hovered, rather than the theme's teal. Set via `color`, not
`fill`: the heart SVG is fill:currentColor, so the heart and the like count
both follow the link's colour.
Hovered, liked or bookmarked, both take Navbar Link Hover Color, like the
menu's bookmark (from functions.php). Toocheke Companion hardcodes its own
red for the last two, so those need !important (Porter's call, Sep 11):
- liked: its stylesheet sets `a.liked { color: #dc3545 !important }`.
- bookmarked: bookmark.js writes `color: #dc3545` onto the icon as an
inline style, which only !important beats. Un-bookmarking, it writes
`color: initial` — black — so the outline icon is held to the link's
grey as well. */
.single-comic-navigation .toocheke-likes-button,
.pm-whole-comic-stats .toocheke-likes-button {
color: #6f6f6f;
}
.single-comic-navigation .toocheke-likes-button:hover,
.pm-whole-comic-stats .toocheke-likes-button:hover {
color: var(--pm-navbar-link-hover);
}
.single-comic-navigation .toocheke-likes-button.liked,
.pm-whole-comic-stats .toocheke-likes-button.liked {
color: var(--pm-navbar-link-hover) !important;
}
.single-comic-navigation .single-comic-bookmark {
color: #6f6f6f;
}
.single-comic-navigation .single-comic-bookmark:hover {
color: var(--pm-navbar-link-hover);
}
.single-comic-navigation .single-comic-bookmark .far {
color: inherit !important;
}
.single-comic-navigation .single-comic-bookmark .fas {
color: var(--pm-navbar-link-hover) !important;
}
/* Reached through its wrapper because Toocheke Premium strips the class off
any heading in the share-button row (toocheke_allowed_html). The wrapper
div keeps its class. */
.pm-comic-meta h1,
.pm-comic-meta h2 {
font-family: 'Kameron', Georgia, serif;
font-size: 1em;
font-weight: bold;
line-height: 1.2;
margin: 0;
}
/* On the home page the title is a link (functions.php). Left alone, that link
drew at 30px inside its 16px heading (measured; the rule responsible isn't
in Premium's style.css or the child theme), so it takes the heading's size,
as on the comic's own page. It keeps Main Content Link Color, which is what
says it's a link. */
#comic-social .pm-comic-meta a {
font-size: inherit;
}
/* Quotes wrap the title only, so a leading #number stays outside them. */
.pm-comic-name::before {
content: open-quote;
}
.pm-comic-name::after {
content: close-quote;
}
.pm-comic-date {
font-family: 'Open Sans', Helvetica, sans-serif;
font-size: .75em;
font-style: italic;
line-height: 1.2;
/* .6, not the old site's .5: at this size .5 is 3.9:1 on white, under the
4.5:1 small text needs (WebPageTest's accessibility check, Sep 18). */
color: rgba(0, 0, 0, .6);
margin: .15em 0 0;
}
/* Comic navigation buttons: the shape from reference/roonie-theme (article
nav ul li a), coloured like the promo's primary button — Main Content Link
Color, going to Action Color when hovered (Porter, Sep 17; the old site's
grey #aaa was 2.3:1 with white). Font size is reset because Toocheke sets
these links to 30px. */
.single-comic-navigation > a {
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--pm-comic-button-size);
padding: 0 .7em;
margin: 0 .15em;
background: var(--pm-link);
color: var(--pm-action-text);
border-radius: .5em;
font-size: 1rem;
line-height: 1;
text-decoration: none;
}
.single-comic-navigation > a:hover,
.single-comic-navigation > a:focus {
background: var(--pm-action);
}
/* First and Previous on the first comic, Next and Last on the newest. Premium
marks them .disabled but links them to ";", a broken address. */
.single-comic-navigation > a.disabled {
opacity: .3;
pointer-events: none;
}
/* Share buttons: Toocheke's own icons, restyled to the live site's
treatment (reference/roonie-theme: circular, #ccc, white glyph,
.3em padding). Deliberately NOT importing the live site's SVGs —
Toocheke maintains its icon set, we only skin it. Toocheke already
sets fill:currentColor on these, so `color` drives SVG and Font
Awesome glyphs alike.
Fixed width/height rather than padding: letting the glyph size the box
made ovals, since the icons aren't square. Per-network brand colours
are keyed off the icon class rather than the link's title attribute,
which is translated text. */
#comic-social > a {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--pm-comic-button-size);
height: var(--pm-comic-button-size);
margin: 0 .15em;
background: #ccc;
border-radius: 50%;
color: #fff;
font-size: 1rem;
line-height: 1;
}
#comic-social > a:has(.fa-reddit-alien) {
background: #ff4500;
}
#comic-social > a:has(.fa-bluesky) {
background: #0085ff;
}
/* Navigation glyphs taken from reference/roonie-theme (get_SVG_html) and
saved under assets/icons/. mask-image rather than background-image so
the glyph colour comes from CSS and can follow the palette later.
No PHP needed to keep Toocheke's own upload option working: if any nav
button image is set in Toocheke > Options, Toocheke stops emitting
these Font Awesome elements entirely and renders ![]()
instead, so
these rules simply stop matching and the upload wins. */
/* Listed individually rather than matching .fas: bookmarking toggles that
icon to `fas` (Toocheke's bookmark.js does toggleClass('far fas')), and a
blanket .fas rule turned it into a solid coloured block, since there's no
mask image for it. Only the five nav glyphs get masked. */
.single-comic-navigation .fa-step-backward,
.single-comic-navigation .fa-chevron-left,
.single-comic-navigation .fa-random,
.single-comic-navigation .fa-chevron-right,
.single-comic-navigation .fa-step-forward {
display: inline-block;
width: 1.4em;
height: 1.4em;
vertical-align: middle;
background-color: currentColor;
-webkit-mask: center / contain no-repeat;
mask: center / contain no-repeat;
}
.single-comic-navigation .fa-step-backward {
-webkit-mask-image: url('assets/icons/nav-first.svg');
mask-image: url('assets/icons/nav-first.svg');
}
.single-comic-navigation .fa-chevron-left {
-webkit-mask-image: url('assets/icons/nav-previous.svg');
mask-image: url('assets/icons/nav-previous.svg');
}
.single-comic-navigation .fa-random {
-webkit-mask-image: url('assets/icons/nav-random.svg');
mask-image: url('assets/icons/nav-random.svg');
}
.single-comic-navigation .fa-chevron-right {
-webkit-mask-image: url('assets/icons/nav-next.svg');
mask-image: url('assets/icons/nav-next.svg');
}
.single-comic-navigation .fa-step-forward {
-webkit-mask-image: url('assets/icons/nav-last.svg');
mask-image: url('assets/icons/nav-last.svg');
}
/* Title and date now appear under the strip, so hide the parent theme's
copy further down the blog column. The commentary body stays. */
.single-comic #left-content .entry-title,
.single-comic #left-content .entry-meta {
display: none;
}
/* Tags and characters currently render above the title. Hidden for now;
they're due to be restyled into the "More on these topics / More from
these characters" block the live site puts further down the page. */
#comic .entry-footer {
display: none;
}
/*--------------------------------------------------------------
# Below the comic: conserving width before the panels change
--------------------------------------------------------------*/
/* The row under the strip is the first thing to run short of width, well
before the panels do. Measured with the title "How Do I Look?" it needs
807px on one line, of which 195px is the ::before spacer that exists only to
push the title cluster to centre. Titles vary a lot — the range in the
comment above works out at roughly 106px to 381px — so the longest ones need
about 1030px.
1200 is comfortably clear of that, and is a conventional breakpoint. Below
it the spacer and the share buttons go and the title sits left. The row
stays one line until the panels leave theirs (Porter, Sep 24), then goes to
two, centred: see the next block. */
@media (max-width: 1200px) {
.single-comic-navigation::before {
display: none;
}
/* Sharing goes rather than squeeze the title. Porter's call, 2026-09-09:
with a long title the row is tight here even without them. */
#comic-social > a {
display: none;
}
/* The bookmark goes (Porter, Sep 24), which leaves views and the like
alone in Premium's wrapper, so the wrapper can be a real box and they
wrap as one unit rather than the like dropping without its views. */
.single-comic-navigation .single-comic-bookmark {
display: none;
}
#comic-analytics {
display: flex;
order: 5;
align-items: center;
margin: 0;
}
}
/* The panels still in their row: title left, navigation right, and views and
the like on a line of their own under the title (Porter, Sep 24).
Premium prints the row's pieces as loose siblings, so left to wrap they
fell one at a time — a lone button; this way the longest title fits beside
the navigation at 782. */
@media (min-width: 782px) and (max-width: 1200px) and (orientation: landscape), (min-width: 1025px) and (max-width: 1200px) {
.pm-comic-meta {
margin: 0 auto 0 0;
text-align: left;
}
.single-comic-navigation > a {
order: 5;
}
.single-comic-navigation::after {
content: "";
order: 6;
flex-basis: 100%;
height: 0;
}
#comic-analytics {
order: 7;
}
.single-comic-navigation .single-comic-total-views,
.single-comic-navigation .single-comic-total-likes {
height: 1.75rem;
}
#transcript-wrapper {
order: 9;
}
}
/* Two lines, centred, exactly where the panels go two by two (the panel rules
above): title cluster on the first, comic navigation on the second. */
@media (max-width: 781px), (min-width: 782px) and (max-width: 1024px) and (orientation: portrait) {
.single-comic-navigation {
justify-content: center;
}
/* Both were pushing content to one side to make the wide layout work:
the like's auto margin held the navigation out to the right, and
without clearing it the first line can't centre. */
.single-comic-navigation .single-comic-total-likes {
margin-right: 0;
}
/* A zero-height item demanding the full width forces a line break. The
navigation is ordered after it, so it starts the next line; everything
before it — bookmark, title, date, views, like — stays on the first. */
.single-comic-navigation::after {
content: "";
order: 6;
flex-basis: 100%;
height: 0;
}
}
@media (max-width: 499px) {
/* The title stops being a single unbroken line here. It's nowrap at wider
widths so it can't push the two flanking groups out of true, but on its
own line that no longer applies — and a long one was running off the
side of the screen. The fixed height has to go with it, or a second line
spills out of the box. */
.pm-comic-meta {
white-space: normal;
height: auto;
}
/* Title and date take the whole line, so views and the like drop to a
line of their own under them (Porter, Sep 17), not squeezed beside. */
.single-comic-navigation .pm-comic-meta {
flex-basis: 100%;
text-align: center;
}
}
/*--------------------------------------------------------------
# "What's next" zone
--------------------------------------------------------------*/
/* Two jobs share this band, deliberately weighted differently: browsing on the
left (easy, plentiful, keeps people on the site) and the conversion ask on
the right, at twice the width. The promos are CTA Box widgets from the
Porter Mason Core plugin, so they stay editable in wp-admin — they change
over time (Kickstarter, then a book launch, then Patreon) and shouldn't need
a code change. More than one stacks down the right-hand column.
The gutter columns are what make the band run edge to edge while its content
stays at two thirds of the page. Both children are placed by hand, because
the gutters are real tracks and anything auto-placed lands in one and sits
against the edge of the screen. */
.pm-next {
display: grid;
grid-template-columns:
[full-start] minmax(1rem, 1fr)
[main-start] minmax(0, 16rem) minmax(0, 32rem) [main-end]
minmax(1rem, 1fr) [full-end];
column-gap: 2.5rem;
align-items: start;
/* The band's own bottom space is this plus the children's margin below —
which is set smaller than the top so stacked promos sit closer to each
other than the band sits to its edges. */
padding-top: 2.5rem;
padding-bottom: .5rem;
/* Every colour in the band is a Customizer setting, passed in by
functions.php: the backgrounds are the child theme's CTA Band Color and
Promo Card Color; the rest are Toocheke's Main Content Text Color, Action
Color, Action Text Color and Main Content Background Color. Pointing the
shared ink name at one here, rather than on :root, leaves the rest of the
page as it was.
CTA Band Color, not the cream Title Band Color the rest of the page uses:
this is the band that carries the buttons, so it's the one surface with a
colour of its own (Porter, Sep 17). Unset, it's a pale wash of Main
Content Link Color. */
--pm-ink: var(--pm-text);
--pm-muted: color-mix(in srgb, var(--pm-text) 73%, transparent);
background: var(--pm-cta-bg);
border-top: 3px solid var(--pm-ink);
/* Kameron throughout, running text included — the browse lists and the
promo cards are both set in it. The footer band below is still Open
Sans. */
font-family: 'Kameron', Georgia, serif;
}
.pm-next-browse {
grid-column: 2;
}
/* The promo cards share one wrapper (functions.php), so they stack down their
own column. As separate grid items, a second card couldn't start until the
row beside it ended — below a long browse list, like the top 10. */
.pm-next-promos {
grid-column: 3;
}
.pm-next-browse,
.pm-next-promos {
/* Toocheke centres everything in this area (#above-footer has
text-align: center for the footer's benefit), which is wrong here. */
text-align: left;
/* Grid items refuse to shrink below their contents unless told to, which
is how the promo ends up hanging off the side of a narrow screen. */
min-width: 0;
}
.pm-next-browse,
.pm-cta {
margin-bottom: 2rem;
}
.pm-next-browse > h2 {
font-size: 1.375rem;
font-weight: 700;
margin: 0 0 .75rem;
}
.pm-next-group + .pm-next-group {
margin-top: 1.5rem;
}
/* A bar across the column, so each group reads as a heading at a glance: Hind
bold in capitals (Toocheke's own sans serif, already loaded at 700), in the
band's own colour on Main Content Text Color, so the letters look cut out of
the bar. Kept small, so the links below stay the content. */
.pm-next-group h3 {
margin: 0 0 .75rem;
padding: .3rem .6rem .2rem;
background: var(--pm-ink);
color: var(--pm-cta-bg);
font-family: 'Hind', -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
font-size: .8rem;
font-weight: 700;
letter-spacing: .08em;
line-height: 1.3;
text-transform: uppercase;
}
/* The rank badge pokes up above the first picture, so this heading needs more
room under it. */
.pm-next-top h3 {
margin-bottom: 1.25rem;
}
/* Its heading is a link to the whole list (Porter, Sep 26): the bar's own
letters, underlined only when pointed at. */
.pm-next-top h3 a,
.pm-next-top h3 a:visited {
color: inherit;
text-decoration: none;
}
.pm-next-top h3 a:is(:hover, :focus-visible) {
color: inherit;
text-decoration: underline;
}
.pm-next-group ul {
list-style: none;
margin: 0;
padding: 0;
}
/* No underline: both shapes below already read as links without one — a bold
name beside a picture, or a bordered label. The footer links keep theirs. */
.pm-next-group a {
font-weight: 700;
text-decoration: none;
}
/* Hover is Action Color right across the block — character
links and topic labels alike; the labels only differ in what else they do
with it. */
.pm-next-group a:hover,
.pm-next-group a:focus {
color: var(--pm-action);
text-decoration: underline;
}
/* Characters read as a list of faces. The picture comes from Toocheke
Companion's own per-term Image field, so a character only needs setting up
once, in one place. */
.pm-next-faces li + li {
margin-top: .6rem;
}
/* Tighter than the body text's line height, which is set for paragraphs and
pushes a name that wraps onto two lines apart. */
.pm-next-faces a {
display: flex;
align-items: center;
gap: .75rem;
line-height: 1.25;
}
/* Each picture keeps its own shape (Porter, Sep 17): a fixed width, as tall as
it needs to be. */
.pm-next-faces img {
width: 2.75rem;
height: auto;
border: 1px solid var(--pm-ink);
flex: none;
}
/* Topics get no picture (Companion only stores images for characters), so they
read as a stack of small labels instead — one per line, each hugging its own
text, which is what stops four one-word links looking like a broken list. */
.pm-next-labels a {
display: inline-block;
font-weight: 400;
line-height: 1.4;
background: var(--pm-content-bg);
border: 1px dashed color-mix(in srgb, var(--pm-ink) 45%, transparent);
border-radius: 4px;
padding: .1em .5em;
}
/* The dashes carry the hover, so the label doesn't need an underline as well —
and this has to come after the browse block's general hover rule, which adds
one, because the two selectors are equally specific. The red itself comes
from that rule. */
.pm-next-labels a:hover,
.pm-next-labels a:focus {
border-color: var(--pm-action);
text-decoration: none;
}
.pm-next-labels li + li {
margin-top: .4rem;
}
/* Pages without a comic of their own get the top 5 instead (functions.php):
Toocheke's own list items, with the rank over the picture, likes, views and
date. Premium styles that list for a sidebar — fixed 70px table rows, grey
dividers and a grey hover box, titles cut off with "…", teal hover text — so
this keeps its picture and rank badge and redraws the rest to sit in the
band: space between the items, whole titles, the band's colours. Premium's
rules are keyed to #comic-list, so these need the id as well. */
.pm-next-top #comic-list {
margin: 0;
}
.pm-next-top #comic-list > li {
height: auto;
overflow: visible;
border: 0;
background: none;
}
.pm-next-top #comic-list > li + li {
margin-top: 1rem;
}
/* Overflow too: Premium hides it on the link, which clipped the rank badge
wherever the picture was the row's tallest part. */
.pm-next-top #comic-list > li > a {
height: auto;
overflow: visible;
white-space: normal;
color: var(--pm-ink);
}
/* The band's links underline on hover; across a picture and two lines of text
that just looks like a mistake. */
.pm-next-top #comic-list > li > a:hover,
.pm-next-top #comic-list > li > a:focus {
text-decoration: none;
}
.pm-next-top .comic-item {
display: flex;
align-items: center;
gap: .75rem;
height: auto;
}
/* The whole first panel (functions.php asks for an uncropped size), so its own
drawn frame is the border: Toocheke's 70px width, the panel's own height.
Toocheke's box clips to a square and its picture fills it; neither here.
Visible, too, so the rank badge can sit over the corner. */
.pm-next-top .comic-item .thmb {
flex: none;
display: block;
height: auto;
overflow: visible;
}
.pm-next-top #comic-list .thmb img {
height: auto;
object-fit: contain;
}
/* The rank as a badge on the picture's corner, in the child theme's Accent
Color (functions.php), like every rank badge. Toocheke's is a white number
with a thin outline, which got lost against the art. */
.pm-next-top .comic-item .rank {
top: -.45rem;
left: -.45rem;
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: var(--pm-accent);
color: var(--pm-action-text);
font-size: .8rem;
font-weight: 700;
line-height: 1;
text-shadow: none;
}
/* Premium positions every .comic-info absolutely, sitewide. */
.pm-next-top .comic-item .comic-info {
position: static;
display: block;
height: auto;
min-width: 0;
padding-left: 0;
}
.pm-next-top .comic-item .comic-title {
height: auto;
margin: 0 0 .2rem;
overflow: visible;
white-space: normal;
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
}
.pm-next-top .comic-item .comic-list-item-details {
color: var(--pm-muted);
font-size: .85rem;
}
/* Views before likes, as everywhere (Porter, Sep 17); Premium prints the
likes first, with 5px after them that a gap replaces. */
.pm-next-top .analytics-wrapper {
display: inline-flex;
flex-direction: row-reverse;
gap: .6em;
}
.pm-next-top .likes-wrapper {
margin-right: 0;
}
/* Hovered, the title takes Action Color instead of
Toocheke's teal, underlined (Porter, Sep 16), and the details stay quiet. */
.pm-next-top #comic-list > li:hover .comic-title,
.pm-next-top #comic-list > li > a:focus-visible .comic-title {
color: var(--pm-action);
text-decoration: underline;
}
/* ...and the picture turns to ink in Action Color, as on the Topics page's
tiles (see .pm-topics-picture): Premium's .thmb box is the colour, and the
grey picture is screened onto it. Block, so no gap under the picture shows
the colour. */
.pm-next-top .comic-item .thmb {
background: var(--pm-action);
isolation: isolate;
}
.pm-next-top #comic-list .thmb img {
display: block;
}
.pm-next-top #comic-list > li:hover .thmb img,
.pm-next-top #comic-list > li > a:focus-visible .thmb img {
filter: grayscale(1);
mix-blend-mode: screen;
}
.pm-next-top #comic-list > li:hover .comic-list-item-details {
color: var(--pm-muted);
}
@media (max-width: 781px) {
/* Characters and topics sit side by side here; the most-read list goes
under them, in the first column, as wide as they are (Porter, Sep 17). */
.pm-next-top {
grid-column: 1;
}
/* Side by side, the groups drop their stacking gap (further down), which
left this bar touching the links above it. It keeps the gap; the extra
class outweighs that later rule. */
.pm-next-group + .pm-next-group.pm-next-top {
margin-top: 1.5rem;
}
}
/* Page not found has no promos, so its three lists take the band's whole
width side by side (functions.php). Narrower, the band's own two- and
one-column layouts below take over. */
@media (min-width: 782px) {
.error404 .pm-next-browse {
grid-column: main-start / main-end;
display: grid;
/* The strips keep their usual 16rem, or their dates wrap. */
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 16rem);
column-gap: 2.5rem;
}
.error404 .pm-next-group + .pm-next-group {
margin-top: 0;
}
}
.error404 .pm-next-browse > h2 {
grid-column: 1 / -1;
}
/*--------------------------------------------------------------
# The promo card
--------------------------------------------------------------*/
/* Emitted by the CTA Box widget in the Porter Mason Core plugin, one element
per field, so everything here styles a class of its own — no digging through
block wrappers. Every part is optional; the widget simply omits what's
empty. */
.pm-cta {
display: grid;
grid-template-columns: 1fr auto;
align-items: start;
background: var(--pm-promo-bg);
border: 2px solid var(--pm-ink);
box-shadow: 4px 4px 0 rgba(0, 0, 0, .2);
/* Anchors the click target stretched across the card, below. */
position: relative;
}
.pm-cta-image,
.pm-cta-eyebrow,
.pm-cta-headline {
grid-column: 1 / -1;
}
/* The picture is pulled up into, rather than the title box being pulled down
over: a grid row can't be shorter than nothing, so a negative margin bigger
than the eyebrow's own height gets clamped and leaves a gap between it and
the headline. The picture is 11rem tall, so it can absorb this. */
.pm-cta--with-image .pm-cta-image {
margin: 0 0 -3.5rem;
}
/* #above-footer img sets height:auto in the parent theme, and an id beats any
number of classes — so this has to carry the id too, or the picture renders
at full height and swamps the card. */
#above-footer .pm-cta-image img {
display: block;
width: 100%;
height: 11rem;
object-fit: cover;
}
/* Eyebrow and headline sit straight on the card.
Accent Color, which is exactly what it's for — what stands out without being
a link or a button (Porter, Sep 17). It was Action Color, to match the button
below it; now that the button is Link Color until hovered, red on the card at
rest would have been the only one, and red means "hovered" here. Accent
Color falls back to Action Color when unset, so a site without one looks as
it always did. */
.pm-cta-eyebrow {
margin: 1.25rem 1rem 0;
padding: 0;
font-size: .7rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pm-accent);
}
.pm-cta-headline {
margin: .3rem 1rem 0;
padding: 0;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.15;
}
/* With no eyebrow above it the headline leads the card, so it needs the top
margin the eyebrow would otherwise have provided. */
.pm-cta-headline:first-child {
margin-top: 1.25rem;
}
/* ...unless there's a picture behind them, and then they need lifting off it.
Only then do the two become a single white box, sharing a background and
side borders and dropping the border on the edge where they meet. With no
picture there's nothing to lift them off, and the box would be a box for its
own sake — the design draws that variant bare. */
.pm-cta--with-image .pm-cta-eyebrow,
.pm-cta--with-image .pm-cta-headline {
position: relative;
background: var(--pm-content-bg);
border: 2px solid var(--pm-ink);
margin-top: 0;
padding-left: 1rem;
padding-right: 1rem;
}
.pm-cta--with-image .pm-cta-eyebrow {
border-bottom: 0;
padding-top: .55rem;
}
.pm-cta--with-image .pm-cta-headline {
border-top: 0;
padding-bottom: .55rem;
}
.pm-cta-description {
margin: .15rem 1rem 1.25rem;
font-size: 1rem;
line-height: 1.4;
color: var(--pm-muted);
align-self: center;
}
/* Clear of the title box's bottom border, where there is one. */
.pm-cta--with-image .pm-cta-description {
margin-top: .9rem;
}
.pm-cta-actions {
margin: 1rem 1rem 1.25rem 0;
align-self: center;
}
/* The border is on the button in both states, not just the outlined one, so
the two variants are the same size and neither shifts on hover.
Main Content Link Color at rest, Action Color hovered — the menu's own move,
blue to red, rather than the old red darkened 20%, which was hardly visible
(Porter, Sep 17). Both are Customizer settings, so the pair follows each
site; the band behind it is a wash of the same link colour, so the button
reads as the solid form of its own band. */
.pm-cta-button,
.pm-cta-button:visited {
display: inline-block;
background: var(--pm-link);
color: var(--pm-action-text);
border: 2px solid var(--pm-link);
border-radius: 4px;
padding: .55em 1.1em .45em;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
/* Led by .pm-cta so it outranks Toocheke's `a:visited:hover`, which paints
Action Color text — on a followed link, the same colour as this
button, so the label vanished (Roonie, Sep 11). */
.pm-cta .pm-cta-button:hover,
.pm-cta .pm-cta-button:focus {
background: var(--pm-action);
border-color: var(--pm-action);
color: var(--pm-action-text);
/* Bootstrap puts an underline back on any a:hover — a button shouldn't
grow one. */
text-decoration: none;
}
/* Added by the widget, not typed into the field. */
.pm-cta-arrow {
margin-left: .45em;
}
/* The whole card is clickable, not just the button.
Done by stretching the button's own ::after across the card rather than
wrapping the card in an . Wrapping would put the button inside another
link, which isn't valid and which browsers un-nest anyway — and it would
hand a screen reader one enormous link whose name is every word in the card.
This way there's still exactly one link, still named "Get the Book", and
hovering anywhere lights the button up, because a pseudo-element hit-tests
as part of the element it belongs to.
TRADE: text inside the card can't be selected, because the overlay sits over
it. If that ever matters more than the big target, this is the rule to
remove. */
.pm-cta-button::after {
content: '';
position: absolute;
inset: 0;
/* Above the eyebrow and headline, which are positioned themselves so they
can sit over the picture. */
z-index: 1;
}
/*--------------------------------------------------------------
# The promo card — the quieter ones
--------------------------------------------------------------*/
/* The first promo in the area is the headline ask and keeps the full
treatment. Everything after it is a secondary offer and steps back: paler
card, a thin warm border instead of the black one, no shadow, a smaller
headline and an outlined button.
`.pm-cta ~ .pm-cta` is every promo that has one before it — i.e. all but the
first — so the order in Appearance > Widgets is what decides which is which,
with nothing to set per widget. */
/* Both follow Promo Card Color: the card is a paler mix of it, the border a
darker one. */
.pm-cta ~ .pm-cta {
background: color-mix(in srgb, var(--pm-promo-bg) 30%, var(--pm-content-bg));
border: 1px solid color-mix(in srgb, var(--pm-promo-bg), black 18%);
box-shadow: none;
}
.pm-cta ~ .pm-cta .pm-cta-headline {
font-size: 1.25rem;
}
.pm-cta ~ .pm-cta .pm-cta-button,
.pm-cta ~ .pm-cta .pm-cta-button:visited {
/* Main Content Background Color, not transparent — the button is meant to
read as lighter than the card behind it. */
background: var(--pm-content-bg);
color: var(--pm-ink);
border-color: var(--pm-ink);
}
.pm-cta ~ .pm-cta .pm-cta-button:hover,
.pm-cta ~ .pm-cta .pm-cta-button:focus {
background: var(--pm-ink);
border-color: var(--pm-ink);
color: var(--pm-action-text);
}
/*--------------------------------------------------------------
# Footer band
--------------------------------------------------------------*/
/* Its own widget area (registered in functions.php, because Toocheke has none)
and its own element, so it's simply a band of its own under the cream one —
no working out where the promos stop.
Its colours are Toocheke's Footer Background, Footer Text and Footer Link
Color, passed in by functions.php; the rule along its top is Main Content
Text Color, like the band above. */
.pm-footer {
background: var(--pm-footer-bg);
color: var(--pm-footer-text);
border-top: 3px solid var(--pm-text);
padding: 1.75rem 1rem;
text-align: center;
font-family: 'Kameron', Georgia, serif;
}
/* The Footer Logo if one is uploaded, otherwise the site title as text — so
it's right on all four sites with nothing set up, and better once each has
its own wordmark. */
.pm-footer-name {
font-size: 1.9rem;
font-weight: 700;
line-height: 1.1;
margin: 0 0 .5rem;
}
.pm-footer-name a {
color: inherit;
text-decoration: none;
}
/* Capped by height rather than width: a wordmark's height is what has to line
up with the text around it, whatever its aspect ratio. */
.pm-footer-logo {
display: block;
width: auto;
max-height: 3rem;
margin: 0 auto;
}
.pm-footer-widget {
margin: 0 0 1rem;
}
.pm-footer-widget:last-child {
margin-bottom: 0;
}
.pm-footer-widget.widget_nav_menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.pm-footer-widget.widget_nav_menu li {
display: inline-block;
margin: 0 .85em .5em;
}
.pm-footer-widget.widget_nav_menu a {
font-weight: 700;
font-size: 1.15rem;
text-decoration: underline;
color: var(--pm-footer-link);
}
/* The links are built by Toocheke's menu walker (functions.php), which marks
them .nav-link — and Bootstrap gives that the block display and padding of
a nav bar. */
.pm-footer-widget.widget_nav_menu .nav-link {
display: inline;
padding: 0;
}
/* The walker puts a space between an icon and its label, and the link's
underline ran under it. Floated, the icon leaves that space at the start of
the line, where it collapses, and the margin makes the gap instead. */
.pm-footer-widget.widget_nav_menu .nav-link > i {
float: left;
margin: .3em .35em 0 0;
}
/* Toocheke's form carries Bootstrap's .form-inline, which is a flex row that
WRAPS — and the button duly dropped onto its own line. A width on the form
and nowrap keep the two on one row at any size. The search results band's
box (.pm-whole-comics-search) is dressed the same throughout. */
.pm-footer-widget.widget_search form,
.pm-whole-comics-search {
display: inline-flex;
flex-wrap: nowrap;
gap: .5rem;
width: min(28rem, 100%);
}
/* Both sized in rem, not em, and to the same height: the button's font-size is
zeroed below to hide its label, and an em padding on it would compute to
nothing. */
:is(.pm-footer-widget.widget_search, .pm-whole-comics-search) .search-control,
:is(.pm-footer-widget.widget_search, .pm-whole-comics-search) .btn {
height: 2.6rem;
}
:is(.pm-footer-widget.widget_search, .pm-whole-comics-search) .search-control {
flex: 1 1 auto;
min-width: 0;
font-family: inherit;
padding: 0 .75rem;
}
:is(.pm-footer-widget.widget_search, .pm-whole-comics-search) .btn {
flex: none;
padding: 0 1.25rem;
}
/* Toocheke's own button colours, like the promo buttons: Action Color
with Action Text Color (Porter, Sep 11). Toocheke paints the colour
itself once it's set; this covers a site that hasn't set it, where
Bootstrap's .btn-danger red would show instead of Toocheke's default. */
:is(.pm-footer-widget.widget_search, .pm-whole-comics-search) .btn {
background-color: var(--pm-action);
border-color: var(--pm-action);
color: var(--pm-action-text);
/* font-size:0 hides the word "Search" from sight while leaving it in the
accessibility tree, so the button still announces itself; the magnifier
is drawn in its place from Font Awesome, which Toocheke already loads on
every page. */
font-size: 0;
}
:is(.pm-footer-widget.widget_search, .pm-whole-comics-search) .btn::before {
content: '\f002';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 1rem;
}
/* Toocheke registers this widget with classname "toocheke_social_media
social-links", not WordPress's usual widget_* form — so no widget_ prefix
here. */
.pm-footer-widget.toocheke_social_media ul {
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
margin: 0;
padding: 0;
}
.pm-footer-widget.toocheke_social_media li {
font-size: 1.75em;
}
/* The same space above the icons as below them, so they sit apart from the
search bar rather than hanging off it. (Margins between the widgets
collapse, so this replaces the usual 1rem rather than adding to it.) */
.pm-footer-widget.toocheke_social_media {
margin-top: 1.75rem;
}
/* Toocheke draws these as glyphs on rounded squares. The design has them as
plain marks, so the box is unwound, and the marks take Footer Link Color
(Porter, Sep 11).
Both colours need !important: once a site sets Action Color and
Action Text Color, Toocheke paints the square and the glyph with
!important. Without it here, the square's red stayed behind each black glyph
(Thunder Dog, Sep 11). */
.pm-footer .social-links ul li a span.fab,
.pm-footer .social-links ul li a span.fas {
background-color: transparent !important;
border-radius: 0;
width: auto;
height: auto;
line-height: 1;
color: var(--pm-footer-link) !important;
}
/* Toocheke pins its copyright bar to the bottom of the document with
position:absolute, which left it stranded far below the page on long pages.
Back into flow, where it reads as the last line of the footer band. */
.footer {
position: static;
height: auto;
/* Footer Background and Footer Text Color, the same as the band above it.
Toocheke's default text grey, #c5c5c5, is barely legible on white — set
Footer Text Color per site. */
background: var(--pm-footer-bg);
padding: 0 1rem 1.5rem;
color: var(--pm-footer-text);
font-size: .95rem;
line-height: 1.4;
font-family: 'Kameron', Georgia, serif;
}
/* A link inside the copyright sentence needs more than colour to stand out:
Footer Link and Footer Text Color are both muted, only 1.9:1 apart on
Thunder Dog. */
.footer a {
text-decoration: underline;
}
/* ...which leaves the room Toocheke keeps under that bar
(`body { margin-bottom: 45px }`) free to be the space under the footer
itself. It shows Footer Background Color, because is painted with it
just below; at Toocheke's 45px it was a grey strip, the page background
(Porter, Sep 11).
1.5rem because that is what Pages already had and what Porter picked for all
of them (Sep 17): Toocheke's `.page { margin-bottom: 1.5em }` is meant for
the article, but carries that class too on a Page, and a class beats
a plain `body` — so only Pages had the gap. `body.page` is what it takes to
match it. */
body,
body.page {
margin-bottom: 1.5rem;
}
/* The same grey also filled the window below the footer on any page shorter
than the window. Painting in Footer Background Color carries the
footer's colour down instead; the page keeps its own background, because
that's painted on . */
html {
background: var(--pm-footer-bg);
}
/* A third strip of the same grey, this one between the footer's links and the
copyright line: Toocheke pads `.page main` 15px at the bottom, and the band
holding the footer is the last thing inside main. On About it never showed,
because that template paints the content colour (see "Standard
pages"); on Characters and Topics it did (Porter, Sep 17). No other template
has the padding at all, so zeroing it makes every page match. */
.page main {
padding-bottom: 0;
}
/*--------------------------------------------------------------
# "What's next" zone — narrower screens
--------------------------------------------------------------*/
/* Below the wide view the promo goes on top and browsing sits underneath it,
in two columns while there's room for them.
781 and 499 are the SAME breakpoints the comic panels use, so the page
reflows once at each rather than four times on the way down. They aren't
free to choose: WordPress core hard-codes wp:columns stacking at
max-width:781px, so the panels can't move — see "Responsive panel wrapping"
above. The zone moves to meet them. */
@media (max-width: 781px) {
/* One flexible column between fixed gutters. A track with a fixed maximum
would overflow rather than shrink once the screen got narrower than it,
so the width limit goes on the contents instead, where it can't push the
promo card off the side of a phone. */
.pm-next {
grid-template-columns: [full-start] 1rem [main-start] 1fr [main-end] 1rem [full-end];
/* The wide view's gap sat between browse and promo. Here the gutters
are real tracks, so a column gap would just inset everything. */
column-gap: 0;
}
.pm-next-browse,
.pm-next-promos {
grid-column: main-start / main-end;
width: min(34rem, 100%);
justify-self: center;
}
.pm-next-promos {
order: -1;
}
/* Stacked, only the first promo shows, so the band doesn't become a wall
of asks between the strip and Keep reading (Porter, Sep 17). */
.pm-cta ~ .pm-cta {
display: none;
}
.pm-next-browse {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 2rem;
}
.pm-next-browse > h2 {
grid-column: 1 / -1;
}
/* Side by side now, so the stacking gap would only push one column down. */
.pm-next-group + .pm-next-group {
margin-top: 0;
}
}
@media (max-width: 499px) {
.pm-next-browse {
grid-template-columns: 1fr;
}
.pm-next-group + .pm-next-group {
margin-top: 1.5rem;
}
.pm-cta {
grid-template-columns: 1fr;
}
.pm-cta-actions {
margin: 0 1rem 1.25rem;
}
.pm-cta-button {
display: block;
text-align: center;
}
}
/*--------------------------------------------------------------
# Links dressed as buttons
--------------------------------------------------------------*/
/* A link that looks like a button keeps its own colour in every state — it
isn't read as a link, so it shouldn't advertise whether it's been followed.
This needs saying explicitly because of how specificity falls out. Both
Toocheke's link colour rule and the child theme's visited one are written
`a:visited`, which is a pseudo-class plus an element — and that outranks a
plain `.some-button { color: … }`. Bootstrap's `a:hover` does the same for
hover. So the button's own colour loses, and its label gets repainted in the
link colour the moment someone has visited it.
ANY NEW BUTTON that is an needs covering, or it will turn purple. The
promo button handles its own by listing `:visited` alongside the base rule
up in its own section — which is the better shape, because a separate rule
further down the file ties with the :hover rule on specificity and then wins
on order, leaving a visited button stuck in its resting colour while
hovered. */
.single-comic-navigation > a:visited,
.single-comic-navigation > a:hover,
.single-comic-navigation > a:focus {
color: var(--pm-action-text);
}
.pm-footer-name a:visited,
.pm-footer-name a:hover,
.pm-footer-name a:focus {
color: inherit;
}
/*--------------------------------------------------------------
# The comic's written post
--------------------------------------------------------------*/
/* Both page types carry a row between the strip and the footer for the comic's
written post — the latest comic's on the home page, this comic's
(comic_blog_post_editor) on a single comic page. The design goes straight
from the strip to "Keep reading", so both are hidden.
This is an override rather than a setting, which is the wrong way round: on
the home page the post comes bundled with Toocheke's alt-4 hero layout and
there's no hero-without-blog option to pick instead (alt-2 drops the blog but
takes the hero header with it).
TURN THIS BACK ON if written commentary on comics is ever wanted — it needs
a design of its own first. The whole row goes rather than just the post,
because #left-col carries a white background and the Bootstrap row its own
spacing, so hiding only the post left an empty white box behind. Nothing
else renders in these rows today, but the "Home Bottom Content Area" widget
area and the right sidebar both live in them and would go too. */
.home #main-content-row,
.single-comic #traditional-single-comic {
display: none;
}
/*--------------------------------------------------------------
# Standard pages
--------------------------------------------------------------*/
/* Premium sets a page (About, say) as its white box at two thirds, beside the
Right Sidebar. With nothing in that widget area Premium leaves the sidebar
out, and then the box is centred on the grey, as wide as the "Keep reading"
band's content: 16rem + 32rem and the 2.5rem gap between them, plus the
column's own 15px padding either side. Put a widget in Right Sidebar and
Premium's two columns come back — the widget area is the switch. */
.page #content > .row > .col-lg-8:only-child {
flex-basis: calc(50.5rem + 30px);
max-width: 100%;
margin: 0 auto;
}
/* Headings in Kameron, like All Comics and every character's page, and with
their lines as close, for a title that wraps. Premium's page templates
(Collections, say) call theirs .page-title. */
.page .entry-title,
.page .page-title {
font-family: 'Kameron', Georgia, serif;
font-weight: 700;
line-height: 1.05;
}
/* The text starts straight under the heading, with only the lines' own
spacing between, as in the bands above a list: text under a heading should
read as attached to it (Porter, Sep 12). Premium spaces them 8px + 24px. */
.page .entry-header .entry-title {
margin-bottom: 0;
}
.page .entry-header + .entry-content {
margin-top: 0;
}
/* A written page is Main Content Background Color edge to edge, not a box on
Premium's grey, which the cream bands blurred into (Porter, Sep 16).
Premium's own page templates aren't named here, so they still look like
Premium's. */
body.page-template-default {
background-color: var(--pm-content-bg);
}
/* Characters and Topics are LISTS of pages, so their white tiles sit on Title
Band Color instead — each card reads as a page waiting to be opened, which
white on white couldn't say and Toocheke's grey said by accident (Porter,
Sep 17). It runs the whole page, so the title band at the top is the same
cream and draws no rule under itself (see "Characters and Topics pages").
About stays white — it's a page, not a list of them. */
body.page-template-comic-characters,
body.page-template-comic-topics,
body.page-template-comic-storylines {
background-color: var(--pm-band-bg);
}
/* A written page (About), in the site's own look rather than Premium's plain
one. Only the default template: Characters and Topics have designs of their
own. The title sits in a band like All Comics', run out to the window's
edges and up to the menu with the same fixes as that band (see
"Whole-comics archive"). Premium pads the article 30px, which the band's own
margins undo. */
.page-template-default #page {
overflow-x: clip;
}
.page-template-default main,
.page.page-template-default .header-below-jumbotron + main #content {
margin-top: 0 !important;
padding-top: 0;
}
.page-template-default #content {
overflow: visible;
}
.page-template-default article.page {
--pm-page-pad: 30px;
/* For what shouldn't look clickable: not the link colour, and not
Action Color, which the site uses for buttons (Porter, Sep 16).
Title Band Color darkened, as the quieter promo cards' borders
are; the text shade is darker, to read on the band. */
--pm-page-rule: color-mix(in srgb, var(--pm-band-bg), black 40%);
--pm-page-quiet: color-mix(in srgb, var(--pm-band-bg), black 62%);
}
.page-template-default .entry-header {
margin: calc(-1 * var(--pm-page-pad)) calc(50% - 50vw) 2rem;
padding: 2rem 15px;
background: var(--pm-band-bg);
border-bottom: 3px solid var(--pm-text);
text-align: center;
}
/* Page not found is its title band alone (404.php), set straight on the
band below, whose top rule is the line between them. Premium pads the
article 30px with !important, and spaces it and the column below. */
.error404 article.page {
margin-bottom: 0;
padding-bottom: 0 !important;
}
.error404 #left-content {
margin-bottom: 0;
}
.error404 .entry-header {
margin-bottom: 0;
border-bottom: 0;
}
.error404 .entry-header p {
margin-bottom: 0;
}
.page-template-default .entry-header .entry-title {
font-size: 2.5rem;
}
/* Premium spaces every line on the site at 1.75, which pulls paragraphs
apart. A written page reads at 1.5: a little looser than the 1.4 of the
short descriptions on character and topic pages, for longer text
(Porter, Sep 17). */
.page-template-default .entry-content {
line-height: 1.5;
}
/* Section headings: Kameron over a dashed rule, lighter than the title band's
black one (Porter, Sep 16). clear, so a floated picture never runs into the
next section. */
.page-template-default .entry-content h2 {
clear: both;
margin: 2.5rem 0 1rem;
padding-bottom: .35rem;
border-bottom: 2px dashed var(--pm-page-rule);
font-family: 'Kameron', Georgia, serif;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.1;
}
.page-template-default .entry-content > h2:first-child {
margin-top: 0;
}
.page-template-default .entry-content h3 {
margin: 1.5rem 0 .25rem;
font-family: 'Kameron', Georgia, serif;
font-size: 1.15rem;
font-weight: 700;
}
/* A picture set to align left or right in the editor takes about a third of
the column, and on a phone goes back to full width. */
.page-template-default .entry-content .alignright {
float: right;
width: 36%;
margin: .35rem 0 1rem 1.75rem;
}
.page-template-default .entry-content .alignleft {
float: left;
width: 36%;
margin: .35rem 1.75rem 1rem 0;
}
@media (max-width: 499px) {
.page-template-default .entry-content :is(.alignright, .alignleft) {
float: none;
width: auto;
margin: 0 0 1rem;
}
}
/* "pm-faq" (a Group block's Additional CSS class): a band at the foot of the
page, the colour of the title band, under the section headings' dashed rule
— still part of the page, not a new band (Porter, Sep 16). It's drawn to the
box's edges, so it belongs last on the page. */
.page-template-default .pm-faq {
clear: both;
margin: 2.5rem calc(-1 * var(--pm-page-pad)) calc(-1 * var(--pm-page-pad));
padding: 2rem var(--pm-page-pad) 1rem;
background: var(--pm-band-bg);
border-top: 2px dashed var(--pm-page-rule);
}
/* Where the page is as wide as the screen, the FAQ runs straight into the
"Keep reading" band's black rule; the white strip between them (Premium's
24px under the article and 15px under main) looked like the page had broken
off. 838px is the page's width, 50.5rem + 30px, from the top of this
section. Wider, the FAQ is narrower than that band and keeps its gap. */
@media (max-width: 838px) {
.page-template-default article.page:has(.pm-faq:last-child) {
margin-bottom: 0;
}
.page-template-default main:has(.pm-faq:last-child) {
padding-bottom: 0;
}
}
.page-template-default .pm-faq h2 {
margin-top: 0;
border-bottom: 0;
}
.page-template-default .pm-faq h3 {
margin-top: 1rem;
padding-top: 1rem;
border-top: 2px dashed color-mix(in srgb, var(--pm-text) 35%, transparent);
color: var(--pm-page-quiet);
}
.page-template-default .pm-faq h2 + h3 {
padding-top: 0;
border-top: 0;
}
/*--------------------------------------------------------------
# Characters and Topics pages
--------------------------------------------------------------*/
/* page-templates/comic-characters.php (in place of Premium's) and
comic-topics.php. The band is All Comics' (see "Whole-comics archive"),
which also brings its fix for the gap under the menu — but here it draws no
rule under itself, where on the archive it does: the band and the tiles'
ground are both Title Band Color, so the page reads as one cream sheet with
white cards laid on it, and a rule across it would only cut that in half
(Porter, Sep 17). The "Keep reading" band below is CTA Band Color, a colour
of its own, so its rule still has two things to separate. The tiles are four across
from 782px, three from 500 (a phone on its side; Porter, Sep 17) and two
below (Porter, Sep 12), no wider than Premium's 1140px content. */
.pm-whole-comics.pm-term-index {
background: transparent;
}
/* With no rule under the band, its own 2rem is the whole gap above the tiles;
the grid adding 1.5rem on top of that left them adrift (Porter, Sep 17). */
.pm-term-index .pm-term-grid,
.pm-term-index .pm-topics-cloud {
padding-top: 0;
}
/* Room at the sides so the tiles, and their shadows, don't press against the
window's edges (Porter, Sep 12); the widest grid grows by that room, so the
tiles themselves stay 1140px's worth. */
.pm-term-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
max-width: calc(1140px + 5rem);
margin: 0 auto;
padding: 1.5rem 1.25rem;
list-style: none;
}
@media (min-width: 500px) {
.pm-term-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 782px) {
.pm-term-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.5rem;
padding: 2rem 2.5rem;
}
}
/* Each tile is one link, with no button, so it's dressed like the promo cards
— the site's other clickable card: a border in Main Content Text Color, a
hard shadow, and an arrow after the count in Action Color (Porter,
Sep 12: soft tiles didn't look clickable). Hovered, it rises off its shadow
and the name takes Action Color. Like any link dressed as something
else, it keeps its colours once followed. */
.pm-term-tile,
.pm-term-tile:visited {
display: block;
height: 100%;
background: var(--pm-content-bg);
border: 2px solid var(--pm-text);
box-shadow: 4px 4px 0 rgba(0, 0, 0, .2);
color: var(--pm-text);
text-decoration: none;
transition: transform .15s, box-shadow .15s;
}
/* Led by the grid so it outranks Toocheke's a:visited:hover. */
.pm-term-grid .pm-term-tile:hover,
.pm-term-grid .pm-term-tile:focus-visible {
box-shadow: 6px 6px 0 rgba(0, 0, 0, .25);
color: var(--pm-text);
text-decoration: none;
transform: translate(-2px, -2px);
}
.pm-term-tile:hover .pm-term-name,
.pm-term-tile:focus-visible .pm-term-name {
color: var(--pm-action);
text-decoration: underline;
}
/* The arrow is decoration: the empty alt text after the slash keeps screen
readers from announcing it. */
.pm-term-count::after {
content: " \2192" / "";
color: var(--pm-action);
font-weight: 700;
}
/* Pictures keep their own shape, uncropped (Porter, Sep 16): a character or
topic without one shows a comic panel (porter-mason-core), usually taller
than wide. */
.pm-term-tile img {
display: block;
width: 100%;
height: auto;
border-bottom: 2px solid var(--pm-text);
}
.pm-term-name,
.pm-term-count {
display: block;
padding: 0 .75rem;
}
.pm-term-name {
padding-top: .6rem;
font-family: 'Kameron', Georgia, serif;
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
}
.pm-term-count {
padding-bottom: .7rem;
color: color-mix(in srgb, var(--pm-text) 65%, transparent);
font-size: .85rem;
}
/* A 360px phone leaves a name about 130px, and a 500px window three across
about 115px, and "Congresswoman" has to fit. */
@media (max-width: 781px) {
.pm-term-name {
font-size: .85rem;
}
}
/* The Topics page, in tiers so it reads a little like a word cloud (Porter,
Sep 12): the topics in the most comics as tiles — three, or six on a bigger
site (comic-topics.php) — three across and no bigger than the character
tiles; then the rest as a centred flow of dashed labels, like the topic
links in "Keep reading", the first few larger. */
.pm-term-grid.pm-topics-top {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: calc(860px + 5rem);
padding-bottom: 0;
}
/* The tiles are topics too, so they look like big labels rather than the
character cards (Porter, Sep 12): the labels' dashed line as their border,
no shadow, the name on top at least as big as the large labels', and the
picture held inside the border with no line of its own. Hovered, the dashes
and the name take Action Color, as a label's do. Three tiles share a
phone's width, so there the names come down to fit. */
.pm-topics-top .pm-term-tile,
.pm-topics-top .pm-term-tile:visited {
padding: .6rem .75rem .7rem;
border-style: dashed;
box-shadow: none;
}
/* A name that wraps ("the Tea Party" on a phone) would push its picture and
count below the other tiles', so both sit at the bottom and the spare room
goes under the name. */
.pm-topics-top .pm-term-tile {
display: flex;
flex-direction: column;
}
.pm-topics-top .pm-term-name {
flex-grow: 1;
}
/* The labels' own top padding, taken away above (for when they lead the
page), is the gap under the tiles. */
.pm-term-index .pm-topics-top + .pm-topics-cloud {
padding-top: 2rem;
}
.pm-term-grid.pm-topics-top .pm-term-tile:hover,
.pm-term-grid.pm-topics-top .pm-term-tile:focus-visible {
border-color: var(--pm-action);
box-shadow: none;
transform: none;
}
/* No underline, as on a label (Porter, Sep 16). */
.pm-term-grid.pm-topics-top .pm-term-tile:hover .pm-term-name,
.pm-term-grid.pm-topics-top .pm-term-tile:focus-visible .pm-term-name {
text-decoration: none;
}
.pm-topics-top .pm-term-tile img {
border-bottom: 0;
}
/* Hovered, the picture turns to ink in Action Color (Porter, Sep 16).
An ![]()
can't take an overlay, so its wrapper is that colour and the grey
picture is blended onto it: "screen" keeps white white and turns black into
the wrapper's colour. */
.pm-topics-picture {
display: block;
margin: .5rem 0;
background: var(--pm-action);
isolation: isolate;
}
.pm-topics-top .pm-term-tile:hover img,
.pm-topics-top .pm-term-tile:focus-visible img {
filter: grayscale(1);
mix-blend-mode: screen;
}
.pm-topics-top .pm-term-name,
.pm-topics-top .pm-term-count {
padding: 0;
}
/* The name grows with its tile, not the window (cqi is a hundredth of the
tile's width), up to the large labels' size: three across at 500–781 left
"songwriting" too little room at a fixed size (Porter, Sep 18), and a word
that long can't wrap. */
.pm-topics-top > li {
container-type: inline-size;
}
.pm-topics-top .pm-term-name {
font-size: clamp(1rem, 11cqi, 1.4rem);
}
/* On a phone (Porter, Sep 18), six tiles go two across. Three would leave one
alone, so they go one per row instead, on their side — picture on the left,
name and count beside it — since three panels at full width would run over
a thousand pixels. :has() counts the tiles, so the template needn't. */
@media (max-width: 499px) {
.pm-term-grid.pm-topics-top:has(> li:nth-child(4)) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pm-term-grid.pm-topics-top:not(:has(> li:nth-child(4))) {
grid-template-columns: minmax(0, 1fr);
}
.pm-topics-top:not(:has(> li:nth-child(4))) .pm-term-tile {
display: grid;
grid-template-columns: 6rem minmax(0, 1fr);
grid-template-rows: 1fr auto;
column-gap: .9rem;
}
.pm-topics-top:not(:has(> li:nth-child(4))) .pm-topics-picture {
grid-row: 1 / 3;
grid-column: 1;
align-self: start;
margin: 0;
}
.pm-topics-top:not(:has(> li:nth-child(4))) .pm-term-name {
grid-column: 2;
align-self: end;
font-size: 1.25rem;
}
.pm-topics-top:not(:has(> li:nth-child(4))) .pm-term-count {
grid-column: 2;
padding-top: .2rem;
}
}
.pm-topics-cloud {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: .75rem 1rem;
max-width: calc(860px + 5rem);
margin: 0 auto;
padding: 2rem 1.25rem 2.5rem;
list-style: none;
}
/* Like any link dressed as something else, a label keeps its colours once
followed. */
.pm-topic-label,
.pm-topic-label:visited {
display: inline-block;
padding: .15em .6em;
border: 1px dashed color-mix(in srgb, var(--pm-text) 45%, transparent);
border-radius: 4px;
background: var(--pm-content-bg);
color: var(--pm-text);
font-family: 'Kameron', Georgia, serif;
font-size: 1rem;
line-height: 1.4;
text-decoration: none;
}
/* Sizes by position in the list (comic-topics.php): xl, then on a bigger
site l, regular and s, so the labels taper off like a word cloud rather
than ending in one even block (Porter, Sep 18). */
.pm-topic-label-xl,
.pm-topic-label-xl:visited {
border-width: 2px;
font-size: 1.4rem;
font-weight: 700;
}
.pm-topic-label-l,
.pm-topic-label-l:visited {
font-size: 1.15rem;
font-weight: 700;
}
.pm-topic-label-s,
.pm-topic-label-s:visited {
font-size: .85rem;
}
.pm-topic-label-count {
color: color-mix(in srgb, var(--pm-text) 65%, transparent);
font-size: .75em;
font-weight: 400;
}
/* Three-quarters of the smallest size would be too small to read. */
.pm-topic-label-s .pm-topic-label-count {
font-size: .85em;
}
/* Led by the list so it outranks Toocheke's a:visited:hover. The dashes carry
the hover, as in "Keep reading". */
.pm-topics-cloud .pm-topic-label:hover,
.pm-topics-cloud .pm-topic-label:focus-visible {
border-color: var(--pm-action);
color: var(--pm-action);
text-decoration: none;
}
/*--------------------------------------------------------------
# The storyline bar under a strip
--------------------------------------------------------------*/
/* It sits on its own line under the navigation: #comic-social is
display:contents, so what functions.php prints there is a child of the
navigation row, and a full-width item ordered last drops below the buttons.
A pale wash of the "Keep reading" band and no solid buttons, so it stays
clearly secondary to the strip's own navigation above it (design 4a). */
.pm-storyline-bar {
order: 9;
/* Out to the window's edges, wider than the strip above it (Porter,
Sep 24) — the same break-out the strip itself uses. A flex item won't
stretch past its basis, so the width is stated and the margins pull it
back to the edges; together they still take one whole line of the row. */
flex: 0 0 auto;
width: 100vw;
margin-right: calc(-50vw + 50%);
margin-left: calc(-50vw + 50%);
margin-top: 1rem;
background: color-mix(in srgb, var(--pm-cta-bg) 65%, var(--pm-content-bg));
border-top: 1px solid color-mix(in srgb, var(--pm-text) 22%, transparent);
/* The navigation row sets a large size for its icon buttons, which
everything printed into it inherits. */
font-size: 1rem;
line-height: 1.3;
text-align: left;
}
/* The bar meets the "Keep reading" band's rule with nothing between (Porter,
Sep 24): the row's bottom padding and Premium's 15px under #comic both go
when the bar is the last thing in it. */
.single-comic-navigation:has(.pm-storyline-bar),
#comic:has(.pm-storyline-bar) {
padding-bottom: 0;
}
/* A storyline with drawn art wears it: the picture fills its whole row behind
a scrim, rather than sitting in it as a thumbnail (Porter, Sep 24). It's the
one place under the strip that carries the storyline's own look, and on a
phone it's what makes the bar read as part of the story instead of another
control. A storyline with no art keeps the pale wash — its banner is four
white-backed panels, which can't hold text. */
.pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) {
position: relative;
overflow: hidden;
min-height: 5rem;
color: #fff;
}
/* The art's containing block is the row, so the name stays static and its
words are lifted above the picture instead. */
.pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) .pm-storyline-banner {
position: absolute;
inset: 0;
flex: none;
padding: 0;
}
.pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) .pm-storyline-art {
width: 100%;
height: 100%;
aspect-ratio: auto;
border: 0;
}
.pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) .pm-storyline-art::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, color-mix(in srgb, var(--pm-splash-fade) 82%, transparent), color-mix(in srgb, var(--pm-splash-fade) 58%, transparent));
}
.pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) .pm-storyline-row-words,
.pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) .pm-storyline-track,
.pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) .pm-storyline-row-link {
position: relative;
z-index: 1;
}
/* Everything in the row goes light, the track included: the teal read-so-far
and the ink block of where you are both disappear against the picture. */
.pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) .pm-storyline-row-name,
.pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) .pm-storyline-row-count,
.pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) .pm-storyline-eyebrow,
.pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) .pm-storyline-row-link,
.pm-storyline-bar .pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) .pm-storyline-step {
color: #fff;
}
.pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) .pm-storyline-seg {
background: rgba(255, 255, 255, .32);
}
.pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) .pm-storyline-seg-read {
background: rgba(255, 255, 255, .72);
}
.pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) .pm-storyline-seg-now {
background: #fff;
}
.pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) .pm-storyline-step-end {
color: rgba(255, 255, 255, .4);
}
/* Hover has to be restated here: the rules above outrank the plain :hover ones
further down, which is how these rows lost it. Action Color itself is too
dark to see on the scrim, so a pale mix of it. */
.pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) .pm-storyline-seg:is(:hover, :focus-visible) {
background: color-mix(in srgb, var(--pm-action) 40%, #fff);
}
.pm-storyline-bar .pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) a.pm-storyline-step:is(:hover, :focus-visible) {
color: color-mix(in srgb, var(--pm-action) 40%, #fff);
}
.pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) :is(.pm-storyline-row-name, .pm-storyline-row-link):is(:hover, :focus-visible) {
color: #fff;
}
.pm-storyline-row-link:is(:hover, :focus-visible) {
text-decoration: underline;
}
/* The whole name block is one link, but only the name itself underlines
(Porter, Sep 24), not "Strip 2 of 8 of the" or "storyline". */
.pm-storyline-bar .pm-storyline-row-name:is(:hover, :focus-visible) {
text-decoration: none;
}
.pm-storyline-row-name:is(:hover, :focus-visible) .pm-storyline-row-title {
text-decoration: underline;
}
/* Premium sizes EVERY link in the navigation row at 30px with a 10px margin,
for its icon buttons. The bar's links are words, and at 30px they pushed the
row wider than the page. It caps every image there at 35px tall too, which
left the art covering only the top of its row (Porter spotted it, Sep 24). */
.pm-storyline-bar a {
margin: 0;
font-size: inherit;
}
.pm-storyline-bar img {
max-height: none;
}
/* Premium's `#comic img { height: auto; margin: 0 auto !important }` carries
an ID, so no class rule can make the picture fill its row. Same ID here, and
the margin needs its own !important to be undone. */
#comic .pm-storyline-art img {
height: 100%;
margin: 0 !important;
}
/* A strip can be in more than one storyline — that's also how one storyline
inside another works — and the rows then stack in the one wash. */
.pm-storyline-row {
display: flex;
align-items: center;
gap: 1rem;
/* Wider gutters than the row above, now that the bar runs to the window's
edges and its words would otherwise start at the very edge. */
padding: .7rem 1.25rem;
}
.pm-storyline-row + .pm-storyline-row {
border-top: 1px solid color-mix(in srgb, var(--pm-text) 14%, transparent);
}
/* A fixed name column, so stacked rows' tracks start and end at the same
place however long the names are. */
.pm-storyline-row-name,
.pm-storyline-row-name:visited {
display: flex;
flex: 0 0 15rem;
align-items: center;
gap: .6rem;
color: var(--pm-text);
text-decoration: none;
}
.pm-storyline-row-name .pm-storyline-banner {
flex: 0 0 4.5rem;
min-width: 0;
padding: 0;
}
.pm-storyline-row-words {
min-width: 0;
}
.pm-storyline-row-title {
display: block;
font-family: 'Kameron', Georgia, serif;
font-weight: 700;
line-height: 1.15;
}
/* The row reads down as a sentence, so the count leads and the word
"storyline" closes it under the name (Porter, Sep 24). */
.pm-storyline-row-count {
display: block;
color: var(--pm-muted);
font-size: .8rem;
}
.pm-storyline-row .pm-storyline-eyebrow {
margin: 0;
font-size: .65rem;
}
/* One segment per strip, each a link to it, sized to share the room. */
.pm-storyline-track {
display: flex;
flex: 1 1 auto;
align-items: center;
gap: 2px;
min-width: 0;
}
.pm-storyline-seg {
flex: 1 1 0;
min-width: 2px;
height: 1.1rem;
background: color-mix(in srgb, var(--pm-text) 16%, transparent);
}
.pm-storyline-seg-read {
background: var(--pm-link);
}
/* Where you are: taller and solid, the one mark that isn't a link. */
.pm-storyline-seg-now {
flex: 1 1 0;
min-width: 4px;
height: 1.7rem;
background: var(--pm-text);
}
.pm-storyline-seg:hover,
.pm-storyline-seg:focus-visible {
background: var(--pm-action);
}
/* The arrows are printed either side of the current segment, so they travel
along the track as you read (Porter, Sep 23). At either end the arrow stays
in place, greyed, rather than moving everything along by its width. */
.pm-storyline-bar .pm-storyline-step {
flex: none;
padding: 0 .3rem;
color: var(--pm-link);
font-size: 1.3rem;
line-height: 1;
text-decoration: none;
}
.pm-storyline-step:hover,
.pm-storyline-step:focus-visible {
color: var(--pm-action);
}
.pm-storyline-step-end {
color: color-mix(in srgb, var(--pm-text) 25%, transparent);
}
.pm-storyline-row-link,
.pm-storyline-row-link:visited {
flex: 0 0 auto;
color: var(--pm-link);
font-weight: 700;
white-space: nowrap;
}
/* On a phone the row stacks: the name with its picture, then the track on its
own line. The arrows go — the strip's own navigation above steps back and
forward, and at 30 strips a segment is too small to tap anyway, so the track
is left to say where you are. */
@media (max-width: 781px) {
/* The views and like line is 40px tall for two small marks; where it has a
line of its own (499 and down) that was all air. */
.single-comic-navigation .single-comic-total-likes,
.single-comic-navigation .single-comic-total-views {
height: 1.75rem;
}
.pm-storyline-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: .5rem .75rem;
padding: .85rem 1rem;
}
/* On a phone the row has the room to be a picture: it's taller, the words
sit along its bottom, and the scrim fades upwards so the art shows
through above them (Porter, Sep 24). */
.pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) {
min-height: 9rem;
align-content: end;
}
.pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) .pm-storyline-art::after {
background: linear-gradient(to top, color-mix(in srgb, var(--pm-splash-fade) 85%, transparent) 35%, color-mix(in srgb, var(--pm-splash-fade) 25%, transparent));
}
.pm-storyline-row-name {
flex: 1 1 auto;
}
.pm-storyline-track {
grid-column: 1 / -1;
}
.pm-storyline-step {
display: none;
}
.pm-storyline-row-link {
align-self: center;
font-size: .9rem;
}
}
/* A subplot's row comes straight after its parent's and hangs from it (Porter,
Sep 24): indented, a size smaller, and joined to the parent's thumbnail by an
elbow of tree line. No divider inside a family, so a parent and its subplots
read as one block. The name column gives up the indent, so every row's track
still starts and ends in the same place; in a bar with subplots it's widened
to leave their names room. */
.pm-storyline-bar {
--pm-tree: color-mix(in srgb, var(--pm-text) 35%, transparent);
/* Under the middle of a parent's thumbnail: the row's padding plus half
the thumbnail's 4.5rem. */
--pm-tree-x: 3.5rem;
--pm-indent: 3.5rem;
}
.pm-storyline-bar:has(.pm-storyline-row-subplot) .pm-storyline-row-name {
flex-basis: 17rem;
}
/* "See the full subplot" is shorter than "…storyline", so the links are given
one width or the tracks would end in different places. */
.pm-storyline-bar:has(.pm-storyline-row-subplot) .pm-storyline-row-link {
min-width: 11rem;
text-align: right;
}
.pm-storyline-bar .pm-storyline-row-subplot .pm-storyline-row-name {
flex-basis: calc(17rem - var(--pm-indent));
}
.pm-storyline-row-parent,
.pm-storyline-row-subplot {
position: relative;
}
.pm-storyline-row-subplot {
padding-top: .45rem;
padding-left: calc(1.25rem + var(--pm-indent));
}
.pm-storyline-row + .pm-storyline-row-subplot {
border-top: 0;
}
.pm-storyline-row-subplot .pm-storyline-row-name .pm-storyline-banner {
flex-basis: 3.5rem;
}
.pm-storyline-row-subplot .pm-storyline-row-title {
font-size: .9rem;
}
.pm-storyline-row-subplot .pm-storyline-seg {
height: .8rem;
}
.pm-storyline-row-subplot .pm-storyline-seg-now {
height: 1.25rem;
}
/* The tree line: a stem down from under the parent's thumbnail, an elbow into
each subplot, and the line carrying on down past every subplot but the last.
z-index lifts it over a row's drawn art, which is positioned too. */
.pm-storyline-row-parent::after,
.pm-storyline-row-subplot::before,
.pm-storyline-row-subplot:has(+ .pm-storyline-row-subplot)::after {
content: "";
position: absolute;
z-index: 1;
left: var(--pm-tree-x);
border-left: 2px solid var(--pm-tree);
}
.pm-storyline-row-parent::after {
top: calc(50% + 1rem);
bottom: 0;
}
.pm-storyline-row-subplot::before {
top: 0;
height: 50%;
width: calc(1.25rem + var(--pm-indent) - var(--pm-tree-x) - .3rem);
border-bottom: 2px solid var(--pm-tree);
}
/* Straight junctions where the line runs on, so it reads unbroken; only the
last elbow is rounded (Porter, Sep 24). */
.pm-storyline-row-subplot:not(:has(+ .pm-storyline-row-subplot))::before {
border-bottom-left-radius: 6px;
}
.pm-storyline-row-subplot:has(+ .pm-storyline-row-subplot)::after {
top: 50%;
bottom: 0;
}
.pm-storyline-row:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)):is(.pm-storyline-row-parent, .pm-storyline-row-subplot) {
--pm-tree: rgba(255, 255, 255, .6);
}
/* On a phone the track runs under the name, right across where a stem from the
parent would go, so the line starts at the subplot's own top edge, and the
elbow meets the thumbnail at the height of the name rather than the row's
middle. */
@media (max-width: 781px) {
.pm-storyline-bar {
--pm-tree-x: 3.25rem;
--pm-indent: 3rem;
}
.pm-storyline-row-subplot {
padding-top: .5rem;
padding-left: calc(1rem + var(--pm-indent));
}
.pm-storyline-row-parent::after {
content: none;
}
.pm-storyline-row-subplot::before {
height: 2rem;
width: calc(1rem + var(--pm-indent) - var(--pm-tree-x) - .3rem);
}
.pm-storyline-row-subplot:has(+ .pm-storyline-row-subplot)::after {
top: 2rem;
}
}
/* "Related storylines" in the "Keep reading" band: each storyline is its
banner across the whole column with its name laid over the bottom, and
nothing else (Porter, Sep 26). The art is dressed like a storyline's own
header: Storyline Background Color (or its Colour) behind, the art, and a
Storyline Fade Color gradient rising from the bottom for the white name to
sit on. The bar above the band is where a reader's own storyline is
(Porter, Sep 23). */
.pm-storyline-offers ul {
list-style: none;
margin: 0;
padding: 0;
}
.pm-storyline-offers li + li {
margin-top: .75rem;
}
/* Banner-shaped, but not as thin as the header's 3.2:1, so a name that wraps
to two lines still leaves the drawing showing above it. A longer name grows
the box rather than climbing over the art. */
.pm-storyline-offer,
.pm-storyline-offer:visited {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 0;
aspect-ratio: 2.4;
overflow: hidden;
background: var(--pm-splash-fade);
border: 2px solid var(--pm-ink);
color: #fff;
text-decoration: none;
}
.pm-storyline-offer .pm-storyline-banner {
position: absolute;
inset: 0;
padding: 0;
}
.pm-storyline-offer .pm-storyline-art {
height: 100%;
aspect-ratio: auto;
border: 0;
}
.pm-storyline-offer .pm-storyline-art img {
transition: scale .3s;
}
.pm-storyline-offer .pm-storyline-banner:not(.pm-storyline-banner-panels) .pm-storyline-art::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, var(--pm-splash-fade) 5%, color-mix(in srgb, var(--pm-splash-fade) 55%, transparent) 35%, transparent 70%);
}
.pm-storyline-offer-words {
position: relative;
display: block;
min-width: 0;
padding: .5rem .7rem .45rem;
}
.pm-storyline-offer-name {
display: block;
color: #fff;
font-family: 'Kameron', Georgia, serif;
font-size: 1.2rem;
font-weight: 700;
line-height: 1.15;
text-shadow: 0 1px 3px color-mix(in srgb, var(--pm-splash-fade) 80%, transparent);
}
/* "NEXT STORYLINE", when this strip ends one: Accent Color is picked dark for
white letters on it, so a pale mix of it here, as on the Storylines page's
dark cards. */
.pm-storyline-offer .pm-storyline-eyebrow {
display: block;
font-family: 'Hind', -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
color: color-mix(in srgb, var(--pm-accent) 35%, #fff);
}
/* No drawn art yet: the four panels are never lettered over (a balloon would
be covered), so they sit whole in the top of the box, on Storyline
Background Color fading down into the Fade Color the name sits on, like the
fallback on a storyline's own page. */
.pm-storyline-offer:has(.pm-storyline-banner-panels) {
aspect-ratio: auto;
}
.pm-storyline-offer .pm-storyline-banner-panels {
position: static;
padding: .6rem .6rem 0;
background: linear-gradient(var(--pm-splash-bg) 55%, var(--pm-splash-fade));
}
.pm-storyline-offer .pm-storyline-banner-panels .pm-storyline-art {
height: auto;
aspect-ratio: 3.2;
border: 1px solid var(--pm-ink);
}
/* The band's links turn Action Color and underline on hover; on the dark box
that's the name alone, in a pale mix of it, and the art eases in a little. */
.pm-next-group .pm-storyline-offer:is(:hover, :focus-visible) {
color: #fff;
text-decoration: none;
}
.pm-storyline-offer:is(:hover, :focus-visible) .pm-storyline-offer-name {
color: color-mix(in srgb, var(--pm-action) 40%, #fff);
text-decoration: underline;
}
.pm-storyline-offer:is(:hover, :focus-visible) .pm-storyline-banner:not(.pm-storyline-banner-panels) img {
scale: 1.04;
}
/*--------------------------------------------------------------
# Storylines page
--------------------------------------------------------------*/
/* One wide card per storyline, oldest first, down a rail with the year beside
the first storyline of each year: a storyline is the one thing on the site
with a place in time, and the rail is all that says so (Porter, Sep 23).
Cards are dark on the page's cream (below). */
.pm-storyline-list {
position: relative;
max-width: calc(1140px + 5rem);
margin: 0 auto;
/* The right margin matches the rail's on the left, so the cards sit centred
with the rail in the negative space, and Most popular, which has no
rail, stays balanced too (Porter, Sep 24). */
padding: 1.5rem 4.5rem 2.5rem;
list-style: none;
}
/* The rail runs from the first year's chip to the last one's, and stops
there (Porter, Sep 24): time is the years, not the cards below the last. So
it's drawn in pieces, one down each item that still has a year after it,
each reaching on past the gap below into the next. The chip covers the end. */
.pm-storyline-list > li {
position: relative;
}
.pm-storyline-list > li:has(~ .pm-storyline-year)::before {
content: "";
position: absolute;
top: 0;
bottom: -2rem;
/* The rail's place, measured back from the list's left padding. */
left: calc(2.25rem - 4.5rem);
width: 2px;
/* Title Band Color darkened, like the quieter promo cards' borders: a line
that marks time without looking clickable. */
background: color-mix(in srgb, var(--pm-band-bg), black 40%);
}
/* The order toggle (the archive's own markup) sits straight on the cream,
without the archive's white bubble and rule: those tie a list's controls to
the white strip of comics below, and this page is one cream sheet (Porter,
Sep 24). Every gap from the title down to the first card is tightened with
it, so the storylines start near the top. */
.pm-storylines .pm-whole-comics-intro {
padding-top: 1.5rem;
padding-bottom: .75rem;
}
.pm-storylines .pm-whole-comics-controls {
background: var(--pm-band-bg);
}
.pm-storylines .pm-whole-comics-controls::before {
content: none;
}
.pm-storylines .pm-whole-comics-bubble {
padding: 0;
border: 0;
background: none;
}
.pm-storylines .pm-storyline-list {
padding-top: 1.25rem;
}
/* Most popular: each storyline's place as a badge on its card's top left
corner, in the look every rank badge has (Accent Color), like the pictures
in "Most popular comics…". No rail and no years in this order: it isn't
time. Above the card, so it stays on the corner while the card lifts. */
.pm-storyline-rank {
position: absolute;
z-index: 1;
/* Just over the black edge, never onto the art: the card's padding is
.9rem, and the badge 1.8rem, so a third of it overlaps. */
top: -1.2rem;
left: -1.2rem;
display: flex;
align-items: center;
justify-content: center;
min-width: 1.8rem;
height: 1.8rem;
padding: 0 .4rem;
border-radius: .9rem;
background: var(--pm-accent);
box-shadow: 0 0 0 2px var(--pm-band-bg);
color: var(--pm-action-text);
font-size: .9rem;
font-weight: 700;
line-height: 1;
pointer-events: none;
}
.pm-storyline-list > li + li {
margin-top: 1rem;
}
/* Most popular: room for each rank badge, which rises 1.2rem above its card,
to clear the card before it. */
.pm-storyline-list-popular > li + li {
margin-top: 2rem;
}
/* The year sits on the rail, in the badge colours the rest of the site uses
for a number that isn't a link. */
.pm-storyline-year {
position: relative;
margin: 1.75rem 0 .75rem;
font-family: 'Kameron', Georgia, serif;
}
.pm-storyline-year span {
position: absolute;
/* Over the rail: the piece of rail below comes later in the page, so it
would otherwise be painted across the chip. */
z-index: 1;
top: -.35rem;
/* Centred on the rail: the rail's middle, measured back from the list's
left padding (Porter, Sep 24). */
left: calc(2.25rem + 1px - 4.5rem);
transform: translateX(-50%);
padding: .15rem .4rem;
background: var(--pm-accent);
color: var(--pm-action-text);
font-size: .85rem;
line-height: 1.2;
}
.pm-storyline-list > li:first-child .pm-storyline-year span,
.pm-storyline-year:first-child span {
top: 0;
}
.pm-storyline-year:first-child {
margin-top: 0;
}
/* The cards are dark with light lettering (Porter, Sep 24): cream cards melted
into the cream page. Storyline Fade Color, not Background Color: the fade is
what the white name sits on in a storyline's own header, so it's the one
kept dark, where Background Color and a storyline's Colour can be anything
(Buying a guitar's is a pale green). Those still show, behind the art. Links
and the eyebrow are pale mixes of their usual colours, which are chosen dark
for white text on them. */
.pm-storyline-card,
.pm-storyline-card:visited {
display: flex;
align-items: center;
gap: 1.25rem;
padding: .9rem 1.25rem .9rem .9rem;
background: var(--pm-splash-fade);
border: 2px solid var(--pm-text);
box-shadow: 4px 4px 0 rgba(0, 0, 0, .2);
color: #fff;
text-decoration: none;
transition: transform .15s, box-shadow .15s;
}
/* Hover is two things only (Porter, Sep 24): the card lifts, and "Read from
the start" and the name light up in a pale Action Color. Toocheke colours
and underlines a hovered link, which reached every line in the card, so both
are taken off the card and the underline put back on that one line. */
.pm-storyline-card:hover,
.pm-storyline-card:focus-visible {
box-shadow: 6px 6px 0 rgba(0, 0, 0, .22);
color: #fff;
text-decoration: none;
transform: translate(-2px, -2px);
}
/* The banner takes its own share of the card and the words the rest; the mat
inside it is the card's cream, so the art floats rather than butting up to
the border. */
.pm-storyline-card .pm-storyline-banner {
/* min-width: 0, or the four panels' own width keeps the banner from ever
shrinking to its share and the name is squeezed into a column. */
flex: 0 0 42%;
min-width: 0;
padding: 0;
}
.pm-storyline-card-text {
flex: 1 1 auto;
min-width: 0;
}
.pm-storyline-name {
display: block;
font-family: 'Kameron', Georgia, serif;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.1;
}
.pm-storyline-card .pm-storyline-meta {
display: block;
margin-top: .3rem;
color: rgba(255, 255, 255, .75);
line-height: 1.35;
}
/* On a narrow card the line wraps: each part goes down whole, never "13 /
strips" or "Jan / – Apr". */
.pm-storyline-card :is(.pm-storyline-count, .pm-storyline-dates) {
white-space: nowrap;
}
.pm-storyline-card .pm-storyline-eyebrow {
color: color-mix(in srgb, var(--pm-accent) 35%, #fff);
}
.pm-storyline-more {
display: block;
margin-top: .75rem;
color: color-mix(in srgb, var(--pm-link) 35%, #fff);
font-weight: 700;
}
.pm-storyline-card:hover :is(.pm-storyline-name, .pm-storyline-more),
.pm-storyline-card:focus-visible :is(.pm-storyline-name, .pm-storyline-more) {
color: color-mix(in srgb, var(--pm-action) 40%, #fff);
text-decoration: underline;
}
.pm-storyline-card:hover .pm-storyline-name,
.pm-storyline-card:focus-visible .pm-storyline-name {
text-decoration: none;
}
/* Drawn art runs to the card's edges, inside its border, with no mat or
keyline (Porter, Sep 24): the four-panel fallback keeps both, since white
panels need the frame. Stretched to the card's height, so the art covers
its side whether the words or the art are taller. */
.pm-storyline-card:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) {
align-items: stretch;
padding: 0 1.25rem 0 0;
}
.pm-storyline-card .pm-storyline-banner:not(.pm-storyline-banner-panels) {
display: flex;
}
.pm-storyline-card .pm-storyline-banner:not(.pm-storyline-banner-panels) .pm-storyline-art {
flex: 1 1 auto;
height: 100%;
border: 0;
}
.pm-storyline-card:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) .pm-storyline-card-text {
align-self: center;
padding: .9rem 0;
}
/* Subplots hang under their parent's card, not on the rail: the rail is time,
and a subplot runs inside its parent's time (Porter, Sep 24). Each gets an
elbow off a line in the rail's colour that drops from the parent card's
bottom edge, and a smaller card: less padding, a smaller banner and name. */
.pm-storyline-subplots {
--pm-tree: color-mix(in srgb, var(--pm-band-bg), black 40%);
margin: 0;
padding: 0 0 0 3rem;
list-style: none;
}
.pm-storyline-subplots > li {
position: relative;
margin-top: .75rem;
}
.pm-storyline-subplots > li::before,
.pm-storyline-subplots > li:not(:last-child)::after {
content: "";
position: absolute;
left: -1.75rem;
border-left: 2px solid var(--pm-tree);
}
/* From the gap above (the parent card's edge, or the line running on from the
subplot above) to this card's middle, then across to it: straight where the
line carries on, rounded only on the last (Porter, Sep 24). */
.pm-storyline-subplots > li::before {
top: -.75rem;
width: 1.5rem;
height: calc(50% + .75rem);
border-bottom: 2px solid var(--pm-tree);
}
.pm-storyline-subplots > li:last-child::before {
border-bottom-left-radius: 8px;
}
.pm-storyline-subplots > li:not(:last-child)::after {
top: 50%;
bottom: -.75rem;
}
.pm-storyline-subplots .pm-storyline-card {
gap: 1rem;
padding: .6rem 1rem .6rem .6rem;
box-shadow: 3px 3px 0 rgba(0, 0, 0, .18);
}
.pm-storyline-subplots .pm-storyline-card .pm-storyline-banner {
flex-basis: 25%;
}
.pm-storyline-subplots .pm-storyline-name {
font-size: 1.1rem;
}
.pm-storyline-subplots .pm-storyline-card .pm-storyline-meta {
font-size: .9rem;
}
.pm-storyline-subplots .pm-storyline-more {
margin-top: .4rem;
font-size: .9rem;
}
/* On a phone the banner goes above the words: side by side it would be too
small to read the strip in. The rail keeps its place. */
@media (max-width: 781px) {
/* On a phone a matching right margin would cost the cards too much, so
the rail's margin stays on the left only, and Most popular (no rail)
keeps just the room its rank badges hang into. */
.pm-storyline-list {
padding-right: 1.25rem;
padding-left: 3.25rem;
}
.pm-storyline-list-popular {
padding-left: 1.75rem;
}
.pm-storyline-list > li:has(~ .pm-storyline-year)::before {
left: calc(1.5rem - 3.25rem);
}
.pm-storyline-year span {
left: calc(1.5rem + 1px - 3.25rem);
}
.pm-storyline-card {
display: block;
padding: .9rem;
}
.pm-storyline-card .pm-storyline-banner {
margin-bottom: .75rem;
}
.pm-storyline-subplots {
padding-left: 1.75rem;
}
.pm-storyline-subplots > li::before,
.pm-storyline-subplots > li:not(:last-child)::after {
left: -1.1rem;
}
.pm-storyline-subplots > li::before {
width: .9rem;
}
.pm-storyline-subplots .pm-storyline-card {
padding: .6rem;
}
.pm-storyline-card:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) {
padding: 0;
}
.pm-storyline-card .pm-storyline-banner:not(.pm-storyline-banner-panels) {
margin-bottom: 0;
}
.pm-storyline-card:has(.pm-storyline-banner:not(.pm-storyline-banner-panels)) .pm-storyline-card-text {
display: block;
padding: .75rem .9rem .9rem;
}
.pm-storyline-name {
font-size: 1.25rem;
}
}
/*--------------------------------------------------------------
# Whole-comics archive
--------------------------------------------------------------*/
/* The 17th archive layout (archive-comic-whole.php): whole comics, one after
another, the way rooniecomics.com's archive reads — on the comic archive and
on every character's page. Two things it shares with
the comic page are set further up, not here: the panel wrapping (look for
.pm-whole-comic) and the like button's colours (.pm-whole-comic-stats). */
/* Full width like a comic page, strips running to the window edges: the same
breakout as #latest-comic further up, with the same fixes around it —
#content stops clipping it, #page absorbs the scrollbar's width, and the grey
gap under the menu closes. That gap is Premium's. Its stylesheet spaces main
and #content away from the menu (margins, plus padding on a phone), and
toocheke-functions.php also prints `#content { margin-top: 60px !important }`
into the page's own