/* ============================================================================ ByteByteGo course shell — rail + reader ---------------------------------------------------------------------------- Deliberately NOT built on notes.css. The 32 chapter pages under ByteByteGo/ are self-contained and all share one dark/cool token set (#0f1115 · #5b9dff). The shell reuses that exact palette so the frame and the framed page read as a single document instead of two pasted-together designs. Per-course accent is swapped via . ========================================================================== */ :root { --bg: #0f1115; --bg-soft: #161a21; --bg-card: #1b212b; --bg-elev: #212936; --border: #2a3340; --border-soft: #232b36; --text: #e7ecf3; --text-soft: #aeb8c6; --text-mute: #7a8798; --accent: #5b9dff; --accent-soft: #1d2b45; --green: #4ec98a; --amber: #f2b45b; --purple: #b28bff; --cyan: #4fd6d6; --shadow: 0 4px 20px rgba(0, 0, 0, .35); --radius: 14px; --radius-sm: 9px; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; --rail-w: 292px; --ease: cubic-bezier(.22, .61, .36, 1); } html[data-theme="light"] { --bg: #f6f7f9; --bg-soft: #ffffff; --bg-card: #ffffff; --bg-elev: #f0f2f5; --border: #dce1e8; --border-soft: #e7ebf0; --text: #1a2230; --text-soft: #455263; --text-mute: #6b7887; --accent: #2f6fe0; --accent-soft: #e6efff; --green: #1c9d63; --amber: #c9862a; --purple: #7c53d6; --cyan: #1c9aa0; --shadow: 0 4px 18px rgba(20, 30, 50, .08); } /* per-course ink — the rail gets the course colour, the content keeps its own */ body[data-course="ood"] { --accent: #b28bff; --accent-soft: #2a2140; } body[data-course="genai"] { --accent: #4fd6d6; --accent-soft: #143036; } body[data-course="varsity-intro"] { --accent: #4ec98a; --accent-soft: #16301f; } body[data-course="varsity-ta"] { --accent: #f2b45b; --accent-soft: #362613; } html[data-theme="light"] body[data-course="ood"] { --accent: #7c53d6; --accent-soft: #f0e9ff; } html[data-theme="light"] body[data-course="genai"] { --accent: #16878c; --accent-soft: #dff4f4; } html[data-theme="light"] body[data-course="varsity-intro"] { --accent: #1c9d63; --accent-soft: #e2f6ec; } html[data-theme="light"] body[data-course="varsity-ta"] { --accent: #c9862a; --accent-soft: #fbeed6; } * { box-sizing: border-box; } /* the shell never scrolls — the framed chapter and the rail do */ html, body { height: 100%; overflow: hidden; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.5; overflow: hidden; -webkit-font-smoothing: antialiased; } button { font: inherit; color: inherit; cursor: pointer; } /* ── App frame ────────────────────────────────────────────────────────── */ .app { display: grid; grid-template-columns: var(--rail-w) 1fr; height: 100dvh; transition: grid-template-columns .26s var(--ease); } .app[data-rail="mini"] { --rail-w: 62px; } /* ── Rail ─────────────────────────────────────────────────────────────── */ .rail { display: flex; flex-direction: column; /* min-height:0 is what lets .rail-scroll actually scroll: without it a grid item's automatic minimum size is its content, so the rail (and the row) grow past 100dvh and the topbar gets pushed off the top of the window. */ min-width: 0; min-height: 0; overflow: hidden; background: var(--bg-soft); border-right: 1px solid var(--border); } .rail-head { padding: 14px 14px 12px; border-bottom: 1px solid var(--border-soft); } .back { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); text-decoration: none; margin-bottom: 13px; transition: color .18s; } .back:hover { color: var(--accent); } .back svg { width: 12px; height: 12px; } .brand { display: flex; align-items: flex-start; gap: 10px; } .brand-mark { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font: 700 12px/1 var(--mono); letter-spacing: -.02em; } .brand-txt { min-width: 0; } .brand-kicker { display: block; font: 600 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; } .brand-title { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--text); } /* progress */ .prog { margin-top: 13px; } .prog-meta { display: flex; justify-content: space-between; align-items: baseline; font: 500 11px/1 var(--mono); color: var(--text-mute); margin-bottom: 6px; } .prog-meta b { color: var(--text-soft); font-weight: 600; } .prog-bar { height: 4px; border-radius: 100px; background: var(--bg-elev); overflow: hidden; } .prog-fill { height: 100%; width: 0; border-radius: 100px; background: var(--accent); transition: width .35s var(--ease); } /* filter */ .rail-filter { padding: 11px 14px; border-bottom: 1px solid var(--border-soft); } .rail-filter input { width: 100%; padding: 7px 10px; font: 400 13px/1.4 var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); outline: none; transition: border-color .18s; } .rail-filter input::placeholder { color: var(--text-mute); } .rail-filter input:focus { border-color: var(--accent); } /* chapter list */ .rail-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 28px; } .rail-scroll::-webkit-scrollbar { width: 9px; } .rail-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; border: 3px solid var(--bg-soft); } .grp { margin-bottom: 6px; } .grp-head { width: 100%; display: flex; align-items: center; gap: 7px; padding: 8px 8px; background: none; border: 0; border-radius: var(--radius-sm); font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); text-align: left; } .grp-head:hover { color: var(--text-soft); background: var(--bg-elev); } .grp-head .chev { width: 11px; height: 11px; flex: none; transition: transform .2s var(--ease); } .grp[data-open="false"] .grp-head .chev { transform: rotate(-90deg); } .grp-head .grp-n { margin-left: auto; opacity: .7; letter-spacing: 0; } .grp-body { overflow: hidden; } .grp[data-open="false"] .grp-body { display: none; } .ch { display: grid; grid-template-columns: 24px 1fr; align-items: start; gap: 10px; width: 100%; padding: 7px 8px; margin-bottom: 1px; background: none; border: 0; border-radius: var(--radius-sm); text-align: left; color: var(--text-soft); position: relative; transition: background .16s, color .16s; } .ch:hover { background: var(--bg-elev); color: var(--text); } .ch .n { font: 600 10.5px/22px var(--mono); text-align: center; height: 22px; border-radius: 6px; background: var(--bg-elev); color: var(--text-mute); transition: background .16s, color .16s; } .ch .t { font-size: 13.3px; line-height: 1.38; padding-top: 2px; } .ch.read .n { color: var(--green); } .ch.active { background: var(--accent-soft); color: var(--text); } .ch.active .t { font-weight: 600; } .ch.active .n { background: var(--accent); color: #fff; } html[data-theme="light"] .ch.active .n { color: #fff; } .ch.active::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } .ch[hidden] { display: none; } /* in-chapter sections, revealed under the active chapter */ .secs { margin: 2px 0 8px 34px; padding-left: 11px; border-left: 1px solid var(--border); } .secs button { display: block; width: 100%; text-align: left; padding: 4px 7px; background: none; border: 0; border-radius: 6px; font-size: 12.4px; line-height: 1.35; color: var(--text-mute); transition: color .16s, background .16s; } .secs button:hover { color: var(--text); background: var(--bg-elev); } .secs button.here { color: var(--accent); font-weight: 600; } /* note pages outline by heading rather than by section[id]; h3s come through flagged so the rail can show the nesting the headings imply */ .secs button.sub { padding-left: 18px; font-size: 11.8px; opacity: .85; } .secs:empty { display: none; } .rail-foot { padding: 10px 14px; border-top: 1px solid var(--border-soft); font: 500 10.5px/1.7 var(--mono); color: var(--text-mute); display: flex; flex-wrap: wrap; gap: 4px 9px; } .rail-foot kbd { font: inherit; background: var(--bg-elev); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; color: var(--text-soft); } /* ── Mini rail ────────────────────────────────────────────────────────── */ .app[data-rail="mini"] .rail-head, .app[data-rail="mini"] .rail-filter, .app[data-rail="mini"] .rail-foot, .app[data-rail="mini"] .grp-head, .app[data-rail="mini"] .secs, .app[data-rail="mini"] .ch .t { display: none; } .app[data-rail="mini"] .rail-scroll { padding: 12px 8px 24px; } .app[data-rail="mini"] .ch { grid-template-columns: 1fr; padding: 3px; } .app[data-rail="mini"] .ch::before { left: -8px; } .app[data-rail="mini"] .grp { margin-bottom: 10px; } .app[data-rail="mini"] .grp[data-open="false"] .grp-body { display: block; } /* ── Stage ────────────────────────────────────────────────────────────── */ .stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; position: relative; background: var(--bg); } .topbar { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 52px; flex: none; background: var(--bg-soft); border-bottom: 1px solid var(--border); } .tb-title { min-width: 0; margin-right: auto; } .tb-crumb { display: block; font: 600 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); } .tb-name { display: block; font-size: 14px; font-weight: 650; letter-spacing: -.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ibtn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border); color: var(--text-soft); font-size: 12.5px; font-weight: 600; text-decoration: none; transition: all .18s; } .ibtn:hover { color: var(--text); border-color: var(--accent); } .ibtn svg { width: 14px; height: 14px; flex: none; } .ibtn.icon-only { padding: 0; width: 32px; justify-content: center; } .ibtn.on { color: var(--green); border-color: var(--green); } /* reader */ .reader-wrap { flex: 1; min-height: 0; position: relative; } .reader { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); } .loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bg); opacity: 0; visibility: hidden; transition: opacity .2s; } .loading.on { opacity: 1; visibility: visible; } .loading i { width: 22px; height: 22px; border-radius: 50%; display: block; border: 2px solid var(--border); border-top-color: var(--accent); animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .loading i { animation-duration: 2s; } .app { transition: none; } } /* reading progress hairline under the topbar */ .readbar { position: absolute; top: 0; left: 0; height: 2px; width: 0; background: var(--accent); z-index: 3; transition: width .1s linear; } /* pager */ .pager { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-soft); border-top: 1px solid var(--border); } .pg { display: inline-flex; align-items: center; gap: 9px; min-width: 0; max-width: 42%; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border); color: var(--text-soft); text-align: left; transition: all .18s; } .pg:hover:not(:disabled) { border-color: var(--accent); color: var(--text); } .pg:disabled { opacity: .35; cursor: default; } .pg svg { width: 15px; height: 15px; flex: none; } .pg span { min-width: 0; } .pg small { display: block; font: 600 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); } .pg b { display: block; font-size: 12.8px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pg.next { margin-left: auto; text-align: right; } /* ── Drawer behaviour on narrow screens ───────────────────────────────── */ .scrim { display: none; } @media (max-width: 900px) { .app { grid-template-columns: 1fr; } .app[data-rail="mini"] { grid-template-columns: 1fr; } .rail { position: fixed; z-index: 40; inset: 0 auto 0 0; width: min(310px, 86vw); transform: translateX(-102%); transition: transform .26s var(--ease); box-shadow: var(--shadow); } .app[data-rail="open"] .rail { transform: none; } .app[data-rail="open"] .scrim { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, .45); border: 0; } .app[data-rail="mini"] .rail-head, .app[data-rail="mini"] .rail-filter, .app[data-rail="mini"] .rail-foot, .app[data-rail="mini"] .grp-head, .app[data-rail="mini"] .ch .t { display: revert; } .app[data-rail="mini"] .ch { grid-template-columns: 24px 1fr; padding: 7px 8px; } .pg { max-width: 46%; } .tb-crumb { display: none; } } @media (max-width: 560px) { .pg small { display: none; } .hide-sm { display: none !important; } } @media print { .rail, .topbar, .pager, .scrim, .readbar { display: none !important; } .app { display: block; height: auto; } body { overflow: visible; } }