/* devs.inittasks.com — the marketing site's TUI theme, ported for docs. * * ★ TOKENS ARE VERBATIM from `inittasks-source/home.html` (githubDark seed and * the ayuLight light default). They are not "inspired by": the two sites sit * one subdomain apart and a developer moving between them should not feel a * seam. If the marketing site retunes a token, retune it here too. * * ★ TWO TYPE SCALES, NEVER BLENDED — the site's own law. Chrome is 13px/1.6; * anything imitating the app runs at 12px/1.3. Docs are all chrome, so there * is exactly one scale here, and code blocks drop to 12.5px for density. * * ⚠ ONE STYLESHEET, LINKED. The marketing site inlines its font and every * icon because it ships as a single self-contained file. A docs site is a * dozen-plus pages, so inlining a 41 KB font into each one would be ~500 KB of * duplicated base64 and a cache that can never hit. */ @font-face { font-family: 'JetBrains Mono'; src: url(/fonts/jetbrains-mono-var-latin.woff2) format('woff2'); font-weight: 400 700; font-display: swap; } :root { --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --bg: #0d1117; --text: #e6edf3; --muted: #747d88; --accent: #34c48a; --accent-dim: #1f6e51; --on-accent: #0d1117; --headers: #58a6ff; --warn: #d29922; --cyan: #56d4dd; --over: #ff7b72; --purple: #bc8cff; --border: #21262d; --border-dim: #181c22; --panel: #161a21; --panel-2: #1e232b; } /* The light default is ayuLight — the same one both sibling sites pick for a * light system scheme. Set on pre-paint so there is no dark flash. */ :root[data-th='light'] { --bg: #fafafa; --text: #5c6166; --muted: #6d747d; --accent: #f2ae49; --accent-dim: #f4c57e; --on-accent: #0b0d10; --headers: #399ee6; --warn: #f2ae49; --cyan: #4cbf99; --over: #f07171; --purple: #a37acc; --border: #e7e8e9; --border-dim: #ededee; --panel: #f2f2f3; --panel-2: #edeeee; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 13px; line-height: 1.6; -webkit-text-size-adjust: 100%; } a { color: var(--headers); text-decoration: none; } a:hover { text-decoration: underline; } /* ---- chrome --------------------------------------------------------------- */ .topbar { border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 20; } .topbar-inner { max-width: 1100px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 16px; } .brand { color: var(--headers); font-weight: 700; display: inline-flex; align-items: baseline; gap: 8px; } .brand .cursor { display: inline-block; width: 7px; height: 13px; background: var(--accent); animation: blink 1.1s steps(1) infinite; transform: translateY(1px); } @keyframes blink { 50% { opacity: 0; } } .tb-spacer { flex: 1; } .tb-btn { background: none; border: none; color: var(--muted); font-family: var(--mono); font-size: 12.5px; cursor: pointer; padding: 2px 4px; } .tb-btn:hover { color: var(--text); } /* ---- the collapsible nav -------------------------------------------------- */ /* ⛔ THIS IS A MOBILE DEFECT FIX, not decoration. Stacked, the 38-entry nav * put roughly fifty links above the first word of every page — a phone * visitor scrolled past the entire table of contents to reach any content. * Caught by shooting it, not by reading it. * * ⚠ The element ships OPEN and JS closes it on a narrow viewport, so a * no-JS phone gets today's behaviour rather than a nav it cannot open. */ .navsum { display: none; cursor: pointer; color: var(--accent); font-size: 12.5px; padding: 12px 0 6px; list-style: none; } .navsum::-webkit-details-marker { display: none; } /* ---- layout --------------------------------------------------------------- */ .shell { max-width: 1100px; margin: 0 auto; padding: 0 24px 80px; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 36px; align-items: start; } /* ⚠ minmax(0,1fr), never a bare 1fr: a bare track floors at min-content, and * one nowrap code line then widens the whole column past its container. The * marketing site lost eight grids to exactly this. */ .sidebar { position: sticky; top: 52px; padding-top: 28px; max-height: calc(100vh - 60px); overflow-y: auto; } .sidebar h3 { font-size: 12.5px; color: var(--accent); margin: 18px 0 6px; font-weight: 600; } .sidebar h3:first-child { margin-top: 0; } .sidebar a { display: block; color: var(--muted); padding: 2px 0; font-size: 12.5px; } .sidebar a:hover { color: var(--text); text-decoration: none; } .sidebar a.active { color: var(--accent); } .content { padding-top: 28px; min-width: 0; } /* ---- prose ---------------------------------------------------------------- */ .h1 { font-size: 19px; font-weight: 700; margin: 0 0 6px; color: var(--text); } .h2 { font-size: 13px; font-weight: 600; color: var(--accent); margin: 34px 0 10px; padding-top: 18px; border-top: 1px solid var(--border-dim); } /* ★ The `$ label` idiom — the glyph is generated, so it never lands in a copy. */ .h2::before { content: '$ '; color: var(--accent-dim); } .h3 { font-size: 13px; font-weight: 600; margin: 22px 0 6px; color: var(--text); } .h3::before { content: '> '; color: var(--accent); } .h4 { font-size: 13px; font-weight: 600; margin: 16px 0 4px; color: var(--muted); } p { margin: 10px 0; } .comment { color: var(--muted); } .comment::before { content: '// '; } ul, ol { margin: 10px 0; padding-left: 20px; } li { margin: 4px 0; } ul { list-style: none; padding-left: 14px; } ul > li::before { content: '+ '; color: var(--accent); margin-left: -14px; } ul > li.check::before { content: none; } strong { color: var(--text); font-weight: 700; } em { color: var(--cyan); font-style: normal; } hr { border: none; border-top: 1px solid var(--border-dim); margin: 26px 0; } blockquote { margin: 14px 0; padding: 10px 14px; border-left: 2px solid var(--warn); background: var(--panel); color: var(--muted); } blockquote p:first-child { margin-top: 0; } blockquote p:last-child { margin-bottom: 0; } .mark { color: var(--muted); } .mark.ok { color: var(--accent); } .mark.warn { color: var(--warn); } code { background: var(--panel-2); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; font-size: 12px; color: var(--cyan); } /* ---- code blocks ---------------------------------------------------------- */ .codewrap { position: relative; margin: 14px 0; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); overflow: hidden; } .codelang { font-size: 11px; color: var(--muted); padding: 5px 12px; border-bottom: 1px solid var(--border-dim); background: var(--panel-2); } .codewrap pre { margin: 0; padding: 12px; overflow-x: auto; font-size: 12.5px; line-height: 1.5; } .codewrap code { background: none; border: none; padding: 0; color: var(--text); font-size: 12.5px; } /* ---- tables --------------------------------------------------------------- */ .tablewrap { overflow-x: auto; margin: 14px 0; } table { border-collapse: collapse; width: 100%; font-size: 12.5px; } th, td { text-align: left; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--border-dim); vertical-align: top; } th { color: var(--accent); font-weight: 600; } /* ---- the copy-for-AI control ---------------------------------------------- */ .pagehead { display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; } .copyai { flex: 0 0 auto; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border: none; border-radius: 4px; padding: 8px 16px; font-family: var(--mono); font-size: 12.5px; font-weight: 600; cursor: pointer; } /* ⛔ Accent-on-tint and borderless. A bordered accent-outline button was * rejected across the whole marketing site; this is the same family. */ .copyai:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); } .subtitle { color: var(--muted); margin: 0 0 4px; } .foot { max-width: 1100px; margin: 0 auto; padding: 20px 24px 40px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12.5px; display: flex; gap: 18px; flex-wrap: wrap; } /* ⚠ THE TOPBAR IS THE FIRST THING THAT OVERFLOWS, measured at 437px against a * 390px phone — the same defect the marketing site carries and has not fixed * (it needs 424px). Here there is no design argument for keeping every link, * so the least useful one gives way rather than the layout. Gated by * `test:docs`' mobile probe at 320/390/430. */ @media (max-width: 560px) { .tb-btn.optional { display: none; } } @media (max-width: 860px) { .shell { grid-template-columns: minmax(0, 1fr); gap: 0; } .navsum { display: block; } .sidebar { position: static; max-height: none; border-bottom: 1px solid var(--border-dim); padding-bottom: 14px; margin-bottom: 6px; } .topbar-inner, .shell, .foot { padding-left: 16px; padding-right: 16px; } }