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 {
+#main-footer li:not(.open-nav-wrapper) {
-  display: flex;
+  display: none;
-  justify-content: center;
-  gap: calc(2 * var(--unit--horizontal));
 }
 
 #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 {
+.page-cover .links {
-  color: #000;
+  position: absolute;
-}
+  bottom: 8px;
-#entry-btns.minimized .entry-btn--left::before,
+  padding-left: calc(5rem + var(--unit--horizontal));
-#entry-btns.minimized .entry-btn--right::after {
+  width: 100%;
-  background-color: var(--color-secondary);
+  box-sizing: border-box;
 }
 
-#entry-btns.minimized .entry-btn::before,
+.page-cover .links li {
-#entry-btns.minimized .entry-btn::after {
+  display: inline-block;
-  font-weight: bold;
+  margin-right: var(--unit--horizontal);
-}
-
-#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));
 }
 
 @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) {
+// Throttle found here : https://gist.github.com/ionurboz/51b505ee3281cd713747b4a84d69f434
-  let waiting = false;
+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) {
+    var now = Date.now();
-      callback.apply(this, arguments);
+    if (!previous && options.leading === false) previous = now;
-      waiting = true;
+    var remaining = wait - (now - previous);
-      setTimeout(function () {
+    context = this;
-        waiting = false;
+    args = arguments;
-      }, limit);
+    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);
 });

site/snippets/cover.php

@@ -15,4 +15,24 @@ $isOpen = isset($isOpen) ? $isOpen : false;
       <?= $slots->text() ?>
     </div>
   <?php endif ?>
+  <ul class="links">
+    <?php if ($page->is(page('inscription'))): ?>
+      <li>
+        <a href="<?= $site->url() ?>">
+          accueil
+        </a>
+      </li>    
+    <?php else: ?>
+      <li>
+        <a href="/inscription" id="subscribe-btn" class="plus">
+          s'inscrire
+        </a>
+      </li>
+    <?php endif ?>
+    <li>
+      <a href="<?= $site->find('a-propos')->url() ?>">
+        à propos
+      </a>
+    </li>
+  </ul>
 </header>

site/snippets/footer.php

@@ -1,7 +1,7 @@
     <footer id="main-footer">
       <ul id="links">
         <?php if (!$page->isHomePage()): ?>
-          <li>
+          <li class="open-nav-wrapper">
             <button class="plus open-nav" title="chercher parmi les textes">textes</button>
           </li>  
         <?php endif ?>