From b8de28aaded0e4fe41e573b7088bc6e12b7ca144 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Mon, 15 Apr 2024 16:01:13 +0200
Subject: [PATCH] adjust desktop desktop nav

---
 assets/css/src/article.css |  1 +
 assets/css/src/header.css  |  4 ----
 assets/css/src/html.css    | 10 ++++++----
 assets/js/script.js        | 15 ++++++++++-----
 site/snippets/panels.php   |  8 ++++----
 5 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/assets/css/src/article.css b/assets/css/src/article.css
index 27aebae..bbafd3a 100644
--- a/assets/css/src/article.css
+++ b/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);
 }
diff --git a/assets/css/src/header.css b/assets/css/src/header.css
index 039ab57..b76ba62 100644
--- a/assets/css/src/header.css
+++ b/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;
   }
diff --git a/assets/css/src/html.css b/assets/css/src/html.css
index 877882a..aeec0f6 100644
--- a/assets/css/src/html.css
+++ b/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;
   }
 }
diff --git a/assets/js/script.js b/assets/js/script.js
index 284ae0b..7877e17 100644
--- a/assets/js/script.js
+++ b/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();
 
diff --git a/site/snippets/panels.php b/site/snippets/panels.php
index c8f5a05..28d997d 100644
--- a/site/snippets/panels.php
+++ b/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>