feat: update UI for better mobile usage

themes/hugo-kiera-master/layouts/partials/hamburger.html

@@ -1,10 +1,10 @@
-<button onclick="myFunction()" id="toggle-main-menu-mobile" class="hamburger hamburger--slider" type="button">
+<button onclick="toggleMobileMenu()" id="toggle-main-menu-mobile" class="hamburger hamburger--slider" type="button" aria-label="Open menu" aria-controls="mobile-submenu" aria-expanded="false">
   <span class="hamburger-box">
     <span class="hamburger-inner"></span>
   </span> 
 </button>
 
-<div id="mobile-submenu" style="display:none;" class="mobile-submenu">
+<div id="mobile-submenu" class="mobile-submenu" hidden>
 	{{ $currentPage := . }}
 	{{ range .Site.Menus.main }}
   <ul>
@@ -23,12 +23,28 @@
 </div>
 
 <script>
-	function myFunction() {
-  var x = document.getElementById("mobile-submenu");
-  if (x.style.display === "none") {
-    x.style.display = "block";
-  } else {
-    x.style.display = "none";
+function toggleMobileMenu() {
+  const menu = document.getElementById("mobile-submenu");
+  const button = document.getElementById("toggle-main-menu-mobile");
+  const open = menu.hidden;
+  const scrollY = open ? window.scrollY : Number(document.body.dataset.scrollY);
+
+  if (open) {
+    document.body.dataset.scrollY = scrollY;
+    document.body.style.top = `-${scrollY}px`;
+  }
+
+  menu.hidden = !open;
+  document.documentElement.classList.toggle("menu-open", open);
+  document.body.classList.toggle("menu-open", open);
+  button.classList.toggle("is-active", open);
+  button.setAttribute("aria-expanded", open);
+  button.setAttribute("aria-label", open ? "Close menu" : "Open menu");
+
+  if (!open) {
+    document.body.style.top = "";
+    delete document.body.dataset.scrollY;
+    window.scrollTo(0, scrollY);
   }
 }
-</script>
+</script>

themes/hugo-kiera-master/static/css/agathe.css

@@ -238,8 +238,10 @@ li.menu-item-has-children a.menu-link::after{
 .menu-item-has-children:hover .sub-menu {
   display: block;
 }
-.hamburger--slider, #toggle-main-menu-mobile {
-	opacity: 0;
+.mobile-submenu,
+.hamburger--slider,
+#toggle-main-menu-mobile {
+  display: none;
 }
 /* GRILLE ARTICLE AVEC IMAGES A GAUCHE -------------------------------------------- */
 figcaption {

themes/hugo-kiera-master/static/css/media.css

@@ -8,7 +8,7 @@
 */
 
 .events .gridflex {
-margin-top: 2em:
+  margin-top: 2em;
 }
 
 @media only screen and (min-width: 2000px) {
@@ -74,6 +74,7 @@ margin-top: 2em:
   .homepage main section { padding: 3% 6%;}
   .homepage main nav { padding: 0px;}
   .homepage main nav ul { margin-left: 0px;}
+  .homepage #toggle-main-menu-mobile { display: none; }
 
    /* Grids --------------------------------- */
   :is(.projects, .people, .events) .gridflex {
@@ -93,17 +94,29 @@ main article figure img {
 
   /* header menu --------------------------------- */
   nav:not(.homepage nav) { display: none; }
+  html.menu-open,
+  body.menu-open { overflow: hidden; }
+  body.menu-open {
+    position: fixed;
+    width: 100%;
+  }
+  body.menu-open #container > header {
+    position: fixed;
+    inset: 0 0 auto;
+  }
   .homepage .hamburger--slider, 
   .homepage #toggle-main-menu-mobile {
     opacity: 0;
   }
   .hamburger--slider,
   #toggle-main-menu-mobile {
+    display: inline-block;
     opacity: 1;
   }
   .hamburger--slider {
     position: absolute !important;
-    right: 0;
+    right: 1ch;
+    top: 1ch;
   }
   .hamburger {
     padding: 15px;
@@ -119,6 +132,8 @@ main article figure img {
     border: 0;
     margin: 0;
     overflow: visible;
+    min-width: 44px;
+    min-height: 44px;
   }
   .hamburger-box {
     width: 32px;
@@ -165,12 +180,29 @@ main article figure img {
   }
   .hamburger--slider .hamburger-inner::after {
     top: 16px;
+  }
+  .hamburger--slider.is-active .hamburger-inner {
+    transform: translate3d(0, 8px, 0) rotate(45deg);
+  }
+  .hamburger--slider.is-active .hamburger-inner::before {
+    opacity: 0;
+  }
+  .hamburger--slider.is-active .hamburger-inner::after {
+    transform: translate3d(0, -16px, 0) rotate(-90deg);
   }
     .mobile-submenu {
     display: none;
     margin-top: 1ch;
     width: 100%;
   }
+  .mobile-submenu:not([hidden]) {
+    display: block;
+    max-height: calc(100dvh - 6rem);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: none;
+  }
+  .mobile-submenu::-webkit-scrollbar { display: none; }
   .mobile-submenu ul {
     list-style: none;
   }
@@ -179,7 +211,8 @@ main article figure img {
     width: 100%;
     text-decoration: none;
     text-align: center;
-    margin: 5px;
+    margin: 0;
+    padding: 0.6em;
     border-top: 1px solid grey;
   }
   .mobile-submenu a:hover {
@@ -210,12 +243,32 @@ main article figure img {
 /* Footer  --------------------------------- */
   footer { display: block; }
   footer > div { width: unset; }
+  #logo-footer { max-width: 100%; height: auto; }
   footer .column-2 { text-align: center; }
   footer .column-2 .social { margin: 1em 0; }
+  footer .terms a { display: block; padding: 0.35em 0; }
 }
 
 
 @media only screen and (max-width: 600px) {
+  :root { --font-size: 19px; }
+  h1, h2, h3 { line-height: 1.15; }
+  h2 { font-size: 1.5em; }
+
+  header .logo {
+    width: min(240px, calc(100% - 56px));
+    margin: 0;
+    padding-bottom: 0.5rem;
+  }
+  header .logo img { display: block; width: 100%; }
+
+  main article { border-left-width: 0.75em; }
+  main article > * {
+    padding-right: 1.25rem;
+    padding-left: 1.25rem;
+  }
+  .grid-page { padding: 1.25em; }
+
   :is(.projects, .people,.events) .gridflex {
     grid-template-columns: repeat(1,100%);
   }
@@ -226,6 +279,11 @@ main article figure img {
     padding: 0px;
   }
   hr {
-    width: 150px;
+    width: min(150px, 100%);
+    height: 0;
+    margin: 2em auto 1.5em;
   }
+  main article hr + h2 { margin-top: 0; }
+  footer { padding: 2em 1.25em; }
+  pre, table { max-width: 100%; overflow-x: auto; }
 }