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.
-------------------------------------------------------------------------- */
.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);
}
.skip-link:focus {
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 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 — 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.8 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;
}