adjust desktop desktop nav

assets/css/src/article.css

@@ -1,4 +1,5 @@
 article .content {
   scroll-margin-block-start: calc(var(--unit--vertical) * 6);
   margin-top: calc(var(--unit--vertical) * 2);
+  padding-bottom: calc(var(--unit--vertical) * 2);
 }

assets/css/src/header.css

@@ -138,10 +138,6 @@ button.toggle.right::before {
 }
 
 @media screen and (min-width: 640px) {
-  #main-header {
-    display: flex;
-    justify-content: center;
-  }
   #logo {
     width: 37vw;
   }

assets/css/src/html.css

@@ -62,10 +62,12 @@ html {
 
 @media screen and (min-width: 640px) {
   :root {
-    --padding-body: calc(12 * var(--unit--horizontal));
+    --padding-body: calc(15 * var(--unit--horizontal));
   }
-  body {
-    padding-left: var(--padding-body);
-    max-width: calc(17 * var(--unit--horizontal));
+  body,
+  #logo {
+    max-width: calc(22 * var(--unit--horizontal));
+    padding-left: var(--padding-body) !important;
+    box-sizing: content-box;
   }
 }

assets/js/script.js

@@ -82,7 +82,6 @@ function toggleLogoState() {
 }
 
 function togglePanel(side, event) {
-  event.stopPropagation();
   document.querySelector(`.panel--${side}`).classList.toggle("open");
   const isOpen = document
     .querySelector(`.panel--${side}`)
@@ -95,12 +94,15 @@ function togglePanel(side, event) {
       document.querySelector("html").style.overflowY = "hidden";
       document.querySelector("#main-header").classList.remove("minimized");
     }
-  } else if (window.innerWidth < 640) {
-    document.querySelector("html").style.overflowY = "";
-    if (scrollY > 10) {
-      document.querySelector("#main-header").classList.add("minimized");
+  } else {
+    if (window.innerWidth < 640) {
+      document.querySelector("html").style.overflowY = "";
+      if (scrollY > 10) {
+        document.querySelector("#main-header").classList.add("minimized");
+      }
     }
   }
+  event.stopPropagation();
 }
 
 function closePanels() {
@@ -135,6 +137,9 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 
   setWindowHeightFactor();
+  window.addEventListener("resize", () => {
+    setWindowHeightFactor();
+  });
 
   fixFootNotes();
 

site/snippets/panels.php

@@ -1,23 +1,23 @@
 <sidebar id="desktop-nav">
   <ul>
-    <li class="left top" style="--left: <?= rand(0, 4) ?>; --top: <?= rand(0, 6) ?>">
+    <li class="left top" style="--left: <?= rand(0, 8) ?>; --top: <?= rand(0, 6) ?>">
       <button class="toggle-btn toggle-btn--left" onclick="togglePanel('left', event)">
         années
       </button>
     </li>
-    <li class="left top" style="--left: <?= rand(0, 4) ?>; --top: <?= rand(0, 6) ?>">
+    <li class="left top" style="--left: <?= rand(0, 8) ?>; --top: <?= rand(0, 6) ?>">
       <button class="toggle-btn toggle-btn--left" onclick="togglePanel('right', event)">
         catégories
       </button>
     </li>
     <li class="empty
     "></li>
-    <li class="left top" style="--left: <?= rand(0, 4) ?>; --top: <?= rand(0, 6) ?>">
+    <li class="left top" style="--left: <?= rand(0, 8) ?>; --top: <?= rand(0, 6) ?>">
       <a href="#">
         s'abonner
       </a>
     </li>
-    <li class="left top" style="--left: <?= rand(0, 4) ?>; --top: <?= rand(0, 6) ?>">
+    <li class="left top" style="--left: <?= rand(0, 8) ?>; --top: <?= rand(0, 6) ?>">
       <a href="<?= $site->find('a-propos')->url() ?>">
         à propos
       </a>