update

src/js/page.js

@@ -11,10 +11,10 @@ document.addEventListener("DOMContentLoaded", function() {
       // Add 'active' class if observation target is inside viewport
       if (entry.intersectionRatio > 0) {
         console.log(entry, 'active')
-        entry.target.classList.add('active');
+        entry.target.classList.add('bg-blue-800');
       } else {
         console.log(entry, 'inactive')
-        entry.target.classList.remove('active');
+        entry.target.classList.remove('bg-blue-800');
       }
     })
   }, {

static/js/page.js

@@ -1 +1 @@
-function activeTocItem(){var e=window.scrollY;console.log(e)}document.addEventListener("DOMContentLoaded",function(){document.getElementById("navbar").clientHeight,document.getElementById("toc"),document.getElementById("page-content");window.addEventListener("scroll",activeTocItem);const t=new window.IntersectionObserver(e=>{e.forEach(e=>{0<e.intersectionRatio?(console.log(e,"active"),e.target.classList.add("active")):(console.log(e,"inactive"),e.target.classList.remove("active"))})},{root:null,threshold:.1});var o=[];[...document.querySelectorAll("#toc li a")].forEach(e=>{o.push(e.href.substring(e.href.indexOf("#")))});const e=document.querySelectorAll(o.join(","));e.forEach(e=>{t.observe(e)})});
+function activeTocItem(){var e=window.scrollY;console.log(e)}document.addEventListener("DOMContentLoaded",function(){document.getElementById("navbar").clientHeight,document.getElementById("toc"),document.getElementById("page-content");window.addEventListener("scroll",activeTocItem);const t=new window.IntersectionObserver(e=>{e.forEach(e=>{0<e.intersectionRatio?(console.log(e,"active"),e.target.classList.add("bg-blue-800")):(console.log(e,"inactive"),e.target.classList.remove("bg-blue-800"))})},{root:null,threshold:.1});var o=[];[...document.querySelectorAll("#toc li a")].forEach(e=>{o.push(e.href.substring(e.href.indexOf("#")))});const e=document.querySelectorAll(o.join(","));e.forEach(e=>{t.observe(e)})});

templates/page.html

@@ -109,14 +109,14 @@
         <p class="text-bold text-xl">Table of contents</p>
         <ul id="toc">
           {% for h1 in page.toc %}
-          <li class="pl-2">
+          <li class="pl-2 my-2 rounded-lg">
             <a id="link-{{h1.id}}" class="text-md {% if loop.first %}is-active{% endif %}"
               href="{{ h1.permalink | safe }}">
               - {{ h1.title }}
             </a>
             {% if h1.children %}
               {% for h2 in h1.children %}
-                <li class="pl-4">
+                <li class="pl-4 my-2 rounded-lg">
                   <a id="link-{{h2.id}}" class="text-sm" href="{{ h2.permalink | safe }}">
                     - {{ h2.title }}
                   </a>