/* ═══════════════════════════════════════════════════════════════════ shell.css — the Little Guy site shell (served at /shell.css) Contract: AI/WEB_STANDARD.md §4.1. Every page links this BEFORE its own CSS. It owns the design tokens, the top nav, the footer, and a small set of shell-* components. Pages must not redefine any .shell-* class. Two tiers (see the standard §2): · dashboard pages → tokens + body + nav + components · → nav only; the course keeps its own palette ═══════════════════════════════════════════════════════════════════ */ /* ── 1. Design tokens ───────────────────────────────────────────────── Declared on for dashboard pages, and ALSO on .shell-nav / .shell-footer themselves. The second copy is what keeps the nav correct on course pages: a course stylesheet redefining :root{--bg;--text} can't reach inside the nav, because the nav re-declares its own. */ :root:not([data-tier="course"]), html[data-theme="light"]:not([data-tier="course"]), html[data-theme="light"] .shell-nav, html[data-theme="light"] .shell-footer, html:not([data-theme]) .shell-nav { --bg: #f6f8fa; --bg-card: #ffffff; --bg-subtle: #eaeef2; --border: #d0d7de; --border-sub: #eaeef2; --text: #1f2328; --text-soft: #1f2328; --text-muted: #57606a; --accent: #f7931a; --accent-strong: #d97706; --on-accent: #ffffff; --pos: #1a7f37; --neg: #cf222e; --warn: #9a6700; --pos-soft: #dafbe1; --neg-soft: #ffebe9; --warn-soft: #fff8c5; --shadow: 0 1px 2px rgba(31, 35, 40, .06), 0 4px 12px rgba(31, 35, 40, .05); } html[data-theme="dark"]:not([data-tier="course"]), html[data-theme="dark"] .shell-nav, html[data-theme="dark"] .shell-footer { --bg: #0d1117; --bg-card: #161b22; --bg-subtle: #21262d; --border: #30363d; --border-sub: #21262d; --text: #e6edf3; --text-soft: #c9d1d9; --text-muted: #8b949e; --accent: #f7931a; --accent-strong: #fbbf24; --on-accent: #ffffff; --pos: #4ade80; --neg: #f87171; --warn: #d29922; --pos-soft: rgba(74, 222, 128, .14); --neg-soft: rgba(248, 113, 113, .14); --warn-soft: rgba(210, 153, 34, .16); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25); } :root, .shell-nav, .shell-footer { --font: "Segoe UI", "Leelawadee UI", Sarabun, system-ui, -apple-system, sans-serif; --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; --radius: 8px; --shell-nav-h: 52px; } /* ── 2. Page base (dashboard tier only) ──────────────────────────────── */ html:not([data-tier="course"]) *, html:not([data-tier="course"]) *::before, html:not([data-tier="course"]) *::after { box-sizing: border-box; } html:not([data-tier="course"]) body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; } .shell-main { max-width: 1400px; margin: 0 auto; padding: 20px 24px 48px; } @media (max-width: 600px) { .shell-main { padding: 16px 16px 40px; } } /* ── 3. Top nav ────────────────────────────────────────────────────── Built by shell.js from SITE_NAV. Every property a course stylesheet might set on bare elements (button{}, a{}, *{margin:0}) is set here explicitly, so nothing leaks into the bar. */ .shell-nav, .shell-nav * { box-sizing: border-box; } .shell-nav { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: 10px; justify-content: flex-start; flex-wrap: nowrap; /* pages may still carry a bare nav{} rule */ width: auto; max-width: none; height: var(--shell-nav-h); margin: 0; padding: 0 20px; background: var(--bg-card); color: var(--text); border-bottom: 1px solid var(--border-sub); font: 500 13px/1.2 var(--font); letter-spacing: normal; text-align: left; -webkit-font-smoothing: antialiased; } /* Course pages scroll the bar away: reading space matters more, and some courses (Linear Algebra) pin their own chapter bar at top:0. */ html[data-tier="course"] .shell-nav { position: relative; } .shell-nav .shell-brand { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; margin: 0 6px 0 0; padding: 0; color: var(--accent); background: none; font: 700 15px/1 var(--font); letter-spacing: -.2px; text-decoration: none; white-space: nowrap; } .shell-nav .shell-brand img { display: block; width: 26px; height: 26px; margin: 0; image-rendering: pixelated; } .shell-nav .shell-links { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; } .shell-nav .shell-link { display: inline-block; margin: 0; padding: 6px 10px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text-muted); font: 500 13px/1.2 var(--font); text-decoration: none; white-space: nowrap; transition: color .12s, background .12s; } .shell-nav a.shell-link:hover { color: var(--accent); background: var(--bg-subtle); } .shell-nav .shell-link.current { color: var(--text); background: var(--bg-subtle); font-weight: 600; cursor: default; } .shell-nav .shell-sep { display: inline-block; flex-shrink: 0; width: 1px; height: 18px; margin: 0 6px; padding: 0; background: var(--border); } .shell-nav .shell-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin: 0 0 0 auto; padding: 0; } /* .shell-btn inside the nav — the language button i18n.js injects copies the theme button's class list, so it lands here too. */ .shell-nav .shell-btn { display: inline-flex; align-items: center; justify-content: center; height: 30px; min-width: 30px; margin: 0; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text-muted); font: 500 12px/1 var(--font); letter-spacing: normal; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; transition: color .12s, border-color .12s; } .shell-nav .shell-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--bg-card); } .shell-nav .shell-logout:hover { color: var(--neg); border-color: var(--neg); } .shell-nav #theme-toggle-btn { font-size: 14px; padding: 0 8px; } /* Narrow-screen menu button: hidden on desktop. */ .shell-nav .shell-menu-btn { display: none; gap: 6px; color: var(--text); } .shell-nav .shell-caret { font-size: 10px; opacity: .7; } /* Not signed in (only reachable on "/"): brand + language + theme only. */ body:not(.authed) .shell-nav .shell-links, body:not(.authed) .shell-nav .shell-menu-btn, body:not(.authed) .shell-nav .shell-logout { display: none !important; } @media (max-width: 900px) { .shell-nav { padding: 0 12px; gap: 8px; } .shell-nav .shell-menu-btn { display: inline-flex; } .shell-nav .shell-links { display: none; position: absolute; top: calc(100% + 4px); left: 10px; right: 10px; flex-direction: column; align-items: stretch; gap: 0; padding: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .16); } .shell-nav.open .shell-links { display: flex; } .shell-nav .shell-link { padding: 11px 12px; font-size: 14px; } .shell-nav .shell-sep { width: auto; height: 1px; margin: 4px 6px; } } @media (max-width: 420px) { .shell-nav .shell-brand span { display: none; } } /* ── 4. Footer ───────────────────────────────────────────────────────── */ .shell-footer { max-width: 1400px; margin: 32px auto 0; padding: 18px 24px 28px; border-top: 1px solid var(--border-sub); color: var(--text-muted); font: 11px/1.4 var(--font); text-align: center; } /* ── 5. Components (dashboard tier) ────────────────────────────────── Prefixed shell-* on purpose: existing pages already own .card/.btn/.tag with different geometry, and unprefixed shell rules would leak into them. */ .shell-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); } .shell-card > h2:first-child, .shell-card > h3:first-child { margin-top: 0; } .shell-main h1 { font-size: 20px; font-weight: 700; margin: 4px 0 14px; letter-spacing: -.01em; } .shell-main h2 { font-size: 16px; font-weight: 650; margin: 22px 0 10px; } .shell-main h3 { font-size: 14px; font-weight: 650; margin: 16px 0 8px; } .shell-muted { color: var(--text-muted); } .shell-num { font-family: var(--mono); font-variant-numeric: tabular-nums; } .shell-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* .shell-btn outside the nav = a normal page button. */ .shell-main .shell-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); font: 500 13px/1 var(--font); cursor: pointer; text-decoration: none; } .shell-main .shell-btn:hover { border-color: var(--accent); color: var(--accent); } .shell-main .shell-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .shell-main .shell-btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); } .shell-main .shell-btn.danger:hover { border-color: var(--neg); color: var(--neg); } .shell-main .shell-btn:disabled { opacity: .5; cursor: default; } .shell-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 600 11px/1.5 var(--font); background: var(--bg-subtle); color: var(--text-muted); } .shell-tag.pos { background: var(--pos-soft); color: var(--pos); } .shell-tag.neg { background: var(--neg-soft); color: var(--neg); } .shell-tag.warn { background: var(--warn-soft); color: var(--warn); }