*
* ...the page's content, full width...
*
*
* The left gutter is the Purl's column: the P hangs in it, beside the first
* line of the heading, so the content keeps one clean left edge and the P
* never takes a line of its own. On a phone the gutter is gone and the P sits
* at the start of the heading's line instead.
*
* Colors come only from the --wb-* tokens (theme.css), so dark mode is free.
* Element and data-attribute selectors only; a page adds its own classes.
*/
:root {
--page-gutter: 72px; /* the Purl's column: 32px edge + 26px P + 14px gap */
--page-edge: 32px;
--page-h1: 1.75rem;
--page-h1-line: 1.2;
--page-measure: 75ch; /* the longest a line of running text should get */
}
html {
background: var(--wb-surface); /* a page is white, one surface with the shell's panels (/style, S2) */
color: var(--wb-text);
font: 400 15px/1.55 var(--wb-font-family);
-webkit-text-size-adjust: 100%;
}
body { margin: 0; }
[data-page] {
box-sizing: border-box;
inline-size: 100%;
padding: 28px var(--page-edge) 56px var(--page-gutter);
}
/* The page's head: the Purl hangs to the left of the heading's first line. */
[data-page-head] { position: relative; margin-bottom: 28px; }
[data-page-head] h1 {
margin: 0; font-size: var(--page-h1); line-height: var(--page-h1-line); font-weight: 400; letter-spacing: -0.005em;
}
[data-page-head] p { margin: 6px 0 0; max-inline-size: var(--page-measure); color: var(--wb-text-muted); font-weight: 300; }
[data-purl] {
position: absolute;
inset-inline-end: calc(100% + 14px);
inset-block-start: calc((var(--page-h1) * var(--page-h1-line) - 24px) / 2);
display: block; line-height: 0; border-radius: 6px;
}
[data-purl] img { display: block; inline-size: 26px; block-size: 24px; }
[data-purl]:focus-visible { outline: 2px solid var(--wb-focus); outline-offset: 3px; }
/* Type, in tokens. Outfit for reading; JetBrains Mono for labels, data and code. */
[data-page] h2 { margin: 32px 0 10px; font-size: 1.2rem; font-weight: 500; line-height: 1.3; }
[data-page] h3 { margin: 22px 0 8px; font-size: 1rem; font-weight: 500; }
[data-page] p, [data-page] li { max-inline-size: var(--page-measure); }
[data-page] a { color: var(--wb-accent); text-underline-offset: 3px; }
[data-page] a:hover { color: var(--wb-accent-hover); }
[data-page] code, [data-page] kbd, [data-page] pre, [data-page] samp { font-family: var(--wb-font-mono); font-size: 0.86em; }
[data-label] {
display: block; color: var(--wb-text-muted);
font: 400 0.64rem/1.3 var(--wb-font-mono); letter-spacing: 0.13em; text-transform: uppercase;
}
:focus-visible { outline: 2px solid var(--wb-focus); outline-offset: 2px; }
/* A phone: no gutter; the P starts the heading's line. */
@media (max-width: 759px) {
:root { --page-gutter: 16px; --page-edge: 16px; --page-h1: 1.45rem; }
[data-page] { padding-top: 18px; padding-bottom: 40px; }
[data-page-head] { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }
[data-page-head] > * { grid-column: 1 / -1; justify-self: start; } /* the rest keeps the page's one left edge */
[data-page-head] > h1 { grid-column: 2; grid-row: 1; }
[data-page-head] > [data-purl] {
position: static; grid-column: 1; grid-row: 1; align-self: start;
margin-block-start: calc((var(--page-h1) * var(--page-h1-line) - 24px) / 2);
}
}
*