/* Checkpoint A revision round 2 (Items 1-4). Item 5 adds a full light/dark design system: every color that was previously a raw hex value scattered through this file is now a semantic CSS custom property, and a [data-theme="dark"] block overrides them. theme.js reads/writes the stored preference and toggles the attribute; a tiny inline script in (added in render4.js's layout()) applies the stored/system preference before first paint to avoid a flash of the wrong theme. Item 6 adds glossary auto-linking. Item 7 adds a mobile responsiveness pass: table-scroll wrapping, a horizontally-scrolling nav strip below 640px instead of multi-row wrapping, and tighter page padding/heading sizes below 480px. See the Item 7 block near the end of this file. */ :root { --fg:#222; --bg:#fff; --accent:#3050c8; --muted:#666; --border:#ddd; --inline-code-bg:#dfe1e8; --inline-code-fg:#1f2430; --inline-code-border:#c6cad6; --code-bg:#1e1e1e; --code-fg:#e8e8e8; --hljs-keyword:#c586c0; --hljs-string:#ce9178; --hljs-comment:#6a9955; --hljs-title:#dcdcaa; --hljs-number:#b5cea8; --hljs-built_in:#4ec9b0; --hljs-params:#9cdcfe; --hljs-punctuation:#d4d4d4; --nav-height:57px; /* Item 5: semantic surface/status tokens (light theme values) */ --surface:#f7f7f9; /* toc / progression-gate / glossary panel backgrounds */ --surface-hover:#f2f2f5; /* sidebar link hover */ --surface-muted:#eee; /* status pill "not started", progress-bar track */ --accent-tint:#eef1fb; /* sidebar active-link background */ --card-bg:#fff; /* quiz option buttons */ --success-bg:#e5f3e8; --success-fg:#1e7b34; --warning-bg:#fff4dd; --warning-fg:#8a5a00; --danger-bg:#f8e1e1; --danger-fg:#b01818; } [data-theme="dark"] { --fg:#e6e6e6; --bg:#14161a; --accent:#7c9cff; --muted:#9aa0a6; --border:#333944; --inline-code-bg:#2a2e37; --inline-code-fg:#d8dee9; --inline-code-border:#3d4350; /* Code blocks (--code-bg/--code-fg/--hljs-*) intentionally unchanged: a dark "editor" block reads correctly on both a light and a dark page background. */ --surface:#1c1f26; --surface-hover:#242830; --surface-muted:#252932; --accent-tint:#232a42; --card-bg:#1a1d23; --success-bg:#173a24; --success-fg:#6fcf8e; --warning-bg:#3a2f12; --warning-fg:#e0b458; --danger-bg:#3a1414; --danger-fg:#e88888; } * { box-sizing: border-box; } body { font-family: -apple-system, Segoe UI, Arial, sans-serif; margin:0; color:var(--fg); background:var(--bg); line-height:1.6; font-size:16px; transition: background-color .15s, color .15s; } /* Item 2: sticky top nav + active-page highlight */ .site-nav { display:flex; align-items:center; gap:1.25rem; padding:1rem 1.5rem; border-bottom:1px solid var(--border); flex-wrap: wrap; position: sticky; top: 0; z-index: 200; background: var(--bg); } .site-nav a { text-decoration:none; color:var(--fg); padding-bottom:.2rem; border-bottom:2px solid transparent; } .site-nav .brand { font-weight:700; color:var(--accent); } .site-nav a.active { color:var(--accent); font-weight:600; border-bottom-color:var(--accent); } .site-nav .nav-spacer { flex: 1 1 auto; } /* Item 5: theme toggle button */ .theme-toggle { margin-left:auto; display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--fg); cursor:pointer; font-size:1.05rem; line-height:1; min-height:44px; min-width:44px; } .theme-toggle:hover { border-color:var(--accent); } /* Item 6: glossary auto-linking — distinct from plain nav/card links so a reader can tell at a glance that a term has a definition one click away. */ .glossary-link { color:var(--accent); text-decoration:underline dotted; text-decoration-color:var(--muted); text-underline-offset:2px; } .glossary-link:hover { text-decoration-style:solid; text-decoration-color:var(--accent); } .page { max-width: 860px; margin: 0 auto; padding: 1.5rem; } .site-footer { text-align:center; padding:2rem; color:var(--muted); font-size:0.85rem; } h1 { font-size:1.9rem; } h2 { font-size:1.35rem; margin-top:2rem; border-bottom:1px solid var(--border); padding-bottom:.3rem;} h3 { font-size:1.1rem; } .lede { color:var(--muted); font-size:1.1rem; } .card-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:1rem; margin:1rem 0; } .card { display:block; border:1px solid var(--border); border-radius:8px; padding:1rem 1.25rem; text-decoration:none; color:var(--fg); background:var(--card-bg); } .card:hover { border-color: var(--accent); } .toc { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:1rem 1.25rem; margin:1rem 0; } table { border-collapse: collapse; width:100%; margin:1rem 0; } th, td { border:1px solid var(--border); padding:.5rem .75rem; text-align:left; } /* Inline code - stronger visual distinction */ code { background:var(--inline-code-bg); color:var(--inline-code-fg); padding:.15rem .4rem; border-radius:4px; font-size:.9em; font-weight:600; border:1px solid var(--inline-code-border); } /* Code block syntax highlighting theme (now actually wired via custom marked renderer) */ pre { background:var(--code-bg); color:var(--code-fg); padding:1rem; border-radius:8px; overflow-x:auto; } pre code, code.hljs { background:none; color:inherit; padding:0; border:none; font-weight:400; } .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag { color:var(--hljs-keyword); } .hljs-string, .hljs-regexp, .hljs-attr { color:var(--hljs-string); } .hljs-comment, .hljs-quote { color:var(--hljs-comment); font-style:italic; } .hljs-title, .hljs-title.function_, .hljs-section { color:var(--hljs-title); } .hljs-number { color:var(--hljs-number); } .hljs-built_in, .hljs-type, .hljs-class .hljs-title { color:var(--hljs-built_in); } .hljs-params, .hljs-variable, .hljs-attribute { color:var(--hljs-params); } .hljs-punctuation, .hljs-operator { color:var(--hljs-punctuation); } .glossary dt { font-weight:600; margin-top:.75rem; } .glossary dt .tag { font-weight:400; color:var(--muted); font-size:.85em; } .glossary dd { margin-left:0; margin-bottom:.25rem; } .quiz-question { border:1px solid var(--border); border-radius:8px; padding:1rem; margin:1rem 0; } .options { display:flex; flex-direction:column; gap:.4rem; margin-top:.5rem; } .opt { text-align:left; padding:.5rem .75rem; border:1px solid var(--border); border-radius:6px; background:var(--card-bg); color:var(--fg); cursor:pointer; min-height:44px; } .opt.correct { border-color:var(--success-fg); background:var(--success-bg); color:var(--success-fg); } .opt.incorrect { border-color:var(--danger-fg); background:var(--danger-bg); color:var(--danger-fg); } .progression-gate { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:1.25rem; margin-top:1.5rem; } .mark-complete { padding:.6rem 1.1rem; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; min-height:44px; } .mark-complete.done { background:var(--success-fg); border-color:var(--success-fg); } .mark-complete:disabled, .mark-complete.locked { background:var(--surface-muted); border-color:var(--border); color:var(--muted); cursor:not-allowed; } .complete-badge { margin-left:.75rem; color:var(--success-fg); font-weight:600; } /* Item 8 fix: sequential week-completion gating message, shown only while locked */ .gate-locked-note { color:var(--muted); font-size:.85rem; font-style:italic; margin:.5rem 0 0; } .week-pager { display:flex; justify-content:space-between; margin:2rem 0; } .note { color:var(--muted); font-size:.9rem; font-style:italic; } .breadcrumb { color:var(--muted); font-size:.9rem; } /* Back-to-top + jump-to-bottom */ .back-to-top { position:fixed; bottom:1.5rem; right:1.5rem; padding:.6rem 1rem; border-radius:24px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .15s, transform .15s; min-height:44px; z-index:50; } .back-to-top.visible { opacity:1; transform:translateY(0); pointer-events:auto; } .jump-links { display:flex; gap:1rem; font-size:.9rem; margin:.5rem 0 1rem; } .jump-links a { text-decoration:none; color:var(--accent); } /* Week list - full-width horizontal rows, stacking on narrow screens */ .week-list { display:flex; flex-direction:column; gap:.75rem; margin:1rem 0; } .week-row { display:flex; align-items:center; gap:1.25rem; border:1px solid var(--border); border-radius:8px; padding:1rem 1.25rem; text-decoration:none; color:var(--fg); background:var(--card-bg); } .week-row:hover { border-color:var(--accent); } .week-row .week-code { flex:0 0 auto; min-width:3rem; font-weight:700; color:var(--accent); } .week-row .week-main { flex:1 1 auto; min-width:0; } .week-row .week-main h3 { margin:0 0 .25rem; font-size:1.05rem; } .week-row .week-main p { margin:0; color:var(--muted); font-size:.92rem; } .week-row .week-status { flex:0 0 auto; font-size:.85rem; padding:.3rem .7rem; border-radius:12px; background:var(--surface-muted); color:var(--muted); white-space:nowrap; } /* Item 3 (progress engine): status pill colors, driven by progress.js classList */ .week-status.status-not-started { background:var(--surface-muted); color:var(--muted); } .week-status.status-in-progress { background:var(--warning-bg); color:var(--warning-fg); } .week-status.status-complete { background:var(--success-bg); color:var(--success-fg); } @media (max-width: 700px) { .week-row { flex-direction:column; align-items:flex-start; gap:.4rem; } .week-row .week-status { align-self:flex-start; } } /* Dashboard - overall progress at top, collapsible per-module sections */ .overall-progress { border:1px solid var(--border); border-radius:8px; padding:1.25rem; margin-bottom:1.5rem; } .overall-progress .big-pct { font-size:2.2rem; font-weight:700; color:var(--accent); } .progress-bar-wrap { background:var(--surface-muted); border-radius:6px; height:14px; overflow:hidden; } .progress-bar { background:var(--accent); height:100%; width:0%; } .progress-label { color:var(--muted); font-size:.9rem; margin-top:.3rem; } .module-section { border:1px solid var(--border); border-radius:8px; margin-bottom:1rem; overflow:hidden; } .module-section summary { cursor:pointer; padding:1rem 1.25rem; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; } .module-section summary::-webkit-details-marker { display:none; } .module-section summary .chevron { transition: transform .15s; } .module-section[open] summary .chevron { transform: rotate(90deg); } .module-section .module-body { padding:0 1.25rem 1.25rem; } .progress-table { border-collapse: collapse; width:100%; margin:.75rem 0; } .progress-table th, .progress-table td { border:1px solid var(--border); padding:.5rem .75rem; text-align:left; } .portfolio-table { border-collapse: collapse; width:100%; margin:.75rem 0; } .portfolio-table th, .portfolio-table td { border:1px solid var(--border); padding:.5rem .75rem; text-align:left; } .portfolio-table code { font-size:.85em; } /* Item 4 (dashboard wiring): status pills used in the progress-table and portfolio-table. Same color language as the week-list badges (Item 3) but a standalone class so the two features stay decoupled. */ .status-pill { display:inline-block; font-size:.85rem; padding:.25rem .65rem; border-radius:12px; white-space:nowrap; } .status-pill.status-not-started { background:var(--surface-muted); color:var(--muted); } .status-pill.status-in-progress { background:var(--warning-bg); color:var(--warning-fg); } .status-pill.status-complete { background:var(--success-bg); color:var(--success-fg); } /* Item 3: two-column layout with sticky left sidebar TOC (Introduction, Setup Guide, Week pages) */ .layout-with-sidebar { display:flex; align-items:flex-start; gap:2.5rem; max-width: 1140px; margin: 0 auto; padding: 1.5rem; } .page-sidebar { flex: 0 0 240px; position: sticky; top: calc(var(--nav-height) + 1.25rem); max-height: calc(100vh - var(--nav-height) - 2.5rem); overflow-y: auto; align-self: flex-start; } .page-sidebar h4 { margin: 0 0 .6rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .page-sidebar ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.1rem; } .page-sidebar li a { display:block; padding:.35rem .6rem; border-radius:6px; text-decoration:none; color:var(--fg); font-size:.9rem; border-left:2px solid transparent; } .page-sidebar li a:hover { background:var(--surface-hover); } .page-sidebar li a.sidebar-active { border-left-color: var(--accent); color: var(--accent); font-weight:600; background:var(--accent-tint); } .page-content { flex: 1 1 auto; min-width: 0; max-width: 860px; } @media (max-width: 900px) { .layout-with-sidebar { flex-direction: column; gap: 1rem; } .page-sidebar { position: static; top:auto; max-height:none; width:100%; flex-basis:auto; } .page-sidebar ul { flex-direction:row; flex-wrap:wrap; gap:.4rem; } .page-sidebar li a { border-left:none; border-bottom:2px solid transparent; } .page-sidebar li a.sidebar-active { border-left:none; border-bottom-color:var(--accent); background:none; } } /* Item 7: mobile responsiveness pass. - .table-scroll wraps every rendered (via wrapTables() in render8.js, applied centrally in layout()) so wide tables — domain-alignment tables, curriculum structure, the pre-work Skilljar table, and the dashboard's progress/portfolio trackers — scroll horizontally on narrow viewports instead of squeezing columns unreadably narrow or breaking the page layout. Tables only scroll if their natural content overflows; no artificial min-width is imposed, so a 2-column table on a 375px phone stays static. - Below 640px the top nav becomes a horizontally-scrollable strip instead of wrapping to multiple rows, which read poorly once the toggle button's margin-left:auto pushed it onto its own line. This mirrors the same "chip strip" pattern used by the sidebar TOC at the 900px breakpoint above. - Below 480px, page padding and heading sizes tighten so content isn't cramped against the viewport edge on small phones (iPhone SE / small Android widths). */ .table-scroll { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1rem 0; } .table-scroll table { margin:0; } @media (max-width: 640px) { .site-nav { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:.85rem; padding:.85rem 1rem; } .site-nav a, .site-nav .brand { white-space:nowrap; flex:0 0 auto; } .theme-toggle { margin-left:.5rem; flex:0 0 auto; } } @media (max-width: 480px) { .page, .layout-with-sidebar { padding:1rem .85rem; } h1 { font-size:1.5rem; } h2 { font-size:1.15rem; } .card { padding:.85rem 1rem; } .week-row { padding:.85rem 1rem; } .overall-progress .big-pct { font-size:1.8rem; } }