task: tweaking the top nav on mobile

docs/_meta.md

@@ -17,7 +17,7 @@ logo:
 # Announcement is shown on the top of the site
 # next to the site logo
 announcement: 
-  text: "Check our Github repository"
+  text: "Check our Github repository."
   link: "https://github.com/paganotoni/doco"
 
 # Social links are shown on the top right of the site

internal/template.html

@@ -36,12 +36,12 @@
 
         <div class="flex items-center gap-8">
             {{ if not (eq .SiteConfig.Announcement.Text "") }}
-                <a href="" class="rounded-full p-3 py-1.5 bg-white border text-sm flex flex-row items-center gap-2 hover:border-gray-300">
+                <a href="{{ .SiteConfig.Announcement.Link }}" class="hidden md:flex rounded-full p-3 py-1.5 bg-white border text-sm flex flex-row items-center gap-2 hover:border-gray-300">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.2" stroke="currentColor" class="w-5 h-5">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1 8.835 2.535M10.34 6.66a23.847 23.847 0 0 0 8.835-2.535m0 0A23.74 23.74 0 0 0 18.795 3m.38 1.125a23.91 23.91 0 0 1 1.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 0 0 1.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 0 1 0 3.46" />
                     </svg>
 
-                    <span>Check out our Github Repo.</span>
+                    <span>{{ .SiteConfig.Announcement.Text }}</span>
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.2" stroke="currentColor" class="w-3 h-3">
                         <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                     </svg>
@@ -116,7 +116,7 @@
         </aside>
 
         <section class="flex-grow flex flex-col lg:ml-[19rem]">
-            <main class="flex-grow lg:px-5 py-5 text-md lg:text-lg pb-10">
+            <main class="flex-grow lg:px-5 px-5 py-5 text-md lg:text-lg pb-10">
                 {{ if not (eq .SectionName "") }}
                     <span class="text-sm">{{ .SectionName }}</span>    
                 {{ end }}
@@ -234,11 +234,11 @@ <h2 class="sr-only">Quick actions</h2>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
     <script src="/search.js"></script>
     <script>
-        let toggles = document.querySelectorAll(".toggle-mobile-nav");
-        let mobileMenu = document.getElementById("mobile-menu");
+        let toggles = document.querySelectorAll(".toggle-mobile-nav")
         toggles.forEach(toggle => {
             toggle.addEventListener("click", () => {
-                mobileMenu.classList.toggle("hidden");
+                document.getElementById("mobile-menu").classList.toggle("hidden");
+                document.querySelector("body").classList.toggle("overflow-hidden");
             });
         });
     </script>