/* ========================================================================== RPI Thesis Toolkit website · "Sketchbook garden" One stylesheet for the landing page (site/index.html) and every guide page (site/guide-template.html). Works offline and without JavaScript. Sections: 1 Fonts 2 Colors and sizes 3 Base 4 Header 5 Shared pieces 6 Landing page 7 Guide layout 8 Guide content 9 Footer 10 Small screens 11 Motion and print To change a color, edit the light tokens or --dark-* values in section 2. Everything else reads those tokens. ========================================================================== */ /* ---------- 1. Fonts ---------------------------------------------------- Fraunces (headings) and Atkinson Hyperlegible Next (body), SIL OFL 1.1, latin subset, from Google Fonts. Licenses: site/fonts/OFL-*.txt. If a font fails to load, the fallbacks in --font-* are used instead. */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/fraunces-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/fraunces-400-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Atkinson Hyperlegible Next"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/atkinson-hyperlegible-next-400-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Atkinson Hyperlegible Next draws 0 with a slash and this subset has no plain alternate. "Plain Zero" covers only the digit 0, from a plain sans the device already has, and comes first in --font-body, so prose, tags and the footer get a plain 0 and every other character stays Atkinson. Code uses --font-mono and keeps its own zero. Without any of these fonts installed, the slashed 0 stays. */ @font-face { font-family: "Plain Zero"; font-style: normal; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Liberation Sans"), local("Arimo"); unicode-range: U+0030; } @font-face { font-family: "Plain Zero"; font-style: normal; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Liberation Sans Bold"), local("Arimo Bold"); unicode-range: U+0030; } @font-face { font-family: "Plain Zero"; font-style: italic; font-weight: 400; src: local("Arial Italic"), local("Arial-ItalicMT"), local("Helvetica Neue Italic"), local("Liberation Sans Italic"), local("Arimo Italic"); unicode-range: U+0030; } /* ---------- 2. Colors and sizes ----------------------------------------- */ :root { color-scheme: light dark; --paper: #faf5ea; /* page background */ --paper-2: #f1e8d6; /* bands, code */ --footer: #ede3d0; /* footer band, a shade deeper than the page */ --card: #fffcf5; --ink: #2d2620; /* main text */ --ink-soft: #4a4037; --muted: #625547; /* secondary text */ --line: #e3d6bf; --line-strong: #c4ae8a; --btn-edge: #2d2620; /* button outline (primary) */ --btn-edge-2: #2d2620; /* button outline (secondary) */ --btn-shadow: #2d2620; /* offset shadow under buttons */ /* The light accents, named once: the page uses them, and print uses them in either theme. */ --light-sage: #4a6b42; --light-blue: #24518c; --light-terra: #a24a24; --light-plum: #70466a; --light-red: #c8102e; --sage: var(--light-sage); --sage-wash: #e4ecd2; /* tips */ --blue: var(--light-blue); --blue-wash: #e0e6ef; /* notes, links */ --terra: var(--light-terra); --terra-wash: #f6dfcd; /* warnings, accents */ --plum: var(--light-plum); --plum-wash: #f1e0ea; /* important */ --butter-wash: #f7e8b3; --rpi-red: var(--light-red); /* used sparingly: primary button, one squiggle */ --on-red: #ffffff; --link: var(--blue); --scroll-hint: rgba(43, 39, 35, 0.22); /* edge shadow on scrollable code and tables */ --focus: var(--blue); --squiggle: var(--rpi-red); /* the hero's hand-drawn underline */ --logo-dot: #c8102e; /* the dot in the header mark (site/logo.svg) */ --select: #f3dc8c; /* highlighter yellow for selected text */ --page-paper: #fffdf8; /* a printed page (title page sketch, PDF page view): paper in both themes */ --page-ink: #2d2620; --page-muted: #625547; --overlay-ink: #f4efe6; /* the picture viewer and search: always dark, in both themes */ --overlay-bg: #181511; --card-shadow: 0 1px 2px rgba(43, 39, 35, 0.05), 0 10px 22px -16px rgba(43, 39, 35, 0.35); /* home cards */ --table-head: var(--paper-2); --control-edge: var(--muted); --checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4 C 4.4 9.4, 5.5 10.6, 6.6 12 C 8.4 8.6, 10.6 5.6, 13.4 3.4' fill='none' stroke='%234a6b42' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 5.8 C 5 7.4, 6.6 9.2, 8.1 10.6 C 9.6 9, 11.2 7.3, 12.7 5.6' fill='none' stroke='%232d2620' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* the arrow on select menus */ /* LaTeX highlighting, shared by guide code blocks (built by scripts/build_site.py) and tool output (site/tools-highlight.js). Each is AA on --paper-2 in both themes. */ --code-cmd: var(--blue); /* \commands */ --code-brace: var(--terra); /* { } */ --code-opt: var(--plum); /* [options] */ --code-math: var(--sage); /* $math$ */ --code-com: var(--muted); /* % comments, also italic */ /* The dark palette is defined once; both System and Dark use it. */ --dark-paper: #181614; --dark-paper-2: #211e1a; --dark-footer: #121110; --dark-card: #27231e; --dark-ink: #f2ece2; --dark-ink-soft: #ddd5c8; --dark-muted: #b9ae9d; --dark-line: #423b32; --dark-line-strong: #776b5b; --dark-btn-edge: #e9e1d4; --dark-btn-edge-2: #a99d8b; --dark-btn-shadow: #463e34; --dark-sage: #a6d49a; --dark-sage-wash: #273b27; --dark-blue: #a2c8fb; --dark-blue-wash: #1d2c43; --dark-terra: #f6a57f; --dark-terra-wash: #3b2418; --dark-plum: #e0b6dc; --dark-plum-wash: #34233a; --dark-butter-wash: #3a3118; --dark-rpi-red: #d6223f; --dark-squiggle: #ff8d98; --dark-logo-dot: #ff5a6e; --dark-select: #5c4b1d; --dark-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 24px -14px rgba(0, 0, 0, 0.7); --dark-scroll-hint: rgba(0, 0, 0, 0.6); --dark-table-head: #2e2a24; --dark-control-edge: #958a78; --dark-checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4 C 4.4 9.4, 5.5 10.6, 6.6 12 C 8.4 8.6, 10.6 5.6, 13.4 3.4' fill='none' stroke='%23a6d49a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --dark-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 5.8 C 5 7.4, 6.6 9.2, 8.1 10.6 C 9.6 9, 11.2 7.3, 12.7 5.6' fill='none' stroke='%23f2ece2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --font-body: "Plain Zero", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --radius: 14px; --wobble: 58% 42% 55% 45% / 48% 56% 44% 52%; /* hand-drawn circle */ --sketch: 14px 18px 13px 17px / 17px 13px 18px 14px; /* hand-drawn box */ --offset: 9px; /* misregistered color wash behind a card, as in the diagrams */ --offset-sm: 5px; /* the same, behind small pieces (anatomy pages and close-ups) */ --page-max: 1200px; --gutter: clamp(16px, 4vw, 40px); } /* Large screens: one frame just wide enough for the sidebar, the text and "On this page" side by side (82rem); any extra width becomes even margins, as on most documentation sites. Header, sidebar and footer sit in the same place on the home page, guide pages and tools. The frame is in rem, so it grows with the type on very large monitors below. */ @media (min-width: 1440px) { :root { --page-max: 82rem; } } /* Very large monitors (2560 and up, 4K at 1x): everything scales a step, type and spacing together, so the page is not a narrow island in a wide void. Text keeps its measure because it is set in ch. */ @media (min-width: 2560px) { html { font-size: 112.5%; } } @media (min-width: 3400px) { html { font-size: 125%; } } @media (min-width: 3800px) { html { font-size: 150%; } } /* 4K at 1x */ /* System follows the device; explicit choices also theme native controls and SVGs. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; --paper: var(--dark-paper); --paper-2: var(--dark-paper-2); --footer: var(--dark-footer); --card: var(--dark-card); --ink: var(--dark-ink); --ink-soft: var(--dark-ink-soft); --muted: var(--dark-muted); --line: var(--dark-line); --line-strong: var(--dark-line-strong); --btn-edge: var(--dark-btn-edge); --btn-edge-2: var(--dark-btn-edge-2); --btn-shadow: var(--dark-btn-shadow); --sage: var(--dark-sage); --sage-wash: var(--dark-sage-wash); --blue: var(--dark-blue); --blue-wash: var(--dark-blue-wash); --terra: var(--dark-terra); --terra-wash: var(--dark-terra-wash); --plum: var(--dark-plum); --plum-wash: var(--dark-plum-wash); --butter-wash: var(--dark-butter-wash); --rpi-red: var(--dark-rpi-red); --squiggle: var(--dark-squiggle); --logo-dot: var(--dark-logo-dot); --select: var(--dark-select); --card-shadow: var(--dark-card-shadow); --scroll-hint: var(--dark-scroll-hint); --table-head: var(--dark-table-head); --control-edge: var(--dark-control-edge); --checkmark: var(--dark-checkmark); --chevron: var(--dark-chevron); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --paper: var(--dark-paper); --paper-2: var(--dark-paper-2); --footer: var(--dark-footer); --card: var(--dark-card); --ink: var(--dark-ink); --ink-soft: var(--dark-ink-soft); --muted: var(--dark-muted); --line: var(--dark-line); --line-strong: var(--dark-line-strong); --btn-edge: var(--dark-btn-edge); --btn-edge-2: var(--dark-btn-edge-2); --btn-shadow: var(--dark-btn-shadow); --sage: var(--dark-sage); --sage-wash: var(--dark-sage-wash); --blue: var(--dark-blue); --blue-wash: var(--dark-blue-wash); --terra: var(--dark-terra); --terra-wash: var(--dark-terra-wash); --plum: var(--dark-plum); --plum-wash: var(--dark-plum-wash); --butter-wash: var(--dark-butter-wash); --rpi-red: var(--dark-rpi-red); --squiggle: var(--dark-squiggle); --logo-dot: var(--dark-logo-dot); --select: var(--dark-select); --card-shadow: var(--dark-card-shadow); --scroll-hint: var(--dark-scroll-hint); --table-head: var(--dark-table-head); --control-edge: var(--dark-control-edge); --checkmark: var(--dark-checkmark); --chevron: var(--dark-chevron); } } /* ---------- 3. Base ------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1.125rem; /* 18px; 17px on phones (section 10) */ line-height: 1.65; overflow-wrap: break-word; } img, svg { max-width: 100%; height: auto; } a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent); } a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; } /* The build labels new tabs for screen readers; the arrow is the visual cue, kept on the link's last word (.ext-last) so it never wraps onto its own line. */ a[target="_blank"] { overflow-wrap: anywhere; } /* a long address wraps instead of widening a phone */ a[target="_blank"] .ext-last { white-space: nowrap; } a[target="_blank"] .ext-last::after, a[target="_blank"]:not(:has(.ext-last))::after { content: ""; display: inline-block; width: 0.7em; height: 0.7em; margin-left: 0.2em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 12.5 12.5 3M4.5 3h8v8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 12.5 12.5 3M4.5 3h8v8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); font-variation-settings: "SOFT" 100; text-wrap: balance; } h1 { font-size: clamp(2.3rem, 1.6rem + 3vw, 3.6rem); margin: 0 0 0.4em; } h2 { font-size: clamp(1.7rem, 1.4rem + 1.3vw, 2.3rem); margin: 1.8em 0 0.5em; } h3 { font-size: 1.35rem; margin: 1.8em 0 0.4em; } h4 { font-size: 1.15rem; margin: 1.6em 0 0.3em; } p { margin: 0 0 1.1em; text-wrap: pretty; } strong, b { font-weight: 700; } code, kbd, pre { font-family: var(--font-mono); font-variant-ligatures: none; } /* -- stays two hyphens */ code { font-size: 0.86em; background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; padding: 0.08em 0.36em; overflow-wrap: anywhere; /* long file paths wrap instead of widening the page */ -webkit-box-decoration-break: clone; box-decoration-break: clone; } pre code { background: none; border: 0; padding: 0; font-size: inherit; } kbd { font-size: 0.82em; padding: 0.1em 0.45em; background: var(--card); border: 1.5px solid var(--line-strong); border-bottom-width: 3px; border-radius: 7px; white-space: nowrap; } mark { background: var(--butter-wash); color: inherit; border-radius: 4px; padding: 0 2px; } ::selection { background: var(--select); color: var(--ink); } /* One scrollbar look everywhere (it inherits): the page, text boxes, tool output, code and tables, in the theme's colors. */ :root { scrollbar-color: var(--line-strong) transparent; } /* A single solid underline stays clear on wrapped links and in Safari. Keep the sketch treatment on illustrations rather than changing link geometry. */ a:is(:hover, :focus-visible) { text-decoration-style: solid; } .skip-link { position: absolute; left: 16px; top: -200px; z-index: 10; background: var(--card); color: var(--ink); padding: 10px 14px; border: 2px solid var(--ink); border-radius: 10px; } .skip-link:focus { top: 12px; } /* Read by screen readers, not shown */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- 4. Header ---------------------------------------------------- */ .site-header { position: relative; max-width: var(--page-max); margin: 0 auto; padding: 20px var(--gutter) 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-content: space-between; gap: 12px 24px; } .wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; font-variation-settings: "SOFT" 100; } /* The mark is inline (a copy of site/logo.svg) so it follows the chosen theme with or without JavaScript: braces in the text color, the dot in --logo-dot. */ .wordmark-logo { width: 28px; height: 28px; flex: none; overflow: visible; } .wordmark-logo .brace { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .wordmark-logo .dot { fill: var(--logo-dot); } .brand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; } .header-tools { display: flex; align-items: center; gap: 10px; } .appearance { position: relative; z-index: 20; } .appearance[hidden], .appearance-menu[hidden] { display: none; } .diagram-open[hidden] { display: none; } /* viewer.js hides it when the drawing is already near full size */ .appearance-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; color: var(--ink); background: var(--card); border: 2px solid var(--btn-edge-2); /* the secondary button's hand-drawn edge */ border-radius: var(--sketch); box-shadow: 2px 2px 0 var(--btn-shadow); cursor: pointer; } .appearance-toggle:hover { color: var(--ink); background: var(--paper-2); } .theme-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .appearance-toggle .theme-icon { display: none; } .appearance[data-mode="system"] .theme-icon-system, .appearance[data-mode="light"] .theme-icon-light, .appearance[data-mode="dark"] .theme-icon-dark { display: block; } .appearance-menu { position: absolute; top: 54px; right: 0; width: 220px; padding: 8px; color: var(--ink); background: var(--card); border: 1.5px solid var(--control-edge); border-radius: 14px; box-shadow: 0 8px 24px var(--scroll-hint); } .appearance-menu p { margin: 4px 10px 8px; color: var(--muted); font-size: 0.875rem; } .appearance-menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 1rem; text-align: left; color: var(--ink); background: transparent; border: 1.5px solid transparent; border-radius: 8px; cursor: pointer; } .appearance-menu button .choice { display: block; line-height: 1.25; } .appearance-menu button .choice span { display: block; color: var(--muted); font-size: 0.8rem; font-weight: 400; } .appearance-menu .theme-icon { flex: none; width: 20px; height: 20px; color: var(--ink-soft); } .appearance-menu button { min-height: 48px; } .appearance-menu button:hover { background: var(--paper-2); } .appearance-menu button[aria-pressed="true"] { background: var(--sage-wash); font-weight: 700; } /* selected: the one sage, as for the current page */ .appearance-menu button:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; } .unofficial-tag { /* "not an RPI resource", said calmly next to the name */ display: inline-block; padding: 1px 10px; font-size: 0.8rem; line-height: 1.6; white-space: nowrap; color: var(--muted); border: 1.5px dashed var(--line-strong); border-radius: 999px; } .site-nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 4px; margin-left: -10px; } /* the first name lines up with the wordmark */ @media (min-width: 1024px) { /* one row: the name, four entries, search and appearance */ .site-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 24px; } .header-tools { grid-column: 3; grid-row: 1; } .site-nav { grid-column: 2; grid-row: 1; justify-self: center; margin-left: 0; } } /* Guide and Tools: menus that open under their name, drawn like the appearance menu. Native details, so they work without JavaScript. */ .nav-menu { position: relative; } .nav-menu > summary { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 1rem; color: var(--ink-soft); list-style: none; cursor: pointer; border-radius: var(--sketch); } .nav-menu > summary::-webkit-details-marker { display: none; } .nav-menu > summary::after { content: ""; width: 0.8em; height: 0.8em; background: currentColor; -webkit-mask: var(--chevron) no-repeat center / contain; mask: var(--chevron) no-repeat center / contain; transition: transform .15s ease; } .nav-menu[open] > summary::after { transform: rotate(180deg); } .nav-menu > summary:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); } .nav-menu > summary.is-current, .nav-menu[open] > summary { color: var(--ink); background: var(--sage-wash); text-decoration: none; } .nav-menu > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .nav-menu-list { position: absolute; top: calc(100% + 8px); left: -8px; z-index: 30; width: max-content; min-width: 14rem; max-width: min(22rem, calc(100vw - 2 * var(--gutter))); margin: 0; padding: 8px; list-style: none; background: var(--card); border: 1.5px solid var(--control-edge); border-radius: 14px; box-shadow: 0 8px 24px var(--scroll-hint); } .site-nav .nav-menu-list a { display: block; padding: 8px 12px; color: var(--ink); text-decoration: none; border-radius: 8px; } /* not the header bar's link padding */ .nav-menu-list a:hover { background: var(--paper-2); } .nav-menu-list a[aria-current="page"] { background: var(--sage-wash); font-weight: 700; } .nav-menu-list a:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; } .site-nav .nav-menu-tools .nav-menu-list a { display: flex; align-items: flex-start; gap: 12px; } .nav-menu-icon { width: 30px; height: 30px; flex: none; margin-top: 2px; } /* the tool's doodle from the home page */ .nav-menu-name { display: block; font-weight: 700; } .nav-menu-blurb { display: block; font-size: 0.85rem; color: var(--muted); } @media (max-width: 700px) { /* phones: the menu opens across the header, under the links */ .nav-menu { position: static; } .nav-menu-list { left: var(--gutter); right: var(--gutter); top: 100%; width: auto; max-width: none; } } /* Link states, the same in the header, the sidebar and the footer: hover underlines the text; the current page is the one sage pill. */ .site-nav { align-items: center; } .site-nav > a { display: inline-flex; align-items: center; } /* the same box as the menu names */ .site-nav a { color: var(--ink-soft); text-decoration: none; font-size: 1rem; padding: 4px 10px; border-radius: var(--sketch); } .site-nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); } .site-nav a[aria-current="page"] { color: var(--ink); background: var(--sage-wash); text-decoration: none; } /* ---------- 5. Shared pieces -------------------------------------------- */ .wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); } /* Small italic label above a heading */ .eyebrow { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--terra); margin: 0 0 0.5rem; } /* Buttons. Three kinds, used the same way everywhere: .button primary, RPI red: the ONE main action on a page .button.button-secondary paper: other actions next to the primary one .text-link tertiary: a bold link with an arrow ("Start on Overleaf →") Paper-card feel: hover lifts the card (shadow grows), pressing pushes it flat. Disabled: add aria-disabled="true" (links) or the disabled attribute. */ .hero-actions { display: flex; flex-wrap: wrap; gap: 14px 16px; margin: 0; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; font: inherit; font-weight: 700; font-size: 1.05rem; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; background: var(--rpi-red); color: var(--on-red); border: 2px solid var(--btn-edge); border-radius: var(--sketch); box-shadow: 3px 3px 0 var(--btn-shadow); transition: transform .12s ease, box-shadow .12s ease; } .button:is(:hover, :focus-visible) { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--btn-shadow); } .button:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--btn-shadow); } .button:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--sketch); } .button-secondary { background: var(--card); color: var(--ink); border-color: var(--btn-edge-2); } .button-secondary:is(:hover, :focus-visible) { background: var(--paper); } .button > span { display: inline; } .button svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* Disabled: the same size, flat and in quiet paper colors (a faded red reads as pink), so the layout never shifts. */ .button[aria-disabled="true"], .button:disabled { cursor: not-allowed; color: var(--muted); background: var(--paper-2); border-color: var(--line-strong); box-shadow: none; transform: none; } /* Tertiary: a text link with a little arrow that nudges on hover */ .text-link { display: inline-block; padding: 9px 0; /* with the line height: a 44px+ touch target */ font-weight: 700; color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); } .text-link:hover { text-decoration-color: currentColor; } .text-link:active { transform: translateY(1px); } .text-link .arrow { display: inline-block; margin-left: 0.4em; transition: transform .15s ease; } .text-link:is(:hover, :focus-visible) .arrow { transform: translateX(3px); } .text-link[aria-disabled="true"] { color: var(--muted); text-decoration-style: dashed; cursor: not-allowed; } /* Inline doodles, drawn like docs/diagrams/: an ink line (the text color, so it keeps its contrast in both themes) over a color wash that sits a little off, as if printed out of register. Every line is 2.2px whatever the size. .w-* wash only (draw it 2-3 units down and right of its outline) .k paper-colored fill that hides what is behind .ln a softer, thinner line for "text" on a page .f-* wash fill and ink line together */ .doodle { color: var(--ink); overflow: visible; } /* Line weight follows the drawing's size (--dd-line): full on large drawings, lighter on small icons, so the hand-drawn wobble reads as texture, not clutter. */ .dd, .dd * { fill: none; stroke: currentColor; stroke-width: var(--dd-line, 2.2); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .dd .ln { stroke: var(--muted); stroke-width: calc(var(--dd-line, 2.2) * 0.8); } .tk-icon { --dd-line: 1.7; } .tool-mark { --dd-line: 1.8; } .nav-menu-icon { --dd-line: 1.35; } .dd .k { fill: var(--card); stroke: none; } .dd :is(.w-sage, .w-blue, .w-butter, .w-terra, .w-plum) { stroke: none; } .dd .w-sage { fill: var(--sage-wash); } .dd .w-blue { fill: var(--blue-wash); } .dd .w-butter { fill: var(--butter-wash); } .dd .w-terra { fill: var(--terra-wash); } .dd .w-plum { fill: var(--plum-wash); } .dd .f-card { fill: var(--card); } /* Cards: paper on paper, with an even edge all round. */ .card { position: relative; background: var(--card); border: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); } /* Tags: when a student needs a page ("Need now", "Optional", ...), from TAGS in scripts/build_site.py. Calm washes with their own ink; every pair is AA. */ .tag { --c: var(--muted); --w: var(--paper-2); display: inline-block; padding: 1px 12px; font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; font-style: normal; letter-spacing: 0.01em; line-height: 1.6; white-space: nowrap; vertical-align: 0.12em; color: var(--c); background: var(--w); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); border-radius: 999px; } .tag-start { --c: var(--ink); --w: var(--butter-wash); } .tag-now { --c: var(--sage); --w: var(--sage-wash); } .tag-draft { --c: var(--blue); --w: var(--blue-wash); } .tag-stuck { --c: var(--terra); --w: var(--terra-wash); } .tag-later { --c: var(--plum); --w: var(--plum-wash); } .tag-optional { border-style: dashed; } /* The change log (website copy): each release's PDF answer as a tag, its links under the heading. */ .release-meta { margin: -0.3rem 0 0.9rem; font-size: 0.95rem; color: var(--ink-soft); } .release-meta .sep { margin: 0 0.6em; } /* "Changes your PDF?": the answer as a hand-drawn stamp, then what it means. Colors from the callouts: No sage, Yes terra, Some plum, the first version blue. */ .release-pdf { --c: var(--sage); --w: var(--sage-wash); display: flex; align-items: center; gap: 16px; margin: 0 0 1.2rem; padding: 12px 18px 12px 12px; background: var(--w); border: 1.5px solid color-mix(in srgb, var(--c) 40%, transparent); border-radius: 6px 18px 8px 16px / 16px 8px 18px 6px; } .release-pdf-yes { --c: var(--terra); --w: var(--terra-wash); } .release-pdf-some { --c: var(--plum); --w: var(--plum-wash); } .release-pdf-first { --c: var(--blue); --w: var(--blue-wash); } .release-pdf p { margin: 0; } .release-pdf > div { min-width: 0; } @media (max-width: 480px) { .release-pdf { flex-wrap: wrap; } } /* large text on a phone: the stamp above the words */ .release-pdf-word { flex: none; display: grid; place-items: center; width: 4.2rem; height: 4.2rem; font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--c); background: var(--card); border: 2px solid var(--c); border-radius: var(--wobble); transform: rotate(-4deg); } .release-pdf-q { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--c); } .release-pdf code { background: var(--card); } /* ---------- 6. Landing page --------------------------------------------- */ .home-top .squiggle { position: relative; white-space: nowrap; } .home-top .squiggle::after { /* a hand-drawn wave under the word; it draws itself once (section 11) */ content: ""; position: absolute; left: 0; right: 0.05em; bottom: -0.16em; height: 0.14em; background: var(--squiggle); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 7'%3E%3Cpath d='M-1 4.2 C 2 1.6, 6 1.4, 10 3.5 S 17 5.6, 21 2.9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 0.4em 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 7'%3E%3Cpath d='M-1 4.2 C 2 1.6, 6 1.4, 10 3.5 S 17 5.6, 21 2.9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 0.4em 100%; } .lead { font-size: 1.25rem; line-height: 1.55; color: var(--ink-soft); max-width: 36ch; margin-bottom: 1.5em; } .kicker { margin: 0; color: var(--muted); font-size: 1rem; } /* Cards with an icon, a kicker, a title and text, and a list of links (the home page's doors) */ .guide-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .help-card { display: flex; flex-direction: column; } .help-card > svg { width: 52px; height: 52px; margin-bottom: 10px; } @media (max-width: 600px) { .help-card > svg { float: left; width: 44px; height: 44px; margin: 0 14px 0 0; } .help-card .kicker { margin-top: 2px; } .help-card .help-text { clear: left; } } .help-card .kicker { /* the stage name, as in the guide sidebar */ font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; } .help-card :is(h2, h3) { margin: 0 0 0.35rem; font-size: 1.3rem; } .help-text > :last-child { margin-bottom: 0.9rem; } .help-card p { color: var(--ink-soft); font-size: 1.02rem; margin-bottom: 0.9rem; } .help-card ul { list-style: none; margin: auto 0 0; padding: 0.8rem 0 0; border-top: 1.5px dashed var(--line-strong); } .help-card li { margin: 0; font-size: 1.02rem; line-height: 1.4; } .help-card li a { display: inline-block; padding: 9px 0; white-space: nowrap; } /* the arrow never wraps alone; page names are short */ .help-card li a::after { content: "→" / ""; display: inline-block; margin-left: 0.3em; } /* inline-block: the arrow is not underlined, as with .text-link */ /* A door with one action (the Contribute page): the button sits at the foot of each card. */ /* Doors with one action each (the Contribute page): one row per way, what it is on the left and its button on the right; stacked on phones. */ .guide-content > .action-rows { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: none; margin: 1.6rem 0 2.2rem; padding: 0; } .guide-content .action-rows .help-card { display: flex; flex-direction: row; align-items: center; gap: 20px; padding: 12px 18px; } .action-rows .help-card h3 { margin: 0 0 2px; font-size: 1.15rem; } .action-rows .help-card .kicker { margin: 4px 0 0; font-size: 0.75rem; } .action-rows .help-text { flex: 1 1 auto; min-width: 0; } .action-rows .help-text > :last-child { margin-bottom: 0; } .action-rows .help-card p { margin-bottom: 0; } .action-rows .help-action { flex: none; margin: 0; } .action-rows .button { white-space: nowrap; } @media (max-width: 600px) { .guide-content .action-rows .help-card { flex-direction: column; align-items: stretch; gap: 12px; } .action-rows .button { width: 100%; } } /* Cards lift a little while you point at them or tab into them */ .help-card:is(:hover, :focus-within) { border-color: color-mix(in srgb, var(--ink) 45%, var(--line-strong)); } /* Cards in a row share row lines, so their link lists start at the same height. */ @supports (grid-template-rows: subgrid) { .guide-list { grid-auto-rows: auto; } .help-card { display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; } .help-card { grid-row: span 4; } /* icon, stage, title and text, links */ .help-card ul { margin-top: 0; } } /* Short home page (#16): the message with the two ways to start, one drawing, the "What's here" columns (Start, Tools, Help), then a "What's new" line and "Share this guide". Compact: the core fits in about one and a half laptop screens. */ .home-top { max-width: var(--page-max); margin: 0 auto; padding: clamp(14px, 3vw, 36px) var(--gutter) 0; } .home-top h1 { max-width: 20ch; font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem); margin-bottom: 0.3em; } .home-top .lead { max-width: 44ch; margin-bottom: 0.9em; } .home-top.center { text-align: center; } .home-top.center h1 { max-width: 26ch; } .home-top.center .lead { max-width: 66ch; } .home-top.center :is(h1, .lead, .home-note) { margin-inline: auto; } .home-actions { margin: 0 0 10px; } .home-top.center .home-actions { justify-content: center; } .button-tag { /* "ZIP" on the download button: the file kind, said quietly */ padding: 0 6px; font-size: 0.72rem; letter-spacing: 0.06em; line-height: 1.5; border: 1.5px solid color-mix(in srgb, currentColor 60%, transparent); border-radius: 6px; } .home-more { margin: 0 0 12px; font-size: 1rem; color: var(--ink-soft); } .home-more a { display: inline-block; padding: 6px 0; } .home-more .sep, .home-news .sep { margin: 0 0.7em; color: var(--muted); } .home-note { max-width: 44rem; margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--muted); } .home-figure { max-width: var(--page-max); margin: clamp(14px, 2.4vw, 26px) auto 0; padding: 0 var(--gutter); } .home-figure img { display: block; width: 100%; height: auto; margin: 0 auto; } .home-figure.wide img { max-width: 57.5rem; } /* 920px; grows with the type on very large screens */ .section-title { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); margin: 0 0 16px; } /* Small doodles beside each line of "What's here" (below). */ .tk-icon { width: 40px; height: 40px; flex: none; } .here-col li p { margin: 0; font-size: 0.95rem; line-height: 1.4; color: var(--ink-soft); } .toolkit-isnt { margin: 18px 0 0; padding: 10px 16px; font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft); background: var(--paper-2); border: 1.5px dashed var(--line-strong); border-radius: var(--sketch); } .toolkit-isnt strong { color: var(--ink); } .doors { gap: 26px; isolation: isolate; } .doors .card, .here-col { box-shadow: 3px 3px 0 var(--line-strong); } /* the pager's and result cards' offset */ .doors .card { padding: clamp(18px, 2.2vw, 24px) clamp(18px, 2.4vw, 26px) clamp(10px, 1.4vw, 14px); } .doors .help-card > svg { position: absolute; top: 16px; right: 18px; width: 46px; height: 46px; margin: 0; } /* beside the title, not above it */ .doors .help-card { grid-row: span 3; } /* kicker, title and text, links */ .doors .help-card .help-text h2 { padding-right: 52px; } .doors .help-card p { font-size: 0.98rem; margin-bottom: 0.7rem; } .doors .help-card ul { padding-top: 0.5rem; } .doors .help-card li a { padding: 7px 0; } .here-start .kicker { color: var(--sage); } .here-tools .kicker { color: var(--blue); } .here-help .kicker { color: var(--terra); } .doors li a { white-space: normal; } /* longer link names wrap at large text sizes */ /* "What's here", the doors with everything in the toolkit listed under them; each line is an icon, a link and a few words. */ .here { padding-top: clamp(22px, 3vw, 34px); } .here-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; isolation: isolate; } .here-col { position: relative; background: var(--card); border: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: 18px 20px 8px; } .here-col .kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .here-col h3 { margin: 0 0 6px; font-size: 1.25rem; } .here-col ul { list-style: none; margin: 0; padding: 0; } .here-col li { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 9px 0; border-top: 1.5px dashed var(--line); } .here-col li:first-child { border-top: 0; } .here-col .tk-icon { width: 36px; height: 36px; } .here-col li :is(a, strong) { display: inline-block; font-weight: 700; font-size: 1rem; } .here-col li p > span { display: block; } /* Phones: each part is a small tile with its icon and name, two to a row; the page it opens explains the rest, so the one-line descriptions stay for laptops. */ @media (max-width: 600px) { .here-col { padding: 16px 14px 14px; } .here-col ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; } .here-col li, .here-col li:first-child { align-items: center; gap: 8px; padding: 10px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px 14px 9px 13px / 13px 9px 14px 10px; } .here-col .tk-icon { width: 26px; height: 26px; } .here-col li p { font-size: 0.95rem; line-height: 1.25; } .here-col li p > span { display: none; } .here-col li { position: relative; } .here-col li a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the whole tile opens it */ .here-col li:has(a:hover) { border-color: var(--line-strong); background: var(--card); } } .home-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; margin-bottom: clamp(28px, 4vw, 48px); padding-top: 14px; border-top: 1.5px dashed var(--line-strong); } .here + .home-foot { margin-top: clamp(24px, 3vw, 34px); } .home-news { margin: 0; flex: 1 1 30rem; max-width: 60rem; color: var(--ink-soft); } .home-news .tag { margin-right: 0.4em; } .home-news a { white-space: nowrap; } /* "All changes" and "How to update" stay whole */ @media (max-width: 480px) { .home-news a { white-space: normal; } } /* except where even two words may not fit */ .home-share { margin: 0; display: flex; align-items: center; gap: 12px; } /* Icons for actions, drawn by hand like the callout icons: a button, file picker or quiet button opts in with data-icon="copy" (or download, add, remove, clear, search, bulb, eye, file, print, again, prev, next, check, undo). The icon is a mask in the text color, so it follows every state, theme and forced colors. One set for every tool: use these, never a new drawing for the same action. */ [data-icon]::before { content: ""; flex: none; width: 1.15em; height: 1.15em; background: currentColor; -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; } .tool-file-button[data-icon] { gap: 10px; } [data-icon="next"]::before { order: 2; } /* the arrow points the way: after the words */ .button-quiet[data-icon]::before { width: 20px; height: 20px; } [data-icon="copy"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M8.6 8.3C11.9 8.1 15.9 8.2 19.2 8.4C19.4 12.2 19.3 16.1 19.1 19.8C15.6 20 12.1 20 8.6 19.8C8.4 16 8.4 12.1 8.6 8.3Z%27/%3E%3Cpath d=%27M15.6 8.1C15.6 6.9 15.5 5.7 15.4 4.6C11.8 4.4 8.2 4.5 4.6 4.7C4.4 8.5 4.5 12.3 4.7 16C5.8 16.1 6.9 16.2 8.3 16.1%27/%3E%3C/svg%3E"); } [data-icon="download"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 4.2C12.1 7.7 12 11.4 12 15M7.6 10.6C9 12.1 10.5 13.6 12 15C13.6 13.6 15 12.1 16.4 10.5M5 19.6C9.6 19.3 14.4 19.4 19 19.5%27/%3E%3C/svg%3E"); } [data-icon="add"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 5.1C12.2 9.7 12.1 14.3 12 18.9M5.1 12.1C9.7 11.9 14.3 12 18.9 11.9%27/%3E%3C/svg%3E"); } [data-icon="remove"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6.5 6.8C9.6 10 14.4 14.6 17.4 17.6M17.3 6.4C14.2 9.8 9.8 14.2 6.6 17.5%27/%3E%3C/svg%3E"); } [data-icon="clear"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4.6 15.4C7.7 12.3 10.8 9.2 13.9 6.1C14.7 5.3 16 5.3 16.8 6.1L18.9 8.2C19.7 9 19.7 10.3 18.9 11.1C16.6 13.4 14.3 15.7 12 18H7.2Z%27/%3E%3Cpath d=%27M9.4 10.6C11 12.2 12.7 13.9 14.3 15.5M7 18.1C11 18 15 18 19 18.2%27/%3E%3C/svg%3E"); } [data-icon="search"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M16.4 10.6C16.5 13.8 13.8 16.5 10.6 16.5C7.4 16.6 4.7 14 4.6 10.8C4.5 7.6 7.1 4.8 10.4 4.7C13.6 4.6 16.3 7.2 16.4 10.4%27/%3E%3Cpath d=%27M15 15.1C16.7 16.7 18.3 18.4 19.9 20%27/%3E%3C/svg%3E"); } [data-icon="bulb"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9.2 18.2C11.1 18.1 13 18.1 14.9 18.2M10.2 21.1C11.4 21 12.6 21 13.8 21.1%27/%3E%3Cpath d=%27M9.6 15.8C9.4 14.5 8.6 13.6 7.8 12.6C6.2 10.6 6.4 7.4 8.4 5.6C10.5 3.7 13.9 3.8 15.8 5.9C17.6 7.8 17.6 10.8 16.1 12.7C15.3 13.7 14.5 14.6 14.4 15.8C12.8 15.9 11.2 15.9 9.6 15.8Z%27/%3E%3C/svg%3E"); } [data-icon="eye"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2.8 12.1C5 8.2 8.4 5.8 12 5.8C15.7 5.8 19.1 8.3 21.2 12C19 15.8 15.6 18.2 12 18.2C8.3 18.2 4.9 15.9 2.8 12.1Z%27/%3E%3Cpath d=%27M14.6 12C14.6 13.5 13.4 14.6 12 14.6C10.5 14.6 9.4 13.4 9.4 12C9.4 10.6 10.6 9.4 12 9.4C13.5 9.4 14.6 10.6 14.6 12.1%27/%3E%3C/svg%3E"); } [data-icon="file"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M7.1 3.6C9.4 3.5 11.7 3.5 14 3.6L18.1 7.7C18.2 11.9 18.2 16.2 18 20.4C14.4 20.6 10.7 20.5 7.1 20.4C6.9 14.8 6.9 9.2 7.1 3.6Z%27/%3E%3Cpath d=%27M13.9 3.7C13.9 5 13.9 6.4 14 7.7C15.4 7.8 16.7 7.8 18 7.7M12.5 17C12.6 15 12.5 13 12.5 11M10.1 13.4C10.9 12.6 11.7 11.8 12.5 11C13.3 11.8 14.1 12.6 14.9 13.4%27/%3E%3C/svg%3E"); } [data-icon="print"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M7.1 8.8C7 7.2 7 5.6 7.1 4C10.4 3.9 13.7 3.9 17 4C17.1 5.6 17.1 7.2 17 8.8%27/%3E%3Cpath d=%27M6.2 16.9C5.6 16.9 5 16.9 4.5 16.8C4.4 14.8 4.4 12.7 4.5 10.6C4.6 9.7 5.2 9.1 6.1 9C10 8.9 14 8.9 17.9 9C18.8 9.1 19.4 9.7 19.5 10.6C19.6 12.7 19.6 14.8 19.5 16.8C19 16.9 18.4 16.9 17.8 16.9%27/%3E%3Cpath d=%27M7.1 13.9C10.4 13.8 13.7 13.8 17 13.9C17.1 15.9 17.1 17.9 17 19.9C13.7 20.1 10.4 20.1 7.1 19.9C7 17.9 7 15.9 7.1 13.9Z%27/%3E%3C/svg%3E"); } [data-icon="again"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M19.1 12.2C19 16.1 15.8 19.2 11.9 19.1C8 19 4.9 15.8 5 11.9C5.1 8 8.3 4.9 12.2 5C14.2 5.1 15.9 5.9 17.1 7.2%27/%3E%3Cpath d=%27M18.9 4.4C18.9 5.8 18.9 7.2 18.8 8.5C17.4 8.6 16.1 8.6 14.7 8.5%27/%3E%3C/svg%3E"); } [data-icon="prev"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M14.6 5.6C12.4 7.8 10.2 9.9 8 12.1C10.2 14.2 12.4 16.3 14.7 18.5%27/%3E%3C/svg%3E"); } [data-icon="next"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9.4 5.6C11.6 7.8 13.8 9.9 16 12.1C13.8 14.2 11.6 16.3 9.3 18.5%27/%3E%3C/svg%3E"); } [data-icon="check"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4.8 12.8C6.4 14.2 8.1 15.8 9.6 17.6C12.4 13.1 15.6 9.1 19.3 5.6%27/%3E%3C/svg%3E"); } [data-icon="undo"] { --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9.2 9.8C11.5 9.6 13.7 9.6 15.9 9.9C18.4 10.3 19.9 12.4 19.6 14.8C19.4 17 17.4 18.6 15.2 18.5C13 18.5 10.8 18.5 8.6 18.4%27/%3E%3Cpath d=%27M8.6 5.9C7.3 7.2 6 8.5 4.7 9.8C6 11.1 7.3 12.4 8.6 13.7%27/%3E%3C/svg%3E"); } /* A quiet button: a small icon action beside a field (remove a row); no edge until you point at it. 44 px square for touch. */ .button-quiet { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--ink-soft); background: transparent; border: 1.5px solid transparent; border-radius: var(--wobble); cursor: pointer; } .button-quiet:is(:hover, :focus-visible) { color: var(--terra); border-color: currentColor; background: var(--terra-wash); } .button-quiet:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .button-small { min-height: 44px; padding: 8px 16px; font-size: 0.98rem; gap: 8px; box-shadow: 2px 2px 0 var(--btn-shadow); } .button-small svg { width: 18px; height: 18px; } .share-status { font-weight: 700; font-size: 0.95rem; color: var(--sage); } .share-status:empty { display: none; } @media (max-width: 1080px) { .guide-list.doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } } @media (max-width: 860px) { .guide-list.doors, .here-grid { grid-template-columns: minmax(0, 1fr); padding-right: 6px; gap: 20px; } } @media (max-width: 600px) { .home-top br { display: none; } /* the message wraps naturally on phones */ .home-top .lead { margin-bottom: 0.7em; } .home-actions .button { flex: 1 1 100%; } /* both ways to start, full width */ .home-more .sep { display: block; height: 0; overflow: hidden; } /* one link per line */ .tk-icon { width: 32px; height: 32px; } .doors .help-card > svg { float: none; width: 40px; height: 40px; } .doors .help-card .help-text { clear: none; } .home-foot { justify-content: flex-start; } } /* Page not found (site/404.html) */ .notfound { padding: clamp(24px, 6vw, 72px) var(--gutter) clamp(48px, 8vw, 96px); } .notfound-inner { max-width: 38rem; margin: 0 auto; text-align: center; } .notfound-art { display: block; width: 130px; height: auto; margin: 0 auto 1rem; } .dd .qmark { stroke: var(--terra); stroke-width: 5; } .notfound .lead { margin-inline: auto; } .notfound .hero-actions { justify-content: center; margin-bottom: 0.6rem; } /* ---------- 7. Guide layout --------------------------------------------- */ .guide-frame { --sidebar: 14rem; /* fits the longest page name, in bold ("Check your references"), on one line; scales with the type */ max-width: var(--page-max); margin: 0 auto clamp(32px, 5vw, 56px); padding: 8px var(--gutter) 0; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); gap: 56px; align-items: start; } /* Sidebar (wide screens) */ .guide-sidebar { position: sticky; top: 24px; max-height: calc(100dvh - 160px); /* leave room for the header before this sticks */ overflow-y: auto; padding: 30px 8px 8px 16px; margin-left: -16px; /* room for focus outlines outside the indented links */ scrollbar-width: thin; } .guide-sidebar-title { font-family: var(--font-display); font-style: italic; color: var(--muted); margin: 0 0 0.5rem; } .guide-groups { list-style: none; margin: 0; padding: 0; counter-reset: topic; } .guide-sidebar .guide-groups { margin-inline: -10px 0; } /* text, not the pill, sits on the page's left edge */ .guide-groups > li { margin: 0 0 16px; } /* the same gap as under "How do I…?" */ .guide-group { /* label above each group of pages: Core path, Go further */ display: block; padding: 0 10px 4px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .guide-nav { list-style: none; margin: 0; padding: 0; } .guide-nav li { margin: 1px 0; counter-increment: topic; } /* One marker column for the whole list, as wide as the "?" bubble above it: the core path is numbered, the optional "Go further" pages get a small hand-drawn ring in the same column, same color, centred on the first line. */ .guide-nav a { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: 10px; color: var(--ink-soft); text-decoration: none; font-size: 1rem; line-height: 1.35; } .guide-nav a::before { content: counter(topic); flex: 0 0 1.6rem; font-family: var(--font-display); font-size: 0.875rem; text-align: center; color: var(--muted); white-space: nowrap; } .guide-groups > li + li .guide-nav li { counter-increment: none; } .guide-groups > li + li .guide-nav a::before { content: ""; align-self: flex-start; height: 1.35rem; /* one line of the label (1rem at line-height 1.35) */ background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5.3 1.3C7.5 1.2 8.9 2.9 8.8 5.1 8.7 7.3 7.1 8.8 4.9 8.8 2.8 8.7 1.2 7.2 1.2 5 1.3 2.8 2.9 1.3 5.6 1.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center calc(50% + 1px) / 10px 10px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5.3 1.3C7.5 1.2 8.9 2.9 8.8 5.1 8.7 7.3 7.1 8.8 4.9 8.8 2.8 8.7 1.2 7.2 1.2 5 1.3 2.8 2.9 1.3 5.6 1.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center calc(50% + 1px) / 10px 10px; } .guide-nav .nav-text { min-width: 0; } .guide-nav a .tag, .guide-quick .tag { margin-left: 2px; font-size: 0.7rem; padding: 0 7px; } .guide-nav a[aria-current="page"] .tag, .guide-quick[aria-current="page"] .tag { font-weight: 700; } .guide-nav .tag-optional { padding: 0; background: none; border: 0; font-weight: 600; } .guide-nav a:hover, .guide-quick:hover { color: var(--ink); } :is(.guide-nav a, .guide-quick):hover .nav-text { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.22em; } .guide-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; /* the sidebar is wide enough for the longest name in bold (--sidebar) */ background: var(--sage-wash); border-radius: var(--sketch); } :is(.guide-nav a, .guide-quick)[aria-current="page"] .nav-text { text-decoration: none; } .guide-nav a[aria-current="page"]::before { color: var(--sage); } /* "How do I…?": quick answers, above the stages */ .guide-quick { display: flex; gap: 10px; align-items: center; min-height: 44px; margin: 0 0 16px; padding: 8px 10px 8px 8.5px; /* 8.5px + the 1.5px border: the "?" sits in the list's marker column */ color: var(--ink); font-weight: 700; font-size: 1rem; line-height: 1.35; text-decoration: none; background: var(--card); border: 1.5px dashed var(--line-strong); border-radius: var(--sketch); } .guide-sidebar .guide-quick { margin-inline: -10px 0; } .guide-quick-mark { /* a little hand-drawn "?" bubble */ display: inline-grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; font-family: var(--font-display); font-size: 1rem; color: var(--ink); background: var(--butter-wash); border: 1.5px solid var(--ink); border-radius: var(--wobble); } .guide-quick[aria-current="page"] { background: var(--sage-wash); } /* "Guide topics" disclosure (small screens only, see section 10) */ .guide-topics { display: none; } /* Reading column */ .guide-content { min-width: 0; padding-bottom: 8px; } .guide-content > * { max-width: 68ch; } /* comfortable lines of text */ .guide-content > :is(.table-wrap, figure, p:has(> img:only-child)) { max-width: none; } /* tables and drawings may use the whole column */ .guide-content > h1:first-child { margin-top: 26px; font-size: clamp(2.2rem, 1.7rem + 2.2vw, 3.1rem); } .guide-content > :is(h1:first-child, .page-tag) + p { font-size: 1.2rem; color: var(--ink-soft); line-height: 1.6; } .guide-content > h1:first-child:has(+ .page-tag) { margin-bottom: 0.25em; } .page-tag { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1.1rem; } /* several tags wrap with a gap (component gallery) */ /* .tag sets one size for every tag: page tags, the home page's "What's new". */ .guide-content :is(h2, h3, h4) { scroll-margin-top: 20px; } /* h2: a short hand-drawn underline */ .guide-content h2::after { content: ""; display: block; width: 64px; height: 8px; margin-top: 10px; background: var(--terra); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 8'%3E%3Cpath d='M2 5 C 14 2, 24 7, 36 4 S 56 3, 62 5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 8'%3E%3Cpath d='M2 5 C 14 2, 24 7, 36 4 S 56 3, 62 5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; } /* "On this page" (pages with many sections): a box under the opening paragraph, or a list beside the text on wide screens. */ .guide-content .page-toc { margin: 0 0 1.8rem; padding: 0 16px; background: transparent; border: 1.5px dashed var(--line-strong); border-radius: var(--sketch); font-size: 1rem; } .guide-content .page-toc > summary { margin: 0 -10px; padding: 9px 10px; font-weight: 700; } .guide-content .page-toc[open] > summary { margin-bottom: 6px; } .page-toc ol, .page-toc-wide ol { list-style: none; margin: 0; padding: 0; } .guide-content .page-toc ol { padding: 0 0 10px 24px; columns: 2 16rem; column-gap: 28px; } .guide-content .page-toc li { margin: 0; break-inside: avoid; } .page-toc a, .page-toc-wide a { display: inline-block; padding: 4px 0; line-height: 1.35; } .page-toc-wide { display: none; } @media (min-width: 1180px) { /* Every guide page keeps the same text column; the right rail stays empty on pages without "On this page", so text never jumps between pages. */ /* The text column grows only a little past the 68ch measure, so "On this page" stays next to the text. */ .guide-frame { grid-template-columns: var(--sidebar) minmax(0, 74ch) 11rem; gap: 44px; } .guide-sidebar { grid-column: 1; grid-row: 1; } .guide-content { grid-column: 2; grid-row: 1; } .has-toc .guide-content .page-toc { display: none; } .page-toc-wide { grid-column: 3; grid-row: 1; /* keyboard order puts this before the article */ display: block; position: sticky; top: 24px; padding: 30px 8px 8px 0; /* room for the focus ring, which overflow would clip */ max-height: calc(100vh - 24px); overflow-y: auto; font-size: 0.9rem; } .page-toc-wide li { border-left: 1.5px dashed var(--line-strong); padding-left: 12px; } .page-toc-wide a { color: var(--ink-soft); text-decoration: none; padding: 5px 0; } .page-toc-wide a:hover { color: var(--link); text-decoration: underline; } } /* Tool pages (the build marks them .page-tool): the same frame as every page, but no right-hand rail ("On this page" stays as the box in the text), so forms, the converter's two panes and results use the whole main column. Prose keeps its 68ch measure. */ @media (min-width: 1180px) { /* Tools use the text and "On this page" columns together. */ .page-tool .guide-frame { grid-template-columns: var(--sidebar) minmax(0, 1fr); gap: 44px; } } .tool-mark { display: inline-block; width: 1.1em; height: 1.1em; margin-right: 0.3em; vertical-align: -0.18em; } /* the tool's doodle from the home page */ @media (max-width: 600px) { .tool-mark { width: 0.85em; height: 0.85em; margin-right: 0.2em; vertical-align: -0.1em; } } /* Previous / next */ .guide-end { /* the dashed rule, then "Back to top" at the end of the column, then previous / next */ margin: 3.4rem 0 0; padding-top: 1.1rem; border-top: 1.5px dashed var(--line-strong); } .pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; } .pager a { /* card-like buttons: lift on hover, press flat when clicked */ display: block; min-height: 44px; padding: 14px 18px; background: var(--card); color: var(--link); border: 1.5px solid var(--control-edge); /* >= 3:1 UI boundary; the soft shadow stays decorative */ border-radius: var(--sketch); box-shadow: 3px 3px 0 var(--line-strong); font-weight: 700; font-size: 1.1rem; line-height: 1.35; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .pager a:is(:hover, :focus-visible) { border-color: var(--ink); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--line-strong); } .pager a:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--line-strong); } .pager a:focus-visible { outline-offset: 4px; border-radius: var(--sketch); } .pager-label { display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1rem; color: var(--muted); } .pager-prev .pager-label::before { content: "← " / ""; } .pager-next .pager-label::after { content: " →" / ""; } .pager-next { grid-column: 2; text-align: right; } .guide-content .page-feedback { margin: 2.2rem 0 0.6rem; font-size: 0.95rem; line-height: 1.45; color: var(--muted); } .guide-content .to-top { margin: 0 0 1.1rem; font-size: 0.95rem; line-height: 1.4; text-align: right; } .guide-content .to-top a { display: inline-block; padding: 8px 0 8px 10px; } /* a comfortable touch target */ /* ---------- 8. Guide content (what Pandoc makes from Markdown) ----------- */ .guide-content ul, .guide-content ol { padding-left: 1.4em; margin: 0 0 1.1em; } .guide-content ol { padding-left: 1.7em; } /* room for "10." and its space */ .guide-content li { margin: 0.3em 0; } .guide-content li > p { margin-bottom: 0.4em; } .guide-content li > :is(ul, ol) { margin: 0.3em 0 0; } /* a nested list keeps the items' rhythm */ .guide-content li::marker { color: var(--terra); } .guide-content ol > li::marker { font-family: var(--font-display); font-weight: 600; } /* An en space after the number, so the bold numeral never touches the text. Only on numbered lists: lists styled without markers carry role="list". */ .guide-content ol:not([role="list"]) > li::marker { content: counter(list-item) ".\2002"; } .guide-content blockquote { /* indented and softer; no rule at the edge */ margin: 1.4rem 0 1.4rem 1.4em; padding: 0; font-style: italic; color: var(--ink-soft); } .guide-content blockquote > :last-child { margin-bottom: 0; } .guide-content hr { border: 0; border-top: 1.5px dashed var(--line-strong); margin: 2.4rem 0; } /* Checklists ("- [ ]" in Markdown): a hand-drawn box you can tick while you read. Nothing is saved; the ticks clear when you leave the page. The box sits on the first line and wrapped lines align with the text. */ .guide-content ul.task-list { list-style: none; padding-left: 0; } .guide-content .task-list li { margin: 0.55em 0; } .task-list label { display: block; position: relative; padding-left: 1.9em; cursor: pointer; } .task-list input[type="checkbox"] { -webkit-appearance: none; appearance: none; font: inherit; /* form controls default to 13.33px; size the box to the text instead */ position: absolute; left: 0; top: 0.225em; /* centred on the first line: (1.65em line - 1.2em box) / 2 */ top: calc(0.5lh - 0.6em); width: 1.2em; height: 1.2em; margin: 0; background: var(--card) no-repeat center / 100%; border: 2px solid var(--muted); border-radius: 5px 4px 6px 4px / 4px 6px 4px 5px; cursor: pointer; } .task-list label:hover input { border-color: var(--ink); } .task-list input:checked { background-color: var(--sage-wash); border-color: var(--sage); background-image: var(--tick); } .task-list input:focus-visible { outline-offset: 2px; } .task-list { --tick: var(--checkmark); } /* Pictures and diagrams: centered, never wider than the column. An italic paragraph right after a picture ("*In words:* …") reads as its caption. */ .guide-content img { display: block; margin: 0 auto; } .guide-content p:has(> img:only-child), .guide-content figure { margin: 1.5rem 0 1.8rem; text-align: center; } .guide-content :is(p:has(> img:only-child), figure.diagram):has(+ p > em:first-child) { margin-bottom: 0.8rem; } .guide-content :is(p:has(> img:only-child), figure.diagram) + p:has(> em:first-child), .guide-content figcaption { max-width: 54ch; margin: 0 auto 1.8rem; font-size: 1rem; line-height: 1.55; color: var(--muted); text-align: center; } .guide-content figcaption { font-family: var(--font-display); font-style: italic; margin-top: 0.8rem; } /* Diagrams (the build wraps each one): the link under the drawing opens it full size */ .guide-content figure.diagram { scroll-margin-top: 20vh; } .guide-content .diagram-open { /* centered under its picture, everywhere */ display: flex; width: fit-content; align-items: center; min-height: 44px; margin: 10px auto 0; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.9rem; line-height: 1.4; text-decoration: none; } .guide-content .diagram-open:is(:hover, :focus-visible) { border-color: var(--link); background: var(--blue-wash); } /* Full-size pictures (viewer_dialog in scripts/build_site.py, and the class example): a dialog over the page that viewer.js opens as a modal. Without JavaScript the dialog stays closed and the link opens the picture file. Same look in both themes: a dark surround, the picture on its own paper. */ dialog.viewer { position: fixed; inset: 0; z-index: 100; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 64px clamp(12px, 4vw, 48px) clamp(12px, 3vw, 32px); border: 0; color: var(--overlay-ink); background: var(--overlay-bg); /* underlying page text must not compete with the picture */ overflow: auto; } dialog.viewer::backdrop { background: transparent; } dialog.viewer[open] { display: grid; place-items: center; } .viewer-hint { display: none; } html:has(dialog.viewer[open]) { overflow: hidden; } /* the page behind stays put */ .viewer img { display: block; max-width: 100%; max-height: calc(100vh - 96px); width: auto; height: auto; background: var(--paper); /* a diagram's own paper, in either theme */ border-radius: 6px; box-shadow: 0 10px 40px rgb(0 0 0 / 0.45); } .viewer-pan { /* viewer.js wraps the picture so it can be panned from the keyboard */ display: grid; justify-items: center; width: 100%; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow: auto; } .viewer-pan:focus-visible { outline: 3px solid var(--overlay-ink); outline-offset: 2px; } .viewer img[src$=".svg"] { width: min(100%, 1400px); object-fit: contain; padding: clamp(8px, 2vw, 20px); } .viewer-close { display: inline-flex; align-items: center; min-height: 44px; position: fixed; top: 14px; right: clamp(12px, 3vw, 28px); padding: 6px 16px; color: var(--overlay-ink); font-weight: 700; text-decoration: none; background: rgb(0 0 0 / 0.35); border: 1.5px solid color-mix(in srgb, var(--overlay-ink) 70%, transparent); border-radius: 999px; } .viewer-close:hover { background: rgb(0 0 0 / 0.6); border-color: var(--overlay-ink); } .viewer-close:focus-visible { outline: 2px solid var(--overlay-ink); outline-offset: 3px; } @media (max-width: 600px) { /* phones: each table row becomes a small card, nothing hidden off to the side */ .guide-content .table-wrap { overflow: visible; } .guide-content .table-wrap :is(table, tbody, tr, td) { display: block; width: auto; } .guide-content .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .guide-content .table-wrap tr { padding: 12px 16px; border-top: 1px solid var(--line); } .guide-content .table-wrap tbody tr:first-child { border-top: 0; } .guide-content .table-wrap td { padding: 2px 0; border: 0; } .guide-content .table-wrap td:empty { display: none; } /* no label over nothing */ .guide-content .table-wrap td:first-child { padding-bottom: 4px; font-weight: 700; color: var(--ink); } .guide-content .table-wrap td[data-label]::before { content: attr(data-label); display: block; margin-top: 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } } @media (max-width: 600px) { /* phones: show it larger and let readers pan */ dialog.viewer[open] { justify-items: start; } .viewer-pan { justify-items: start; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); } .viewer img, .viewer img[src$=".svg"] { width: 760px; max-width: none; max-height: none; } .viewer-hint { display: block; position: fixed; top: 64px; left: 12px; right: 12px; margin: 0; padding: 6px 10px; color: var(--overlay-ink); background: var(--overlay-bg); border-radius: 6px; font-size: 0.9rem; text-align: left; } dialog.viewer { padding-top: 120px; } } /* Pictures of the sample PDF (scripts/previews.py), left-aligned under their text */ .guide-content figure.shot { margin: 0.4rem 0 1.4rem; } .guide-content figure.shot figcaption { max-width: none; margin: 0.45rem 0 0; font-size: 0.95rem; text-align: left; } .guide-content figure.shot img { display: block; width: 100%; background: #fff; border: 1.5px solid var(--line-strong); border-radius: 6px; } /* Callouts: > [!TIP] becomes

Tip

… */ .note, .tip, .important, .warning, .caution { --c: var(--blue); --w: var(--blue-wash); margin: 1.6rem 0; padding: 14px 20px 16px; background: var(--w); border: 1.5px solid color-mix(in srgb, var(--c) 40%, transparent); border-radius: 6px 18px 8px 16px / 16px 8px 18px 6px; } .tip { --c: var(--sage); --w: var(--sage-wash); } .important { --c: var(--plum); --w: var(--plum-wash); } .warning, .caution { --c: var(--terra); --w: var(--terra-wash); } :is(.note, .tip, .important, .warning, .caution) > .title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } :is(.note, .tip, .important, .warning, .caution) > .title p { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--c); } :is(.note, .tip, .important, .warning, .caution) > .title::before { content: ""; width: 22px; height: 22px; flex: none; background: var(--c); -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; } :is(.note, .tip, .important, .warning, .caution) p { margin-bottom: 0.8em; } :is(.note, .tip, .important, .warning, .caution) > :last-child { margin-bottom: 0; } :is(.note, .tip, .important, .warning, .caution) code { background: var(--card); } /* Icons, hand-drawn: pencil (tip), pinned note (note), star (important), "!" in a triangle (warning) */ .tip { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.1 20.1C4.4 18.5 4.8 16.9 5.3 15.3C8.8 11.8 12.2 8.3 15.8 4.8C16.6 4 17.9 4 18.7 4.8L19.3 5.4C20.1 6.2 20.1 7.5 19.3 8.3C15.8 11.9 12.3 15.3 8.8 18.8C7.2 19.3 5.7 19.7 4.1 20.1Z'/%3E%3Cpath d='M14 6.7C15.1 7.8 16.3 8.9 17.4 10.1M5.3 15.3C6.6 15.9 8 17.3 8.8 18.8'/%3E%3C/svg%3E"); } .note { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 7.5 19 6.6l.5 13.4-13.5.6z'/%3E%3Cpath d='M9 12.5h7M9 16h5'/%3E%3Ccircle cx='12.3' cy='5.6' r='2'/%3E%3C/svg%3E"); } .important { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.1 3.4C12.9 5.2 13.6 7 14.5 8.8C16.3 9 18.2 9.2 20.1 9.5C18.7 10.8 17.3 12.1 15.9 13.4C16.2 15.2 16.6 17 17 18.9C15.4 17.9 13.7 17 12.1 16C10.4 16.9 8.7 17.9 7 18.8C7.4 17 7.8 15.2 8.2 13.3C6.8 12 5.4 10.7 4 9.4C5.9 9.2 7.7 9 9.6 8.7C10.4 6.9 11.2 5.2 12.1 3.4Z'/%3E%3C/svg%3E"); } .warning, .caution { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5C15 9 18 14 21.2 19.6 15 20.2 9 19.8 2.8 19.6 6 14 9 9 12 3.5z'/%3E%3Cpath d='M12 9.5v5M12 17.3v.2'/%3E%3C/svg%3E"); } /* Details: optional sections, closed until wanted */ .guide-content details { margin: 1.6rem 0; padding: 0 20px; background: var(--card); border: 1.5px dashed var(--line-strong); border-radius: var(--radius); } .guide-content summary { list-style: none; cursor: pointer; margin: 0 -12px; /* room inside the box for the focus ring, which then never crosses the dashed edge */ padding: 14px 12px; border-radius: 10px; font-weight: 700; line-height: 1.4; display: flex; align-items: flex-start; gap: 12px; } .guide-content summary::-webkit-details-marker { display: none; } .guide-content summary::before { /* chevron: right when closed, down when open */ content: ""; width: 10px; height: 10px; flex: none; margin: calc((1.4em - 10px) / 2) 0 0 2px; /* centred on the first line */ border-right: 2.5px solid var(--terra); border-bottom: 2.5px solid var(--terra); transform: rotate(-45deg); transition: transform .15s ease; } .guide-content details[open] { padding-bottom: 6px; } .guide-content details[open] > summary { margin-bottom: 14px; border-bottom: 1.5px dashed var(--line); border-radius: 10px 10px 0 0; } /* a straight rule under the summary */ .guide-content details[open] > summary::before { transform: rotate(45deg); } .guide-content summary:hover { color: var(--link); } .guide-content summary:focus-visible { outline-offset: -3px; } /* Code blocks */ /* Long lines scroll sideways. A soft shadow at an edge means "more this way"; it disappears when you reach the end, and nothing shows when the code fits. */ .guide-content pre, .table-wrap { --fill: var(--paper-2); overflow-x: auto; background: linear-gradient(to right, var(--fill) 40%, transparent) left / 28px 100% no-repeat local, linear-gradient(to left, var(--fill) 40%, transparent) right / 28px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, var(--scroll-hint), transparent) left / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, var(--scroll-hint), transparent) right / 12px 100% no-repeat scroll, var(--fill); scrollbar-width: thin; } :is(.guide-content pre, .table-wrap)::-webkit-scrollbar { height: 8px; } :is(.guide-content pre, .table-wrap)::-webkit-scrollbar-track { background: transparent; } :is(.guide-content pre, .table-wrap)::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; } .guide-content pre { margin: 0 0 1.2rem; padding: 16px 20px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 0.9rem; line-height: 1.65; tab-size: 2; } /* LaTeX colors (tok-* spans from scripts/build_site.py and site/tools-highlight.js) */ .tok-cmd { color: var(--code-cmd); } .tok-brace { color: var(--code-brace); font-weight: 700; } .tok-opt { color: var(--code-opt); } .tok-math { color: var(--code-math); } .tok-com { color: var(--code-com); font-style: italic; } /* Prose prompts wrap; LaTeX, commands and diagnostic logs keep their spacing. */ .guide-content pre.prompt, .guide-content pre.prompt code { font-family: var(--font-body); font-size: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; } /* Optional Copy controls occupy their own row, never the example's text. */ .code-block { margin: 0 0 1.2rem; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper-2); } .code-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px 6px 20px; /* the label starts where the code does */ border-bottom: 1px solid var(--line); line-height: 1.2; color: var(--muted); font-size: 0.8rem; } .guide-content .code-block > pre { margin: 0; padding-top: 8px; border: 0; border-radius: 0 0 11px 11px; } .copy-button { flex: none; min-height: 30px; padding: 2px 12px; font: inherit; font-size: 0.8rem; font-weight: 700; line-height: 1.2; color: var(--ink-soft); background: var(--card); border: 1.5px solid var(--control-edge); border-radius: var(--sketch); box-shadow: 2px 2px 0 var(--line-strong); cursor: pointer; } .copy-button:is(:hover, :focus-visible) { color: var(--ink); border-color: var(--ink); } .copy-button:active { box-shadow: none; transform: translate(2px, 2px); } .copy-button:focus-visible { outline-offset: 2px; } /* Tables: the build wraps each one in .table-wrap, which scrolls if needed */ .table-wrap { position: relative; /* keep off-screen link labels inside the scroll box */ --fill: var(--card); margin: 1.4rem 0 1.8rem; border: 1.5px solid var(--line); border-radius: 12px; } .guide-content table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.45; } .guide-content th { text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; padding: 11px 14px; background: var(--table-head); border-bottom: 2px solid var(--line-strong); } .guide-content td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; } .guide-content tr:first-child td { border-top: 0; } .guide-content code.keep { white-space: nowrap; } /* short names stay whole (build_site.py) */ .guide-content :not(pre) > code { -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* a wrapped chip keeps its edges */ .guide-content code.keep-path .nowrap { white-space: nowrap; } /* a path breaks only after a slash */ .guide-content td code { overflow-wrap: break-word; } /* "style=numeric,sorting=none" stays whole */ .guide-content td:first-child code:not(.phrase, .long) { white-space: nowrap; } /* keys and file names; messages wrap */ .guide-content td code.long { overflow-wrap: anywhere; } .page-project .guide-content td code { white-space: normal; overflow-wrap: anywhere; } /* maintainer tables carry long identifiers */ .guide-content th:empty { padding: 0; } @media (max-width: 640px) { /* narrow screens or large text: a long name wraps rather than widening the page */ /* A short name moves to the next line whole, and breaks inside only when it is wider than the whole line (large text on a phone). */ .guide-content code.keep, .guide-content td:first-child code.keep { display: inline-block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; vertical-align: bottom; } .guide-content code.keep-path .nowrap, .guide-content td code:not(.keep), .guide-content td:first-child code:not(.phrase, .long, .keep) { white-space: normal; overflow-wrap: anywhere; } } /* ---------- 9. Footer ---------------------------------------------------- */ /* About and the edition stamp on the left; four short link columns (Guide, Tools, Project, Help) on the right. Help puts the no-account form first. */ .site-footer { background: var(--footer); border-top: 1px solid var(--line); } .footer-inner { max-width: var(--page-max); margin: 0 auto; padding: 30px var(--gutter) 34px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: 24px 56px; } .footer-name { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .footer-name strong { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink); } .footer-note { margin: 0 0 14px; max-width: 42ch; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); } /* The edition line, styled as a calm "last checked" stamp */ .edition { display: inline-block; margin: 0; padding: 6px 12px 6px 34px; font-size: 0.82rem; line-height: 1.45; color: var(--muted); border: 1.5px dashed var(--line-strong); border-radius: var(--sketch); background: var(--card); position: relative; } .edition::before { /* small check mark */ content: ""; position: absolute; left: 11px; top: 50%; width: 16px; height: 12px; margin-top: -6px; background: var(--sage); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6.5 C 3 7.5, 4.5 9, 5.8 10.5 C 8 6.5, 11 3.5, 14.5 1.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6.5 C 3 7.5, 4.5 9, 5.8 10.5 C 8 6.5, 11 3.5, 14.5 1.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; } .updated { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--muted); } .footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; } .footer-head { margin: 0 0 4px; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin: 0; line-height: 1.35; } .footer-col a { display: inline-block; padding: 6px 0; font-size: 0.95rem; color: var(--ink-soft); text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); /* underline in the text's own color */ } .footer-col a:hover { color: var(--link); } .footer-aside { display: block; margin-top: -4px; font-size: 0.85rem; color: var(--muted); } .site-footer a[aria-current="page"] { /* the same sage pill as the header and sidebar */ margin-left: -8px; padding-inline: 8px; color: var(--ink); text-decoration: none; background: var(--sage-wash); border-radius: var(--sketch); } @media (max-width: 1080px) { .footer-inner { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Optional guide search: the same paper and ink in both themes. */ .search-open { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); background: var(--card); border: 2px solid var(--btn-edge-2); border-radius: var(--sketch); /* as .appearance-toggle */ box-shadow: 2px 2px 0 var(--btn-shadow); font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; min-height: 44px; padding: 8px 13px; text-align: left; } .search-open:hover, .search-close:hover { color: var(--ink); background: var(--paper-2); } .search-icon { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .search-open[hidden], .guide-search[hidden] { display: none; } .search-dialog { color: var(--ink); background: var(--paper); border: 1.5px solid var(--control-edge); border-radius: 16px; padding: 22px; width: min(680px, calc(100% - 24px)); max-width: none; max-height: min(760px, calc(100dvh - 64px)); margin: 5vh auto auto; overflow: hidden; box-shadow: 0 18px 70px #0004; } .search-dialog::backdrop { background: #1119; } .search-dialog[open] { display: flex; flex-direction: column; } @media screen { html:has(.search-dialog[open]) { overflow: hidden; } } .search-dialog-bar { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .search-dialog-bar > span { font-family: var(--font-display); font-size: 1.3rem; font-style: italic; } .search-close { min-height: 44px; padding: 6px 10px; border: 0; border-radius: 6px; font: inherit; font-size: 0.9rem; color: var(--muted); background: transparent; cursor: pointer; } .guide-search { margin: 0 0 24px; } .search-dialog .guide-search { display: flex; flex-direction: column; min-height: 0; margin: 0; } .search-dialog .guide-search > :not(.search-results) { flex-shrink: 0; } .search-dialog .guide-search .search-results { overflow-y: auto; min-height: 0; padding: 0 4px; scrollbar-width: thin; } .guide-search label { display: block; font-weight: 700; margin-bottom: 8px; } .guide-search input { display: block; width: 100%; min-width: 0; min-height: 50px; padding: 10px 12px; border: 1.5px solid var(--control-edge); border-radius: 8px; font: inherit; font-size: 1rem; color: var(--ink); background: var(--card); } .guide-search input::placeholder { color: var(--muted); opacity: 1; } .guide-search .search-hint, .guide-search .search-status { color: var(--muted); font-size: 0.9rem; line-height: 1.4; margin: 10px 0; } .guide-search .search-status { margin: 12px 0 8px; } .guide-search .search-results { list-style: none; padding: 0; margin: 0; } .guide-search .search-results li { margin: 0; border-top: 1px solid var(--line); } .search-result { display: block; padding: 12px 8px; color: var(--ink); text-decoration: none; border-radius: 6px; overflow-wrap: anywhere; } .search-result:hover, .search-result:focus-visible { background: var(--paper-2); } .search-result:focus-visible { outline-offset: -3px; } .search-result span { display: block; } .search-result-page { color: var(--muted); font-size: 0.8rem; } .search-result-title { font-weight: 700; line-height: 1.35; margin: 3px 0 5px; } .search-result .search-result-text { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .search-result mark { color: inherit; background: var(--butter-wash); border-radius: 2px; margin: 0 -2px; } /* the highlight adds no space between letters */ .guide-content tr:target { outline: 2px solid var(--focus); outline-offset: 2px; scroll-margin-top: 24px; } @media (max-width: 600px) { .search-dialog { padding: 16px; margin-top: 12px; max-height: calc(100dvh - 24px); } } @media print { .search-open, .guide-search, .search-dialog[open] { display: none; } } /* ---------- 10. Small screens ------------------------------------------- */ @media (max-width: 1080px) { .guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .guide-frame { grid-template-columns: minmax(0, 1fr); gap: 0; } .guide-sidebar { display: none; } .guide-topics { display: block; margin: 4px 0 6px; background: var(--card); border: 1.5px solid var(--line-strong); border-radius: var(--radius); } .guide-topics > summary { list-style: none; cursor: pointer; padding: 12px 16px; display: flex; align-items: center; gap: 8px; font-weight: 700; } .guide-topics > summary::-webkit-details-marker { display: none; } .guide-topics-here { font-weight: 400; color: var(--muted); flex: 1; min-width: 0; } .guide-topics-here:not(:empty)::before { content: "· "; } .guide-topics > summary::after { content: ""; width: 9px; height: 9px; flex: none; margin-left: auto; border-right: 2.5px solid var(--terra); border-bottom: 2.5px solid var(--terra); transform: translateY(-3px) rotate(45deg); } .guide-topics[open] > summary::after { transform: translateY(2px) rotate(-135deg); } .guide-topics > nav { padding: 0 12px 8px; } .guide-topics .guide-groups { padding: 10px 0 4px; border-top: 1.5px dashed var(--line); } .guide-topics .guide-group { padding-inline: 8px; } .guide-topics .guide-nav a { padding: 11px 8px; min-height: 44px; } /* label centred in the 44px row */ .guide-topics .guide-quick { padding-left: 6.5px; } /* + 1.5px border: "?" in the marker column */ } @media (max-width: 640px) { body { font-size: 1.0625rem; } /* 17px */ .site-header { padding-top: 16px; padding-bottom: 12px; } .site-header { gap: 10px 12px; } .wordmark { font-size: 1.15rem; gap: 8px; } .wordmark-logo { width: 24px; height: 24px; } .brand { column-gap: 8px; } .header-tools { gap: 6px; align-self: start; } .search-header { width: 44px; padding: 10px; justify-content: center; } .search-header > span { display: none; } .site-nav { gap: 0 2px; margin-left: -8px; } .site-nav a { font-size: 0.95rem; padding: 2px 8px; } .page-guide .site-nav { display: none; } /* "Guide topics", just below, lists every page */ .guide-topics-here { display: none; } /* the page title immediately below already names this page */ .guide-topics-here::before { content: none; } .unofficial-more { display: none; } /* phones: just "Unofficial" */ .lead { font-size: 1.15rem; } .guide-list { grid-template-columns: minmax(0, 1fr); } .guide-content > :is(h1:first-child, .page-tag) + p { font-size: 1.1rem; } .guide-content :is(p:has(> img:only-child), figure.diagram) { margin-inline: -10px; } /* diagrams get a little more room */ /* PDF crops keep a readable size and scroll sideways inside their box */ .guide-content .shot-scroll { overflow-x: auto; scrollbar-width: thin; } .guide-content figure.shot img { width: 480px; max-width: none; } .note, .tip, .important, .warning, .caution { padding: 12px 16px 14px; } .guide-content details { padding: 0 16px; } .guide-content pre { padding: 12px 14px; font-size: 0.85rem; } .code-toolbar { padding-left: 14px; } .copy-button { min-height: 36px; } .guide-content pre, .guide-content pre code { white-space: pre-wrap; overflow-wrap: anywhere; } /* phones: wrap, never clip; Copy still copies the original lines */ .guide-content th, .guide-content td { padding: 9px 11px; } .guide-content td:first-child code { white-space: normal; overflow-wrap: break-word; padding: 0.05em 0.25em; } .pager { grid-template-columns: minmax(0, 1fr); } .pager-next { grid-column: 1; } } @media (max-width: 420px) { .hero-actions .button { width: 100%; } /* stack the main buttons full width */ } /* ---------- 11. Motion and print ---------------------------------------- */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ===== Optional motion: five small touches, each under 1 s; only the tool ring loops, while it works. Delete this whole block for a fully still site; nothing else depends on it. Off for anyone who asks for reduced motion. 1. the home page message's underline draws itself once on load 2. cards lift a little on hover or keyboard focus 3. Optional details boxes ease open 4. a tool's results and errors fade in when they first appear, and its working ring turns while it works (the one loop; it stops when done) 5. a switch's knob slides */ @media (prefers-reduced-motion: no-preference) { .home-top .squiggle::after { animation: draw-in .8s .35s ease-out both; } .help-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .help-card:is(:hover, :focus-within) { transform: translate(-1px, -2px); } @supports (interpolate-size: allow-keywords) { .guide-content details { interpolate-size: allow-keywords; } .guide-content details::details-content { block-size: 0; overflow-y: clip; transition: block-size .25s ease, content-visibility .25s allow-discrete; } .guide-content details[open]::details-content { block-size: auto; } } .tool-results:not(:empty), .tool-error { animation: rise-in .3s ease-out both; } .tool-status[data-state="working"]::before { animation: turn 1.1s linear infinite; } /* only while working */ .tool-switch input::before { transition: left .15s ease, border-color .15s ease; } } @keyframes draw-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2px 0 0); } } @keyframes rise-in { from { opacity: 0; transform: translateY(6px); } } @keyframes turn { to { transform: rotate(360deg); } } /* ===== End of optional motion ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } .button:is(:hover, :focus-visible, :active), .pager a:is(:hover, :focus-visible, :active), .text-link:active, .text-link:is(:hover, :focus-visible) .arrow { transform: none; } } /* Print: every page prints as a plain black-on-white document (handy for checklists), whatever the screen theme and whether or not the browser's "background graphics" option is on. The tokens are reset to print values, so the dark-theme colors above never reach paper. */ /* The optional one-word class example uses native radio buttons, no script. */ .class-demo { position: relative; min-width: 0; margin: 1.4rem 0; padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: start; gap: 0; background: var(--card); border: 1.5px solid var(--line-strong); border-radius: 12px; } .class-demo legend { max-width: 100%; padding: 0 8px; font-weight: 700; font-size: 0.95rem; line-height: 1.4; } /* A segmented control: the native radios stay (keyboard, arrow keys) but are visually hidden; each label is a segment, same look as the appearance menu. */ .class-demo > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .class-demo > label { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 12px; text-align: center; font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink); background: transparent; cursor: pointer; border: 1.5px solid var(--line-strong); } .class-demo > label + input + label { border-left-width: 0; border-radius: 0 10px 10px 0; } .class-demo > label:first-of-type { border-radius: 10px 0 0 10px; } .class-demo > label:hover { background: var(--paper-2); } .class-demo > input:checked + label { background: var(--sage-wash); font-weight: 700; } @media (max-width: 400px) { .class-demo { padding: 12px; } } .class-demo > input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; position: relative; z-index: 1; } .class-demo-panels { grid-column: 1 / -1; min-width: 0; margin-top: 8px; } .guide-content .class-demo-line { margin: 10px 0 14px; text-align: center; } .class-demo-line code { padding: 0; border: 0; background: none; font-size: clamp(0.8rem, 2vw, 1rem); white-space: normal; overflow-wrap: anywhere; } .class-demo-line mark { padding: 2px 3px; border-radius: 3px; color: var(--ink); background: var(--blue-wash); font-weight: 700; } .guide-content .class-demo-panel > figure { margin: 0; } .guide-content .class-demo-panel > figure img { width: 100%; max-width: 560px; height: auto; border: 1px solid #888; background: #fff; } .guide-content .class-demo-panel figcaption { margin: 10px 0; font-size: 0.8rem; color: var(--muted); } @media (max-width: 600px) { .class-demo { padding: 0; border: 0; background: none; } .class-demo legend { padding: 0; margin-bottom: 6px; } .class-demo-panels { margin-top: 0; } .guide-content .class-demo-line { margin: 8px 0 10px; } } #choose-class-demo-ams:checked ~ .class-demo-panels > .class-demo-ieee, #choose-class-demo-ieee:checked ~ .class-demo-panels > .class-demo-ams { display: none; } @media print { .class-demo > input, .class-demo > label, .class-demo legend { display: none; } .class-demo { display: block; } .class-demo .class-demo-panel { display: block !important; break-inside: avoid; } } @media print { .site-header, .nav-menu-list, .guide-sidebar, .guide-topics, .pager, .guide-end, .skip-link, .site-footer, .hero-actions, .diagram-open, .viewer, .page-toc, .page-toc-wide, .code-toolbar, .page-feedback { display: none !important; } .code-block { border: 0; background: none; } .guide-content .code-block > pre { padding-top: 16px; } :root, :root[data-theme], :root:not([data-theme]) { color-scheme: light; --paper: #fff; --paper-2: #fff; --card: #fff; --table-head: #fff; --control-edge: #000; --ink: #000; --ink-soft: #111; --muted: #333; --line: #bbb; --line-strong: #888; --btn-edge: #000; --btn-edge-2: #000; --btn-shadow: transparent; --sage: var(--light-sage); --blue: var(--light-blue); --terra: var(--light-terra); --plum: var(--light-plum); /* light-theme accents, for markers and rules */ --sage-wash: #fff; --blue-wash: #fff; --terra-wash: #fff; --plum-wash: #fff; --butter-wash: #fff; --rpi-red: var(--light-red); --on-red: #fff; --link: #000; --focus: #000; --scroll-hint: transparent; } html, body { background: #fff !important; color: #000; } body { font-size: 11pt; } *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; } .guide-frame { display: block; max-width: none; margin: 0; padding: 0; } .guide-content { max-width: none; } .guide-content h2::after { display: none; } a { color: #000; text-decoration: underline; } :is(main, .site-footer) a[href^="http"]:not(.button)::after { content: " (" attr(href) ")"; font-size: 0.85em; overflow-wrap: anywhere; display: inline; width: auto; height: auto; margin: 0; background: none; -webkit-mask: none; mask: none; } /* White boxes, black text, thin grey borders */ .card, .note, .tip, .important, .warning, .caution, details, summary, code, kbd, mark, .guide-content pre, .table-wrap, th, td, .tag, .edition, .guide-quick { background: #fff !important; color: #000 !important; } .card, details, .table-wrap, .guide-content pre { border-color: #888 !important; } .tag { border-color: #888 !important; } .home-top .squiggle::after { /* the wave prints as a plain underline, not a heavy bar */ -webkit-mask: none; mask: none; background: none; height: 0; bottom: -0.08em; border-bottom: 2px solid var(--rpi-red); } .lead { font-size: 1.1rem; max-width: 36ch; } .guide-content > :is(h1:first-child, .page-tag) + p { font-size: 1em; max-width: 68ch; } .guide-content pre { white-space: pre-wrap; overflow: visible; } .table-wrap { overflow: visible; } .guide-content td:first-child code { white-space: normal; } pre, .table-wrap, figure, p:has(> img:only-child), .note, .tip, .important, .warning, .caution, tr, .card { break-inside: avoid; } /* A table of six or more rows may break between rows (each row stays whole) rather than leave a blank half page before it. */ .table-wrap:has(tbody tr:nth-child(6)) { break-inside: auto; } h1, h2, h3, h4, summary, .eyebrow { break-after: avoid; } /* a heading block stays with what follows */ /* Diagrams and pictures: always shown, never recolored */ img { filter: none !important; } .guide-content img { max-height: 5.5in; width: auto; } :is(.note, .tip, .important, .warning, .caution) { --c: #000; border-color: #888; } /* Checklists: empty black boxes; a tick only where one was ticked */ .task-list input[type="checkbox"] { border: 1.5px solid #000 !important; background-color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4 C 4.4 9.4, 5.5 10.6, 6.6 12 C 8.4 8.6, 10.6 5.6, 13.4 3.4' fill='none' stroke='%23000000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Optional sections print open, closed or not */ details::details-content { content-visibility: visible; display: block; block-size: auto !important; } .guide-content details > summary { margin-bottom: 10px; border-bottom: 1px solid #bbb; } .guide-content summary::before { display: none; } } /* Picture cards: each shows its drawing small and opens it in the optional image viewer (How it works, "Why LaTeX for a thesis"). */ .benefit-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 1.4em 0; } .guide-content .benefit-card { display: block; min-width: 0; padding: 17px 19px; color: var(--ink); text-decoration: none; border: 1.8px solid var(--ink-soft); border-radius: 11px 14px 10px 13px / 14px 10px 13px 11px; background: var(--card); } .benefit-card strong { display: block; color: var(--link); font-size: 1.08em; line-height: 1.35; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .benefit-card span { display: block; margin-top: 7px; line-height: 1.45; } .guide-content .benefit-card:hover { background: var(--paper-2); } .guide-content .benefit-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; } .guide-content .benefit-card { display: flex; flex-direction: column; } .guide-content img.benefit-thumb { display: block; width: 100%; height: auto; aspect-ratio: 720 / 430; object-fit: contain; object-position: center top; margin: 0 0 12px; padding: 0; border: 0; background: none; } @media (max-width: 600px) { .benefit-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; } .guide-content .benefit-card { display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 12px 14px; } .guide-content img.benefit-thumb { grid-row: span 2; margin: 0; aspect-ratio: 4 / 3; } } @media print { .benefit-cards { display: block; } .benefit-card { margin-bottom: 12px; } } /* These concept previews fit the phone drawing instead of requiring sideways pan. */ dialog.benefit-caption[open] { grid-template-rows: auto minmax(0, 1fr); gap: 12px; } .benefit-preview .viewer-hint { display: block; position: static; margin: 0; padding: 0; font-size: 0.9rem; line-height: 1.4; text-align: center; } .benefit-preview .viewer-pan { max-width: 1000px; } .benefit-preview picture { display: block; width: 100%; } .benefit-preview img, .benefit-preview img[src$=".svg"] { width: 100%; max-width: 100%; max-height: none; padding: 0; } @media (max-width: 600px) { dialog.benefit-preview { padding-top: 72px; } } /* ---------- 12. Tools: one pattern ------------------------------------ Settings builder, Convert to LaTeX, Check your references, Explain my error, Check your PDF. Every tool page uses the same parts and classes (docs/project/components.md, "Tool pages"): .tool the tool's root; hidden until its script runs .tool-privacy "Nothing is uploaded." under the one-line purpose labels above their field; fields on card paper with a solid edge .tool-drop the main place to paste or drop: dashed .tool-output read-only output (LaTeX, the settings block) .tool-actions a row of buttons: one .button, the rest .button-secondary .tool-status one bold line (a live region) that keeps its room when empty; data-state="working" adds a small ring, and "error" holds a .tool-error box .tool-results a card under the actions; hidden while empty. Tools with one card per finding (PDF points, convert notes) style their items as the same card. .tool-nojs the no-JavaScript note, a quiet dashed box A tool's own rules below add layout only, never new colors or sizes. */ .tool[hidden], .tool-nojs[hidden] { display: none; } /* With scripts on, wait before showing the note: the tool's script hides it as soon as it runs, so a slow load does not flash "JavaScript is off". Browsers that cannot animate display show the note at once, as before. */ @media (scripting: enabled) { .tool-nojs:not([hidden], .tool-offline) { animation: tool-nojs-wait 2.5s step-end; } } @keyframes tool-nojs-wait { from, to { display: none; } } .guide-content > .tool { max-width: none; margin: 1.8rem 0; } .guide-content .tool-privacy { /* drawn like a tip: an even edge all round, no colored bar */ margin: 1.2rem 0; padding: 10px 18px; background: var(--sage-wash); border: 1.5px solid color-mix(in srgb, var(--sage) 40%, transparent); border-radius: 6px 18px 8px 16px / 16px 8px 18px 6px; } .page-tool .guide-content > .tool-privacy { max-width: none; } /* the privacy box lines up with the tool */ .guide-content > .guide-end { max-width: none; } /* previous / next span the column on every page */ .guide-content .tool-nojs { padding: 12px 16px; background: var(--paper-2); border: 1.5px dashed var(--line-strong); border-radius: 12px; } /* Controls, drawn like the buttons: a sketchy edge, a small offset shadow that grows on hover, and the blue focus ring. All are native controls, so keyboard use, forms and screen readers work as usual. */ .tool :where(label:not(:has(input)), .tool-label) { display: block; margin: 1rem 0 6px; font-weight: 700; } .tool :where(input[type="text"], input:not([type]), select, textarea) { display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 10px 14px; font: inherit; color: var(--ink); background: var(--card); border: 2px solid var(--control-edge); border-radius: var(--sketch); box-shadow: 3px 3px 0 var(--line-strong); transition: border-color .12s ease, box-shadow .12s ease; } .tool :where(input[type="text"], input:not([type]), select, textarea):hover { border-color: var(--ink); } .tool :where(input[type="text"], input:not([type]), select, textarea):focus-visible { border-color: var(--ink); box-shadow: 4px 4px 0 var(--line-strong); } .tool :where(select) { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 44px; background: var(--card) var(--chevron) no-repeat right 14px center / 16px 16px; } .tool :where(textarea) { padding: 14px 16px; font: 0.88rem/1.6 var(--font-mono); tab-size: 2; resize: vertical; } .tool ::placeholder { color: var(--muted); opacity: 1; font-family: var(--font-body); } .tool :where(input, select, textarea):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } /* Checkboxes and radio buttons: a hand-drawn box with the guide's tick, and a wobbly circle with a dot. The label is the click target; it sits beside the box and wraps under itself. */ .tool label:has(> input:is([type="checkbox"], [type="radio"])) { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; } .tool input:is([type="checkbox"], [type="radio"]):not(.tool-switch input) { -webkit-appearance: none; appearance: none; flex: none; font: inherit; width: 1.25em; height: 1.25em; margin: 0.2em 0 0; margin-top: calc(0.5lh - 0.625em); background: var(--card) no-repeat center / 100%; border: 2px solid var(--control-edge); border-radius: 5px 4px 6px 4px / 4px 6px 4px 5px; box-shadow: 2px 2px 0 var(--line-strong); cursor: pointer; transition: border-color .12s ease, background-color .12s ease; } .tool input[type="radio"]:not(.tool-switch input) { border-radius: var(--wobble); } .tool label:hover > input:is([type="checkbox"], [type="radio"]) { border-color: var(--ink); } .tool input[type="checkbox"]:checked:not(.tool-switch input) { background-color: var(--sage-wash); border-color: var(--sage); background-image: var(--checkmark); } .tool input[type="radio"]:checked:not(.tool-switch input) { border-color: var(--sage); background: radial-gradient(circle, var(--sage) 0 34%, var(--sage-wash) 40%); } .tool input:is([type="checkbox"], [type="radio"]):focus-visible { outline-offset: 2px; } /* High-contrast modes drop gradients and custom colors: use native controls. */ @media (forced-colors: active) { .tool input:is([type="checkbox"], [type="radio"]) { -webkit-appearance: auto; appearance: auto; width: auto; height: auto; background: none; border: 0; box-shadow: none; } .tool-switch input::before { content: none; } } /* A yes/no setting: a native checkbox (role="switch") drawn as a switch. */ .tool .tool-switch { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; font-weight: 700; cursor: pointer; } .tool-switch input { -webkit-appearance: none; appearance: none; flex: none; position: relative; font: inherit; width: 2.7em; height: 1.5em; margin: 0; background: var(--paper-2); border: 2px solid var(--control-edge); border-radius: 12px 14px 11px 13px / 13px 11px 14px 12px; box-shadow: 2px 2px 0 var(--line-strong); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .tool-switch input::before { /* the knob */ content: ""; position: absolute; top: 50%; left: 0.15em; width: 1.05em; height: 1.05em; transform: translateY(-50%); background: var(--card); border: 2px solid var(--control-edge); border-radius: var(--wobble); transition: border-color .15s ease; } .tool-switch:hover input, .tool-switch:hover input::before { border-color: var(--ink); } .tool-switch input:checked { background: var(--sage); border-color: var(--sage); } .tool-switch input:not(:checked)::before { background: var(--line-strong); } /* off: a knob you can see in both themes */ .tool-switch input:checked::before { left: calc(100% - 1.2em); border-color: var(--sage); } .tool-switch input:focus-visible { outline-offset: 3px; } /* Fieldsets: card paper with an even edge. */ .tool fieldset:not(.convert-options) { min-width: 0; margin: 0 0 1.4rem; padding: 6px 20px 20px; background: var(--card); border: 1.5px solid var(--line-strong); border-radius: var(--sketch); } .tool legend { padding: 0 6px; margin-left: -6px; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; } .tool fieldset fieldset:not(.convert-options) { margin: 1rem 0 0; background: var(--paper); border-style: dashed; box-shadow: none; } .tool fieldset fieldset legend { font-family: var(--font-body); font-weight: 700; font-size: 1rem; } /* Drop zones: dashed, because something lands here. Blue while a file is over it. */ .tool .tool-drop { background: var(--card); border: 2px dashed var(--control-edge); border-radius: var(--sketch); box-shadow: none; transition: border-color .12s ease, background-color .12s ease; } .tool .tool-drop:hover { border-color: var(--ink); } .tool > :first-child, .tool > form > :first-child { margin-top: 0; } /* File drop zone: the whole zone is the label of a visually hidden native input, so a click, Enter or Space opens the file picker; the button look is a span. The chosen names show on their own line under the zone. */ .tool .tool-file { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0; padding: 20px; font-weight: 400; cursor: pointer; } .tool-file-button { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 22px; font-weight: 700; font-size: 1.05rem; line-height: 1.25; background: var(--card); color: var(--ink); border: 2px solid var(--btn-edge-2); border-radius: var(--sketch); box-shadow: 3px 3px 0 var(--btn-shadow); transition: transform .12s ease, box-shadow .12s ease; } .tool-file-button.is-primary { background: var(--rpi-red); color: var(--on-red); border-color: var(--btn-edge); } .tool-file:hover .tool-file-button { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--btn-shadow); } .tool .tool-file:hover { background: var(--paper-2); } .tool-file:has(+ input:focus-visible) .tool-file-button { outline: 3px solid var(--focus); outline-offset: 4px; } .tool-file-or { color: var(--muted); } .tool-file-names { margin: 8px 0 0; font-size: 0.92rem; color: var(--muted); overflow-wrap: anywhere; } .tool-file-names:empty { display: none; } .tool .tool-drop.is-over { border-color: var(--blue); border-style: dashed; background: var(--blue-wash); } .guide-content .tool .tool-output { box-sizing: border-box; width: 100%; margin: 0; padding: 14px 16px; font: 0.88rem/1.6 var(--font-mono); color: var(--ink); background: var(--paper-2); border: 1.5px solid var(--line-strong); border-radius: var(--sketch); white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; resize: vertical; } .guide-content .tool-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 1rem 0 0; } .guide-content > .tool-actions { margin: 1rem 0 1.4rem; } /* a button in the text keeps room below it */ @media (max-width: 480px) { /* phones: a row of actions becomes full-width buttons of one size */ .guide-content .tool-actions > .button:not(.button-small) { flex: 1 1 100%; } } .tool-hint { margin: 6px 0 0; font-size: 0.92rem; color: var(--muted); } /* States (docs/project/components.md, "Tool states"; ToolState in site/tools-highlight.js). The status line keeps one line of room even when empty, so a message never pushes the page down. */ .tool-status { min-height: 1.6em; margin: 1rem 0 0; font-weight: 600; } .tool-results:empty { display: none; } .tool-status[data-state="working"]::before { /* a small hand-drawn ring; it turns only for those who allow motion */ content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.5em; vertical-align: -0.08em; border: 2px solid var(--line-strong); border-top-color: var(--ink); border-radius: var(--wobble); } .tool[aria-busy="true"] .tool-results { opacity: 0.55; } .tool-error { /* an even edge all round on a soft wash; the title says it in words */ margin: 0; padding: 10px 18px; font-weight: 400; background: var(--terra-wash); border: 1.5px solid color-mix(in srgb, var(--terra) 45%, transparent); border-radius: 6px 18px 8px 16px / 16px 8px 18px 6px; } .tool-error p { margin: 0; } .tool-error .tool-error-title { margin-bottom: 0.2em; font-weight: 700; } .button[data-busy], .tool-file:has(.tool-file-button[data-busy]) { cursor: progress; } .tool-file-button[data-busy] { color: var(--muted); background: var(--paper-2); border-color: var(--line-strong); box-shadow: none; transform: none; } .tool :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--terra); } .tool-results { margin: 1.5rem 0 0; overflow-wrap: anywhere; } .tool-results.tool-card, .tool-card { padding: 6px 22px 16px; background: var(--card); border: 1.5px solid var(--line-strong); border-radius: var(--sketch); box-shadow: 3px 3px 0 var(--line-strong); } .tool-results h3 { margin: 1.1rem 0 0.4rem; font-size: 1.1rem; } .tool-results h3:focus { outline: none; } .tool-results h4 { margin: 1.2rem 0 0.3rem; font-size: 1rem; } .tool-results li { margin: 0 0 0.45rem; } .guide-content .tool-results pre { margin: 0.4rem 0 0.6rem; } /* Settings builder: two fieldsets; short fields side by side on wide screens. */ .settings-builder fieldset > p { margin: 0.6rem 0 0; color: var(--muted); } .settings-switches { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 36px; margin-top: 1rem; } .settings-layout > form { container-type: inline-size; min-width: 0; } @container (min-width: 600px) { /* the form's own width, so the sketch beside it never squeezes the fields */ .settings-builder [data-settings-fields] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; align-items: start; } .settings-builder [data-settings-fields] > div:has(> :is(#setting-title, #setting-author, #setting-department, #setting-seal-file)) { grid-column: 1 / -1; } } /* The form and its title page sketch: side by side when the column is wide, the sketch under the form otherwise. The sketch is a US letter page with 1 in margins, drawn in points of the page's width (1pt = 100cqw / 612), so the class's gaps (20, 20, 10, 40, 20, 12 pt) and 12 pt text keep their proportions at any size. A Times-like face, as in the PDF. */ .settings-layout { display: grid; gap: 1.5rem; margin-top: 1.4rem; } @media (min-width: 1440px) { .settings-layout { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); align-items: start; } .settings-preview { position: sticky; top: 1.5rem; } } .guide-content .settings-preview { container-type: inline-size; width: 100%; max-width: 340px; margin: 0.5rem 0 0; } .settings-preview figcaption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--muted); } .settings-page { /* 100cqw is the page's width: its figure is the container */ box-sizing: border-box; display: flex; flex-direction: column; align-items: center; aspect-ratio: 8.5 / 11; padding: calc(100cqw * 72 / 612); background: var(--page-paper); color: var(--page-ink); border: 1.5px solid var(--line-strong); border-radius: 4px; box-shadow: 4px 4px 0 var(--line); font-family: "Times New Roman", "STIX Two Text", Times, serif; text-align: center; line-height: 1.2; overflow-wrap: anywhere; } .settings-page p { margin: 0; max-width: 100%; font-size: calc(100cqw * 12 / 612); } .settings-page .tp-large { font-size: calc(100cqw * 14.4 / 612); font-weight: 700; } .settings-page .tp-italic { font-style: italic; } .settings-page .tp-gap-10 { margin-top: calc(100cqw * 10 / 612); } .settings-page .tp-gap-12 { margin-top: calc(100cqw * 12 / 612); } .settings-page .tp-gap-20 { margin-top: calc(100cqw * 20 / 612); } .settings-page .tp-gap-40 { margin-top: calc(100cqw * 40 / 612); } .settings-page .is-empty { color: var(--page-muted); opacity: 0.7; } .settings-page .tp-seal { /* a circle 0.25 of the text width (468pt); pushed down like \vfill */ display: grid; place-items: center; flex: none; width: calc(100cqw * 117 / 612); height: calc(100cqw * 117 / 612); margin-top: auto; border: 1px dashed var(--line-strong); border-radius: 50%; color: var(--muted); font-size: calc(100cqw * 8 / 612); } .settings-page .tp-seal + p { margin-top: calc(100cqw * 20 / 612); } .settings-page[hidden], .settings-page-full[hidden] { display: none; } /* the sketch switch hides it */ .tool .settings-seal-pick { margin-top: 0.8rem; } /* the shared file picker, as on every tool */ .settings-preview .tool-switch { margin: 0 0 0.6rem; } .settings-preview.is-off figcaption { display: none; } .settings-builder .tool-hint { margin: 6px 0 0; } /* Title and department: one line that grows with the text, in the field font. */ .tool textarea.settings-grow { font: inherit; padding: 10px 14px; min-height: 48px; field-sizing: content; resize: none; overflow: hidden; } /* The committee: a quiet list. One line per member (name, role, a small x); "Another role" opens a box under the menu. Column names show once, on wide forms. */ .settings-member-head { display: none; } .settings-member { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; grid-template-areas: "n x" "r r" "o o"; padding: 10px 0; border-bottom: 1.5px dashed var(--line); } .settings-member .m-name { grid-area: n; } .settings-member .m-role { grid-area: r; } .settings-member .m-other { grid-area: o; } .settings-member .m-remove { grid-area: x; } .settings-member [hidden] { display: none; } @container (min-width: 600px) { .settings-member-head, .settings-member { grid-template-columns: minmax(0, 1fr) minmax(10rem, 14rem) 44px; column-gap: 12px; } .settings-member-head { display: grid; margin: 1rem 0 -4px; font-weight: 700; } .settings-member { grid-template-areas: "n r x" ". o ."; } } .settings-builder [data-settings-add] { margin-top: 0.9rem; } .guide-content .settings-errors { margin: 0.6rem 0 0; padding: 10px 16px 10px 2.2rem; background: var(--paper-2); border-radius: 10px; color: var(--muted); } .guide-content .settings-errors:empty { display: none; } .guide-content .settings-errors li { margin: 0.15rem 0; } /* Convert to LaTeX: the pasted text on the left, the LaTeX on the right; stacked on narrow screens. */ .convert-options { margin: 0 0 1rem; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; } .convert-options legend { padding: 0; margin: 0 0 6px; font-family: var(--font-body); font-size: 1rem; font-weight: 700; } .convert-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; } .convert-pane { min-width: 0; display: flex; flex-direction: column; } .tool .convert-label { display: block; margin: 0; font-weight: 700; } .convert-head { /* the same height over both panes, so the boxes line up */ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; min-height: 44px; margin: 0 0 6px; } .convert-source { font-weight: 400; color: var(--muted); } /* LaTeX or Preview: a segmented control, as in the class demo. The native radios stay (keyboard, arrow keys) but are visually hidden; each label is a segment. */ .tool fieldset.convert-view { display: flex; min-width: 0; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; } .convert-view > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .tool .convert-view > label { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 6px 16px; font-weight: 400; color: var(--ink); background: var(--card); cursor: pointer; border: 1.5px solid var(--line-strong); } .convert-view > label:first-of-type { border-radius: 10px 0 0 10px; } .convert-view > label:last-of-type { border-left-width: 0; border-radius: 0 10px 10px 0; } .convert-view > label:hover { background: var(--paper-2); } .convert-view > input:checked + label { background: var(--sage-wash); font-weight: 700; } .convert-view > input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; position: relative; z-index: 1; } .tool .convert-input, .guide-content .tool .convert-output, .guide-content .tool .convert-preview { height: 22rem; } .guide-content .tool-output:empty::before, .convert-preview:empty::before { content: attr(data-empty); font-family: var(--font-body); color: var(--muted); } .guide-content .tool :is(.convert-output, .convert-preview)[hidden] { display: none; } /* Marked by "Show where": every place of the note, the current one outlined. */ .convert-output .is-marked { background: var(--butter-wash); border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .convert-output .is-current { background: var(--select); outline: 2px solid var(--terra); outline-offset: 1px; } .convert-preview .is-marked { background: var(--butter-wash); border-radius: 4px; box-shadow: 0 0 0 4px var(--butter-wash); } .convert-preview tr.is-marked > * { background: var(--butter-wash); } .convert-preview .is-current { outline: 2px solid var(--terra); outline-offset: 4px; } .convert-results .convert-where { margin: 6px 0 0.8rem; } /* The preview: the LaTeX drawn as a page would show it, roughly, in a Times-like face as in the PDF. Headings are paragraphs, not page headings. */ .guide-content .tool .convert-preview { box-sizing: border-box; width: 100%; padding: 14px 18px; overflow: auto; resize: vertical; font-family: "Times New Roman", "STIX Two Text", Times, serif; line-height: 1.5; color: var(--ink); background: var(--card); border: 1.5px solid var(--line-strong); border-radius: var(--sketch); overflow-wrap: anywhere; } .guide-content .convert-preview > * { max-width: none; } .guide-content .convert-preview p, .guide-content .convert-preview :is(ul, ol, blockquote) { margin: 0 0 0.8em; } .guide-content .convert-preview .convert-preview-note { margin: 0 0 1em; padding-bottom: 8px; border-bottom: 1.5px dashed var(--line-strong); font-family: var(--font-body); font-size: 0.85rem; color: var(--muted); } .guide-content .convert-preview .convert-heading { margin: 1.2em 0 0.5em; font-weight: 700; } .convert-heading .convert-number { margin-right: 0.8em; } .convert-preview .convert-chapter { text-align: center; font-size: 1.15rem; } .convert-chapter .convert-number { margin-right: 0.4em; } .convert-preview .convert-section { font-size: 1.05rem; } .convert-preview .convert-subsubsection { font-weight: 400; font-style: italic; } .convert-preview .convert-math { color: var(--code-math); } .guide-content .convert-preview blockquote { margin-left: 1.5em; font-style: normal; color: var(--ink); } .guide-content .convert-preview li { margin: 0.2em 0; } .guide-content .convert-preview .convert-code { margin: 0 0 0.8em; padding: 10px 14px; white-space: pre-wrap; } .convert-equation { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: baseline; gap: 1em; margin: 0 0 0.8em; } .convert-equation > .convert-math { grid-column: 2; } .convert-equation > .convert-number { grid-column: 3; justify-self: end; } .convert-preview .convert-picture { font-family: var(--font-body); font-size: 0.92rem; color: var(--muted); } .guide-content .convert-preview p.convert-picture { padding: 8px 14px; border: 1.5px dashed var(--line-strong); border-radius: 10px; } .convert-preview .convert-placeholder { font-weight: 400; font-style: italic; color: var(--muted); } /* Tables as booktabs draws them: caption above, a heavy rule at the top and the bottom, a light one under the heading row, no lines between columns. */ .convert-table { margin: 0 0 1em; overflow-x: auto; } .guide-content .convert-preview table { width: auto; margin: 0 auto; border-collapse: collapse; font-size: 1rem; line-height: 1.4; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); overflow-wrap: normal; /* words stay whole; a wide table scrolls sideways in .convert-table */ } .convert-preview caption { caption-side: top; padding: 0 0 6px; text-align: left; font-weight: 700; } .guide-content .convert-preview :is(th, td) { padding: 4px 12px; text-align: left; vertical-align: top; font: inherit; font-weight: 400; background: none; border: 0; } .guide-content .convert-preview thead th { border-bottom: 1px solid var(--ink); } .guide-content .convert-preview .is-number { text-align: right; } .convert-results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; } .convert-results section { padding: 12px 18px; background: var(--card); border: 1.5px solid var(--line-strong); border-radius: var(--sketch); box-shadow: 3px 3px 0 var(--line-strong); } .convert-results h3 { margin-top: 0.2rem; font-size: 1.05rem; } .convert-results ol, .convert-results ul { margin: 0 0 0.4rem; padding-left: 1.3rem; } @media (max-width: 1100px) { /* below about 360px a pane is too narrow: stack (tablets in landscape too) */ .convert-panes, .convert-results { grid-template-columns: minmax(0, 1fr); } .tool .convert-input, .guide-content .tool .convert-output, .guide-content .tool .convert-preview { height: 15rem; } } /* Check your references: a drop zone for files, then the text fields. */ .guide-content .bibcheck details { margin: 1.2rem 0 0; } .bibcheck details label:has(input) { margin: 1rem 0 0.4rem; font-weight: 600; } /* Results: each point names its line as a link-like button that selects the place in the box; a safe fix shows the field now and after, then a button. */ .bibcheck .bibcheck-line { display: inline; min-height: 0; margin: 0; padding: 0 2px; font: inherit; color: var(--link); background: none; border: 0; border-radius: 4px; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent); cursor: pointer; } .bibcheck .bibcheck-line:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; } .bibcheck .bibcheck-line:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .bibcheck .tool-results h4 .bibcheck-line { font-family: var(--font-body); font-weight: 400; } .guide-content .bibcheck .tool-results ul { padding-left: 1.3rem; } .bibcheck .bibcheck-item { margin: 0 0 0.8rem; } .bibcheck-change { margin: 0.45rem 0 0.2rem; padding: 8px 14px 12px; background: var(--paper-2); border: 1.5px solid var(--line); border-radius: 10px; } .bibcheck-change p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0.25rem 0; } .bibcheck-change code { flex: 1 1 18em; min-width: 0; background: var(--card); } /* under its label on phones */ .bibcheck-change-label { flex: 0 0 7.5em; font-weight: 700; } @media (max-width: 480px) { /* phones: the points use the card's width */ .bibcheck .tool-results.tool-card { padding: 6px 14px 14px; } .guide-content .bibcheck .tool-results ul { padding-left: 1.1rem; } .bibcheck-change { padding: 6px 10px 10px; } } .bibcheck-change .button { margin-top: 0.4rem; } .bibcheck-fixbar { margin: 1rem 0; padding: 10px 18px 14px; background: var(--sage-wash); border: 1.5px solid color-mix(in srgb, var(--sage) 40%, transparent); border-radius: 6px 18px 8px 16px / 16px 8px 18px 6px; } .bibcheck-fixbar p { margin: 0.4rem 0 0; } .guide-content .bibcheck-fixbar .tool-actions { margin-top: 0.7rem; } .bibcheck .bibcheck-view { margin: 1.2rem 0 0; } /* Explain my error: one big paste area, the shared file picker under it, and "Also in the log" closed under the first error. */ .tool .explain-input { min-height: 14rem; } .tool .explain-pick { margin-top: 0.8rem; } .guide-content .explain-result details { margin: 1.2rem 0 0.6rem; } .explain-more > ul { padding-left: 1.3rem; } .explain-more ul ul { margin: 0.2rem 0 0.4rem; padding-left: 1.3rem; } .explain-more li > p { margin: 0 0 0.2rem; } /* Check your PDF: the drop zone holds the primary button; a summary card with a count per result, then one card per point, those to look at first. One page view (.pdf-check-viewer) opens under the point that asked for it: the PDF page drawn by pdf.js on its own white paper, with the checker's measurements drawn over it. Each mark has a --card halo, so it shows on the white page in light and dark, and its own line style, so the legend does not rely on color. */ .pdf-check-actions button[hidden] { display: none; } .pdf-check-actions:not(:has(button:not([hidden]))) { display: none; } .pdf-check-results .tool-card { margin: 0.6rem 0 0.4rem; padding: 12px 18px; } .pdf-check-tally { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 0.5rem; } .pdf-check-results .pdf-check-summary { margin: 0; color: var(--muted); } .pdf-check-results .tool-card .tool-actions { margin-top: 0.7rem; } .guide-content .pdf-check-list { list-style: none; padding: 0; margin: 0.6rem 0 0; } .guide-content .pdf-check-list > li { margin: 0 0 14px; } .pdf-check-item { /* an even edge; the state label says the status in words */ --c: var(--muted); --w: var(--paper-2); padding: 12px 18px; background: var(--card); border: 1.5px solid var(--line-strong); border-radius: var(--sketch); } .pdf-check-tally .pdf-check-state { --c: var(--muted); --w: var(--paper-2); } :is(.pdf-check-item, .pdf-check-tally .pdf-check-state).is-ok { --c: var(--sage); --w: var(--sage-wash); } :is(.pdf-check-item, .pdf-check-tally .pdf-check-state).is-check { --c: var(--terra); --w: var(--terra-wash); } :is(.pdf-check-item, .pdf-check-tally .pdf-check-state).is-differs { --c: var(--blue); --w: var(--blue-wash); } .pdf-check-item p { margin: 0 0 0.4em; } .pdf-check-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .pdf-check-state { font-size: 0.85rem; font-weight: 700; color: var(--c); padding: 1px 8px; background: var(--w); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); border-radius: 999px; } .pdf-check-source, .pdf-check-item .pdf-check-coverage { font-size: 0.92rem; color: var(--muted); } .guide-content .pdf-check-item details { margin: 0.5rem 0; padding: 0 14px; } .pdf-check-item .pdf-check-show { margin: 0.6rem 0; } .pdf-check-viewer { container-type: inline-size; margin: 0.6rem 0 0.8rem; padding: 10px 14px 14px; background: var(--paper-2); border: 1.5px solid var(--line-strong); border-radius: var(--sketch); } .pdf-check-viewer-title:focus { outline: none; } .pdf-check-viewer-title:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .pdf-check-page { /* its aspect ratio is the page's own, set by ui.js */ position: relative; box-sizing: content-box; width: 100%; max-width: 32rem; aspect-ratio: 8.5 / 11; margin: 0.4rem 0 0.6rem; background: var(--page-paper); border: 1px solid var(--line-strong); box-shadow: 3px 3px 0 var(--line); } .pdf-check-page canvas, .pdf-check-page svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .pdf-check-page svg { overflow: visible; pointer-events: none; } .pdf-check-halo, .pdf-check-mark { fill: none; vector-effect: non-scaling-stroke; } .pdf-check-halo { stroke: var(--card); stroke-width: 5; } .pdf-check-mark { stroke-width: 2; } .pdf-check-mark.is-margin { stroke: var(--blue); stroke-dasharray: 7 4; } .pdf-check-mark.is-number { stroke: var(--sage); stroke-dasharray: 2 3; } .pdf-check-mark.is-box { stroke: var(--terra); stroke-width: 2.5; } .pdf-check-viewer-status:empty { display: none; } .guide-content .pdf-check-legend { list-style: none; margin: 0 0 0.4rem; padding: 0; font-size: 0.92rem; } .pdf-check-legend[hidden], .pdf-check-viewer button[hidden] { display: none; } .guide-content .pdf-check-legend li { display: flex; align-items: baseline; gap: 10px; margin: 0 0 0.3rem; } .pdf-check-key { flex: none; display: inline-block; box-sizing: border-box; width: 1.6em; height: 0.75em; } .pdf-check-key.is-box { border: 2.5px solid var(--terra); } .pdf-check-key.is-margin { height: 0.4em; border-bottom: 2px dashed var(--blue); } .pdf-check-key.is-number { height: 0.4em; border-bottom: 2px dotted var(--sage); } .pdf-check-viewer .tool-actions { margin-top: 0.4rem; } .pdf-check-viewer p { margin: 0 0 0.4em; } @container (min-width: 44rem) { /* the page on the left, what it shows beside it */ .pdf-check-viewer-body { display: grid; grid-template-columns: minmax(0, 32rem) minmax(12rem, 1fr); column-gap: 20px; grid-template-areas: "page note" "page status" "page legend" "page ."; grid-template-rows: auto auto auto 1fr; } .pdf-check-viewer-note { grid-area: note; } .pdf-check-viewer-status { grid-area: status; } .pdf-check-viewer-body .pdf-check-legend { grid-area: legend; } .pdf-check-page { grid-area: page; } }