Wave changes

assets/scripts/script.js

@@ -225,3 +225,64 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 
 
+// Make Mermaid diagrams zoomable
+window.addEventListener('load', function() {
+  // Initialize Mermaid (if not already)
+  mermaid.initialize({ startOnLoad: false, theme: 'neutral' });
+
+  // Find all Mermaid divs
+  document.querySelectorAll('.mermaid').forEach(el => {
+    // Decode HTML entities
+    el.innerHTML = el.innerHTML
+      .replace(/>/g, '>')
+      .replace(/&lt;/g, '<')
+      .replace(/&amp;/g, '&');
+
+    // Wrap in container if not already wrapped
+    if (!el.parentElement.classList.contains('mermaid-container')) {
+      const container = document.createElement('div');
+      container.classList.add('mermaid-container');
+
+      // Add zoom controls
+      const controls = document.createElement('div');
+      controls.classList.add('mermaid-zoom-controls');
+      controls.innerHTML = `
+        <button class="zoom-in">+</button>
+        <button class="zoom-out">-</button>
+      `;
+      container.appendChild(controls);
+
+      // Move the mermaid diagram into container
+      container.appendChild(el.cloneNode(true));
+      el.replaceWith(container);
+
+      // Select the SVG inside
+      const svg = container.querySelector('.mermaid svg');
+      let scale = 1;
+
+      // Zoom functions
+      controls.querySelector('.zoom-in').addEventListener('click', () => {
+        scale += 0.1;
+        svg.style.transform = `scale(${scale})`;
+      });
+
+      controls.querySelector('.zoom-out').addEventListener('click', () => {
+        scale = Math.max(0.1, scale - 0.1);
+        svg.style.transform = `scale(${scale})`;
+      });
+
+      // Optional: scroll wheel zoom
+      container.addEventListener('wheel', (e) => {
+        if (e.ctrlKey) { // zoom only with ctrl+wheel
+          e.preventDefault();
+          if (e.deltaY < 0) scale += 0.05;
+          else scale = Math.max(0.1, scale - 0.05);
+          svg.style.transform = `scale(${scale})`;
+        }
+      });
+    }
+  });
+
+  // Finally, render Mermaid diagrams
+  mermaid.run({ querySelector: '.mermaid' });
+});

assets/styles/misc.css

@@ -232,21 +232,23 @@ nav {
   gap: 0.5rem;
 }
 
-/* Push search to the far right */
+/* SEARCH */
 #search-input,
 #search-btn {
   margin-left: auto;
 }
 
-/* Input styling */
 #search-input {
   width: 12rem;
   padding: 0.3rem 0.5rem;
   font-size: 0.9rem;
   border: 1px solid var(--border-color, #ccc);
   border-radius: 4px;
-  background: var(--bg-color, #fff);
-  color: var(--text-color, #000);
+  font-family: var(--font-body);
+  font-weight: 300;
+  background-color: var(--kb-card-bg);
+  color: var(--fg);
+
 }
 
 /* Button styling */
@@ -363,3 +365,58 @@ mark {
 .search-result.active mark {
   background: rgba(255, 230, 150, 0.9);
 }
+
+
+/* Table of contents */
+#table-of-contents{
+  float: left;
+  width: var(--margin);
+  /* margin-left: calc(-1 * ( (95vw - var(--content)) / 2 )); */
+  margin-left: calc(-1 * ((100vi - var(--content)) / 2));
+  padding-left: var(--gutter);
+  box-sizing: border-box;
+
+  position: sticky;
+  top: 5.5rem;
+  max-height: calc(100vh - 6rem);
+  overflow: auto;
+
+  font-size: .95rem;
+  border-right: 1px solid var(--border, #d7d7d7);
+  padding-top: .25rem;
+}
+
+#table-of-contents > h2{
+  margin: 0 0 .5rem;
+  font-size: 1rem;
+  text-transform: uppercase;
+  letter-spacing: .02em;
+  color: var(--muted, #666);
+}
+
+#text-table-of-contents ul{
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+}
+#text-table-of-contents li{
+  margin: .25rem 0;
+}
+#text-table-of-contents a{
+  text-decoration: none;
+}
+#text-table-of-contents a:hover{
+  text-decoration: underline;
+}
+
+#text-table-of-contents ul ul { margin-left: .75rem; opacity: .9; }
+
+h2[id], h3[id], h4[id] { scroll-margin-top: 6.5rem; }
+
+#text-table-of-contents a.is-active{
+    /* font-weight: 700; */
+    text-decoration: underline;
+    background-color: var(--active-toc);
+    /* border: 1px solid var(--border, #ccc); */
+}
+