/* The docs share the site's palette: one warm neutral, one accent, in both themes. Dark is the default; light is used when the device asks for it or the reader picks it from the switch in the top bar. The inline snippet in each page's writes `data-theme` on before the first paint. The light palette is written twice because CSS has no way to say "the device asked, OR the reader picked" in one rule. */ :root { --radius: 10px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --top: 3.25rem; } :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #0c0b0a; --bg-2: #131211; --line: #262320; --line-2: #3a3631; --ink: #ece7dd; --dim: #8d877c; --faint: #5f5a52; --accent: #ffb454; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #faf8f4; --bg-2: #f2eee6; --line: #e2ddd2; --line-2: #cdc5b6; --ink: #1b1917; --dim: #5d584e; --faint: #857f72; --accent: #a4610c; } } :root[data-theme="light"] { color-scheme: light; --bg: #faf8f4; --bg-2: #f2eee6; --line: #e2ddd2; --line-2: #cdc5b6; --ink: #1b1917; --dim: #5d584e; --faint: #857f72; --accent: #a4610c; } * { box-sizing: border-box; } /* `display` on a class outranks the browser's own [hidden] rule, so say it here. */ [hidden] { display: none !important; } html { scroll-padding-top: calc(var(--top) + 1rem); } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; } ::selection { background: var(--accent); color: var(--bg); } a { color: inherit; } code { font-family: var(--mono); font-size: .9em; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 1rem; top: 1rem; background: var(--bg-2); padding: .6rem 1rem; z-index: 10; } /* Top bar */ .top { position: sticky; top: 0; z-index: 5; height: var(--top); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1rem, 3vw, 2rem); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .brand { font-weight: 650; letter-spacing: -.02em; text-decoration: none; } .links { display: flex; align-items: center; gap: 1.1rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; } .links a { color: var(--dim); text-decoration: none; } .links a:hover, .links a[aria-current="page"] { color: var(--ink); } /* Two icon buttons in the top bar: the sidebar toggle, which only exists once the page is narrow enough to hide the sidebar, and the light/dark switch, which is always there. Both are the same square so the row reads as one set of controls. */ .icon-button { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; background: none; border: 0; border-radius: 6px; color: var(--dim); cursor: pointer; transition: color .15s ease; } .icon-button:hover { color: var(--ink); } .icon-button svg { display: block; width: 15px; height: 15px; } .menu { display: none; } /* The bars become a cross while the sidebar is open, so the button says how to close it. */ .menu .bars { display: block; } .menu .cross { display: none; } .menu[aria-expanded="true"] .bars { display: none; } .menu[aria-expanded="true"] .cross { display: block; } :root[data-theme="dark"] .theme .moon, :root[data-theme="light"] .theme .sun { display: none; } /* The sidebar and the on-this-page column scroll inside the page. Their bars are drawn from the palette, like everything else here, rather than left to the browser's default chrome; `color-scheme` above turns the window's own bar over with the theme. */ * { scrollbar-width: thin; scrollbar-color: var(--faint) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 10px; background: var(--faint); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--dim); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* Three columns: sidebar, article, on-this-page */ .shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 13rem; gap: 0 clamp(1.5rem, 4vw, 4rem); max-width: 1280px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); } /* `dvh` is the viewport the reader can actually see, which on a phone shrinks and grows as the browser's own bars come and go; `vh` is the tallest it ever gets, so a column sized in `vh` runs off the bottom of the screen. The `vh` line stays first for a browser that has not got `dvh`. `overscroll-behavior` keeps a flick that reaches the end of this column from carrying on into the page behind it. */ .side, .toc { position: sticky; top: var(--top); overflow-y: auto; overscroll-behavior: contain; max-height: calc(100vh - var(--top)); max-height: calc(100dvh - var(--top)); padding: 1.6rem 0 3rem; font-size: .84rem; } .group { margin-bottom: 1.3rem; } .group-title { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: .4rem; } .side a, .toc a { display: block; color: var(--dim); text-decoration: none; padding: .22rem 0 .22rem .6rem; border-left: 1px solid var(--line); line-height: 1.35; } .side a:hover, .toc a:hover { color: var(--ink); } .side a[aria-current="page"] { color: var(--accent); border-left-color: var(--accent); } .toc a { border-left: none; padding-left: 0; } main { min-width: 0; padding: 1.6rem 0 4rem; } .crumb { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 0 0 .4rem; } article { max-width: 46rem; } article h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 1rem; } article h2 { font-size: 1.28rem; font-weight: 600; letter-spacing: -.02em; margin: 2.4rem 0 .7rem; padding-top: .6rem; border-top: 1px solid var(--line); } article h3 { font-size: 1.05rem; font-weight: 600; margin: 1.8rem 0 .5rem; } article h4 { font-size: .95rem; font-weight: 600; margin: 1.4rem 0 .4rem; color: var(--dim); } .anchor { margin-left: .4rem; color: var(--faint); text-decoration: none; opacity: 0; font-weight: 400; } h1:hover .anchor, h2:hover .anchor, h3:hover .anchor, h4:hover .anchor { opacity: 1; } article p, article ul, article ol { margin: 0 0 1rem; } article li { margin: .25rem 0; } article li > ul, article li > ol { margin: .3rem 0 .3rem; } article a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } article a:hover { border-bottom-color: var(--accent); } article code { background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; padding: .05em .35em; } article pre { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.1rem; overflow-x: auto; margin: 0 0 1.2rem; font-size: .82rem; line-height: 1.55; } article pre code { background: none; border: none; padding: 0; font-size: inherit; } article blockquote { margin: 0 0 1rem; padding: .2rem 1rem; border-left: 2px solid var(--accent); color: var(--dim); } article hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0; } article img { max-width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); } .table { overflow-x: auto; margin: 0 0 1.2rem; } table { border-collapse: collapse; width: 100%; font-size: .88rem; } th, td { text-align: left; vertical-align: top; padding: .45rem .7rem; border-bottom: 1px solid var(--line); } th { font-weight: 600; color: var(--dim); font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; } .note { font-size: .8rem; color: var(--faint); margin: 0 0 .3rem; } .pager { display: flex; justify-content: space-between; gap: 1rem; margin: 3rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .9rem; } .pager a { color: var(--dim); text-decoration: none; } .pager a:hover { color: var(--ink); } main footer { margin-top: 2.5rem; font-family: var(--mono); font-size: .72rem; color: var(--faint); display: flex; gap: 1rem; } main footer a { color: var(--faint); } /* Cards on the index, made from its lists of links */ article .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .8rem; list-style: none; padding: 0; margin: 0 0 1.4rem; } article .cards li { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .95rem; background: var(--bg-2); font-size: .9rem; } article .cards a { border: none; font-weight: 600; display: block; margin-bottom: .2rem; } article .cards span { color: var(--dim); } @media (max-width: 1100px) { .shell { grid-template-columns: 14rem minmax(0, 1fr); } .toc { display: none; } } @media (max-width: 760px) { .shell { grid-template-columns: minmax(0, 1fr); } .menu { display: inline-grid; } /* The menu is the whole screen below the bar, and it scrolls on its own: the guide list is longer than a phone. It keeps that scrolling to itself, so a flick that runs off the end of the list does not carry on into the article underneath and leave the reader somewhere they never scrolled to. The page itself is never locked — locking it unsticks the bar and loses the line they were on — and it is covered anyway. */ .side { display: none; position: fixed; top: var(--top); left: 0; right: 0; bottom: 0; max-height: none; background: var(--bg); z-index: 4; padding: 1rem clamp(1rem, 4vw, 2rem) calc(2rem + env(safe-area-inset-bottom)); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .side.open { display: block; } }