From ad8a7daced9ac7b8e58b5eaba92dec05dc90b88d Mon Sep 17 00:00:00 2001
From: Himanshu Sardana <himanshusardana2005@gmail.com>
Date: Fri, 27 Mar 2026 00:21:02 +0000
Subject: feat: fix toc location for all themes

---
 themes/modern-dark-catppuccin/layout.html | 136 ++++++++++++++++++++++++++----
 1 file changed, 121 insertions(+), 15 deletions(-)

(limited to 'themes/modern-dark-catppuccin')

diff --git a/themes/modern-dark-catppuccin/layout.html b/themes/modern-dark-catppuccin/layout.html
index 660f6ed..7c2f3ae 100644
--- a/themes/modern-dark-catppuccin/layout.html
+++ b/themes/modern-dark-catppuccin/layout.html
@@ -256,9 +256,9 @@
         background: linear-gradient(90deg, transparent, var(--surface-0) 20%, var(--surface-0) 80%, transparent);
       }
 
-      .toc-wrap {
-        margin: 2.5rem 0;
-      }
+      main { display: flex; flex-direction: column; align-items: center; }
+
+      .toc-wrap { margin: 2.5rem 0; }
 
       .toc {
         background: var(--mantle);
@@ -275,6 +275,7 @@
         color: var(--mauve);
         margin: 0 0 0.8rem;
         display: block;
+        cursor: pointer;
       }
 
       .toc ul {
@@ -297,6 +298,8 @@
         color: var(--overlay-1);
         text-decoration: none;
         border: none;
+        display: block;
+        padding: 0.2rem 0;
       }
 
       .toc a:hover {
@@ -304,6 +307,61 @@
         border: none;
       }
 
+      .toc a.active {
+        color: var(--mauve);
+        font-weight: 500;
+      }
+
+      .toc-toggle {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        cursor: pointer;
+        background: none;
+        border: none;
+        padding: 0;
+        font-family: var(--mono);
+        font-size: 0.65rem;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        color: var(--overlay-0);
+        margin-bottom: 0.8rem;
+        width: 100%;
+        text-align: left;
+      }
+
+      .toc-toggle svg { transition: transform 140ms ease; }
+      .toc-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
+
+      .toc-body {
+        overflow: hidden;
+        transition: max-height 240ms ease, opacity 200ms ease;
+        max-height: 500px;
+        opacity: 1;
+      }
+
+      .toc-body.collapsed { max-height: 0; opacity: 0; }
+
+      @media (max-width: 699px) {
+        .toc-title { display: none; }
+      }
+
+      @media (min-width: 700px) and (max-width: 1099px) {
+        .toc { display: block; background: transparent; border: none; border-left: 2px solid var(--mauve); padding: 0 0 0 1rem; }
+        .toc-title { display: block; }
+        .toc-body { max-height: none !important; opacity: 1 !important; }
+      }
+
+      @media (min-width: 1100px) {
+        main { flex-direction: row; align-items: flex-start; max-width: 1100px; }
+        .toc-wrap { position: sticky; top: 6rem; width: 200px; flex-shrink: 0; margin-right: 3rem; order: -1; }
+        .toc { background: transparent; border: none; border-left: 2px solid var(--mauve); border-radius: 0; padding: 0 0 0 1rem; }
+        .toc-title { display: block; }
+        .toc-body { max-height: none !important; opacity: 1 !important; }
+        .article { flex: 1; max-width: 680px; }
+        main > *:not(.toc-wrap):not(.article) { max-width: 680px; }
+      }
+
       nav {
         display: flex;
         align-items: center;
@@ -389,30 +447,78 @@
     </nav>
 
     <main>
-      <header class="article-header">
-        <h1 class="article-h1">{{ .Title }}</h1>
-      </header>
-
       {{ if .TOC }}
       <div class="toc-wrap">
+        <button class="toc-toggle" aria-expanded="true" aria-controls="toc-body">
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+            <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
+          </svg>
+          Contents
+        </button>
         <details class="toc" open>
           <summary class="toc-title">Contents</summary>
-          <ul>
-            {{ range .TOC }}
-            <li>
-              <a href="#{{ .ID }}">{{ .Text }}</a>
-            </li>
-            {{ end }}
-          </ul>
+          <div class="toc-body" id="toc-body">
+            <ul>
+              {{ range .TOC }}
+              <li>
+                <a href="#{{ .ID }}">{{ .Text }}</a>
+              </li>
+              {{ end }}
+            </ul>
+          </div>
         </details>
       </div>
       {{ end }}
 
-      <article class="prose">{{ .Content }}</article>
+      <article class="article">
+        <h1>{{ .Title }}</h1>
+        {{ .Content }}
+      </article>
     </main>
 
     <footer>
       <span>&copy; {{ .Year }} Kite</span>
     </footer>
+
+    <script>
+      const toggle = document.querySelector(".toc-toggle");
+      const body = document.getElementById("toc-body");
+      const details = document.querySelector(".toc");
+
+      if (toggle && body) {
+        toggle.addEventListener("click", () => {
+          const expanded = toggle.getAttribute("aria-expanded") === "true";
+          toggle.setAttribute("aria-expanded", String(!expanded));
+          body.classList.toggle("collapsed", expanded);
+        });
+      }
+
+      const tocLinks = document.querySelectorAll(".toc a");
+
+      if (tocLinks.length > 0) {
+        const headingIDs = Array.from(tocLinks).map((a) => decodeURIComponent(a.getAttribute("href").slice(1)));
+        const headings = headingIDs.map((id) => document.getElementById(id)).filter(Boolean);
+
+        let current = null;
+
+        const observer = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                current = entry.target.id;
+              }
+            });
+
+            tocLinks.forEach((a) => {
+              const id = decodeURIComponent(a.getAttribute("href").slice(1));
+              a.classList.toggle("active", id === current);
+            });
+          },
+          { rootMargin: "0px 0px -70% 0px", threshold: 0 }
+        );
+
+        headings.forEach((h) => observer.observe(h));
+      }
+    </script>
   </body>
 </html>
\ No newline at end of file
-- 
cgit v1.3.1