style: improve dark mode

2 files changed, 83 insertions, 10 deletions

diff --git a/assets/css/markdown.css b/assets/css/markdown.css
index 63d6039..2b35bb6 100644
--- a/assets/css/markdown.css
+++ b/assets/css/markdown.css
@@ -104,8 +104,3 @@
   padding-top: 4.5rem;
   margin-top: -4.5rem;
 }
-  
-/* Override pygments style background color. */
-/* .content .highlight pre {
-  @apply bg-gray-100 !important;
-} */
diff --git a/assets/js/eureka.js b/assets/js/eureka.js
index 96f7293..4fd9e81 100644
--- a/assets/js/eureka.js
+++ b/assets/js/eureka.js
@@ -1,3 +1,79 @@
+function enableStickyToc() {
+    window.addEventListener('DOMContentLoaded', () => {
+        const observer = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                const id = entry.target.getAttribute('id');
+                if (entry.intersectionRatio > 0) {
+                    if (delay == true) {
+                        let element = document.querySelector('.sticky-toc li.active')
+                        element.firstChild.classList.remove(textColor);
+                        element.classList.remove('active');
+                        delay = false;
+                        updatePosAndColor();
+                    }
+                    document.querySelector(`.sticky-toc li a[href="#${id}"]`).parentElement.classList.add('active');
+                    updatePosAndColor();
+                } else {
+                    if (document.querySelectorAll('.sticky-toc li.active').length == 1) {
+                        delay = true;
+                    } else {
+                        let element = document.querySelector(`.sticky-toc li a[href="#${id}"]`)
+                        element.classList.remove(textColor);
+                        element.parentElement.classList.remove('active');
+                        updatePosAndColor();
+                    }
+                }
+            });
+        });
+
+        var delay = false;
+        var targetPos = window.innerHeight * 0.4
+        var textColor = 'text-eureka'
+
+        function updatePosAndColor() {
+            let elements = document.querySelectorAll('.sticky-toc li.active')
+            let len = elements.length
+            if (len != 0) {
+                let firstElement = elements[0]
+                firstElement.firstChild.classList.add(textColor)
+                let offset = firstElement.offsetTop - targetPos;
+                if (offset > 0) {
+                    document.querySelector(`.sticky-toc`).style.top = `calc( 7rem - ${offset}px)`
+                } else {
+                    document.querySelector(`.sticky-toc`).removeAttribute("style");
+                }
+                for (let i = 1; i < len; i++) {
+                    elements[i].firstChild.classList.remove(textColor)
+                }
+            }
+        }
+
+        // Track all sections that have an `id` applied
+        document.querySelectorAll('.content h1[id]').forEach((section) => {
+            observer.observe(section);
+        });
+        document.querySelectorAll('.content h2[id]').forEach((section) => {
+            observer.observe(section);
+        });
+        document.querySelectorAll('.content h3[id]').forEach((section) => {
+            observer.observe(section);
+        });
+
+        document.querySelectorAll('.content h4[id]').forEach((section) => {
+            observer.observe(section);
+        });
+
+        document.querySelectorAll('.content h5[id]').forEach((section) => {
+            observer.observe(section);
+        });
+
+        document.querySelectorAll('.content h6[id]').forEach((section) => {
+            observer.observe(section);
+        });
+    });
+}
+
+//Masonry Layout
 function resizeGridItem(item) {
     grid = document.getElementsByClassName("masonry")[0];
     rowHeight = 0;
@@ -18,10 +94,12 @@ function resizeInstance(instance) {
     resizeGridItem(item);
 }
 
-window.onload = resizeAllGridItems();
-window.addEventListener("resize", resizeAllGridItems);
+function enableMasonry() {
+    window.onload = resizeAllGridItems();
+    window.addEventListener("resize", resizeAllGridItems);
 
-allItems = document.getElementsByClassName("item");
-for (x = 0; x < allItems.length; x++) {
-    imagesLoaded(allItems[x], resizeInstance);
+    allItems = document.getElementsByClassName("item");
+    for (x = 0; x < allItems.length; x++) {
+        imagesLoaded(allItems[x], resizeInstance);
+    }
 }
\ No newline at end of file