File size: 4,430 Bytes
d7f24b9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | /* ============================================================================ */
/* Article grid tokens */
/* ---------------------------------------------------------------------------- */
/* Single source of truth for the page grid. The page, the hero, the footer and */
/* the debug grid overlay (press G in dev, or add ?grid to any URL) all read */
/* these tokens, so iterating on the layout means editing this file. */
/* */
/* Named lines, left to right: */
/* screen | page, toc (rail) | outset, body | margin | page | screen */
/* - body: prose and regular figures */
/* - toc: sticky table of contents rail */
/* - margin: sidenotes (>= 1280px), wide figures span body-start/margin-end */
/* - screen: full-bleed figures */
/* */
/* Breakpoints (see @custom-media in _variables.css): */
/* >= 1280px rail + body + margin column, sidenotes in the margin */
/* 1101-1279px compact rail, sidenotes inline under their paragraph */
/* <= 1100px single column, TOC becomes a top bar + drawer */
/* ============================================================================ */
:root {
--layout-outer: 16px; /* minimum page gutter */
--layout-gap: 32px; /* gutter between rail, body and margin */
--layout-body: 664px; /* body column */
--layout-prose: 620px; /* max line length of text inside the body */
--layout-prose-font-size: 17px;
--layout-side-min: 260px; /* rail and margin column width at 1280px */
--layout-side-max: 360px; /* ...growing up to this on wide screens */
--layout-rail-compact: 220px; /* rail width between 1101 and 1279px */
--layout-body-single: 680px; /* single column below 1100px */
--layout-toc-width: 260px; /* TOC width inside its rail (right aligned) */
--layout-content-top: 64px; /* space between the hero and the first body line */
--layout-sticky-top: 32px; /* sticky TOC offset from the viewport top */
--layout-topbar-height: 44px; /* slim top bar below 1100px */
--layout-scroll-offset: 24px; /* heading position after an anchor jump */
--layout-baseline: 8px; /* debug grid baseline step */
/* --vw is the viewport width without the scrollbar, set by the layout script */
--layout-side: clamp(
var(--layout-side-min),
(var(--vw, 100vw) - var(--layout-body) - 2 * var(--layout-gap) - 2 * var(--layout-outer)) / 2,
var(--layout-side-max)
);
--layout-cols:
[screen-start] minmax(var(--layout-outer), 1fr)
[page-start toc-start] var(--layout-side)
[toc-end outset-start] var(--layout-gap)
[body-start] var(--layout-body)
[body-end] var(--layout-gap)
[outset-end margin-start] var(--layout-side)
[margin-end page-end] minmax(var(--layout-outer), 1fr)
[screen-end];
}
@media (--bp-margin-inline) {
:root {
--layout-cols:
[screen-start] var(--layout-outer)
[page-start toc-start] var(--layout-rail-compact)
[toc-end outset-start] var(--layout-gap)
[body-start] minmax(0, var(--layout-body))
[body-end] var(--layout-gap)
[outset-end margin-start] minmax(0, 1fr)
[margin-end page-end] var(--layout-outer)
[screen-end];
}
}
@media (--bp-content-collapse) {
:root {
--layout-cols:
[screen-start] minmax(var(--layout-outer), 1fr)
[page-start toc-start toc-end outset-start body-start] minmax(0, var(--layout-body-single))
[body-end outset-end margin-start margin-end page-end] minmax(var(--layout-outer), 1fr)
[screen-end];
}
}
/* "paper" template: one centered column, no rail, no margin */
:root[data-template="paper"] {
--layout-body-single: 780px;
--layout-prose: 780px;
--layout-cols:
[screen-start] minmax(var(--layout-outer), 1fr)
[page-start toc-start toc-end outset-start body-start] minmax(0, var(--layout-body-single))
[body-end outset-end margin-start margin-end page-end] minmax(var(--layout-outer), 1fr)
[screen-end];
}
|