Add a sticky left sidebar TOC that scrolls with the page

html.cfg

@@ -2,9 +2,59 @@
 
 \Configure{tableofcontents*}{chapter,section,subsection}
 
+\Css{@media (max-width: 768px) {
+  .layout {
+    flex-direction: column;
+  }
+  aside.toc {
+    position: relative;
+    width: 100%;
+    max-height: none;
+    border-right: none;
+    border-bottom: 1px solid \#ccc;
+  }
+}}
+
+\Css{div.layout {
+    display: flex;
+    align-items: flex-start;
+    gap: 2rem;
+    max-width: 64rem;
+    margin: 0 auto;
+}}
+
+\Css{aside.toc {
+    position: sticky;
+    top: 2rem;
+    width: 16rem;
+    height: max-content;
+    max-height: 90vh;
+    overflow-y: auto;
+    padding: .2rem; 
+    border-right: 1px solid \#ccc;
+    font-size: .8rem;
+    line-height: 1;
+}}
+
+\Css{aside span {
+    display: block;
+}}
+
+\Css{main {
+    flex: 1;
+    padding: 0 2rem 1rem;
+    min-width: 0;
+}}
+
+
+\Configure{tableofcontents}
+    {\HCode{<div class="layout"><aside class="toc">}}
+    {\HCode{</aside><main>}}
+
 \Css{html {
     width: 100vw;
     overflow-x: hidden;
+    scroll-behavior: smooth;
 }}
 
 \Css{@font-face {
@@ -13,7 +63,6 @@
 }}
 
 \Css{body {
-    max-width: 55rem;
     box-sizing: border-box;
     padding: 1rem;
     margin: 0 auto;
@@ -23,6 +72,15 @@
     line-height: 1.5;
 }}
 
+\Css{img:first-of-type {
+    width: 100%;
+    max-width: 889px;
+    display: block;
+    margin: 0 auto 2rem;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}}
+
 \Css{a {
 color: \#0060DF;
 }}
@@ -88,4 +146,8 @@ font-size: 1.1em;
 }
 
 \begin{document}
+\AtEndDocument{%
+    \HCode{</main></div>}
+}
+
 \EndPreamble