update the layout completely and include tailwind standalone

views/script.html

@@ -1,34 +1,25 @@
 {{ block "script" .}}
 <script>
-  function updateActiveNav() {
+  function setScatteredWordsVisibility() {
+    const scatteredWords = document.getElementById('scatteredWords');
+    if (!scatteredWords) return;
     const url = window.location.pathname;
-    document.querySelectorAll('.nav-link').forEach((link) => {
-      link.classList.remove('active');
-      if (link.getAttribute('hx-get') === url) {
-        link.classList.add('active');
-      }
-    });
+    console.log('Current URL:', url);
+    if (url === '/' || url === '') {
+      scatteredWords.classList.add('md:block');
+    } else {
+      console.log('Hiding scattered words');
+      scatteredWords.classList.remove('md:block');
+    }
   }
   document.addEventListener('DOMContentLoaded', (event) => {
-    updateActiveNav();
+    setScatteredWordsVisibility();
     document.body.addEventListener('htmx:pushedIntoHistory', function (evt) {
-      updateActiveNav();
+      setScatteredWordsVisibility();
     });
 
     document.body.addEventListener('htmx:historyRestore', function () {
-      updateActiveNav();
-    });
-
-    document.body.addEventListener('htmx:beforeRequest', function (evt) {
-      const elt = evt.target;
-      if (
-        elt.classList &&
-        elt.classList.contains('nav-link') &&
-        elt.classList.contains('active')
-      ) {
-        evt.preventDefault();
-        evt.stopPropagation();
-      }
+      setScatteredWordsVisibility();
     });
   });
 </script>