/* * The default look of every publication: a thin layer over pico.css, loaded * after it and before anything a site defines for itself. * * Every page is pinned to pico's light theme, by the data-theme="light" the * layout puts on . That is deliberate: a masthead is authored artwork, * usually dark ink meant for paper — the Kingstonia Herald's is a black trumpet * on transparency — and a page that inverted itself after dark would lose its * own logo. Pinning it there rather than restating pico's palette also leaves a * publication's own stylesheet free to use a plain :root, since pico's dark * rules no longer match anything. * * A site's own stylesheet comes THIRD, so it can override what is here by plain * cascade order and does not have to restate the rest. Everything below is * expressed in pico's own custom properties for the same reason — a publication * that only wants different colours sets a handful of variables. */ :root { --site-rule-color: var(--pico-muted-border-color); --site-meta-color: var(--pico-muted-color); /* The rule above a section heading — the front page's strongest line, so a publication that owns a colour usually sets it here. */ --site-heading-rule: var(--pico-color); /* * The page's width. It used to be a reading measure (--site-width, 52rem); * the front page now lays cards out in a newspaper grid, which needs the * room, and prose protects itself with --site-measure instead. The old name * is gone deliberately: a site that narrowed --site-width would strangle the * grid without knowing why. */ --site-wide: 68rem; /* * The measure an article's prose is set to, in ch rather than rem so it is a * count of characters and not of pixels. pico scales the root font size up * with the viewport, so a width in rem grows on a wide screen exactly where a * line is already too long to follow; ch resolves against the element's own * font and holds the line at a readable length in both of these designs, * whichever face they set. */ --site-measure: 64ch; /* The tallest a picture may stand, so a square or portrait one cannot take the page over. See the img rules below. */ --site-image-height: 22rem; /* The shape of the window a listing card shows its picture through. The art in these worlds is generated square, so square is the default — a wide crop out of a square picture throws half of it away. A world whose art is wide sets 16 / 9 here and the cards follow. */ --site-card-ratio: 1 / 1; } body > header, body > main, body > footer { max-width: var(--site-wide); margin-inline: auto; padding-inline: var(--pico-spacing); } /* ---- masthead ---------------------------------------------------------- */ .masthead { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pico-spacing); border-bottom: 1px solid var(--site-rule-color); padding-block: var(--pico-spacing); margin-bottom: var(--pico-spacing); } .masthead-logo img { display: block; max-height: 4rem; width: auto; } .masthead-title h1 { margin: 0; font-size: 1.8rem; line-height: 1.1; } .masthead-title p { margin: 0; color: var(--site-meta-color); font-size: 0.875rem; } .masthead a { color: inherit; text-decoration: none; } /* ---- the sections navbar ------------------------------------------------ */ /* * The masthead's sections, printed across the page under the title the way a * paper prints them. Only sections that have something in them are listed, so * the row is as long as the publication is wide-ranging and no longer. */ nav.sections { border-bottom: 1px solid var(--site-rule-color); margin-bottom: var(--pico-spacing); /* The rule under the masthead already separates it from this row. */ margin-top: calc(var(--pico-spacing) * -1); padding-block: 0.4rem; } nav.sections ul { display: flex; flex-wrap: wrap; gap: 0 1.1rem; list-style: none; margin: 0; padding: 0; } nav.sections li { padding: 0; } nav.sections a { display: inline-block; padding-block: 0.2rem; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 600; color: inherit; text-decoration: none; } nav.sections a:hover, nav.sections a[aria-current="page"] { color: var(--pico-primary); } /* The section being read is marked by its underline rather than by colour alone, so it is still legible where the two colours are close. */ nav.sections a[aria-current="page"] { border-bottom: 2px solid currentColor; } .section-title { text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.4rem; border-bottom: 1px solid var(--site-rule-color); padding-bottom: 0.4rem; } /* A kicker is a link to its section, and reads as a kicker rather than as a link until it is pointed at. */ .category a { color: inherit; text-decoration: none; } .category a:hover { text-decoration: underline; } /* ---- bylines and portraits --------------------------------------------- */ .byline { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; color: var(--site-meta-color); font-size: 0.875rem; margin-bottom: var(--pico-spacing); } /* A flex item will not shrink below the width of its own content unless it is told it may, so without this a byline sitting beside a portrait runs off the side of a phone instead of wrapping under itself. */ .byline > span { min-width: 0; } .avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; } .avatar.large { width: 6rem; height: 6rem; } .author-card { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pico-spacing); margin-bottom: var(--pico-spacing); } .author-card > div { min-width: 0; } .author-card h1 { margin-bottom: 0.25rem; } /* ---- listings ----------------------------------------------------------- */ /* The publication's own description, above its front page. Set apart from the pieces so it does not read as the first of them. */ .site-about { color: var(--site-meta-color); font-size: 0.9rem; max-width: var(--site-measure); margin-bottom: var(--pico-spacing); } /* * The listing pages deal their pieces into cards — a lead, grid cards, row * cards, headline briefs — the way a paper's front page does, instead of one * chronological column. Everything is drawn from pico's palette variables and * the site variables above, so a publication that recolours itself recolours * this furniture with it. */ /* pico dresses every
as a boxed card; the newspaper grid wants flat, ruled blocks instead. */ .card, .brief { border: none; border-radius: 0; box-shadow: none; background: none; padding: 0; margin: 0; } .card-image { display: block; } /* A card's picture is a window, not the picture itself: cropped to one shape whatever shape it arrived in, so a grid of them lines up. */ .card-image img { display: block; width: 100%; aspect-ratio: var(--site-card-ratio); object-fit: cover; border-radius: var(--pico-border-radius); } .card-body { padding-top: 0.65rem; } .card .category { margin-bottom: 0.3rem; } .card-title { font-size: 1.1rem; line-height: 1.22; margin: 0 0 0.35rem; } /* A headline is ink, not a link, until it is pointed at. */ .card-title a { color: inherit; text-decoration: none; } .card-title a:hover { color: var(--pico-primary); } .card-summary { font-size: 0.88rem; line-height: 1.5; color: var(--site-meta-color); margin: 0 0 0.45rem; max-width: var(--site-measure); } .card-meta { font-size: 0.76rem; color: var(--site-meta-color); margin: 0; } .card-meta a { color: inherit; font-weight: 600; text-decoration: none; } .card-meta a:hover { text-decoration: underline; } /* The lead: the newest piece, at full size. */ .card-lead .card-title { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.14; } .card-lead .card-summary { font-size: 1rem; } /* On the front page the lead's picture stands beside the words, not over them: stacked, a square picture would push its own headline off the fold. */ .lead-grid .card-lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.4rem; align-items: start; } .lead-grid .card-lead.card-bare { grid-template-columns: minmax(0, 1fr); } .lead-grid .card-lead .card-body { padding-top: 0; } /* The lead and the pieces standing beside it, above everything else. */ .lead-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 2rem; padding-bottom: 1.9rem; margin-bottom: 2rem; border-bottom: 1px solid var(--site-rule-color); } /* With nothing to stand beside it, the lead runs the page alone. */ .lead-grid-solo { grid-template-columns: minmax(0, 1fr); } .lead-side { display: flex; flex-direction: column; gap: 1.3rem; } .lead-side .card-row + .card-row { border-top: 1px solid var(--site-rule-color); padding-top: 1.3rem; } /* Row card: a thumbnail beside its headline. */ .card-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.9rem; align-items: start; } /* No picture, no empty column. */ .card-row.card-bare { grid-template-columns: minmax(0, 1fr); } .card-row .card-body { padding-top: 0; } .card-row .card-title { font-size: 1rem; } .card-row .card-summary { font-size: 0.82rem; } .row-list { display: flex; flex-direction: column; gap: 1.4rem; } .row-list .card-row { border-bottom: 1px solid var(--site-rule-color); padding-bottom: 1.4rem; } .row-list .card-row:last-child { border-bottom: none; padding-bottom: 0; } /* The grid the middle of the front page is set in. auto-fill rather than auto-fit, so two cards are two cards and space, not two half-page posters. */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.6rem; } /* A front-page zone and the ruled heading above it. */ .front-block { margin-bottom: 2.5rem; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 3px solid var(--site-heading-rule); padding-top: 0.5rem; margin-bottom: 1.1rem; } .section-head h2 { font-size: 1.25rem; margin: 0; } .section-more { font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; text-decoration: none; } .section-more:hover { text-decoration: underline; } /* The headline file: date in the margin, headline beside it. */ .brief-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.25rem; } .brief { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0.9rem; padding-block: 0.75rem; border-bottom: 1px solid var(--site-rule-color); } .brief > time { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--site-meta-color); padding-top: 0.2rem; } .brief .category { font-size: 0.68rem; margin-bottom: 0.15rem; } .brief-title { font-size: 1rem; line-height: 1.3; margin: 0; } .brief-title a { color: inherit; text-decoration: none; } .brief-title a:hover { color: var(--pico-primary); } /* A section's own page leads with its newest piece laid out sideways, so the picture shares the width with the words instead of towering over them. */ .category-lead { padding-bottom: 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--site-rule-color); } .category-lead .card-lead { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.8rem; /* A square picture stands taller than the few lines beside it, so the words sit level with its middle rather than hanging from its top edge. */ align-items: center; } .category-lead .card-lead.card-bare { grid-template-columns: minmax(0, 1fr); } .category-lead .card-lead .card-body { padding-top: 0; } /* The picture right of the words, like a broadsheet's off-lead. */ .category-lead .card-lead .card-image { order: 1; } /* A headline may run the width of the page — it is read in one glance — but the prose under it is read line by line, and wants the same measure the body of a story is set to. */ .author-card p, .site-list p { max-width: var(--site-measure); } /* * Pictures arrive at whatever shape they were made in — a masthead crop, a * portrait, a square logo — so both dimensions are bounded and neither is * forced. Width alone would let a square picture stand as tall as the column is * wide, which is most of a screen; height alone would leave a panorama * overflowing it. With both set and no explicit width, the browser fits the * picture inside the box and keeps its proportions, and nothing is cropped or * stretched. */ /* :not(.avatar) because a writer's portrait sits inside the story too, and it is furniture at a fixed size rather than a picture in the piece. */ img.lead, .story img:not(.avatar) { display: block; max-width: 100%; max-height: var(--site-image-height); width: auto; height: auto; margin-inline: auto; border-radius: var(--pico-border-radius); } img.lead { margin-bottom: 0.5rem; } /* A kicker belongs to the headline under it, so the heading's own top margin is dropped and the two read as one block rather than two. */ .category + h1, .category + h2, .category + h3 { margin-top: 0; } .category { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: var(--pico-primary); margin-bottom: 0.25rem; } /* ---- the story itself ---------------------------------------------------- */ .story { border: none; background: none; box-shadow: none; padding: 0; /* The prose is set to a reading measure rather than to the page's width, and centred in it: a masthead wants the full page, a paragraph wants a line somebody can follow back to the start of. */ max-width: var(--site-measure); margin: 0 auto; } .story h1 { margin-bottom: 0.5rem; } .story .standfirst { font-size: 1.1rem; font-weight: 600; } /* ---- the directory at the root ------------------------------------------ */ .site-list article { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pico-spacing); margin-bottom: var(--pico-spacing); } .site-list article > div { min-width: 0; } .site-list .site-logo img { display: block; width: 4rem; height: 4rem; object-fit: contain; } .site-list h2 { font-size: 1.25rem; margin-bottom: 0.25rem; } .site-list h2 a { text-decoration: none; } /* ---- footer -------------------------------------------------------------- */ body > footer { border-top: 1px solid var(--site-rule-color); margin-top: calc(var(--pico-spacing) * 2); padding-block: var(--pico-spacing); color: var(--site-meta-color); font-size: 0.875rem; } /* ---- narrow screens ------------------------------------------------------- */ @media (max-width: 720px) { .lead-grid { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } .lead-grid .card-lead { grid-template-columns: minmax(0, 1fr); } .lead-grid .card-lead .card-body { padding-top: 0.65rem; } /* The sidebar pieces fall under the lead, ruled apart from it. */ .lead-side { border-top: 1px solid var(--site-rule-color); padding-top: 1.3rem; } .card-row { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.8rem; } /* On a phone a row card is a headline and a thumbnail; the blurb is what the story page is for. */ .card-row .card-summary { display: none; } .brief-list { grid-template-columns: minmax(0, 1fr); } .category-lead .card-lead { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; } /* Back above the words once there is no beside. */ .category-lead .card-lead .card-image { order: 0; } .category-lead .card-lead .card-body { padding-top: 0.65rem; } }