/* matterbox.work/docs — the reading half of the site. site.css sets the typeface, the palette and the chrome; this is the long-form layout it never needed: a column of prose, a contents list beside it, and the handful of things a reference page has that a landing page does not. */ /* site.css scrolls smoothly, which suits the landing page's short hops between sections of one screenful. A reference page is thirty thousand pixels tall: animating the jump from the contents list to the ledger section means watching the whole page go past, and an anchor somebody sent you does the same on load. So these land instead. The class is on because that is where the viewport takes this from. */ .docs-page { scroll-behavior: auto; } /* --- chrome ------------------------------------------------------------- */ /* No scene behind a docs page, so the header has nothing to float over and scrolls with the document instead of being lifted out of it. */ .docs-page header { position: sticky; background: rgba(6, 4, 15, 0.86); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); } .docs-page nav a[aria-current] { border-color: var(--cyan); color: var(--cyan); } /* The header is sticky, so a jump to an anchor has to stop short of it. */ .docs-page :target, .docs-body :is(h1, h2, h3, h4)[id] { scroll-margin-top: 5rem; } /* --- the two columns ---------------------------------------------------- */ .docs-shell { max-width: 78rem; margin-inline: auto; padding: clamp(1.5rem, 4vh, 3rem) var(--pad) clamp(3rem, 9vh, 6rem); display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 64rem) { .docs-shell { grid-template-columns: 15rem minmax(0, 1fr); } } /* --- the sidebar -------------------------------------------------------- */ .docs-side { font-size: 0.9em; } @media (min-width: 64rem) { .docs-side { position: sticky; top: 4.5rem; /* Its own scrollbar: the rules reference has more headings than a laptop has rows, and the page must not be the thing that scrolls to reach them. */ max-height: calc(100vh - 6rem); overflow-y: auto; overscroll-behavior: contain; padding-right: 0.5rem; } } .docs-side :is(h2, summary) { font-size: 0.8em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); margin: 0 0 0.6rem; } .docs-side h2::before { content: none; } .docs-side ul { list-style: none; margin: 0; padding: 0; } .docs-side li { margin: 0; } .docs-side a { display: block; padding: 0.22rem 0.7rem; border-left: 1px solid var(--line); color: var(--fg-dim); text-decoration: none; } .docs-side a:hover, .docs-side a:focus-visible { color: var(--cyan); border-left-color: var(--cyan); background: rgba(54, 236, 224, 0.05); } /* The section the reader has reached, and the page they are on. */ .docs-side a[aria-current] { color: var(--cyan); border-left-color: var(--cyan); background: rgba(54, 236, 224, 0.07); } .toc-nested { padding-left: 0.7rem; } .toc-nested a { font-size: 0.94em; } /* On a narrow screen the contents fold away rather than pushing twenty-odd links in front of the first paragraph. It is written open, so it is all there with the script blocked; docs.js folds it on the screens that want it folded. Wide, the summary stops looking like a control and is just the label. */ .docs-side details { margin-top: 1.6rem; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); padding: 0.6rem 0.8rem; } .docs-side summary { cursor: pointer; list-style: none; } .docs-side summary::-webkit-details-marker { display: none; } .docs-side summary::before { content: "▸ "; color: var(--pink); } .docs-side details[open] > summary::before { content: "▾ "; } .docs-side summary:hover { color: var(--cyan); } @media (min-width: 64rem) { .docs-side details { margin-top: 1.8rem; border: 0; background: none; padding: 0; } .docs-side summary { cursor: default; } .docs-side summary::before, .docs-side details[open] > summary::before { content: none; } .docs-side summary:hover { color: var(--fg-dim); } } /* --- the prose ---------------------------------------------------------- */ .docs-body { max-width: 78ch; min-width: 0; } .crumbs { margin: 0 0 0.6rem; font-size: 0.85em; color: var(--fg-dim); } .crumbs a { color: var(--fg-dim); } .crumbs a:hover { color: var(--cyan); } .docs-body h1 { font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.35; margin: 0 0 0.8rem; color: #fff; } .docs-body h1::before { content: "# "; color: var(--pink); font-weight: 400; } .docs-body h2 { margin-top: 3.2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); } .docs-body h3 { margin-top: 2.2rem; } .docs-body h4 { font-size: 1em; margin: 1.8rem 0 0.4rem; color: var(--fg); } .docs-body h4::before { content: "#### "; color: var(--line); } /* Sits at the end of a heading; only reaches for attention on hover. */ .anchor { margin-left: 0.6ch; color: var(--line); text-decoration: none; opacity: 0; } :is(h2, h3, h4):hover > .anchor, .anchor:focus-visible { opacity: 1; } .docs-body ul, .docs-body ol { margin: 0 0 1rem; padding-left: 2.2ch; } .docs-body li { margin: 0 0 0.4rem; } .docs-body li > ul, .docs-body li > ol { margin-top: 0.4rem; } .docs-body ul { list-style: none; } .docs-body ul > li::before { content: "-"; color: var(--pink); margin-left: -2.2ch; width: 2.2ch; display: inline-block; } .docs-body ol { list-style: none; counter-reset: step; } .docs-body ol > li { counter-increment: step; } .docs-body ol > li::before { content: counter(step) "."; color: var(--pink); margin-left: -2.6ch; width: 2.6ch; display: inline-block; } .docs-body ol { padding-left: 2.6ch; } .docs-body strong { color: #fff; } .docs-body table { font-size: 0.9em; } .docs-body .table-scroll { margin: 0 0 1rem; } /* Prose in a table's first column -- a field name and nothing else is what nowrap is for; a whole sentence needs the room. */ .docs-body td.wrap-cell:first-child { white-space: normal; color: var(--fg); } /* --- callouts ----------------------------------------------------------- */ .note { margin: 0 0 1rem; padding: 0.85rem 1.1rem; border: 1px solid var(--line); border-left: 2px solid var(--cyan); border-radius: 0 3px 3px 0; background: var(--panel); } .note > :last-child { margin-bottom: 0; } .note .tag { color: var(--cyan); font-weight: 700; } .note.warn { border-left-color: var(--sun); } .note.warn .tag { color: var(--sun); } /* --- code blocks -------------------------------------------------------- */ /* Same box as the landing page's shell transcripts, with room for the language tab and the copy button in the corner. */ pre.code { margin: 0; padding: 0.9rem 1rem; overflow-x: auto; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); line-height: 1.55; font-size: 0.92em; tab-size: 2; } pre.code code { background: none; color: var(--fg); padding: 0; } .code-wrap { position: relative; margin: 0 0 1rem; } .code-wrap button.copy { position: absolute; top: 0.35rem; right: 0.4rem; opacity: 0; background: var(--panel-2); } .code-wrap:hover button.copy, .code-wrap button.copy:focus-visible { opacity: 1; } .code-wrap[data-label]::after { content: attr(data-label); position: absolute; top: 0.35rem; right: 3.6rem; color: var(--line); font-size: 0.8em; pointer-events: none; } .code-wrap:hover[data-label]::after { color: var(--fg-dim); } /* The tokens docs.js marks up. Comments recede, keys and keywords carry the structure, strings are the one thing the reader is likely to be copying. */ pre.code .c { color: var(--fg-dim); } pre.code .k { color: var(--pink); } pre.code .s { color: var(--sun); } pre.code .n { color: var(--cyan); } pre.code .f { color: var(--fg); font-weight: 700; } /* --- the section index -------------------------------------------------- */ .docs-cards { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin: 0 0 2rem; } .docs-cards a { background: var(--ink); padding: 1.3rem 1.4rem; text-decoration: none; color: var(--fg-dim); display: block; } .docs-cards a:hover, .docs-cards a:focus-visible { background: var(--panel); color: var(--fg); } .docs-cards h2 { font-size: 1em; margin: 0 0 0.4rem; padding: 0; border: 0; color: var(--cyan); } .docs-cards h2::before { content: none; } .docs-cards a:hover h2 { color: var(--pink); } .docs-cards p { margin: 0; } /* --- foot of the page --------------------------------------------------- */ .docs-next { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.9em; } .docs-next a { text-decoration: none; } .docs-next a:hover { text-decoration: underline; }