Add Table of Contents (TOC) feature

custom.css

@@ -1,2 +1,202 @@
 /* Override solveblog styles here.
    Tip: use your browser's DevTools (F12) to inspect elements and find class names. */
+/* =============================================================
+   SolveBlog Theme — Polya Math Edition
+   ============================================================= */
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono&display=swap');
+
+/* ----- Neobrutalism tokens ----- */
+:root {
+  --bg:          #f5f0fa;
+  --fg:          #2d2040;
+  --muted:       #e8dff0;
+  --muted-deep:  #d9cceb;
+  --accent:      #7c3aed;
+  --btn-fg:      #ffffff;
+  --border-w:    3px;
+  --shadow:      4px 4px 0px rgba(0,0,0,0.3);
+}
+.dark {
+  --bg:          #1a1028;
+  --fg:          #ddd4ea;
+  --muted:       #251a35;
+  --muted-deep:  #1e1430;
+  --accent:      #a78bfa;
+  --btn-bg:      #a78bfa;
+  --btn-fg:      #1a1a1a;
+  --shadow:      4px 4px 0px rgba(255,255,255,0.3);
+}
+
+
+
+
+html.dark .light-only { display: none !important; }
+html:not(.dark) .dark-only { display: none !important; }
+
+
+
+/* ----- Font: IBM Plex Sans + Mono ----- */
+body { font-family: 'IBM Plex Sans', sans-serif; }
+code, pre { font-family: 'IBM Plex Mono', monospace; }
+body { background-color: var(--bg) !important; color: var(--fg) !important; }
+
+/* ----- Neobrutalist borders & shadows ----- */
+.border, input, button { border: var(--border-w) solid var(--fg) !important; border-radius: 0 !important; }
+.shadow, .border, input, button { box-shadow: var(--shadow) !important; }
+
+/* ----- Colors ----- */
+.text-primary { color: var(--accent) !important; }
+.dark a.text-primary { color: #a78bfa !important; }
+.bg-muted { background-color: var(--muted) !important; }
+.dark code:not(pre code) { background-color: #251a35 !important; }
+code:not(pre code) { background-color: var(--muted) !important; }
+
+/* ----- Navbar ----- */
+nav { background-color: var(--bg) !important; backdrop-filter: none !important; }
+.monster-navbar.navbar-bold a { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+.monster-navbar.navbar-bold a.uk-active {
+  transform: scale(1.15); font-weight: bold;
+  text-shadow: 0 0 12px rgba(var(--p-rgb), 0.4);
+  letter-spacing: 0.02em; color: hsl(var(--p) / 1);
+}
+
+/* ----- Buttons ----- */
+button { background-color: var(--accent) !important; color: var(--btn-fg) !important; }
+.dark button { background-color: var(--btn-bg) !important; }
+
+/* ----- AI cells ----- */
+.ai-cell, .ai-cell * { border-radius: 0 !important; }
+.ai-cell { border: var(--border-w) solid var(--fg) !important; box-shadow: var(--shadow) !important; }
+.ai-prompt { background-color: var(--muted) !important; }
+.ai-response { background-color: var(--muted-deep) !important; border-top: var(--border-w) solid var(--fg) !important; }
+.ai-label { color: var(--fg) !important; }
+
+/* ----- Code cells ----- */
+.cell > pre { border: var(--border-w) solid var(--fg) !important; box-shadow: var(--shadow) !important; border-radius: 0 !important; }
+.cell > pre, .cell > pre code { background: var(--muted) !important; }
+
+/* ----- Code output ----- */
+.cell-output { border: var(--border-w) solid var(--fg) !important; box-shadow: var(--shadow) !important; border-radius: 0 !important; margin-top: 12px !important; }
+.cell-output, .cell-output pre, .cell-output pre code { background: var(--muted-deep) !important; }
+.cell-output pre { border: none !important; box-shadow: none !important; }
+
+/* ----- Tables ----- */
+table { border: var(--border-w) solid var(--fg) !important; border-collapse: collapse !important; border-radius: 0 !important; }
+th, td { border: 2px solid var(--fg) !important; color: var(--fg) !important; background: transparent !important; }
+
+/* ----- Sidenotes ----- */
+.sidenote-ref {
+  color: rgb(221, 166, 55); background-color: rgba(221, 166, 55, 0.15);
+  display: inline-block; transition: transform 0.2s;
+  font-size: 0.6rem; vertical-align: top; line-height: 1;
+  padding: 0 0.15rem; border-radius: 0.2rem; margin-left: 0.1rem;
+}
+.sidenote-ref:after { content: "›"; }
+.dark .sidenote-ref { color: rgb(96, 165, 250); background-color: rgba(96, 165, 250, 0.15); }
+.sidenote { display: none; }
+@media (max-width: 1279px) {
+  .sidenote-ref:after { content: "⌃"; }
+  .sidenote-ref { transform: rotate(180deg); }
+  .sidenote-ref.open { transform: rotate(0deg); }
+  .sidenote.show { display: block; float: left; clear: both; width: 95%; margin: 0.75rem 2.5%; position: relative; }
+}
+@media (min-width: 1280px) {
+  .sidenote { display: block; float: right; clear: right; width: 14rem; margin-right: -16rem; margin-top: 0.25rem; margin-bottom: 0.75rem; }
+  .sidenote.hl { background-color: rgba(221, 166, 55, 0.1); }
+  .dark .sidenote.hl { background-color: rgba(96, 165, 250, 0.1); }
+}
+
+/* ----- Scrollbar ----- */
+* { scrollbar-color: auto !important; }
+::-webkit-scrollbar { width: 14px !important; }
+::-webkit-scrollbar-track { background: var(--muted) !important; }
+::-webkit-scrollbar-thumb { background: var(--accent) !important; border: 2px solid var(--fg) !important; border-radius: 0 !important; box-shadow: 2px 2px 0px rgba(0,0,0,0.3) !important; }
+.dark ::-webkit-scrollbar-track { background: var(--muted) !important; }
+.dark ::-webkit-scrollbar-thumb { background: #a78bfa !important; border: 2px solid var(--fg) !important; border-radius: 0 !important; box-shadow: 2px 2px 0px rgba(255,255,255,0.3) !important; }
+
+
+/* --- TOC Sidebar (desktop) --- */
+.toc-link.active {
+    color: var(--accent);
+    border-left: var(--border-w) solid var(--accent);
+    padding-left: 0.5rem;
+    font-weight: 600;
+}
+.dark .toc-link.active { color: #a78bfa; border-color: #5cb85c; }
+
+/* --- Mobile: floating button + slide-out panel --- */
+.toc-mobile-btn {
+    display: none;
+    position: fixed;
+    bottom: 1.5rem;
+    right: 1rem;
+    z-index: 999;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 0;
+    background: var(--accent);
+    color: var(--btn-fg);
+    border: var(--border-w) solid var(--fg);
+    box-shadow: var(--shadow);
+    font-size: 1.25rem;
+    line-height: 1;
+    cursor: pointer;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+}
+.toc-mobile-panel {
+    display: none;
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 75vw;
+    max-width: 300px;
+    height: 100vh;
+    background: var(--bg);
+    border-left: var(--border-w) solid var(--fg);
+    box-shadow: var(--shadow);
+    z-index: 1000;
+    overflow-y: auto;
+    padding: 1rem;
+    transform: translateX(100%);
+    transition: transform 0.3s ease;
+}
+.toc-mobile-panel.open {
+    display: block;
+    transform: translateX(0);
+}
+.toc-panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+    padding-bottom: 0.5rem;
+    border-bottom: var(--border-w) solid var(--fg);
+}
+.toc-close {
+    cursor: pointer;
+    font-size: 1.25rem;
+    color: var(--fg);
+}
+.toc-panel-body a {
+    display: block;
+    padding: 0.35rem 0;
+    font-size: 0.875rem;
+    color: var(--fg);
+    text-decoration: none;
+}
+.toc-panel-body a:active {
+    color: var(--accent);
+}
+@media (max-width: 1023px) {
+    .toc-mobile-btn { display: flex; }
+    #main-content { max-width: 100% !important; padding-left: 1rem; padding-right: 1rem; }
+    #main-content article { width: 100% !important; min-width: 0 !important; }
+    #main-content p { word-break: break-word; }
+    .max-w-2xl { max-width: 100% !important; }
+}
+
+/* --- Long code lines wrap within their container --- */
+pre { white-space: pre-wrap; word-wrap: break-word; }