and five siblings.
The .star is .block's first child, so the rows start at nth-child(2). */
.block .row:nth-child(2) {
animation-delay: .2s;
}
.block .row:nth-child(3) {
animation-delay: .3s;
}
.block .row:nth-child(4) {
animation-delay: .4s;
}
.block .row:nth-child(5) {
animation-delay: .46s;
}
.block .row:nth-child(6) {
animation-delay: .52s;
}
.block .row:nth-child(7) {
animation-delay: .58s;
}
/* --------------------------------------------------------------------------
26.2 Contrast: --rule as text
--rule (#59524c) is right for a hairline and wrong for a glyph: 1.96:1 on
--ink-950, 1.75:1 on --ink-900. --rule-text is the same hue carried up to
4.6:1 on --ink-900 and 5.5:1 on --ink-950, so it clears AA on both surfaces
the marks ever sit on. Borders, gutters and spines are untouched.
-------------------------------------------------------------------------- */
:root {
--rule-text: #a89c91;
}
/* The `==` of a readme.txt section head. */
.band-head .eq,
.doc h2 .eq,
.masthead-eyebrow .eq {
color: var(--rule-text);
}
/* The `=` marks bracketing a version number. */
.ver s,
.entry-stamp s,
.rel .tag s {
color: var(--rule-text);
}
/* Counts and list bullets that carry real information. */
.chip b,
.card-nav a b,
.tile .num {
color: var(--rule-text);
}
/* Placeholders were --rule on --ink-900: 1.75:1. */
.searchform input::placeholder,
.field-row input::placeholder,
.field-row textarea::placeholder {
color: var(--paper-dim);
opacity: 1;
}
/* --------------------------------------------------------------------------
26.3 Tap targets
.topbar a, .pager a and .chip all paint under 44px tall. Padding would move
their underlines and borders, so the hit area is grown with a transparent
overlay instead: same paint, same layout, 44px of touchable height.
-------------------------------------------------------------------------- */
.topbar a,
.pager a,
.chip {
position: relative;
}
.topbar a::after,
.pager a::after {
content: "";
position: absolute;
inset: -.75rem 0;
}
.chip::after {
content: "";
position: absolute;
inset: -.35rem 0;
}
/* --------------------------------------------------------------------------
26.4 Gallery images
The source drew .frame as a CSS mock of an admin screen and noted that an
![]()
could take its place. It now does, for attachments that have one;
attachments without an image still get the drawn .frame. Same box either way.
-------------------------------------------------------------------------- */
/*
* The source design never needed this: its galleries sat in a of
* their own, and `.doc section + section` supplied the space. Inside post
* content the grid is followed directly by the next heading, and `.doc h2`
* has no top margin because it was relying on the same rule, so the two ended
* up touching.
*
* Asymmetric on purpose. The paragraph above already contributes its own
* 1.1rem, so the top only needs a little; the bottom carries the whole gap.
*/
.gallery {
margin-block: .35rem clamp(2rem, 4.5vw, 3rem);
}
/*
* A shortcode alone on a line can end up inside a paragraph, which would make
* the grid a child of an inline context. This keeps it a block either way.
*/
.doc p > .gallery {
display: grid;
}
.tile figure img,
.lightbox figure img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
background: var(--ink-900);
border: 1px solid var(--rule);
border-radius: 2px;
}
/* --------------------------------------------------------------------------
26.5 Skip link
The source had no skip link, because a static page has nothing to skip past.
A WordPress template does. Set as the same mono chrome as the topbar, so it
looks like part of the system rather than an accessibility bolt-on.
-------------------------------------------------------------------------- */
.skip-link {
position: absolute;
top: -100%;
left: var(--pad-x);
z-index: 30;
padding: .7rem 1rem;
background: var(--ink-990);
border: 1px solid var(--tan);
border-radius: 2px;
font-family: var(--mono);
font-size: .75rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
color: var(--tan);
}
/*
* :focus-visible, not :focus.
*
* The back-to-top control moves focus here after scrolling, which is the right
* target: it is the first focusable thing on the page, so the tab order picks
* up where the reader now is. With :focus that also made the link appear, to a
* mouse user who never asked for it and had no idea why it was there.
*
* :focus-visible draws exactly the distinction needed: a Tab press reveals it,
* a script call after a mouse click does not. A keyboard user who activates
* the same control with Enter does see it, which is correct, since they are about
* to Tab, and it is the next thing they would reach.
*/
.skip-link:focus-visible {
top: .75rem;
}
/* --------------------------------------------------------------------------
26.6 Breadcrumbs
Set as chrome, not as content: the same mono uppercase treatment as the
topbar, so it reads as part of the frame rather than as the start of the
article. That also keeps it clearly distinct from .path directly below it,
which is lowercase and is content. One says where you are in the site, the
other says where the file lives on disk.
Separators are drawn here rather than written into the markup, so assistive
technology announces three links and not three links and three slashes.
-------------------------------------------------------------------------- */
.crumbs {
padding-top: 1.5rem;
font-family: var(--mono);
font-size: .75rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--paper-dim);
}
.crumbs ol {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .3rem .55rem;
margin: 0;
padding: 0;
list-style: none;
}
.crumbs li {
display: inline-flex;
align-items: baseline;
gap: .55rem;
min-width: 0;
}
/* The `/` of a path, dimmed to the same weight the `==` marks carry. */
.crumbs li + li::before {
content: "/";
color: var(--rule-text);
}
/*
* Font Awesome marks, matching the ones the post meta row already uses for the
* same ideas: a folder for a category, a hash for a tag. Decorative: the
* label beside each one says the same thing in words.
*/
.crumbs i {
flex: 0 0 auto;
width: 1em;
margin-right: .45rem;
font-size: .8125rem;
text-align: center;
color: var(--tan);
}
.crumbs a {
position: relative;
display: inline-flex;
align-items: baseline;
padding-bottom: 2px;
border-bottom: 1px solid transparent;
text-decoration: none;
color: var(--paper-dim);
}
.crumbs a:hover,
.crumbs a:focus-visible {
border-bottom-color: var(--tan);
color: var(--tan);
}
/* 44px hit area without moving the underline. See 26.3. */
.crumbs a::after {
content: "";
position: absolute;
inset: -.75rem 0;
}
/*
* The current page is not a link. It is the brightest thing in the row so the
* trail reads as ending here rather than trailing off.
*/
.crumbs [aria-current="page"] {
display: inline-flex;
align-items: baseline;
max-width: 32ch;
color: var(--paper);
}
.crumbs [aria-current="page"] i {
color: var(--paper-dim);
}
/*
* The label is wrapped so it can truncate without clipping the icon beside it.
* rather than a span: it is the one word in the row carrying the weight.
*/
.crumbs b {
overflow: hidden;
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
}
/* The masthead already opens with generous space; do not add it twice. */
.crumbs + .masthead {
padding-top: clamp(1rem, 2.5vw, 1.75rem);
}
/* --------------------------------------------------------------------------
26.7 Capped band link
A band on the release index shows a fixed number of cards and links to its
own archive for the rest. Reuses the chip so the control reads as the same
kind of thing as the filter row above it.
-------------------------------------------------------------------------- */
.band-more {
margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
}
/* --------------------------------------------------------------------------
26.8 Inline marks
The icons that appear in listings, drawn rather than fetched. Font Awesome
loads on single posts, archives, search and the contact template only, and
the product bands render on the front page and the release index where it is
deliberately absent, so a webfont icon there would render nothing at all.
Sized in em and coloured with currentColor, so a mark takes the size and
colour of whatever row it sits in without a rule per context.
-------------------------------------------------------------------------- */
.mark {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
width: 1em;
height: 1em;
margin-right: .45rem;
vertical-align: -.1em;
}
.mark svg {
display: block;
width: 100%;
height: 100%;
}
.entry-kind .mark {
color: inherit;
}
/*
* Chips align on the baseline so the label and the count sit level. A mark has
* no text in it to take a baseline from, so it is centred against the row
* instead of hanging below it.
*/
.chip .mark {
align-self: center;
margin-right: .4rem;
opacity: .85;
}
.chip:hover .mark,
.chip[aria-current="page"] .mark {
opacity: 1;
}
/* --------------------------------------------------------------------------
26.9 Search toggle and overlay
The toggle is inline SVG at hairline weight, so it sits in the topbar as
another mono mark rather than as an icon pasted onto one.
The overlay reuses the lightbox's chrome: same backdrop, same close control,
same close behaviour. Two full-screen surfaces on one site should not be two
different designs.
-------------------------------------------------------------------------- */
.search-toggle {
position: relative;
display: inline-flex;
align-items: center;
padding-bottom: 2px;
border-bottom: 1px solid transparent;
line-height: 1;
text-decoration: none;
color: var(--paper-dim);
}
.search-toggle:hover,
.search-toggle:focus-visible {
border-bottom-color: var(--tan);
color: var(--tan);
}
/* 44px hit area without moving the underline. See 26.3. */
.search-toggle::after {
content: "";
position: absolute;
inset: -.75rem;
}
.search-overlay {
position: fixed;
inset: 0;
z-index: 21;
display: flex;
align-items: flex-start;
justify-content: center;
padding: clamp(3rem, 12vh, 8rem) clamp(1rem, 4vw, 3rem);
background: rgba(23, 20, 18, .94);
opacity: 0;
transition: opacity .2s ease;
}
/*
* The hidden attribute is enforced by a user-agent rule, and the author
* display above beats it. Without this the overlay is laid out on every page:
* invisible at opacity 0, full viewport at z-index 21, and swallowing every
* click on the site. It has to be restated in the author sheet to win.
*/
.search-overlay[hidden] {
display: none;
}
/*
* Nothing is clickable while it is fading out either. The element stays in the
* tree for the length of the transition, and 200ms of a dead full-screen layer
* over the page is 200ms of clicks going nowhere.
*/
.search-overlay:not(.open) {
pointer-events: none;
}
.search-overlay.open {
opacity: 1;
pointer-events: auto;
}
.search-overlay-inner {
width: min(42rem, 100%);
}
/*
* The form is searchform.php, unchanged. Only its scale differs here: this is
* the whole screen, so the field can be the size of the intent.
*/
.search-overlay .searchform {
max-width: none;
margin: 0;
}
.search-overlay .searchform label {
margin-bottom: .5rem;
font-size: .75rem;
}
.search-overlay .searchform input {
flex: 1 1 18rem;
padding: 1rem 1.1rem;
font-size: 1.125rem;
}
.search-overlay .searchform button {
padding: 1rem 1.4rem;
}
/*
* Every category and tag, as browse links. On a catalogue most searches are an
* attempt to find a category, and a reader who does not know the word you filed
* something under gets further from a list than from a field.
*/
.search-overlay-browse {
margin-top: clamp(1.75rem, 4vw, 2.5rem);
padding-top: clamp(1.25rem, 3vw, 1.75rem);
border-top: 1px solid var(--rule);
}
.search-overlay-label {
margin: 0 0 .85rem;
font-family: var(--mono);
font-size: .6875rem;
font-weight: 500;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--tan);
}
/*
* A site with a lot of tags would otherwise push the close control off the
* bottom of the viewport. The row scrolls; the form above it does not move.
*/
.search-overlay-browse .filters {
max-height: min(38vh, 22rem);
margin: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.search-overlay-bar {
display: flex;
justify-content: flex-end;
margin-top: .85rem;
}
.search-overlay-close {
padding: .45rem .7rem;
background: none;
border: 1px solid var(--rule);
border-radius: 2px;
font-family: var(--mono);
font-size: .6875rem;
font-weight: 500;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--paper-dim);
cursor: pointer;
}
.search-overlay-close:hover {
border-color: var(--tan);
color: var(--tan);
}
/* --------------------------------------------------------------------------
26.10 Jump targets
A band scrolled to by a chip should not sit flush against the top of the
viewport, and a section given tabindex="-1" to receive focus must not draw
an outline when it does, because the reader asked to be moved there, they do not
need telling that they were.
-------------------------------------------------------------------------- */
.band[id] {
scroll-margin-top: clamp(1rem, 3vw, 2rem);
}
.band[id]:focus {
outline: none;
}
/* Keyboard focus on the band itself still shows, for anyone who tabs to it. */
.band[id]:focus-visible {
outline: 2px solid var(--sage);
outline-offset: 6px;
}
/* --------------------------------------------------------------------------
26.11 Honeypot
Hidden from the layout and from the accessibility tree, but still a real,
focusable-by-nothing field in the DOM. display:none would get skipped by
some bots; this does not.
-------------------------------------------------------------------------- */
.hp-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}