/* ============================================================ SM Docs — Tufte overlay Tufte CSS (from CDN) handles typography, fonts, sidenotes, code, tables, and responsive layout. This file adds only what Tufte doesn't: the chrome header, cover surface, search/query components, result entries, states, and a handful of brand overrides. ============================================================ */ /* ---- Reset-ish ------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* ---- Custom properties (brand extras not in Tufte) ------- */ :root { --color-paper: #fffff8; --color-ink: #111111; --color-ink-muted: #6b6b6b; --color-ink-faint: #9f9a90; --color-rule: #d9d4c7; --color-rule-strong: #111111; --color-highlight: #faecd0; --color-paper-sunk: #fbfaf4; --color-paper-2: #f4f1e8; --font-serif: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; --font-mono: Consolas, "Liberation Mono", Menlo, Courier, monospace; --font-smallcaps: Palatino, "Palatino Linotype", Georgia, serif; --rule-hair: 1px solid var(--color-rule); --rule-strong: 1px solid var(--color-rule-strong); --motion-base: 120ms; --easing: cubic-bezier(0.2, 0.0, 0.2, 1.0); --hit-min: 44px; /* Page-level gutter mirrors Tufte body layout: body { width:87.5%; padding-left:12.5% } For our chrome we need a matching left offset. */ --page-left: 12.5%; } /* ---- Force light theme by default (override Tufte dark mode) */ body { background-color: #fffff8 !important; color: #111 !important; } /* ---- Opt-in dark mode via .dark class on ----------- */ html.dark body { background-color: #151515 !important; color: #ddd !important; } html.dark :root { --color-paper: #151515; --color-paper-sunk: #1e1e1e; --color-paper-2: #252525; --color-ink: #dddddd; --color-ink-muted: #999999; --color-ink-faint: #666666; --color-rule: #333333; --color-rule-strong: #dddddd; --color-highlight: #3a3020; } /* ---- Table (Tufte / RStudio style: minimal rules) -------- */ table { border-collapse: collapse; font-size: 1.1rem; font-variant-numeric: lining-nums tabular-nums; } table thead th { text-align: left; font-weight: 400; font-style: italic; padding: 0.4rem 0.8rem 0.3rem; border-top: 2px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); } table tbody td { padding: 0.3rem 0.8rem; vertical-align: top; border-bottom: none; } table tbody tr:last-child td { border-bottom: 2px solid var(--color-ink); } table td, table th { text-align: left; } /* ---- Table caption -------------------------------------- */ .sm-table-caption { width: 90%; max-width: none; font-style: italic; font-size: 1.1rem; color: var(--color-ink-muted); margin-bottom: 0.5rem; } /* ---- Code blocks ---------------------------------------- */ pre { background: var(--color-paper-sunk); border: none; padding: 0.6rem 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 52.5%; margin-left: 2.5%; } pre > code { background: transparent; width: 100%; margin-left: 0; overflow-x: visible; display: block; } /* ---- Code overflow fade indicator ----------------------- */ .sm-code-wrap { position: relative; } .sm-code-wrap.sm-code--overflow::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 3rem; background: linear-gradient(to right, transparent, var(--color-paper-sunk)); pointer-events: none; } /* ---- Blockquotes (no left border — RStudio style) -------- */ blockquote { border-left: none; font-style: italic; } blockquote footer { text-align: right; font-style: normal; } /* ---- Subtitle (deck) line-height fix --------------------- */ p.subtitle { line-height: 1.35; } /* ---- mark highlight (search results) --------------------- */ mark { background: var(--color-highlight); color: inherit; padding: 0 1px; } /* ---- focus ring (hairline, not glow) --------------------- */ :focus-visible { outline: 1px solid var(--color-ink); outline-offset: 2px; } /* ============================================================ Chrome header (02) A thin bar above the Tufte body. Sits outside the article element so it spans the full viewport width. ============================================================ */ .sm-chrome { display: flex; justify-content: space-between; align-items: center; /* Match Tufte body indentation so content aligns */ padding: 1.2rem var(--page-left); font-size: 0.9rem; color: var(--color-ink-muted); border-bottom: var(--rule-hair); background: var(--color-paper); box-sizing: border-box; /* Pull chrome left to the body edge (counters Tufte's padding-left:12.5%) */ margin-left: calc(-1 * var(--page-left)); width: calc(100% + var(--page-left)); } .sm-chrome__brand { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; letter-spacing: 0.01em; text-decoration: none; color: inherit; cursor: pointer; } .sm-chrome__brand:hover, .sm-chrome__brand:focus-visible { text-decoration: none; color: var(--color-ink); } .sm-chrome__version { font-style: italic; color: var(--color-ink-faint); font-size: 0.85rem; } .sm-chrome__back { font-style: italic; min-height: var(--hit-min); display: inline-flex; align-items: center; font-size: 0.9rem; } @media (max-width: 760px) { .sm-chrome { padding: 0.8rem 8%; margin-left: -8%; width: calc(100% + 8%); flex-wrap: wrap; gap: 0.5rem; } .sm-chrome__brand span { display: none; } } /* ============================================================ Mark (01) ============================================================ */ .sm-mark { display: block; } /* ============================================================ Cover surface Full-viewport title-page feel on top of Tufte's body layout. ============================================================ */ .sm-cover { min-height: 100vh; display: flex; flex-direction: column; } /* Override Tufte's article padding for the cover */ article.sm-cover { padding: 0; } .sm-cover__strap { padding: 2.5rem 0 0; font-size: 0.9rem; color: var(--color-ink-muted); letter-spacing: 0.01em; /* Full-width strapline centered over the content */ text-align: left; } .sm-cover__body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-bottom: 6rem; /* Subtle offset from center — title-page feel */ margin-top: -3rem; } .sm-cover__mark { margin-bottom: 3rem; } /* 03 · Search field — cover */ .sm-search-cover { display: block; width: 100%; max-width: 640px; } .sm-search-cover__field { display: flex; align-items: baseline; padding-bottom: 0.6rem; border-bottom: var(--rule-strong); } .sm-search-cover__input { flex: 1; font: italic 400 3.2rem/1 var(--font-serif); letter-spacing: -0.005em; background: transparent; border: 0; color: var(--color-ink); outline: none; caret-color: var(--color-ink); -webkit-appearance: none; appearance: none; border-radius: 0; } .sm-search-cover__input::placeholder { color: var(--color-ink-faint); } .sm-search-cover__input::-webkit-search-cancel-button, .sm-search-cover__input::-webkit-search-decoration { -webkit-appearance: none; display: none; } .sm-search-cover__meta { margin-top: 1rem; font-size: 0.8rem; color: var(--color-ink-faint); font-variant-numeric: oldstyle-nums proportional-nums; letter-spacing: 0.01em; } /* 05 · Examples */ .sm-examples { list-style: none; padding: 0; margin: 4rem 0 0; } .sm-examples__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-faint); font-family: var(--font-smallcaps); margin-bottom: 0.6rem; } .sm-examples li { margin: 0; } .sm-examples a { display: inline-block; font-style: italic; font-size: 1.2rem; min-height: var(--hit-min); line-height: var(--hit-min); text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 4px; transition: text-decoration-color var(--motion-base) var(--easing); } .sm-examples a:hover, .sm-examples a:focus-visible { text-decoration-color: var(--color-ink); } @media (max-width: 760px) { .sm-search-cover__input { font-size: 2rem; } .sm-cover__mark > svg { width: 60px !important; height: 60px !important; } .sm-examples a { font-size: 1.1rem; } } /* ============================================================ 04 · Query line (results / state surfaces) Uses a contenteditable div styled to match Tufte's h2. ============================================================ */ .sm-query { padding-top: 3rem; margin-bottom: 3rem; /* Constrain to Tufte's 55% main column width equivalent */ width: 55%; } .sm-query__field { font: italic 400 2.2rem/1 var(--font-serif); letter-spacing: -0.005em; padding-bottom: 0.5rem; border-bottom: var(--rule-hair); outline: none; display: block; /* Strip native contenteditable chrome */ border-left: none; border-right: none; border-top: none; } .sm-query__field:focus { outline: none; box-shadow: none; } .sm-query__aside { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; font-variant-numeric: oldstyle-nums proportional-nums; color: var(--color-ink-faint); margin-top: 0.4rem; } .sm-query__clear { font-style: italic; color: var(--color-ink-faint); } @media (max-width: 760px) { .sm-query { width: 100%; } .sm-query__field { font-size: 1.6rem; } .sm-result { width: 100%; } } /* ============================================================ 06 · Result entry Uses
elements inside a
. Tufte's section > p gives 55% width automatically. ============================================================ */ .sm-result { padding: 2rem 0; border-bottom: var(--rule-hair); width: 55%; } .sm-result:last-of-type { border-bottom: 0; } /* Breadcrumb — small-caps above title */ .sm-result__crumb, .sm-article__crumb { font-family: var(--font-smallcaps); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; color: var(--color-ink-faint); margin: 0 0 0.4rem; /* Override Tufte's section>p width — breadcrumbs span their container */ width: 100%; max-width: none; } /* Result title — italic serif, link with invisible underline */ .sm-result__title { font: italic 400 2rem/1.2 var(--font-serif); margin: 0 0 0.5rem; letter-spacing: -0.005em; } .sm-result__title a { text-decoration-color: transparent; } .sm-result__title a:hover, .sm-result__title a:focus-visible { text-decoration-color: var(--color-ink); } /* Excerpt — prose-width, with mark highlights */ .sm-result__excerpt { font-size: 1.4rem; line-height: 1.45; margin: 0; } /* Keyboard focus state */ .sm-result--focused { background: var(--color-paper-sunk); outline: 1px solid var(--color-rule); outline-offset: -1px; } .sm-results__more { display: inline-block; margin-top: 2rem; font-style: italic; font-size: 1rem; } /* ============================================================ 07 · Article head ============================================================ */ .sm-article__head { padding-top: 2rem; } /* sm-article__title: use Tufte's h1 styling naturally — no override needed */ /* sm-article__deck: lead paragraph under the title */ .sm-article__deck { font-size: 1.4rem; line-height: 1.6; color: var(--color-ink); width: 55%; margin: 0 0 2.5rem; } /* Article header — title determines height, metadata floats in margin */ .sm-article__header { position: relative; margin-top: 2rem; } .sm-article__header h1 { width: 55%; margin-top: 0; } .sm-article__meta { position: absolute; top: 0; left: 60%; width: 35%; font-size: 1.1rem; line-height: 1.4; color: var(--color-ink); } .sm-article__meta em { color: var(--color-ink-faint); font-size: 0.9rem; } .sm-article__meta a { color: var(--color-ink); } @media (max-width: 760px) { .sm-article__header h1 { width: 100%; } .sm-article__meta { position: static; width: 100%; margin-top: 1rem; margin-bottom: 1rem; } } /* Article footer */ .sm-article__footer { border-top: var(--rule-hair); margin-top: 4rem; padding-top: 1rem; font-size: 0.8rem; color: var(--color-ink-faint); font-style: italic; width: 55%; } @media (max-width: 760px) { .sm-article__deck { width: 100%; font-size: 1.2rem; } .sm-article__footer { width: 100%; } } /* ============================================================ 08 · Prose overrides Tufte handles most prose styles. We only need inline-code styling (sm-ic class) and callouts. ============================================================ */ /* Inline code — uses Tufte's code rule + slight background */ code.sm-ic { background: transparent; font-size: 0.85em; padding: 0 1px; } /* 14 · Callout — adapts Tufte's blockquote pattern (no left border) */ .sm-callout { margin: 1.4em 0; padding-left: 1.25rem; border-left: none; font-size: 1.4rem; width: 55%; margin-right: 40px; } .sm-callout__label { font-variant: small-caps; letter-spacing: 0.04em; font-style: italic; color: var(--color-ink-muted); margin: 0 0 0.2em; font-size: 1rem; } .sm-callout p { margin: 0 0 0.4em; /* Override Tufte's section>p width inside callout */ width: 100%; } .sm-callout--warning { border-left: 1px solid var(--color-ink); } @media (max-width: 760px) { .sm-callout { width: 100%; margin-right: 0; } } /* ============================================================ 09 · Sidenote emphasis Tufte CSS handles positioning and display. We add the emphasis highlight (hover/focus on the reference label). ============================================================ */ .sidenote--emphasized, .marginnote--emphasized { background: var(--color-highlight); transition: background var(--motion-base) var(--easing); } @media (prefers-reduced-motion: reduce) { .sidenote--emphasized, .marginnote--emphasized { transition: none; } } /* Sidenote reference label styling — make the number readable */ label.sidenote-number { cursor: pointer; } /* Sidenotes inside list items: same fix Tufte uses for blockquotes. The