:root { color-scheme: light; --tealdoc-light-accent: var(--vp-c-brand-1, #087f8c); --tealdoc-light-accent-contrast: #ffffff; --tealdoc-light-accent-hover: var(--vp-c-brand-2, #086a75); --tealdoc-light-accent-soft: var(--vp-c-brand-soft, #dff3f5); --tealdoc-light-link: var(--tealdoc-light-accent); --tealdoc-light-link-hover: var(--tealdoc-light-accent-hover); --tealdoc-light-background: var(--vp-c-bg, #ffffff); --tealdoc-light-background-alt: var(--vp-c-bg-alt, #f6f6f7); --tealdoc-light-background-elv: var(--vp-c-bg-elv, #ffffff); --tealdoc-light-border: var(--vp-c-divider, #e2e2e3); --tealdoc-light-code-background: var(--vp-code-block-bg, #e9e7ec); --tealdoc-light-text: var(--vp-c-text-1, #213547); --tealdoc-light-text-muted: var(--vp-c-text-2, #67676c); --tealdoc-light-text-faint: var(--vp-c-text-3, #929295); --tealdoc-light-sidebar-background: var(--tealdoc-light-background-alt); --tealdoc-dark-accent: var(--vp-c-brand-1, #5ad9e0); --tealdoc-dark-accent-contrast: #102f33; --tealdoc-dark-accent-hover: var(--vp-c-brand-2, #7ce4e9); --tealdoc-dark-accent-soft: var(--vp-c-brand-soft, #173a3f); --tealdoc-dark-link: var(--tealdoc-dark-accent); --tealdoc-dark-link-hover: var(--tealdoc-dark-accent-hover); --tealdoc-dark-background: var(--vp-c-bg, #1b1b1f); --tealdoc-dark-background-alt: var(--vp-c-bg-alt, #161618); --tealdoc-dark-background-elv: var(--vp-c-bg-elv, #202127); --tealdoc-dark-border: var(--vp-c-divider, #2e2e32); --tealdoc-dark-code-background: var(--vp-code-block-bg, #252330); --tealdoc-dark-text: var(--vp-c-text-1, #dfdfd6); --tealdoc-dark-text-muted: var(--vp-c-text-2, #a8a8a3); --tealdoc-dark-text-faint: var(--vp-c-text-3, #6a6a71); --tealdoc-dark-sidebar-background: var(--tealdoc-dark-background-alt); --tealdoc-accent: var(--tealdoc-light-accent); --tealdoc-accent-contrast: var(--tealdoc-light-accent-contrast); --tealdoc-accent-hover: var(--tealdoc-light-accent-hover); --tealdoc-accent-soft: var(--tealdoc-light-accent-soft); --tealdoc-link: var(--tealdoc-light-link); --tealdoc-link-hover: var(--tealdoc-light-link-hover); --tealdoc-alt-action-hover: color-mix( in srgb, var(--tealdoc-background-alt) 90%, #000000 ); --tealdoc-background: var(--tealdoc-light-background); --tealdoc-background-alt: var(--tealdoc-light-background-alt); --tealdoc-background-elv: var(--tealdoc-light-background-elv); --tealdoc-border: var(--tealdoc-light-border); --tealdoc-code-background: var(--tealdoc-light-code-background); --tealdoc-code-block-font-size: 14px; --tealdoc-code-block-radius: 8px; --tealdoc-code-block-padding: 0.8rem 0.9rem; --tealdoc-code-tab-text: var(--tealdoc-text-muted); --tealdoc-code-tab-hover-text: var(--tealdoc-text); --tealdoc-code-tab-active-text: var(--tealdoc-text); --tealdoc-code-tab-active-bar: var(--tealdoc-accent); --tealdoc-code-tab-divider: var(--tealdoc-border); --tealdoc-code-tab-font-size: 0.72rem; --tealdoc-code-tab-font-weight: 600; --tealdoc-code-tab-padding: 0.45rem 0.75rem; --tealdoc-code-lang-color: var(--tealdoc-text-faint); --tealdoc-code-lang-font-size: 0.68rem; --tealdoc-code-lang-padding: 0 0 0.2rem 0.4rem; --tealdoc-inline-code-font-size: 0.91em; --tealdoc-inline-code-padding: 0.1em 0.35em; --tealdoc-inline-code-radius: 4px; --tealdoc-inline-code-background: var(--tealdoc-code-background); --tealdoc-content-font-size: 0.8rem; --tealdoc-content-gutter: 5rem; --tealdoc-content-padding-top: 1.25rem; --tealdoc-content-padding-bottom: 6rem; --tealdoc-font: var( --vp-font-family-base, Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" ); --tealdoc-font-heading: var(--tealdoc-font); --tealdoc-heading-font-weight: 700; --tealdoc-heading-1-size: 1.8rem; --tealdoc-heading-2-size: 1.575rem; --tealdoc-heading-3-size: 1.35rem; --tealdoc-heading-4-size: 1.125rem; --tealdoc-heading-5-size: 1.0125rem; --tealdoc-heading-6-size: 0.9rem; --tealdoc-heading-2-spacing: 2.5rem; --tealdoc-heading-3-spacing: 2.25rem; --tealdoc-font-mono: var( --vp-font-family-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Code", "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace ); --tealdoc-header-height: var(--vp-nav-height, 64px); --tealdoc-header-background: color-mix( in srgb, var(--tealdoc-background) 92%, transparent ); --tealdoc-header-color: var(--tealdoc-text); --tealdoc-header-muted-color: var(--tealdoc-text-muted); --tealdoc-header-border: var(--tealdoc-border); --tealdoc-header-control-background: var(--tealdoc-background-alt); --tealdoc-sidebar-background: var(--tealdoc-light-sidebar-background); --tealdoc-sidebar-font-family: var(--tealdoc-font); --tealdoc-outline-font-family: var(--tealdoc-font); --tealdoc-layout-max-width: var(--vp-layout-max-width, 1480px); --tealdoc-content-width: var(--vp-content-width, 688px); --tealdoc-sidebar-width: var(--vp-sidebar-width, 272px); --tealdoc-outline-width: var(--vp-aside-width, 256px); --tealdoc-sidebar-font-size: 0.7rem; --tealdoc-sidebar-font-weight: 500; --tealdoc-sidebar-active-font-weight: 600; --tealdoc-sidebar-item-padding: 0.24rem 0.55rem; --tealdoc-sidebar-item-color: var(--tealdoc-text-muted); --tealdoc-sidebar-heading-color: var(--tealdoc-text); --tealdoc-sidebar-heading-font-size: 0.7rem; --tealdoc-sidebar-heading-font-weight: 700; --tealdoc-sidebar-section-border: var(--tealdoc-border); --tealdoc-sidebar-section-gap: 1.1rem; --tealdoc-sidebar-section-padding: 1.1rem; --tealdoc-sidebar-nested-top-padding: 4px; --tealdoc-sidebar-nested-indent: 0.5rem; --tealdoc-outline-font-size: 0.66rem; --tealdoc-outline-font-weight: 600; --tealdoc-outline-item-padding: 0.16rem 0; --tealdoc-outline-nested-font-size: 0.61rem; --tealdoc-outline-title-font-size: 0.66rem; --tealdoc-outline-title-font-weight: 600; --tealdoc-hero-glow-color: var(--tealdoc-accent); --tealdoc-hero-glow-size: 520px; --tealdoc-hero-glow-blur: 24px; --tealdoc-hero-glow-opacity: 0.68; --tealdoc-hero-features-gap: 2rem; /* The hero is sized in rem and steps at the breakpoints below, rather than * sliding with `vw`. Browser zoom is a change in the viewport, so a `vw` * size resizes against the zoom instead of with it: the reader asks for a * larger page and the heading and the line under it come apart. A rem * scales by exactly the zoom factor, which is what was asked for. */ --tealdoc-hero-name-size: 5.5rem; --tealdoc-hero-text-size: 1.6rem; --tealdoc-hero-name-size-narrow: 4rem; --tealdoc-hero-text-size-narrow: 1.2rem; --tealdoc-home-width: 1152px; --tealdoc-home-gutter: 2rem; --tealdoc-button-brand-background: var(--tealdoc-accent); --tealdoc-button-brand-hover-background: var(--tealdoc-accent-hover); --tealdoc-button-alt-background: var(--tealdoc-background-alt); --tealdoc-button-alt-hover-background: var(--tealdoc-alt-action-hover); --tealdoc-admonition-note: var(--tealdoc-accent); --tealdoc-admonition-tip: #2e8b57; --tealdoc-admonition-important: #8250df; --tealdoc-admonition-warning: #c47f00; --tealdoc-admonition-danger: #cf222e; --tealdoc-footer-background: var(--tealdoc-background); --tealdoc-footer-border: var(--tealdoc-border); --tealdoc-footer-text: var(--tealdoc-text-faint); --tealdoc-footer-link: var(--tealdoc-text-muted); --tealdoc-syntax-foreground: #3760bf; --tealdoc-syntax-boolean: #b15c00; --tealdoc-syntax-comment: #848cb5; --tealdoc-syntax-function: #2e7de9; --tealdoc-syntax-keyword: #9854f1; --tealdoc-syntax-meta: #007197; --tealdoc-syntax-number: #b15c00; --tealdoc-syntax-operator: #006a83; --tealdoc-syntax-property: #387068; --tealdoc-syntax-punctuation: #6172b0; --tealdoc-syntax-string: #587539; --tealdoc-syntax-type: #007197; --tealdoc-syntax-variable: #3760bf; --tealdoc-text: var(--tealdoc-light-text); --tealdoc-text-muted: var(--tealdoc-light-text-muted); --tealdoc-text-faint: var(--tealdoc-light-text-faint); --pico-font-family: var(--tealdoc-font); --pico-primary: var(--tealdoc-link); --pico-primary-hover: var(--tealdoc-link-hover); } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --tealdoc-accent: var(--tealdoc-dark-accent); --tealdoc-accent-contrast: var(--tealdoc-dark-accent-contrast); --tealdoc-accent-hover: var(--tealdoc-dark-accent-hover); --tealdoc-accent-soft: var(--tealdoc-dark-accent-soft); --tealdoc-link: var(--tealdoc-dark-link); --tealdoc-link-hover: var(--tealdoc-dark-link-hover); --tealdoc-alt-action-hover: color-mix( in srgb, var(--tealdoc-background-alt) 90%, #ffffff ); --tealdoc-background: var(--tealdoc-dark-background); --tealdoc-background-alt: var(--tealdoc-dark-background-alt); --tealdoc-sidebar-background: var(--tealdoc-dark-sidebar-background); --tealdoc-background-elv: var(--tealdoc-dark-background-elv); --tealdoc-border: var(--tealdoc-dark-border); --tealdoc-code-background: var(--tealdoc-dark-code-background); --tealdoc-syntax-foreground: #c0caf5; --tealdoc-syntax-boolean: #ff9e64; --tealdoc-syntax-comment: #565f89; --tealdoc-syntax-function: #7aa2f7; --tealdoc-syntax-keyword: #bb9af7; --tealdoc-syntax-meta: #7dcfff; --tealdoc-syntax-number: #ff9e64; --tealdoc-syntax-operator: #89ddff; --tealdoc-syntax-property: #73daca; --tealdoc-syntax-punctuation: #a9b1d6; --tealdoc-syntax-string: #9ece6a; --tealdoc-syntax-type: #2ac3de; --tealdoc-syntax-variable: #c0caf5; --tealdoc-text: var(--tealdoc-dark-text); --tealdoc-text-muted: var(--tealdoc-dark-text-muted); --tealdoc-text-faint: var(--tealdoc-dark-text-faint); } } /* The toggle repaints the root, not the tree under it, because a custom * property resolves where it is declared. Half the tokens above are declared * here as indirections onto the theme colors, so a repaint applied to a * descendant reaches the ones a rule reads directly and none of the ones read * through an indirection: those keep whatever the root resolved them to, and * the theme the reader asked for arrives in pieces. Repainting the root itself * resolves them all at once, and a site's own `:root` values still cascade * against the primitives the same way. */ :root:has(.tealdoc-theme-input:checked), :root[data-tealdoc-theme="dark"] { color-scheme: dark; --tealdoc-accent: var(--tealdoc-dark-accent); --tealdoc-accent-contrast: var(--tealdoc-dark-accent-contrast); --tealdoc-accent-hover: var(--tealdoc-dark-accent-hover); --tealdoc-accent-soft: var(--tealdoc-dark-accent-soft); --tealdoc-link: var(--tealdoc-dark-link); --tealdoc-link-hover: var(--tealdoc-dark-link-hover); --tealdoc-alt-action-hover: color-mix( in srgb, var(--tealdoc-background-alt) 90%, #ffffff ); --tealdoc-background: var(--tealdoc-dark-background); --tealdoc-background-alt: var(--tealdoc-dark-background-alt); --tealdoc-sidebar-background: var(--tealdoc-dark-sidebar-background); --tealdoc-background-elv: var(--tealdoc-dark-background-elv); --tealdoc-border: var(--tealdoc-dark-border); --tealdoc-code-background: var(--tealdoc-dark-code-background); --tealdoc-syntax-foreground: #c0caf5; --tealdoc-syntax-boolean: #ff9e64; --tealdoc-syntax-comment: #565f89; --tealdoc-syntax-function: #7aa2f7; --tealdoc-syntax-keyword: #bb9af7; --tealdoc-syntax-meta: #7dcfff; --tealdoc-syntax-number: #ff9e64; --tealdoc-syntax-operator: #89ddff; --tealdoc-syntax-property: #73daca; --tealdoc-syntax-punctuation: #a9b1d6; --tealdoc-syntax-string: #9ece6a; --tealdoc-syntax-type: #2ac3de; --tealdoc-syntax-variable: #c0caf5; --tealdoc-text: var(--tealdoc-dark-text); --tealdoc-text-muted: var(--tealdoc-dark-text-muted); --tealdoc-text-faint: var(--tealdoc-dark-text-faint); } @media (prefers-color-scheme: dark) { :root:has(.tealdoc-theme-input:checked), :root[data-tealdoc-theme="light"] { color-scheme: light; --tealdoc-accent: var(--tealdoc-light-accent); --tealdoc-accent-contrast: var(--tealdoc-light-accent-contrast); --tealdoc-accent-hover: var(--tealdoc-light-accent-hover); --tealdoc-accent-soft: var(--tealdoc-light-accent-soft); --tealdoc-link: var(--tealdoc-light-link); --tealdoc-link-hover: var(--tealdoc-light-link-hover); --tealdoc-alt-action-hover: color-mix( in srgb, var(--tealdoc-background-alt) 90%, #000000 ); --tealdoc-background: var(--tealdoc-light-background); --tealdoc-background-alt: var(--tealdoc-light-background-alt); --tealdoc-sidebar-background: var(--tealdoc-light-sidebar-background); --tealdoc-background-elv: var(--tealdoc-light-background-elv); --tealdoc-border: var(--tealdoc-light-border); --tealdoc-code-background: var(--tealdoc-light-code-background); --tealdoc-syntax-foreground: #3760bf; --tealdoc-syntax-boolean: #b15c00; --tealdoc-syntax-comment: #848cb5; --tealdoc-syntax-function: #2e7de9; --tealdoc-syntax-keyword: #9854f1; --tealdoc-syntax-meta: #007197; --tealdoc-syntax-number: #b15c00; --tealdoc-syntax-operator: #006a83; --tealdoc-syntax-property: #387068; --tealdoc-syntax-punctuation: #6172b0; --tealdoc-syntax-string: #587539; --tealdoc-syntax-type: #007197; --tealdoc-syntax-variable: #3760bf; --tealdoc-text: var(--tealdoc-light-text); --tealdoc-text-muted: var(--tealdoc-light-text-muted); --tealdoc-text-faint: var(--tealdoc-light-text-faint); } } html { scroll-padding-top: calc(var(--tealdoc-header-height) + 2rem); } /* API links use a stable empty anchor immediately before their generated * heading. Give that target the same breathing room as a heading's own id. */ .tealdoc-content a[id] { scroll-margin-top: 2rem; } body { margin: 0; background: var(--tealdoc-background); font-family: var(--tealdoc-font); font-optical-sizing: auto; } .tealdoc-theme-input { position: fixed; width: 1px; height: 1px; clip-path: inset(50%); opacity: 0; } .tealdoc-site { --pico-background-color: var(--tealdoc-background); --pico-card-background-color: var(--tealdoc-background-elv); --pico-card-border-color: var(--tealdoc-border); --pico-code-background-color: var(--tealdoc-code-background); --pico-color: var(--tealdoc-text); --pico-form-element-background-color: var(--tealdoc-background-elv); --pico-form-element-border-color: var(--tealdoc-border); --pico-form-element-color: var(--tealdoc-text); --pico-form-element-placeholder-color: var(--tealdoc-text-faint); --pico-h1-color: var(--tealdoc-text); --pico-h2-color: var(--tealdoc-text); --pico-h3-color: var(--tealdoc-text); --pico-h4-color: var(--tealdoc-text); --pico-h5-color: var(--tealdoc-text); --pico-h6-color: var(--tealdoc-text); --pico-muted-border-color: var(--tealdoc-border); --pico-muted-color: var(--tealdoc-text-muted); --pico-primary: var(--tealdoc-link); --pico-primary-hover: var(--tealdoc-link-hover); --pico-table-border-color: var(--tealdoc-border); min-height: 100vh; overflow-x: clip; color: var(--tealdoc-text); background: var(--tealdoc-background); } .tealdoc-site a { text-decoration-color: currentColor; } button, input { font-family: inherit; } .tealdoc-header { position: sticky; z-index: 30; top: 0; min-height: var(--tealdoc-header-height); margin: 0; padding: 0; border-bottom: 1px solid var(--tealdoc-header-border); background: var(--tealdoc-header-background); backdrop-filter: blur(12px); } .tealdoc-nav { display: flex; width: 100%; max-width: var(--tealdoc-layout-max-width); min-height: var(--tealdoc-header-height); align-items: center; gap: 1rem; margin: 0 auto; padding: 0 1rem; } .tealdoc-brand { display: inline-flex; flex: none; align-items: center; gap: 0.6rem; color: var(--tealdoc-header-color); font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; text-decoration: none; } .tealdoc-logo { width: auto; height: 28px; } .tealdoc-brand:hover { color: var(--tealdoc-accent); } .tealdoc-top-nav { display: flex; flex: 1; justify-content: flex-start; gap: 0.25rem; margin-left: 0.2rem; } .tealdoc-top-nav a { position: relative; padding: 0.45rem 0.65rem; color: var(--tealdoc-header-muted-color); border-radius: 7px; font-size: 0.68rem; font-weight: 500; text-decoration: none; } .tealdoc-top-nav a:hover { color: var(--tealdoc-header-color); background: var(--tealdoc-header-control-background); } .tealdoc-top-nav a[aria-current="page"] { color: var(--tealdoc-accent); } .tealdoc-top-nav a[aria-current="page"]::after { position: absolute; right: 0.65rem; bottom: -0.82rem; left: 0.65rem; height: 2px; border-radius: 2px; background: var(--tealdoc-accent); content: ""; } .tealdoc-search-button { display: inline-flex; width: min(190px, 18vw); min-width: 0; min-height: 30px; align-items: center; justify-content: flex-start; gap: 0.35rem; margin: 0; padding: 0.25rem 0.5rem; color: var(--tealdoc-header-muted-color); border: 1px solid var(--tealdoc-header-border); border-radius: 6px; background: var(--tealdoc-header-control-background); box-shadow: none; font-size: 0.76rem; } .tealdoc-header-actions { display: flex; flex: none; align-items: center; gap: 0.2rem; } .tealdoc-search-button:hover { color: var(--tealdoc-header-color); border-color: var(--tealdoc-header-muted-color); background: var(--tealdoc-header-control-background); } .tealdoc-icon-link { display: inline-flex; width: 34px; height: 34px; flex: none; align-items: center; justify-content: center; margin: 0; padding: 0; color: var(--tealdoc-header-muted-color); border-radius: 7px; cursor: pointer; text-decoration: none; } .tealdoc-icon-link:hover { color: var(--tealdoc-header-color); background: var(--tealdoc-header-control-background); } .tealdoc-theme-input:focus-visible ~ .tealdoc-site .tealdoc-theme-toggle { outline: 2px solid var(--tealdoc-accent); outline-offset: 2px; } .tealdoc-icon-link svg { width: 18px; height: 18px; } .tealdoc-theme-icon-sun { display: none; } .tealdoc-theme-input:checked ~ .tealdoc-site .tealdoc-theme-icon-sun { display: block; } .tealdoc-theme-input:checked ~ .tealdoc-site .tealdoc-theme-icon-moon { display: none; } @media (prefers-color-scheme: dark) { .tealdoc-theme-icon-sun { display: block; } .tealdoc-theme-icon-moon { display: none; } .tealdoc-theme-input:checked ~ .tealdoc-site .tealdoc-theme-icon-sun { display: none; } .tealdoc-theme-input:checked ~ .tealdoc-site .tealdoc-theme-icon-moon { display: block; } } .tealdoc-search-button kbd { margin-left: auto; padding: 0.06rem 0.28rem; color: var(--tealdoc-header-muted-color); border: 1px solid var(--tealdoc-header-border); border-radius: 4px; background: transparent; box-shadow: none; font-size: 0.62rem; } .tealdoc-mobile-menu, .tealdoc-mobile-outline { display: none; } .tealdoc-mobile-menu summary { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none; } .tealdoc-mobile-menu summary::-webkit-details-marker, .tealdoc-sidebar-section summary::-webkit-details-marker { display: none; } .tealdoc-hamburger, .tealdoc-hamburger::before, .tealdoc-hamburger::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; } .tealdoc-hamburger { position: relative; } .tealdoc-hamburger::before, .tealdoc-hamburger::after { position: absolute; left: 0; content: ""; } .tealdoc-hamburger::before { top: -6px; } .tealdoc-hamburger::after { top: 6px; } .tealdoc-shell { display: grid; width: 100%; max-width: var(--tealdoc-layout-max-width); min-height: calc(100vh - var(--tealdoc-header-height)); grid-template-columns: var(--tealdoc-sidebar-width) minmax(0, 1fr) var(--tealdoc-outline-width); margin: 0 auto; transition: grid-template-columns 160ms ease; } .tealdoc-sidebar, .tealdoc-outline { position: sticky; top: var(--tealdoc-header-height); overflow: auto; max-height: calc(100vh - var(--tealdoc-header-height)); } .tealdoc-sidebar { padding: 1.25rem 1rem 2rem; border-right: 1px solid var(--tealdoc-border); background: var(--tealdoc-sidebar-background); box-shadow: -100vw 0 0 100vw var(--tealdoc-sidebar-background); } /* The weight is a token because the family is one: a site that puts its own * face here may have only the one weight, and a browser asked for a heavier * one it does not have synthesizes it by smearing the outlines. */ .tealdoc-outline-title { margin: 0 0 0.75rem; color: var(--tealdoc-text-muted); font-family: var(--tealdoc-outline-font-family); font-size: var(--tealdoc-outline-title-font-size); font-weight: var(--tealdoc-outline-title-font-weight); } .tealdoc-sidebar ul, .tealdoc-outline ol { margin: 0; padding: 0; list-style: none; } .tealdoc-sidebar li { margin: 0; padding: 0; } .tealdoc-sidebar a { display: block; padding: var(--tealdoc-sidebar-item-padding); color: var(--tealdoc-sidebar-item-color); border-radius: 6px; font-family: var(--tealdoc-sidebar-font-family); font-size: var(--tealdoc-sidebar-font-size); font-weight: var(--tealdoc-sidebar-font-weight); line-height: 1.3; text-decoration: none; } .tealdoc-sidebar a:hover { color: var(--tealdoc-text); background: color-mix(in srgb, var(--tealdoc-accent-soft) 55%, transparent); } .tealdoc-sidebar a[aria-current="page"] { color: var(--tealdoc-accent); background: transparent; font-weight: var(--tealdoc-sidebar-active-font-weight); } /* The rule and the space around it divide the top level, and only the top * level. A nested group is already inside the one above it, indented under a * heading that names it, so a second divider inside that space says the same * thing twice and reads as a break between peers rather than a group within a * group. */ .tealdoc-sidebar > ul > li.tealdoc-sidebar-section { margin-top: var(--tealdoc-sidebar-section-gap) !important; padding-top: var(--tealdoc-sidebar-section-padding); border-top: 1px solid var(--tealdoc-sidebar-section-border); } /* The first section opens the sidebar, so it carries neither the rule that * separates one group from the last nor the space that rule needs. */ .tealdoc-sidebar > ul > li.tealdoc-sidebar-section:first-child { margin-top: 0 !important; padding-top: 0; border-top: 0; } .tealdoc-sidebar-section details { margin: 0; padding: 0; border: 0; background: transparent; } /* A group's own row is a row like any other, so it takes the item padding and * the same line box, rather than a set of its own: the two differed by seven * pixels, and the rows of a sidebar holding both read as unevenly spaced. The * right side is wider than the token asks for, because the marker sits there. * * The line height is the literal `.tealdoc-sidebar a` uses and not `inherit`. * Pico sets `1rem` on every `summary`, which has to be overridden or only the * group rows are short; but inheriting instead takes the document's own line * height, which is taller than the links beside it, and the row comes out too * tall by exactly the difference. Matching the link is the only value that * makes the two the same height. */ .tealdoc-sidebar-section summary { position: relative; margin: 0; padding: var(--tealdoc-sidebar-item-padding); padding-right: 1.2rem; cursor: pointer; font-family: var(--tealdoc-sidebar-font-family); font-size: var(--tealdoc-sidebar-heading-font-size); font-weight: var(--tealdoc-sidebar-heading-font-weight); line-height: 1.3; list-style: none; } /* Pico colors an accordion summary through * `details[open] > summary:not([role]):not(:focus)`, and a class and an * element name do not outweigh that, so the theme's own color has to be * claimed at the same specificity or the heading is Pico's slate on every * site. Both states, because the closed one is out-specified too. */ .tealdoc-sidebar-section details > summary:not([role]), .tealdoc-sidebar-section details[open] > summary:not([role]) { color: var(--tealdoc-sidebar-heading-color); } /* A nested group is the parent of the rows beneath it, not one of those rows. * Pull its summary back across the list's own inset, leaving that inset in * place for its children. Each deeper section therefore begins one level * before the links it owns. */ .tealdoc-sidebar-section .tealdoc-sidebar-section > details > summary { margin-left: calc(-1 * var(--tealdoc-sidebar-nested-indent)); } /* Nested groups keep the item color because only the divided top level uses * the stronger section-heading color. */ .tealdoc-sidebar-section .tealdoc-sidebar-section > details > summary:not([role]) { color: var(--tealdoc-sidebar-item-color); } .tealdoc-sidebar-section details[open] > summary { margin-bottom: 0; } .tealdoc-sidebar-section summary > a { display: inline; padding: 0; color: inherit; background: transparent; font: inherit; } /* The marker is drawn from two borders rather than set as a glyph, and it * centers against the row rather than sitting a fixed distance from its top. * A glyph carries its own ink offset inside the line box, so rotating one * moves the mark it draws as well as turning it, and the arrow appeared to * drop as the group opened. Two borders on a square rotate about the middle * of the square, which is where the eye reads the arrow as being. */ .tealdoc-sidebar-section summary::after { position: absolute; top: 50%; right: 0.5rem; width: 0.36rem; height: 0.36rem; margin: 0; border-right: 1.5px solid var(--tealdoc-text-faint); border-bottom: 1.5px solid var(--tealdoc-text-faint); background-image: none !important; content: ""; transform: translateY(-50%) rotate(45deg); transition: transform 120ms ease; } .tealdoc-sidebar-section details:not([open]) summary::after { transform: translateY(-50%) rotate(-45deg); } .tealdoc-sidebar-section ul { margin: 0; padding: var(--tealdoc-sidebar-nested-top-padding) 0 0 var(--tealdoc-sidebar-nested-indent); border-left: 0; } .tealdoc-sidebar-section li a { padding: var(--tealdoc-sidebar-item-padding); } .tealdoc-outline { padding: 1.25rem 1.35rem 2rem 1.25rem; } .tealdoc-outline > ol { position: relative; padding-left: 1.55rem; border-left: 1px solid var(--tealdoc-border); } .tealdoc-outline li { margin: 0; padding: 0; } /* Outline rows remain one line so a long API path cannot push the entries * beneath it down the page. The full title remains available through the * link's title and accessible label. */ .tealdoc-outline a { position: relative; display: block; overflow: hidden; padding: var(--tealdoc-outline-item-padding); color: var(--tealdoc-text-muted); font-family: var(--tealdoc-outline-font-family); font-size: var(--tealdoc-outline-font-size); font-weight: var(--tealdoc-outline-font-weight); line-height: 1.3; text-decoration: none; text-overflow: ellipsis; transition: color 120ms ease; white-space: nowrap; } .tealdoc-outline-section details { margin: 0; padding: 0; border: 0; background: transparent; } .tealdoc-outline-section summary { position: relative; margin: 0; padding: 0 1rem 0 0; cursor: pointer; list-style: none; } .tealdoc-outline-section details[open] > summary { margin-bottom: 0; } .tealdoc-outline-section summary::-webkit-details-marker { display: none; } .tealdoc-outline-section summary::marker { content: ""; } .tealdoc-outline-section summary::after { position: absolute; top: 50%; right: 0.15rem; width: 0.32rem; height: 0.32rem; border-right: 1.5px solid var(--tealdoc-text-faint); border-bottom: 1.5px solid var(--tealdoc-text-faint); content: ""; transform: translateY(-65%) rotate(45deg); transition: transform 120ms ease; } .tealdoc-outline-section details:not([open]) > summary::after { transform: translateY(-50%) rotate(-45deg); } .tealdoc-outline-section details > ol { margin: 0; padding: 0; border: 0; list-style: none; } .tealdoc-outline a:hover, .tealdoc-outline a[aria-current="location"] { color: var(--tealdoc-accent); } .tealdoc-outline a[aria-current="location"]::before { position: absolute; top: 0.08rem; bottom: 0.08rem; left: -0.91rem; width: 2px; border-radius: 2px; background: var(--tealdoc-accent); content: ""; } .tealdoc-outline .level-3 a { padding-left: 0.75rem; color: var(--tealdoc-text-faint); font-size: var(--tealdoc-outline-nested-font-size); } .tealdoc-outline .level-3 a:hover, .tealdoc-outline .level-3 a[aria-current="location"] { color: var(--tealdoc-accent); } .tealdoc-content { width: min( 100% - calc(2 * var(--tealdoc-content-gutter)), var(--tealdoc-content-width) ); margin: 0 auto; padding: var(--tealdoc-content-padding-top) 0 var(--tealdoc-content-padding-bottom); border-radius: 0; } .tealdoc-content { font-size: var(--tealdoc-content-font-size); } .tealdoc-breadcrumbs { margin: 0 0 0.75rem; } .tealdoc-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; } .tealdoc-breadcrumbs li { display: inline-flex; align-items: center; margin: 0; padding: 0; color: var(--tealdoc-text-faint); font-size: 0.82rem; line-height: 1.2; } .tealdoc-breadcrumbs li + li::before { margin: 0 0.45rem; color: var(--tealdoc-border); content: "/"; } .tealdoc-breadcrumbs a { color: var(--tealdoc-text-faint); text-decoration-color: currentColor; text-decoration-line: underline !important; text-decoration-thickness: 1px; text-underline-offset: 0.16em; } .tealdoc-breadcrumbs a:hover { color: var(--tealdoc-accent-hover); text-decoration-line: underline !important; } .tealdoc-breadcrumbs .tealdoc-breadcrumb-home { font-size: 0.9rem; text-decoration-line: none !important; } .tealdoc-breadcrumbs .tealdoc-breadcrumb-home:hover { text-decoration-line: none !important; } .tealdoc-breadcrumbs [aria-current="page"] { color: var(--tealdoc-text-muted); } .tealdoc-content h1 { margin-top: 0; letter-spacing: -0.025em; } .tealdoc-content h1, .tealdoc-content h2, .tealdoc-content h3, .tealdoc-content h4, .tealdoc-content h5, .tealdoc-content h6, .tealdoc-hero-copy h1, .tealdoc-feature h2 { font-family: var(--tealdoc-font-heading); font-weight: var(--tealdoc-heading-font-weight); } .tealdoc-content h1 { font-size: var(--tealdoc-heading-1-size); } .tealdoc-content h2 { font-size: var(--tealdoc-heading-2-size); } .tealdoc-content h3 { font-size: var(--tealdoc-heading-3-size); } .tealdoc-content h4 { font-size: var(--tealdoc-heading-4-size); } .tealdoc-content h5 { font-size: var(--tealdoc-heading-5-size); } .tealdoc-content h6 { font-size: var(--tealdoc-heading-6-size); } .tealdoc-content h2 { margin-top: var(--tealdoc-heading-2-spacing); padding-top: var(--tealdoc-heading-2-spacing); border-top: 1px solid var(--tealdoc-border); letter-spacing: -0.015em; } .tealdoc-content h3 { margin-top: var(--tealdoc-heading-3-spacing); } .tealdoc-kind-badge { display: inline-flex; align-items: center; margin-left: 0.45rem; padding: 0.12rem 0.42rem; color: var(--tealdoc-text-muted); border: 1px solid var(--tealdoc-border); border-radius: 999px; background: var(--tealdoc-background-alt); font-family: var(--tealdoc-font); font-size: 0.62rem; font-weight: 650; letter-spacing: 0.035em; line-height: 1.2; text-transform: uppercase; transform: translateY(-0.08em); vertical-align: middle; } .tealdoc-kind-function, .tealdoc-kind-method, .tealdoc-kind-static, .tealdoc-kind-instance, .tealdoc-kind-metamethod, .tealdoc-kind-macro { color: var(--tealdoc-accent); border-color: color-mix( in srgb, var(--tealdoc-accent) 35%, var(--tealdoc-border) ); background: var(--tealdoc-accent-soft); } .tealdoc-header-anchor { margin-left: 0.4rem; color: var(--tealdoc-accent); opacity: 0; font-weight: 500; text-decoration: none; transition: opacity 120ms ease; } .tealdoc-content h1:hover .tealdoc-header-anchor, .tealdoc-content h2:hover .tealdoc-header-anchor, .tealdoc-content h3:hover .tealdoc-header-anchor, .tealdoc-content h4:hover .tealdoc-header-anchor, .tealdoc-header-anchor:focus { opacity: 1; } /* The wrapper exists to hold the language label still. The `pre` inside it is * the horizontal scroll container, and anything positioned against a scroll * container travels with its content. */ .tealdoc-content .tealdoc-code-block { position: relative; } /* The label is a pseudo-element's content rather than an element of its own, * so it is neither in the text a reader copies out of the block nor in what * the search index reads. */ .tealdoc-content .tealdoc-code-block[data-lang]::before { position: absolute; z-index: 1; top: 5px; right: 10px; padding: var(--tealdoc-code-lang-padding); background: var(--tealdoc-code-background); color: var(--tealdoc-code-lang-color); content: attr(data-lang); font-family: var(--tealdoc-font-mono); font-size: var(--tealdoc-code-lang-font-size); line-height: 1; pointer-events: none; user-select: none; } .tealdoc-content pre { overflow: auto; padding: var(--tealdoc-code-block-padding); border: 1px solid var(--tealdoc-border); border-radius: var(--tealdoc-code-block-radius); background: var(--tealdoc-code-background); font-family: var(--tealdoc-font-mono); line-height: 1.55; } /* The block's padding is the pre's, once. Pico pads the inner code as well, * which doubles it and leaves the two halves impossible to tune apart. */ .tealdoc-content pre > code { padding: 0; } .tealdoc-content code[class*="language-"] { color: var(--tealdoc-syntax-foreground); background: transparent; font-family: var(--tealdoc-font-mono); font-size: var(--tealdoc-code-block-font-size); text-shadow: none; } .tealdoc-content :not(pre) > code { padding: var(--tealdoc-inline-code-padding); border-radius: var(--tealdoc-inline-code-radius); background: var(--tealdoc-inline-code-background); font-size: var(--tealdoc-inline-code-font-size); font-weight: 550; } .tealdoc-content :is(h1, h2, h3, h4, h5, h6) code { padding: 0; background: transparent; font-size: 1em; font-weight: inherit; } .tealdoc-content a > code { color: var(--tealdoc-link); } .tealdoc-content a:hover > code { color: var(--tealdoc-link-hover); } .token.comment, .tealdoc-token-comment { color: var(--tealdoc-syntax-comment); font-style: italic; } .token.boolean, .tealdoc-token-boolean { color: var(--tealdoc-syntax-boolean); } .token.keyword, .tealdoc-token-keyword { color: var(--tealdoc-syntax-keyword); } .token.directive, .tealdoc-token-meta { color: var(--tealdoc-syntax-meta); } .token.number, .tealdoc-token-number { color: var(--tealdoc-syntax-number); } .token.function, .tealdoc-token-function { color: var(--tealdoc-syntax-function); } .token.operator, .tealdoc-token-operator { color: var(--tealdoc-syntax-operator); } .token.property, .tealdoc-token-property { color: var(--tealdoc-syntax-property); } .token.punctuation, .tealdoc-token-punctuation { color: var(--tealdoc-syntax-punctuation); } .token.string, .tealdoc-token-string { color: var(--tealdoc-syntax-string); } .token.class-name, .tealdoc-token-type { color: var(--tealdoc-syntax-type); } .token.variable, .tealdoc-token-variable { color: var(--tealdoc-syntax-variable); } .tealdoc-code-link, .tealdoc-code-link:visited, .tealdoc-code-link:hover { color: var(--tealdoc-syntax-type); border-bottom: 1px dotted currentColor; text-decoration: none; text-underline-offset: 0.18em; } .tealdoc-code-link .tealdoc-token-type, .tealdoc-code-link:visited .tealdoc-token-type, .tealdoc-code-link:hover .tealdoc-token-type { color: inherit; } .tealdoc-code-link.tealdoc-code-link-variable, .tealdoc-code-link.tealdoc-code-link-variable:visited, .tealdoc-code-link.tealdoc-code-link-variable:hover { color: var(--tealdoc-syntax-variable); } .tealdoc-code-link-variable .tealdoc-token-variable { color: inherit; } .tealdoc-code-link.tealdoc-code-link-property, .tealdoc-code-link.tealdoc-code-link-property:visited, .tealdoc-code-link.tealdoc-code-link-property:hover { color: var(--tealdoc-syntax-property); } .tealdoc-code-link-property .tealdoc-token-property { color: inherit; } .tealdoc-code-link.tealdoc-code-link-function, .tealdoc-code-link.tealdoc-code-link-function:visited, .tealdoc-code-link.tealdoc-code-link-function:hover { color: var(--tealdoc-syntax-function); } .tealdoc-code-link-function .tealdoc-token-function { color: inherit; } .tealdoc-code-link:hover { border-bottom-style: solid; } .tealdoc-content table { display: block; overflow-x: auto; width: 100%; } .tealdoc-content th, .tealdoc-content td { padding: 0.4em 0.9em 0.4em 0; vertical-align: top; } .tealdoc-content thead th { color: var(--tealdoc-text-muted); font-size: 0.82em; letter-spacing: 0.04em; text-transform: uppercase; } /* A parameter row is as tall as its description, and the name and the type it belongs to have to stay beside the first line of that description rather than float in the middle of it. Every column but the last holds one of those short values, so it keeps to one line and lets the description take the width that is left. */ .tealdoc-content td:not(:last-child) { white-space: nowrap; } .tealdoc-admonition { margin: 1.25rem 0; padding: 0.9rem 1rem; border: 1px solid var(--tealdoc-border); border-left: 4px solid var(--tealdoc-admonition-color); border-radius: 8px; background: color-mix( in srgb, var(--tealdoc-admonition-color) 8%, var(--tealdoc-background) ); } .tealdoc-admonition-note { --tealdoc-admonition-color: var(--tealdoc-admonition-note); } .tealdoc-admonition-tip { --tealdoc-admonition-color: var(--tealdoc-admonition-tip); } .tealdoc-admonition-important { --tealdoc-admonition-color: var(--tealdoc-admonition-important); } .tealdoc-admonition-warning { --tealdoc-admonition-color: var(--tealdoc-admonition-warning); } .tealdoc-admonition-danger { --tealdoc-admonition-color: var(--tealdoc-admonition-danger); } .tealdoc-admonition-title { margin: 0 0 0.35rem; color: var(--tealdoc-admonition-color); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; } .tealdoc-admonition > :last-child { margin-bottom: 0; } .tealdoc-details { margin: 1.25rem 0; border: 1px solid var(--tealdoc-border); background: var(--tealdoc-background-alt); } .tealdoc-details > summary { padding: 0.7rem 0.9rem; color: var(--tealdoc-text); font-weight: 600; cursor: pointer; } .tealdoc-details-content { padding: 0 0.9rem 0.8rem; } .tealdoc-details-content > :last-child { margin-bottom: 0; } /* Pico lays a [role="group"] out as an inline flex row, which is right for a * button group and wrong for a stack of labelled code blocks, so the display * is stated here rather than left to the classless sheet. */ /* One flex container holding input, label and panel triples in that order. * The labels are pulled to the first row, so the strip forms itself without * being an element of its own, and the panels are full width so each starts a * line. Interleaving is what lets one adjacent-sibling rule do everything. */ .tealdoc-code-group { position: relative; display: flex; overflow: hidden; flex-wrap: wrap; margin: 1.25rem 0; border: 1px solid var(--tealdoc-border); border-radius: var(--tealdoc-code-block-radius); background: var(--tealdoc-code-background); box-shadow: none; } /* A real radio, kept off the page but not out of it: the arrow keys, the * single tab stop and the exclusivity are the browser's. * * `appearance` has to be said here. Pico turns it off for most controls but * exempts radios, so a radio keeps drawing its native dot, and a native * control paints at its own size whatever box it is given: in Safari the dot * appeared next to every tab. Taking it out of flow rather than shrinking it * to a pixel also keeps it from perturbing the strip it sits in, and costs * nothing, because a sibling selector reads the document and not the layout. */ .tealdoc-code-tab-input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; appearance: none; clip-path: inset(50%); pointer-events: none; -webkit-appearance: none; } .tealdoc-code-tab { order: -1; padding: var(--tealdoc-code-tab-padding); border-bottom: 2px solid transparent; color: var(--tealdoc-code-tab-text); cursor: pointer; font-family: var(--tealdoc-font); font-size: var(--tealdoc-code-tab-font-size); font-weight: var(--tealdoc-code-tab-font-weight); } .tealdoc-code-tab:hover { color: var(--tealdoc-code-tab-hover-text); } .tealdoc-code-panel { display: none; width: 100%; margin: 0; border-top: 1px solid var(--tealdoc-code-tab-divider); } /* The whole mechanism. */ .tealdoc-code-tab-input:checked + .tealdoc-code-tab + .tealdoc-code-panel { display: block; } .tealdoc-code-tab-input:checked + .tealdoc-code-tab { border-bottom-color: var(--tealdoc-code-tab-active-bar); color: var(--tealdoc-code-tab-active-text); } .tealdoc-code-tab-input:focus-visible + .tealdoc-code-tab { outline: 2px solid var(--tealdoc-accent); outline-offset: -2px; } .tealdoc-code-group > .tealdoc-code-panel pre { border: 0; border-radius: 0; } /* Paper has no tabs, so it gets all of them. */ @media print { .tealdoc-code-panel { display: block; } } .tealdoc-labeled-code { margin: 1.25rem 0; } .tealdoc-code-group > .tealdoc-labeled-code { margin: 0; } .tealdoc-code-group > .tealdoc-labeled-code + .tealdoc-labeled-code { border-top: 1px solid var(--tealdoc-border); } .tealdoc-labeled-code figcaption { padding: 0.45rem 0.6rem; color: var(--tealdoc-text-muted); font-family: var(--tealdoc-font); font-size: 0.72rem; font-weight: 600; } .tealdoc-labeled-code pre[class*="language-"] { margin: 0; border-right: 0; border-bottom: 0; border-left: 0; } .tealdoc-code-group > .tealdoc-labeled-code pre { border: 0; border-radius: 0; } .tealdoc-page-nav { display: grid; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--tealdoc-border); gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .tealdoc-page-nav a { display: grid; min-height: 84px; align-content: center; gap: 0.25rem; padding: 0.85rem 1rem; color: var(--tealdoc-text); border: 1px solid var(--tealdoc-border); border-radius: 9px; text-decoration: none; transition: border-color 120ms ease, background 120ms ease; } .tealdoc-page-nav a:hover { border-color: var(--tealdoc-accent); background: var(--tealdoc-accent-soft); } .tealdoc-page-nav a.next { text-align: right; } .tealdoc-page-nav span { color: var(--tealdoc-text-faint); font-size: 0.72rem; } .tealdoc-page-nav strong { color: var(--tealdoc-accent); font-size: 0.9rem; } .tealdoc-home-shell { display: block; } .tealdoc-home-content { width: calc(100% - (2 * var(--tealdoc-home-gutter))); max-width: var(--tealdoc-home-width); padding-top: 4rem; } .tealdoc-home-hero { margin: 0 0 4rem; } /* The row is as tall as what is in it, and the copy is anchored to the top of * it. Centering the copy inside a row with a floor put space above the heading * whenever the copy came up short of that floor, and the narrower the window * the shorter the copy and the more of it there was. */ .tealdoc-hero-main { display: grid; align-items: start; gap: 3rem; grid-template-columns: minmax(0, 1fr); } .tealdoc-hero-main.has-image { grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr); } .tealdoc-hero-copy { position: relative; z-index: 1; } .tealdoc-hero-copy h1 { max-width: 720px; margin: 0; color: var(--tealdoc-accent); font-size: var(--tealdoc-hero-name-size); letter-spacing: -0.04em; line-height: 0.95; } .tealdoc-hero-text { max-width: 650px; margin: 1.08rem 0 0; color: var(--tealdoc-text-muted); font-size: var(--tealdoc-hero-text-size); line-height: 1.35; } .tealdoc-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; } /* The box is smaller; the type in it is not. A hero action is read at the * same size wherever it sits, so what comes off is the padding around it and * the height that padding implied. */ /* The box is smaller; the type in it is not. A hero action is read at the * same size wherever it sits, so what comes off is the padding around it. * `line-height` comes off with it: the type's own line box was most of the * height, and leaving it at the document's meant the padding could be cut in * half without the button looking any smaller. */ .tealdoc-hero-action { display: inline-flex; min-height: 0; align-items: center; justify-content: center; padding: 0.52rem 0.95rem; border: 1px solid transparent; border-radius: 16px; font-size: 0.9rem; line-height: 1; font-weight: 650; text-decoration: none; } .tealdoc-hero-action.brand { color: var(--tealdoc-accent-contrast); background: var(--tealdoc-button-brand-background); } .tealdoc-hero-action.brand:hover { color: var(--tealdoc-accent-contrast); background: var(--tealdoc-button-brand-hover-background); } .tealdoc-hero-action.alt { color: var(--tealdoc-text); border-color: var(--tealdoc-border); background: var(--tealdoc-button-alt-background); } .tealdoc-hero-action.alt:hover { color: var(--tealdoc-text); border-color: var(--tealdoc-border); background: var(--tealdoc-button-alt-hover-background); } /* The image is the one thing that centers, against whichever column is taller. * It carries no floor of its own: a floor taller than the image only pushes * the image down the middle of it and away from the heading it sits beside, * and the row is already as tall as the taller of the two columns. */ .tealdoc-hero-image { position: relative; display: grid; align-self: center; place-items: center; } .tealdoc-hero-starburst { position: absolute; width: var(--tealdoc-hero-glow-size); aspect-ratio: 1; border-radius: 50%; background: radial-gradient( circle, color-mix(in srgb, var(--tealdoc-hero-glow-color) 38%, transparent) 0, color-mix(in srgb, var(--tealdoc-hero-glow-color) 20%, transparent) 34%, color-mix(in srgb, var(--tealdoc-hero-glow-color) 8%, transparent) 58%, transparent 76% ); filter: blur(var(--tealdoc-hero-glow-blur)); opacity: var(--tealdoc-hero-glow-opacity); } .tealdoc-hero-image img { position: relative; z-index: 1; width: min(100%, 390px); max-height: 330px; object-fit: contain; } .tealdoc-features { position: relative; z-index: 2; display: grid; margin-top: var(--tealdoc-hero-features-gap); gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); } .tealdoc-feature { margin: 0; padding: 1.4rem; border: 1px solid var(--tealdoc-border); border-radius: 12px; background: var(--tealdoc-background-alt); } .tealdoc-feature-icon, .tealdoc-feature-image { display: inline-grid; width: 40px; height: 40px; place-items: center; margin-bottom: 1rem; border-radius: 8px; background: var(--tealdoc-accent-soft); font-size: 1.25rem; object-fit: contain; } .tealdoc-feature h2 { margin: 0 0 0.55rem; padding: 0; color: var(--tealdoc-text); border: 0; font-size: 1rem; letter-spacing: 0; } .tealdoc-feature-details { margin: 0; color: var(--tealdoc-text-muted); font-size: 0.86rem; line-height: 1.55; } .tealdoc-feature-details p { margin: 0; } .tealdoc-search-dialog { width: min(94vw, 680px); max-width: none; padding: 0; border: 1px solid var(--tealdoc-border); border-radius: 12px; background: var(--tealdoc-background-elv); box-shadow: 0 24px 80px rgb(0 0 0 / 28%); } .tealdoc-search-dialog::backdrop { background: rgb(0 0 0 / 46%); backdrop-filter: blur(3px); } .tealdoc-search-panel { margin: 0; padding: 0; } .tealdoc-search-panel > header { display: flex; align-items: center; gap: 0.65rem; margin: 0; padding: 0.8rem; border-bottom: 1px solid var(--tealdoc-border); background: transparent; } .tealdoc-search-panel label { display: flex; flex: 1; align-items: center; gap: 0.5rem; margin: 0; } .tealdoc-search-panel input { height: 42px; margin: 0; padding: 0 0.75rem; border: 1px solid var(--tealdoc-accent); border-radius: 7px; background: var(--tealdoc-background); box-shadow: 0 0 0 3px var(--tealdoc-accent-soft); } .tealdoc-search-panel [data-tealdoc-search-close] { width: auto; margin: 0; padding: 0.32rem 0.5rem; color: var(--tealdoc-text-muted); border: 1px solid var(--tealdoc-border); border-radius: 5px; background: var(--tealdoc-background-alt); box-shadow: none; font-size: 0.72rem; } .tealdoc-search-results { display: grid; overflow: auto; max-height: min(60vh, 520px); gap: 0.35rem; padding: 0.65rem; } .tealdoc-search-results a { display: grid; gap: 0.15rem; padding: 0.7rem 0.8rem; color: var(--tealdoc-text); border: 1px solid transparent; border-radius: 7px; text-decoration: none; } .tealdoc-search-results a:hover, .tealdoc-search-results a:focus { border-color: var(--tealdoc-border); background: var(--tealdoc-accent-soft); } .tealdoc-search-results strong { font-size: 0.9rem; } .tealdoc-search-results small { overflow: hidden; color: var(--tealdoc-text-faint); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; } .tealdoc-search-empty { margin: 0; padding: 1.5rem; color: var(--tealdoc-text-muted); text-align: center; } .tealdoc-footer { margin: 0; padding: 0; color: var(--tealdoc-footer-text); border-top: 1px solid var(--tealdoc-footer-border); background: var(--tealdoc-footer-background); font-size: 0.72rem; } .tealdoc-footer-inner { position: relative; display: flex; width: 100%; max-width: var(--tealdoc-layout-max-width); flex-direction: column; align-items: center; gap: 0.35rem; margin: 0 auto; padding: 1rem 1.5rem 1rem calc(var(--tealdoc-sidebar-width) + 1.5rem); text-align: center; } /* A group is a row, and wraps within itself when it has to. The column above * puts one group under the last, which is the break a reader expects. */ .tealdoc-footer-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 0.75rem; } /* What built the page is the smallest claim in here, and reads as a footnote * under the two rows that are about the work itself. */ .tealdoc-footer-meta { color: var(--tealdoc-text-faint); font-size: 0.92em; } .tealdoc-footer-inner::before { position: absolute; top: 0; bottom: 0; left: var(--tealdoc-sidebar-width); width: 1px; background: var(--tealdoc-border); content: ""; } .tealdoc-home-footer .tealdoc-footer-inner { padding-inline: 1.5rem; } .tealdoc-home-footer .tealdoc-footer-inner::before { content: none; } .tealdoc-footer a { color: var(--tealdoc-footer-link); text-decoration: none; } .tealdoc-footer a:hover { color: var(--tealdoc-accent); } @media (max-width: 1100px) { .tealdoc-shell { grid-template-columns: var(--tealdoc-sidebar-width) minmax(0, 1fr); } .tealdoc-outline { display: none; } .tealdoc-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .tealdoc-nav { position: relative; gap: 0.65rem; padding: 0 1rem; } .tealdoc-top-nav { display: none; } .tealdoc-brand { flex: 1; } .tealdoc-search-button span:nth-child(2), .tealdoc-search-button kbd { display: none; } .tealdoc-search-button { width: 34px; margin-left: auto; padding: 0; border-color: transparent; background: transparent; font-size: 1rem; } .tealdoc-mobile-menu { display: block; margin: 0; } .tealdoc-mobile-menu[open] { position: absolute; z-index: 40; top: var(--tealdoc-header-height); right: 0; left: 0; max-height: calc(100vh - var(--tealdoc-header-height)); max-height: calc(100dvh - var(--tealdoc-header-height)); overflow-y: auto; padding: 0.8rem 1rem 1rem; border-bottom: 1px solid var(--tealdoc-border); background: var(--tealdoc-background); box-shadow: 0 14px 30px rgb(0 0 0 / 12%); overscroll-behavior: contain; } .tealdoc-mobile-top-nav { display: grid; gap: 0.2rem; margin: 0; padding: 0 0 0.65rem; border-bottom: 1px solid var(--tealdoc-border); } .tealdoc-mobile-top-nav a { display: block; padding: 0.45rem 0.6rem; color: var(--tealdoc-text-muted); border-radius: 6px; text-decoration: none; } .tealdoc-mobile-top-nav a[aria-current="page"] { color: var(--tealdoc-accent); background: var(--tealdoc-accent-soft); } .tealdoc-mobile-menu > ul { margin: 0.75rem 0 0; padding: 0.65rem 0 0; border-top: 1px solid var(--tealdoc-border); list-style: none; } .tealdoc-mobile-menu a { display: block; padding: 0.45rem 0.6rem; color: var(--tealdoc-text-muted); border-radius: 6px; text-decoration: none; } .tealdoc-mobile-menu a[aria-current="page"] { color: var(--tealdoc-accent); background: var(--tealdoc-accent-soft); } .tealdoc-mobile-menu .tealdoc-sidebar-section ul { list-style: none; } .tealdoc-shell { display: block; } .tealdoc-sidebar { display: none; } .tealdoc-mobile-outline { display: block; margin-bottom: 1.5rem; padding: 0.75rem 1rem; border: 1px solid var(--tealdoc-border); border-radius: 8px; background: var(--tealdoc-background-alt); } .tealdoc-mobile-outline > summary { color: var(--tealdoc-text-muted); cursor: pointer; font-size: 0.85rem; font-weight: 600; } .tealdoc-mobile-outline > ol { margin: 0.75rem 0 0; padding: 0.75rem 0 0.25rem 0.85rem; border-left: 1px solid var(--tealdoc-border); list-style: none; } .tealdoc-mobile-outline li { margin: 0.2rem 0; } .tealdoc-mobile-outline a { color: var(--tealdoc-text-muted); font-size: 0.8rem; text-decoration: none; } .tealdoc-mobile-outline .level-3 a { padding-left: 0.65rem; } .tealdoc-content { width: min(100% - 2rem, var(--tealdoc-content-width)); padding-top: 1rem; } .tealdoc-home-content { width: min(100% - 2rem, var(--tealdoc-home-width)); padding-top: 2.5rem; } .tealdoc-hero-main.has-image { grid-template-columns: minmax(0, 1fr); } .tealdoc-hero-main { gap: 2rem; } .tealdoc-hero-copy h1 { font-size: var(--tealdoc-hero-name-size-narrow); } .tealdoc-hero-text { font-size: var(--tealdoc-hero-text-size-narrow); } .tealdoc-hero-starburst { width: min(78vw, 340px); } .tealdoc-features { grid-template-columns: minmax(0, 1fr); } .tealdoc-footer-inner { padding: 1rem; } .tealdoc-footer-inner::before { display: none; } .tealdoc-page-nav { grid-template-columns: 1fr; } .tealdoc-page-nav > span { display: none; } } @media (max-width: 520px) { .tealdoc-brand-name { display: none; } .tealdoc-nav { gap: 0.35rem; } } /* The site's own palette and display face, over tealdoc's defaults. * * Mostly the documented `--tealdoc-*` tokens, so the theme survives a * generator update: a rule written against a class would not. The two halves * of each pair are the light and the dark value, and tealdoc picks between * them from the reader's system setting and from the theme toggle. What is * written against a class instead is the wordmark and the column layout the * home page asks for, and those are the parts to check after an update. * * The display face is served with the rest of the site from `docs/public`. * Keeping its `@font-face` here removes the external stylesheet, DNS, and TLS * requests while letting the browser cache the small WOFF2 subsets normally. */ @font-face { font-family: "Jersey 15"; font-style: normal; font-weight: 400; font-display: block; src: url("/fonts/jersey-15/jersey-15-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Jersey 15"; font-style: normal; font-weight: 400; font-display: block; src: url("/fonts/jersey-15/jersey-15-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; } :root { /* The hero glow, top to bottom: sky down to lit sand. The hero uses a * whole ramp rather than tinting one radial glow with the current accent. * * It has to switch with the theme. The dark ramp starts at night and ends * at gold, which behind a cut-out illustration reads as sky over sand on * a dark page and as a grey smudge on a sand one. The light ramp keeps the * same shape with the floor raised out of the dark end entirely. */ --tecs-glow-1: #e4d7bc; --tecs-glow-2: #c9d0ae; --tecs-glow-3: #d8b98a; --tecs-glow-4: #e3c98f; --tecs-glow-5: #f0e2c0; /* The header art sits under the nav controls, and in the light theme those * are dark glyphs that would otherwise land on dark mountains. Washing the * art back toward the bar colour buys the contrast back. The dark theme * needs almost none: its controls are already light on a dark scene. */ --tecs-header-wash: rgba(240, 231, 210, 0.55); /* How far the hero art rides up, and the space that move gives back. * Written in pixels rather than as a percentage because the two need to * stay equal: `top` takes a percentage of the row's height, while a * percentage margin resolves against its width, so the pair would drift * apart at every width but one. * * It is small now because most of the gap it was compensating for was * inside the artwork: the source had 41px of transparent margin above the * cactus, which is 27px of nothing once it is scaled into its box. The * file is cropped to its artwork, so this only has to do the rest. */ --tecs-hero-lift: 20px; /* One root size, at every width. Pico steps this from 100% to 131.25% * across five breakpoints, which makes `rem` a function of the viewport, * and browser zoom is a change in the viewport: crossing 1280 or 1536 on * the way out moves every rem-sized heading, margin and gap on the page. * A reader zooming asks for the same page at a different size, so the base * is a constant and zoom is the only thing that scales it. */ --pico-font-size: 135%; /* Paper and ink. Sand rather than white, because a page of signatures is * read for minutes at a time. * * The dark ground is lifted well off black on purpose. A near-black page * makes every warm color on it read as a light source rather than as a * surface, and this palette is almost entirely warm. */ --tealdoc-light-background: #f2e9d4; --tealdoc-light-background-alt: #eae0c8; --tealdoc-light-background-elv: #f8f2e2; --tealdoc-light-border: #d8cbad; --tealdoc-light-code-background: #f8f2e2; --tealdoc-light-sidebar-background: #e6dbc0; --tealdoc-light-text: #4c4235; --tealdoc-light-text-muted: #6e6252; --tealdoc-light-text-faint: #8d8170; --tealdoc-dark-background: #292420; --tealdoc-dark-background-alt: #231f1b; --tealdoc-dark-background-elv: #342e28; --tealdoc-dark-border: #453e35; --tealdoc-dark-code-background: #221e1a; --tealdoc-dark-sidebar-background: #221e1a; --tealdoc-dark-text: #d8ccb0; --tealdoc-dark-text-muted: #b0a284; --tealdoc-dark-text-faint: #8a7d69; /* The accent is earth: rust on paper, clay in the dark. Headings carry it, * so it is the color the site is mostly made of, and the desert is the * half of this palette that should be doing that work. */ --tealdoc-light-accent: #8e5330; --tealdoc-light-accent-hover: #a96b3e; --tealdoc-light-accent-soft: #8e533024; --tealdoc-light-accent-contrast: #fbf5e6; --tealdoc-dark-accent: #e0a87c; --tealdoc-dark-accent-hover: #cf8659; --tealdoc-dark-accent-soft: #e0a87c29; --tealdoc-dark-accent-contrast: #292420; /* A link is not the accent: earth headings and earth links in one column * read as one thing. Links are the green, which is the other half of the * desert and the half that has to appear somewhere a reader looks. */ --tealdoc-light-link: #4f8064; --tealdoc-light-link-hover: #3f6350; --tealdoc-dark-link: #a7c080; --tealdoc-dark-link-hover: #c6d3a8; /* The wordmark rides the header, whose surface follows the theme, so both * of its colors have to as well. */ --tecs-wordmark: #a96b3e; --tecs-wordmark-rule: #4f8064; /* The primary action uses the same active-theme color as a link. Its text * keeps Tealdoc's contrast pair: white on the darker light-theme tan and * near-black on the brighter dark-theme red. */ --tealdoc-button-brand-background: var(--tealdoc-link); --tealdoc-button-brand-hover-background: var(--tealdoc-link-hover); /* The bar continues the left navigation's surface across the viewport. */ --tealdoc-header-background: var(--tealdoc-sidebar-background); --tealdoc-header-color: var(--tealdoc-text); --tealdoc-header-muted-color: var(--tealdoc-text-muted); --tealdoc-header-border: var(--tealdoc-border); --tealdoc-header-control-background: var(--tealdoc-background-alt); /* The display face, on headings and on the two navigations. Body text * stays in the reading face, which is what a paragraph is set in. */ --tealdoc-font-heading: "Jersey 15", sans-serif; --tealdoc-heading-font-weight: 400; /* The right-hand outline matches the left-hand navigation rather than * sitting a step under it. They are the same kind of thing, a list of * places on the page, and one being smaller read as an accident. */ /* Tealdoc applies this on both sides of each h2 separator. */ --tealdoc-heading-2-spacing: 1.75rem; --tealdoc-sidebar-font-family: var(--tealdoc-font-heading); --tealdoc-outline-font-family: var(--tealdoc-font-heading); --tealdoc-sidebar-font-size: 0.85rem; --tealdoc-sidebar-heading-font-size: 0.85rem; /* One weight, on all three, because the display face ships one. A rule * asking for 700 gets a synthesized bold instead: the browser smears the * 400 outlines sideways, and a face drawn on a pixel grid is exactly the * kind that cannot survive it. Tealdoc's default heading weight is 700, * which is right for the text face it assumes and wrong for this one. */ --tealdoc-sidebar-font-weight: 400; --tealdoc-sidebar-active-font-weight: 400; --tealdoc-sidebar-heading-font-weight: 400; --tealdoc-outline-font-size: 0.85rem; --tealdoc-outline-nested-font-size: 0.85rem; --tealdoc-outline-font-weight: 400; --tealdoc-outline-title-font-weight: 400; /* Rounded, to match the cards and the search field. The corner is small * enough to read as a softened edge rather than as a pill: a listing is * still a block of text, and a large radius starts clipping the first and * last glyph of the top and bottom lines. */ --tealdoc-code-block-radius: 6px; /* The hero name is set in the display face, which carries more weight per * point than a text face, so it takes fewer of them. The narrow value is * the step a phone gets, at tealdoc's own breakpoint. */ --tealdoc-hero-name-size: 2.9rem; --tealdoc-hero-name-size-narrow: 2.4rem; /* 1.35rem is what puts the tagline on one line: it needs 562px of the * copy column's 607. Phones scale it against the space their one-column * layout leaves, rather than allowing a second line to take over the * hero. The ordinary size remains fixed once that space is available. */ --tealdoc-hero-text-size: 1.35rem; --tealdoc-hero-text-size-narrow: 1.25rem; --tealdoc-hero-glow-size: 192px; --tealdoc-hero-glow-blur: 44px; --tealdoc-hero-glow-opacity: 1; } /* Widen the margin the outline's active item is decided by. * * Two numbers settle which entry is marked, and tealdoc sets them 3.4px apart: * an anchor jump lands a heading at `scroll-padding-top`, which is the header * plus 1rem, or 85.6px down; the scroll spy only marks a heading once its top * is within header + 24px, or 89px. A jump therefore qualifies by 3.4px, and * anything that rounds the other way, a zoom step or a fractional device pixel, * marks the heading before it instead. * * Half a rem lands the jump at 74.8px, which clears the line by 14px rather * than by 3, and still leaves ten of visible gap under the bar. It costs a * little of the space above a heading you jumped to, which is the cheaper of * the two. */ :root { scroll-padding-top: calc(var(--tealdoc-header-height) + 0.5rem); } /* The wordmark, which sits beside the cactus rather than replacing it. Clay * with a green rule under, the one piece of the identity that is a drawing * rather than a color, so it is written against tealdoc's classes rather than * its tokens. */ .tealdoc-brand-name { display: inline-flex; align-items: center; height: 40px; margin-left: -12px; padding: 0 12px; color: var(--tecs-wordmark); font-family: var(--tealdoc-font-heading); font-size: 1.5rem; font-weight: 400; text-decoration: underline; text-decoration-color: var(--tecs-wordmark-rule); text-decoration-thickness: 2px; text-underline-offset: 5px; } /* The logo is pixel art, so it is sized to a whole multiple of its 32 unit * grid and told not to resample. Tealdoc's default 28px would land the grid on * fractional pixels and soften every edge the artwork is made of. * * It renders through an ``, which cannot read this page's custom * properties, so the file carries one set of colors picked to clear both the * light and the dark header surface rather than shipping a pair and swapping * them. A mark that needs to know the theme is a mark with two failure modes. */ .tealdoc-logo { width: 32px; height: 32px; image-rendering: pixelated; } .tealdoc-home-hero .tealdoc-hero-starburst { background: linear-gradient( 180deg, var(--tecs-glow-1) 0%, var(--tecs-glow-2) 20%, var(--tecs-glow-3) 45%, var(--tecs-glow-4) 70%, var(--tecs-glow-5) 100% ); } /* The header morphs into a desert at sunset toward its right. The artwork * carries its own left-to-right alpha, so this is a single background layer * over the header colour rather than a masked overlay, and the nav content * paints above it with no stacking context to manage. * * It is anchored right and sized to the bar's height, so the horizon sits at * the same place at every width and the scene simply shows less of itself on * a narrow window. Below the point where the top nav collapses it is dropped * entirely: at that width the icons sit where the mountains are. */ .tealdoc-header { background-image: linear-gradient(var(--tecs-header-wash), var(--tecs-header-wash)), url("/images/header-desert.svg"); background-repeat: no-repeat; background-position: right center; background-size: auto 100%; } @media (max-width: 900px) { .tealdoc-header { background-image: none; } } /* Pull the hero art up. Tealdoc centers the image against the copy column, * which sits the illustration low: its ground and glow hang below the buttons * while the headline has empty page above it. The whole grid moves, image and * starburst together, so the glow stays under the art it belongs to. * * A top offset rather than a transform. It does not reclaim the space it * leaves: a relatively positioned box keeps its original slot in the layout * either way, so the art moves and the row stays as tall as it was. The hole * that opens under it is what the margins below close. */ .tealdoc-home-hero .tealdoc-hero-image { top: calc(-1 * var(--tecs-hero-lift)); margin-bottom: calc(-1 * var(--tecs-hero-lift)); } /* Below the width where the hero stacks, the art is over the copy rather than * beside it and there is nothing above it to close up against. */ @media (max-width: 900px) { .tealdoc-home-hero .tealdoc-hero-image { top: 0; margin-bottom: 0; } } /* A phone has one column, so the desktop cap makes the illustration nearly * full-width and lets it dominate the first screen. Keep it present without * making the introduction start below the fold. */ @media (max-width: 760px) { /* The site increases its root type for prose. A menu is a control surface, * not prose, so keep its rows compact enough to scan and reach. */ .tealdoc-mobile-menu, .tealdoc-mobile-menu .tealdoc-sidebar-section summary { font-size: 0.75rem; } /* The one-column copy area can be much narrower than the desktop hero. * Let the heading follow that width while preserving a single, readable * line on a phone. */ .tealdoc-hero-copy h1 { font-size: clamp(0.85rem, calc(8.2vw - 0.1rem), var(--tealdoc-hero-name-size-narrow)); white-space: nowrap; } .tealdoc-home-hero .tealdoc-hero-image img { width: min(72vw, 260px); max-height: 220px; } .tealdoc-hero-text { font-size: clamp(0.6rem, calc(5.2vw - 0.105rem), var(--tealdoc-hero-text-size-narrow)); white-space: nowrap; } } /* Tealdoc's main column carries 4rem of top padding, which is right for a page * that opens on a heading and too much for one that opens on a hero: it pushed * the headline and the art far enough below the bar to read as a gap rather * than as breathing room. Only the home page has a hero, so only it is cut. */ main:has(.tealdoc-home-hero) { padding-top: 3rem; } /* The cards stand off the hero on their own padding rather than only on the * gap above them, so the space belongs to the block that owns it. */ .tealdoc-features { padding-top: 2rem; } /* Close the gap under the hero. Tealdoc's 4rem plus a 2rem features gap was * tuned for art that filled its row. The art now rides 20% higher and leaves * its slot behind, so that vacated band is added to both of them and the three * together read as one large hole. Nearly all of the explicit spacing comes * out; what is left between the hero and the cards is the vacated band. */ .tealdoc-home-hero { margin-bottom: 0; } :root { --tealdoc-hero-features-gap: 1rem; } .tealdoc-feature-details a, .tealdoc-feature-details a:visited, .tealdoc-feature-details a:hover { color: inherit; text-decoration-color: currentColor; } @media (min-width: 640px) { :root { --tealdoc-hero-glow-size: 256px; --tealdoc-hero-glow-blur: 56px; } } @media (min-width: 960px) { :root { --tealdoc-hero-glow-size: 320px; --tealdoc-hero-glow-blur: 68px; } } /* Headings carry the accent, which is what makes a page of them read as this * site rather than as the default. The first two take the strong tone and the * rest the softer one, so depth is visible without another size step. */ .tealdoc-content h1, .tealdoc-content h2 { color: var(--tealdoc-accent); } .tealdoc-content h3, .tealdoc-content h4, .tealdoc-content h5 { color: var(--tealdoc-accent-hover); } /* No negative tracking on the display face. Tealdoc tightens its headings by * a hair, which is right for the text face it assumes and wrong for a face * drawn on a pixel grid: pulling these letters together closes the gaps the * glyphs are built around, and the word reads as though it lost its kerning. * The values are tealdoc's own, hardcoded rather than tokens, so this is * written against its classes. */ .tealdoc-brand, .tealdoc-content h1, .tealdoc-content h2, .tealdoc-hero-copy h1 { letter-spacing: 0; } /* The line under the hero name is set in the display face, like the name * above it, so the two read as one piece rather than as a heading with a * caption. It stays at 400: Jersey 15 ships one weight, and asking for a * bolder one gets the browser's smeared imitation rather than a bold. */ .tealdoc-hero-text { font-family: var(--tealdoc-font-heading); font-weight: 400; margin-top: 2rem; } /* A linkable type reads as a type first. Tealdoc paints it in the link color, * which in a block of code is the one thing that is not syntax and so pulls * the eye off the code it is part of. The underline already says it is a * link, so the color goes back to the one every other nominal type has. */ .tealdoc-code-link, .tealdoc-code-link .tealdoc-token-type { color: var(--tealdoc-syntax-type); } /* A home page layout, which is the page's own and not the generator's: a list * of module names reads down two columns rather than along one tall one. */ .module-columns ul { columns: 2; column-gap: 3rem; margin: 0; padding-left: 1.25rem; } .module-columns li { margin: 0.25rem 0; break-inside: avoid; line-height: 1.5; } @media (max-width: 640px) { .module-columns ul { columns: 1; } } /* Syntax. * * These twelve syntax roles use the site's own palette. They are where most of * the green on the site actually lands, because code is on every page and * prose links are not. * * Strings take the green and functions the aqua, which are the two roles that * recur most inside a block, so a listing reads as green over sand rather than * as earth with green in it. Keywords, numbers and operators take the earth, * which keeps the two families on opposite sides of the syntax rather than * interleaved. * * Written against tealdoc's own three selectors rather than a fourth of our * own: light in `:root`, dark in both the media query and the toggle, matching * its specificity so the cascade decides on file order alone. * -------------------------------------------------------------------------- */ :root { --tealdoc-syntax-foreground: #4c4235; --tealdoc-syntax-comment: #8d8170; --tealdoc-syntax-keyword: #a8503a; --tealdoc-syntax-string: #5f7d33; --tealdoc-syntax-function: #3f7d63; --tealdoc-syntax-type: #a8791f; --tealdoc-syntax-number: #a96b3e; --tealdoc-syntax-boolean: #a96b3e; --tealdoc-syntax-operator: #8e5330; --tealdoc-syntax-property: #3f7d63; --tealdoc-syntax-punctuation: #7a6e5c; --tealdoc-syntax-variable: #4c4235; --tealdoc-syntax-meta: #5f7d33; } @media (prefers-color-scheme: dark) { :root { --tecs-header-wash: rgba(34, 30, 26, 0.15); --tecs-glow-1: #231f1b; --tecs-glow-2: #3f6350; --tecs-glow-3: #8e5330; --tecs-glow-4: #c08a58; --tecs-glow-5: #dbbc7f; --tealdoc-syntax-foreground: #d8ccb0; --tealdoc-syntax-comment: #8a7d69; --tealdoc-syntax-keyword: #e08a70; --tealdoc-syntax-string: #a7c080; --tealdoc-syntax-function: #83c092; --tealdoc-syntax-type: #dbbc7f; --tealdoc-syntax-number: #cf8659; --tealdoc-syntax-boolean: #cf8659; --tealdoc-syntax-operator: #e0a87c; --tealdoc-syntax-property: #83c092; --tealdoc-syntax-punctuation: #b0a284; --tealdoc-syntax-variable: #d8ccb0; --tealdoc-syntax-meta: #a7c080; } } :root:has(.tealdoc-theme-input:checked), :root[data-tealdoc-theme="dark"] { --tecs-header-wash: rgba(34, 30, 26, 0.15); --tecs-glow-1: #231f1b; --tecs-glow-2: #3f6350; --tecs-glow-3: #8e5330; --tecs-glow-4: #c08a58; --tecs-glow-5: #dbbc7f; --tealdoc-syntax-foreground: #d8ccb0; --tealdoc-syntax-comment: #8a7d69; --tealdoc-syntax-keyword: #e08a70; --tealdoc-syntax-string: #a7c080; --tealdoc-syntax-function: #83c092; --tealdoc-syntax-type: #dbbc7f; --tealdoc-syntax-number: #cf8659; --tealdoc-syntax-boolean: #cf8659; --tealdoc-syntax-operator: #e0a87c; --tealdoc-syntax-property: #83c092; --tealdoc-syntax-punctuation: #b0a284; --tealdoc-syntax-variable: #d8ccb0; --tealdoc-syntax-meta: #a7c080; } /* Tealdoc has a fourth theme block, and it is easy to miss: the checkbox is a * toggle relative to the system preference, so on a dark-preferring system * `checked` means "give me light". That case lives inside the dark media query * and restores the light values, which means the light half of this override * needs to be written twice, once here. Without it a reader on a dark system * who asks for light gets this palette everywhere except inside code. */ @media (prefers-color-scheme: dark) { :root:has(.tealdoc-theme-input:checked), :root[data-tealdoc-theme="light"] { --tecs-header-wash: rgba(240, 231, 210, 0.55); --tecs-glow-1: #e4d7bc; --tecs-glow-2: #c9d0ae; --tecs-glow-3: #d8b98a; --tecs-glow-4: #e3c98f; --tecs-glow-5: #f0e2c0; --tealdoc-syntax-foreground: #4c4235; --tealdoc-syntax-comment: #8d8170; --tealdoc-syntax-keyword: #a8503a; --tealdoc-syntax-string: #5f7d33; --tealdoc-syntax-function: #3f7d63; --tealdoc-syntax-type: #a8791f; --tealdoc-syntax-number: #a96b3e; --tealdoc-syntax-boolean: #a96b3e; --tealdoc-syntax-operator: #8e5330; --tealdoc-syntax-property: #3f7d63; --tealdoc-syntax-punctuation: #7a6e5c; --tealdoc-syntax-variable: #4c4235; --tealdoc-syntax-meta: #5f7d33; } } /* Inline code in prose is not a syntax token: it is a bare ``. It reads * through the accent, which already switches per theme, so one declaration * covers both. * * The selector matches the bundled stylesheet's specificity. A bare `:root` * loses regardless of file order. This site keys its theme off * `data-tealdoc-theme`, so `data-theme` is never set here and the negation * always matches; matching the selector shape lets file order decide, as in * the syntax block above. */ :root:not([data-theme="dark"]) { --pico-code-color: var(--tealdoc-accent); --pico-code-background-color: var(--tealdoc-code-background); }