improve mobile footer

assets/css/src/footer.css

@@ -1,11 +1,15 @@
 #main-footer {
   position: fixed;
   bottom: 0;
-  width: 100%;
   box-sizing: border-box;
-  padding-bottom: 3px;
+  padding: 3px var(--unit--horizontal) 6px var(--unit--horizontal);
+
+  border-bottom: 0;
+}
+.main-footer--background {
+  border-top: 1px solid #eee;
+  border-right: 1px solid #eee;
   background-color: #000;
-  padding-bottom: 6px;
 }
 [data-template="home"] #main-footer {
   position: fixed;
@@ -13,10 +17,8 @@
   bottom: 0;
 }
 
-#main-footer ul {
-  display: flex;
-  justify-content: center;
-  gap: calc(2 * var(--unit--horizontal));
+#main-footer li:not(.open-nav-wrapper) {
+  display: none;
 }
 
 #main-footer button.open-nav {
@@ -24,6 +26,9 @@
 }
 
 @media screen and (min-width: 640px) {
+  #main-footer li {
+    display: block !important;
+  }
   #main-footer {
     position: fixed;
     left: 0;

assets/css/src/header.css

@@ -14,7 +14,7 @@ main {
 }
 
 #logo * {
-  font-size: 26.65vw;
+  font-size: 25.3vw;
   font-weight: var(--font-weight-extra-bold);
 }
 
@@ -22,7 +22,7 @@ main {
   height: 20vw;
   width: 100%;
   box-sizing: border-box;
-  padding-right: 1vw;
+  padding-right: 3vw;
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -54,7 +54,7 @@ main {
   position: relative;
   height: 100svh;
   box-sizing: border-box;
-  padding-top: calc(var(--unit--vertical-relative) * 9);
+  padding-top: calc(var(--unit--vertical-relative) * 7);
 
   display: flex;
   flex-direction: column;
@@ -65,55 +65,35 @@ main {
   overflow: auto;
 }
 
-/* ================= ENTRY BTNS ================= */
-#entry-btns {
-  position: sticky;
-  position: -webkit-sticky;
-  top: calc(var(--unit--vertical) * 4);
-  height: var(--entry-btns-height);
-  display: flex;
-  justify-content: space-between;
-}
-[data-template="info"] #entry-btns {
-  top: calc(var(--unit--vertical) * 4);
-}
-
-[data-template="home"] .entry-btn {
-  align-items: start;
-}
-
 button.toggle.left::after,
 button.toggle.right::before {
   transition: all 0.5s var(--curve-sine);
   content: "+";
 }
 
-#entry-btns.minimized {
-  color: #000;
-}
-#entry-btns.minimized .entry-btn--left::before,
-#entry-btns.minimized .entry-btn--right::after {
-  background-color: var(--color-secondary);
+.page-cover .links {
+  position: absolute;
+  bottom: 8px;
+  padding-left: calc(5rem + var(--unit--horizontal));
+  width: 100%;
+  box-sizing: border-box;
 }
 
-#entry-btns.minimized .entry-btn::before,
-#entry-btns.minimized .entry-btn::after {
-  font-weight: bold;
-}
-
-#entry-btns.minimized .entry-btn--left {
-  padding-right: 4px;
-  margin-left: calc(-4px - var(--width));
-}
-#entry-btns.minimized .entry-btn--right {
-  padding-left: 4px;
-  margin-right: calc(-4px - var(--width));
+.page-cover .links li {
+  display: inline-block;
+  margin-right: var(--unit--horizontal);
 }
 
 @media screen and (min-width: 640px) {
   body:not([data-template="home"]) #main-header {
     width: var(--body-padding);
   }
+  #logo * {
+    font-size: 26.65vw;
+  }
+  #logo span {
+    padding-right: 1vw;
+  }
   body:not([data-template="home"]) #logo * {
     font-size: 6vw;
   }
@@ -144,7 +124,7 @@ button.toggle.right::before {
     height: initial;
   }
 
-  #entry-btns {
+  .page-cover .links {
     display: none;
   }
 }

assets/js/script.js

@@ -9,16 +9,36 @@ function getUnit(id) {
   return pxUnit;
 }
 
-function throttle(callback, limit) {
-  let waiting = false;
+// Throttle found here : https://gist.github.com/ionurboz/51b505ee3281cd713747b4a84d69f434
+function throttle(func, wait, options) {
+  var context, args, result;
+  var timeout = null;
+  var previous = 0;
+  if (!options) options = {};
+  var later = function () {
+    previous = options.leading === false ? 0 : Date.now();
+    timeout = null;
+    result = func.apply(context, args);
+    if (!timeout) context = args = null;
+  };
   return function () {
-    if (!waiting) {
-      callback.apply(this, arguments);
-      waiting = true;
-      setTimeout(function () {
-        waiting = false;
-      }, limit);
+    var now = Date.now();
+    if (!previous && options.leading === false) previous = now;
+    var remaining = wait - (now - previous);
+    context = this;
+    args = arguments;
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      previous = now;
+      result = func.apply(context, args);
+      if (!timeout) context = args = null;
+    } else if (!timeout && options.trailing !== false) {
+      timeout = setTimeout(later, remaining);
     }
+    return result;
   };
 }
 
@@ -47,6 +67,17 @@ function toggleLogoState() {
     document.querySelector("#main-header").classList.remove("minimized");
   }
 }
+function toggleFooterState() {
+  if (scrollY > 90) {
+    document
+      .querySelector("#main-footer")
+      .classList.add("main-footer--background");
+  } else {
+    document
+      .querySelector("#main-footer")
+      .classList.remove("main-footer--background");
+  }
+}
 
 function fixFootNotes() {
   const footnotes = document.querySelectorAll('a[href^="#sdfootnote"]');
@@ -108,9 +139,13 @@ document.addEventListener("DOMContentLoaded", () => {
     top: 0,
   });
 
-  window.addEventListener("scroll", () => {
+  const handleScroll = throttle(() => {
     toggleLogoState();
-  });
+    if (window.innerWidth <= 680) {
+      toggleFooterState();
+    }
+  }, 100);
+  window.addEventListener("scroll", handleScroll);
 
   setWindowHeightFactor();
   window.addEventListener("resize", () => {
@@ -168,6 +203,4 @@ document.addEventListener("DOMContentLoaded", () => {
   navOverlay.addEventListener("click", () => {
     closeNav();
   });
-
-  subscribeBtn.addEventListener("click", showSubscribeField);
 });