inside in the posts, carrying
white-space: pre. At 390px those ran 562px wide and pushed the whole
document sideways, because an inline box cannot clip. inline-block gives
them a box that can, so they scroll in place instead. Short inline code
is unaffected: it never reaches the cap. It does need vertical-align,
though: an inline-block with overflow set takes its bottom edge as its
baseline, which lifted every inline code span about 8px above the text. */
main code { display: inline-block; max-width: 100%; overflow-x: auto; vertical-align: middle; }
/* ---- blog index: the post grid ---------------------------------------
Three problems, all of them the template's defaults meeting our type. */
/* A card's height came from its title's line count, so a one-line title
sat 22px short of its neighbours and the row bottoms were ragged. The
card fills its column and the byline is pushed to the foot, so the
author rows line up however the titles wrap. */
.nk-blog-section .card { height: 100%; }
.nk-blog-section .card-body { display: flex; flex-direction: column; height: 100%; }
.nk-blog-section .card-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.nk-blog-section .media-group { margin-top: auto; }
/* a column flex stretches its children, which turned the category pill into
a full-width bar with centred text */
.nk-blog-section .badge { align-self: flex-start; }
/* A post title was 17px — exactly the body size — so the grid read as one
flat block of text with no entry point. */
.nk-blog-section .card-title {
font-size: var(--t-7) !important; line-height: 1.3; letter-spacing: -.01em;
}
.nk-blog-section .lead-text { font-size: .9375rem; }
/* `main li` sizes every list item at 17px, which caught the date and
read-time meta the template had set to 12px — they rendered as large as
the post title. One class outranks the two type selectors there, so this
needs no !important. */
.nk-list-meta li { font-size: .8125rem; }