Add hovering subscribe shortcut

yanirs · Jan 17, 2024 · 1c332eb · 1c332eb
1 parent 4f63eb8
commit 1c332eb
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/assets/css/extended/footer.css b/assets/css/extended/footer.css
@@ -35,3 +35,26 @@ form.mailing-list input[type="submit"]  {
   padding-bottom: 10px;
   padding-top: 0;
 }
+
+.mailing-list-link {
+  background: var(--tertiary);
+  color: var(--primary);
+  font-size: 14px;
+  border-radius: 2px;
+  padding: 6px;
+  visibility: hidden;
+  position: fixed;
+  top: 2px;
+  right: 2px;
+  z-index: 99;
+  transition: visibility 0.5s, opacity 0.8s linear;
+}
+
+.mailing-list-link:hover {
+  background: var(--primary);
+  color: var(--theme);
+}
+
+.mailing-list-link:focus {
+  outline: 0;
+}
diff --git a/layouts/partials/extend_footer.html b/layouts/partials/extend_footer.html
@@ -1,3 +1,7 @@
+<a href="#mailing-list-email" aria-label="subscribe to mailing list" class="mailing-list-link" id="mailing-list-link">
+  ⬇ Subscribe below
+</a>
+
 <div class="mailing-list-container">
   <form
       class="mailing-list"
@@ -29,15 +33,27 @@
 </div>
 
 <script>
+  // Set up the collapsible menu.
   const menuTrigger = document.querySelector("#menu-trigger");
   const menuElem = document.querySelector(".menu");
   menuTrigger.addEventListener("click", function () {
     menuElem.classList.toggle("hidden");
   });
-  // hide menu when clicked outside
   document.body.addEventListener('click', function (event) {
     if (!menuTrigger.contains(event.target)) {
       menuElem.classList.add("hidden");
     }
   });
+
+  // Show / hide mailing list link when scrolling (adapted from top-link functionality).
+  const mailingListButton = document.getElementById("mailing-list-link");
+  window.onscroll = function () {
+    if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
+      mailingListButton.style.visibility = "visible";
+      mailingListButton.style.opacity = "1";
+    } else {
+      mailingListButton.style.visibility = "hidden";
+      mailingListButton.style.opacity = "0";
+    }
+  };
 </script>