adding stuff

static/css/main.css

@@ -310,9 +310,6 @@
   .m-300 {
     margin: calc(var(--spacing) * 300);
   }
-  .mx-5 {
-    margin-inline: calc(var(--spacing) * 5);
-  }
   .mx-8 {
     margin-inline: calc(var(--spacing) * 8);
   }
@@ -542,9 +539,6 @@
   .flex-1 {
     flex: 1;
   }
-  .flex-2 {
-    flex: 2;
-  }
   .flex-3 {
     flex: 3;
   }
@@ -718,13 +712,9 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
-  .border-t-2 {
-    border-top-style: var(--tw-border-style);
-    border-top-width: 2px;
-  }
-  .border-b-2 {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 2px;
+  .border-y-2 {
+    border-block-style: var(--tw-border-style);
+    border-block-width: 2px;
   }
   .border-black {
     border-color: var(--color-black);
@@ -819,9 +809,6 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
-  .px-5 {
-    padding-inline: calc(var(--spacing) * 5);
-  }
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
@@ -1532,11 +1519,6 @@
       height: calc(var(--spacing) * 72);
     }
   }
-  .md\:w-1\/3 {
-    @media (width >= 48rem) {
-      width: calc(1/3 * 100%);
-    }
-  }
   .md\:w-full {
     @media (width >= 48rem) {
       width: 100%;
@@ -1547,11 +1529,6 @@
       max-width: var(--container-md);
     }
   }
-  .md\:flex-1 {
-    @media (width >= 48rem) {
-      flex: 1;
-    }
-  }
   .md\:flex-2 {
     @media (width >= 48rem) {
       flex: 2;
@@ -1567,11 +1544,6 @@
       flex-basis: calc(3/4 * 100%);
     }
   }
-  .md\:basis-full {
-    @media (width >= 48rem) {
-      flex-basis: 100%;
-    }
-  }
   .md\:grid-cols-2 {
     @media (width >= 48rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1591,11 +1563,40 @@
       }
     }
   }
+  .md\:border {
+    @media (width >= 48rem) {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  }
+  .md\:border-2 {
+    @media (width >= 48rem) {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+    }
+  }
+  .md\:border-gray-200 {
+    @media (width >= 48rem) {
+      border-color: var(--color-gray-200);
+    }
+  }
   .md\:px-0 {
     @media (width >= 48rem) {
       padding-inline: calc(var(--spacing) * 0);
     }
   }
+  .md\:text-sm {
+    @media (width >= 48rem) {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+  .md\:shadow-2xl {
+    @media (width >= 48rem) {
+      --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .lg\:block {
     @media (width >= 64rem) {
       display: block;
@@ -1661,11 +1662,6 @@
       background-color: var(--color-blue-800);
     }
   }
-  .dark\:bg-gray-500 {
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--color-gray-500);
-    }
-  }
   .dark\:bg-gray-700 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-gray-700);
@@ -1742,6 +1738,13 @@
       }
     }
   }
+  .md\:dark\:border-black {
+    @media (width >= 48rem) {
+      @media (prefers-color-scheme: dark) {
+        border-color: var(--color-black);
+      }
+    }
+  }
   .\[\&\>\*\]\:py-4 {
     &>* {
       padding-block: calc(var(--spacing) * 4);

static/js/main.js

@@ -1 +1,91 @@
-function switchTheme(){"dark"==([...document.documentElement.classList].includes("dark")?"dark":"light")?(localStorage.theme="light",document.documentElement.classList.remove("dark"),document.getElementById("light").classList.add("hidden"),document.getElementById("dark").classList.remove("hidden"),document.getElementById("syntax_highlight").href="/syntax-light.css"):(localStorage.theme="dark",document.documentElement.classList.add("dark"),document.getElementById("dark").classList.add("hidden"),document.getElementById("light").classList.remove("hidden"),document.getElementById("syntax_highlight").href="/syntax-dark.css")}function toggleSidebar(){var e=document.getElementById("sidebar");[...e.classList].includes("translate-x-0")?(document.body.style.removeProperty("overflow"),e.classList.remove("translate-x-0"),e.classList.add("-translate-x-full")):(document.body.style.setProperty("overflow","hidden"),e.classList.remove("-translate-x-full"),e.classList.add("translate-x-0"))}function toggleMobileMenu(){var e=document.querySelector("#mobile-menu div.nav-links");[...e.classList].includes("h-screen")?(document.body.classList.remove("overflow-hidden","relative"),document.documentElement.classList.remove("overscroll-none"),e.classList.remove("h-screen"),e.classList.add("h-0")):(document.body.classList.add("overflow-hidden","relative"),document.documentElement.classList.add("overscroll-none"),e.classList.remove("h-0"),e.classList.add("h-screen"))}document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll(".nav-links a");let t=window.location.href.replace(/\/$/,"");e=[...e].filter(e=>e.href===t||e.href===window.location.href);if(0!==e.length)for(var d of e)d.className="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium";"dark"===localStorage.theme||!("theme"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?(document.documentElement.classList.add("dark"),document.getElementById("dark").classList.add("hidden"),document.getElementById("syntax_highlight").href="/syntax-dark.css"):(document.documentElement.classList.remove("dark"),document.getElementById("light").classList.add("hidden"),document.getElementById("syntax_highlight").href="/syntax-light.css"),document.getElementById("switch-theme")?.addEventListener("click",switchTheme),document.getElementById("toggle-sidebar")?.addEventListener("click",toggleSidebar),document.getElementById("toggle-mobile-menu")?.addEventListener("click",toggleMobileMenu)});
+document.addEventListener("DOMContentLoaded", function() {
+    // ---------------- Selected Navbar Link -------------------------
+    let navbar_links = document.querySelectorAll('.nav-links a');
+    let trim_last_slash = window.location.href.replace(/\/$/, '');
+    let selected_navbar_link = [...navbar_links].filter((item) => {
+        return ((item.href === trim_last_slash) || (item.href === window.location.href))
+    })
+    if (selected_navbar_link.length !== 0) {
+        for (let element of selected_navbar_link) {
+            element.className = "bg-gray-900 text-white px-3 py-2 rounded-md md:text-sm text-3xl font-medium"
+        }
+    }
+
+    // ---------------- Image Zoom -------------------------
+    // Probably should only grab the images we want but whatever
+    const images = document.querySelectorAll('img');
+    for (let img of images){
+        img.addEventListener('click', zoomImage(img));
+    }
+
+    // ---------------- Switch Theme -------------------------
+    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.classList.add('dark')
+        document.getElementById('dark').classList.add('hidden');
+        document.getElementById("syntax_highlight").href = "/syntax-dark.css";
+    } else {
+        document.documentElement.classList.remove('dark')
+        document.getElementById('light').classList.add('hidden');
+        document.getElementById("syntax_highlight").href = "/syntax-light.css";
+    }
+    // Switch theme action
+    document.getElementById('switch-theme')?.addEventListener('click', switchTheme);
+
+    // ---------------- Toggle Sidebar -------------------------
+    document.getElementById('toggle-sidebar')?.addEventListener('click', toggleSidebar);
+
+    // ---------------- Toggle Mobile menu -------------------------
+    document.getElementById('toggle-mobile-menu')?.addEventListener('click', toggleMobileMenu);
+});
+
+function zoomImage(img) {
+    const zoom = mediumZoom(img, {
+        background: "#282a36dd"
+    });
+}
+
+function switchTheme() {
+    let current_theme = ([...document.documentElement.classList].includes('dark')) ? 'dark' : 'light';
+    if (current_theme === 'dark') {
+        localStorage.theme = 'light';
+        document.documentElement.classList.remove('dark');
+        document.getElementById('light').classList.add('hidden');
+        document.getElementById('dark').classList.remove('hidden');
+        document.getElementById("syntax_highlight").href = "/syntax-light.css";
+    } else {
+        localStorage.theme = 'dark';
+        document.documentElement.classList.add('dark');
+        document.getElementById('dark').classList.add('hidden');
+        document.getElementById('light').classList.remove('hidden');
+        document.getElementById("syntax_highlight").href = "/syntax-dark.css";
+    }
+}
+
+function toggleSidebar() {
+    let sidebar = document.getElementById('sidebar');
+    if ([...sidebar.classList].includes('translate-x-0')) {
+        document.body.style.removeProperty("overflow")
+        sidebar.classList.remove('translate-x-0')
+        sidebar.classList.add('-translate-x-full')
+    } else {
+        document.body.style.setProperty("overflow", "hidden")
+        sidebar.classList.remove('-translate-x-full')
+        sidebar.classList.add('translate-x-0')
+    }
+}
+
+function toggleMobileMenu() {
+    let menu = document.querySelector('#mobile-menu div.nav-links');
+    if ([...menu.classList].includes('h-screen')) {
+        document.body.classList.remove("overflow-hidden", "relative")
+        document.documentElement.classList.remove("overscroll-none",)
+        menu.classList.remove('h-screen')
+        menu.classList.add('h-0')
+    } else {
+        document.body.classList.add("overflow-hidden", "relative")
+        document.documentElement.classList.add("overscroll-none",)
+        menu.classList.remove('h-0')
+        menu.classList.add('h-screen')
+    }
+}

static/js/page.js

@@ -1 +1,38 @@
-function getActiveTocElement(e){return[...e].find(e=>e.getBoundingClientRect().y<=0)}function findCorrespondingTocTitle(n){return[...document.querySelectorAll("#toc li a")].find(e=>e.href.substring(e.href.indexOf("#"))==="#"+n.id)}document.addEventListener("DOMContentLoaded",function(){if(null!==document.getElementById("toc")){var e=document.querySelectorAll("#toc li a");let n=[],t=([...e].forEach(e=>{n.push(e.href.substring(e.href.indexOf("#")))}),document.querySelectorAll(n.join(","))),i=[...t].reverse();var e=getActiveTocElement(i)||t[0],o=(findCorrespondingTocTitle(e).classList.add("bg-blue-700"),e);window.addEventListener("scroll",()=>{var e=getActiveTocElement(i)||t[0];e!==o&&(findCorrespondingTocTitle(o).classList.remove("bg-blue-700"),findCorrespondingTocTitle(e).classList.add("bg-blue-700"),o=e)})}});
+document.addEventListener("DOMContentLoaded", function() {
+  // ---------------- TOC Scrollspy --------------------
+  if (document.getElementById('toc') !== null) {
+
+    const table_of_content_links = document.querySelectorAll('#toc li a')
+
+    let page_titles_ids = [];
+    [...table_of_content_links].forEach((item)=> {
+      page_titles_ids.push(item.href.substring(item.href.indexOf("#")))
+    })
+    const page_titles_elements = document.querySelectorAll(page_titles_ids.join(','));
+
+    let reversed_title_elements = [...page_titles_elements].reverse();
+    let elem = getActiveTocElement(reversed_title_elements) || page_titles_elements[0]; //If no element has gone outside of viewport on y axis
+    findCorrespondingTocTitle(elem).classList.add('bg-blue-700') //page load
+    var previous_elem = elem
+
+    window.addEventListener('scroll', () => {
+      let element = getActiveTocElement(reversed_title_elements) || page_titles_elements[0];
+
+      if (element !== previous_elem) {
+        findCorrespondingTocTitle(previous_elem).classList.remove('bg-blue-700')
+        findCorrespondingTocTitle(element).classList.add('bg-blue-700')
+        previous_elem = element
+      }
+    })
+  }
+});
+function getActiveTocElement(elements) {
+  return [...elements].find((item) => {
+    return (item.getBoundingClientRect().y <= 0)
+  })
+}
+function findCorrespondingTocTitle(element) {
+  return [...document.querySelectorAll('#toc li a')].find((item) => {
+    return item.href.substring(item.href.indexOf("#")) === `#${element.id}`
+  })
+}