style desktop nav panel

assets/css/src/footer.css

@@ -23,6 +23,6 @@
 
 @media screen and (min-width: 640px) {
   #main-footer {
-    padding: calc(var(--unit--horizontal) / 2) var(--unit--horizontal);
+    display: none;
   }
 }

assets/css/src/generic.css

@@ -79,21 +79,21 @@ body {
 }
 
 /* ================= BUTTONS ================= */
-.toggle-btn.left::after {
+.toggle-btn--left::after {
   margin-left: var(--unit--horizontal);
 }
-.toggle-btn.left::after {
+.toggle-btn--left::after {
   content: "+";
 }
-.toggle-btn.left.open::after {
+.toggle-btn--left.open::after {
   content: "-";
 }
-.toggle-btn.right::before {
+.toggle-btn--right::before {
   margin-right: var(--unit--horizontal);
 }
-.toggle-btn.right::before {
+.toggle-btn--right::before {
   content: "+";
 }
-.toggle-btn.right.open::before {
+.toggle-btn--right.open::before {
   content: "-";
 }

assets/css/src/header.css

@@ -5,13 +5,19 @@
   left: 0;
   box-sizing: border-box;
   width: 100vw;
-  height: calc(var(--unit--vertical) * 4);
+  height: calc(var(--unit--vertical) * 4.5);
   padding: var(--unit--vertical) var(--unit--horizontal);
   padding-bottom: 0;
   transition: height 0.2s ease-in-out;
 }
 #logo {
   position: relative;
+  height: 100%;
+}
+
+#logo__link {
+  display: block;
+  height: 100%;
 }
 
 #main-header.open #actuel {
@@ -24,13 +30,13 @@
 }
 #logo #inactuel {
   position: absolute;
+  bottom: 0;
   z-index: 0;
   color: var(--color-secondary);
-  bottom: -48%;
   transition: bottom 0.2s ease-in-out;
 }
-#main-header.minimized #logo #inactuel {
-  bottom: 0%;
+#main-header.minimized {
+  height: 5.6rem;
 }
 
 body {
@@ -63,7 +69,7 @@ body[data-template="home"] {
 #entry-btns {
   position: sticky;
   position: -webkit-sticky;
-  top: calc(var(--unit--vertical) * 3);
+  top: calc(var(--unit--vertical) * 4);
   height: var(--entry-btns-height);
   display: flex;
   justify-content: space-between;
@@ -143,11 +149,12 @@ button.toggle.right::before {
     font-size: 11vw;
   }
 
-  #main-header.minimized {
-    height: calc(var(--unit--vertical) * 4.3);
-  }
-
   .page-cover {
+    height: 100vh;
     padding: calc(10 * var(--unit--vertical)) 0;
   }
+
+  #entry-btns {
+    display: none;
+  }
 }

assets/css/src/html.css

@@ -61,7 +61,11 @@ html {
 }
 
 @media screen and (min-width: 640px) {
+  :root {
+    --padding-body: calc(12 * var(--unit--horizontal));
+  }
   body {
-    padding: 0 calc(6 * var(--unit--horizontal));
+    padding-left: var(--padding-body);
+    max-width: calc(17 * var(--unit--horizontal));
   }
 }

assets/css/src/nav.css

@@ -1,4 +1,7 @@
 /* ================= PANELS ================= */
+#desktop-nav {
+  display: none;
+}
 .panel {
   position: fixed;
   width: 100%;
@@ -8,7 +11,6 @@
   outline: 1px solid #fff;
   transition: all 0.5s var(--curve-sine);
   z-index: 2;
-  padding: 0 var(--unit--horizontal);
   padding-top: calc(var(--unit--vertical) * 5);
   box-sizing: border-box;
 
@@ -16,6 +18,11 @@
   flex-direction: column;
 }
 
+.search,
+.panel__items {
+  padding: 0 var(--unit--horizontal);
+}
+
 .panel--left {
   left: calc(-100vw - 1px);
 }
@@ -36,6 +43,7 @@
   background-color: #000;
   z-index: 1;
   top: 0;
+  box-sizing: border-box;
 }
 .search__input {
   all: unset;
@@ -59,8 +67,8 @@
   height: 1.2rem;
   padding: 0.5rem;
   bottom: 0;
-  right: calc(var(--unit--horizontal) / 6);
-  transform: translateX(0.5rem);
+  right: var(--unit--horizontal);
+  transform: translateX(0.5rem) translateY(-0.2rem);
 }
 button.search__icon {
   cursor: pointer;
@@ -76,12 +84,11 @@ button.search__icon {
 .panel-close {
   justify-content: center;
   width: calc(100% - 2 * var(--unit--horizontal));
-  bottom: 0;
   outline: none;
   border-top: 1px solid #fff;
   font-size: var(--font-size-m);
   background-color: #000;
-  padding: calc(var(--unit--vertical) / 2) 0;
+  padding: calc(var(--unit--vertical) / 2) var(--unit--horizontal);
   margin-bottom: env(safe-area-inset-bottom);
 }
 
@@ -119,3 +126,38 @@ button.search__icon {
 .text {
   margin-bottom: var(--unit--vertical);
 }
+
+@media screen and (min-width: 640px) {
+  #desktop-nav {
+    display: block;
+    position: fixed;
+    box-sizing: border-box;
+    z-index: 3;
+    top: 0;
+    left: 0;
+    width: var(--padding-body);
+    height: 100vh;
+    padding: var(--unit--vertical) var(--unit--horizontal);
+  }
+  #desktop-nav .empty {
+    height: calc(3 * var(--unit--vertical));
+  }
+  .panel {
+    z-index: 4;
+    width: var(--padding-body);
+    padding-top: var(--unit--vertical);
+  }
+
+  .panel-close {
+    display: none;
+  }
+
+  .panel--right {
+    right: auto;
+    left: calc(-100vw - 1px);
+  }
+
+  .panel--right.open {
+    left: 0;
+  }
+}

assets/css/src/texts.css

@@ -20,7 +20,6 @@
 #logo * {
   font-size: 25vw;
   line-height: 4rem;
-  transform: translate(-2px, -13px);
   font-weight: var(--font-weight-extra-bold);
 }
 

assets/css/src/variables.css

@@ -1,53 +0,0 @@
-:root {
-  --color-background: #000;
-  --color-primary: #ffffff;
-  --color-primary--transparent: rgba(255, 255, 255, 0.86);
-  --color-secondary: rgb(120, 171, 150, 0.86);
-  --color-secondary--light: rgb(119, 177, 157, 0.2);
-  --color-secondary--x-light: rgb(119, 177, 157, 0.1);
-
-  --unit--horizontal: 5vw;
-  --unit--vertical: 1.7rem;
-  --unit--vertical-relative: calc(
-    var(--unit--vertical) * var(--window-height-factor)
-  );
-
-  --font-size-s: 0.8rem;
-  --font-size-sm: calc(var(--font-size-s) * 1);
-  --font-size-m: calc(var(--font-size-s) * 1.5);
-  --font-size-l: calc(var(--font-size-m) * 1.5);
-  --font-size-xl: calc(var(--font-size-l) * 1.5);
-  --font-size-xxl: calc(var(--font-size-xl) * 1.5);
-
-  --font-weight-light: 200;
-  --font-weight-bold: 400;
-  --font-weight-extra-bold: 550;
-
-  --opacity-light: 0.6;
-
-  --curve-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
-}
-
-@media screen and (min-width: 640px) {
-  :root {
-    --color-background: #000;
-    --color-primary: #ffffff;
-    --color-primary--transparent: rgba(255, 255, 255, 0.86);
-    --color-secondary: rgb(120, 171, 150, 0.86);
-    --color-secondary--light: rgb(119, 177, 157, 0.25);
-    --color-secondary--x-light: rgb(119, 177, 157, 0.15);
-
-    --unit--horizontal: 5vw;
-    --unit--vertical: 1.7rem;
-
-    --font-size-s: 0.9rem;
-    --font-size-m: calc(var(--font-size-s) * 1.5);
-    --font-size-l: calc(var(--font-size-m) * 1.5);
-    --font-size-xl: calc(var(--font-size-l) * 1.5);
-    --font-size-xxl: calc(var(--font-size-xl) * 1.5);
-
-    --font-weight-light: 200;
-    --font-weight-bold: 400;
-    --font-weight-extra-bold: 550;
-  }
-}

assets/css/style.css

@@ -47,7 +47,7 @@
     --color-secondary--light: rgb(119, 177, 157, 0.25);
     --color-secondary--x-light: rgb(119, 177, 157, 0.15);
 
-    --unit--horizontal: 5vw;
+    --unit--horizontal: 2.5vw;
     --unit--vertical: 1.7rem;
 
     --font-size-s: 0.9rem;

assets/js/script.js

@@ -22,36 +22,6 @@ function throttle(callback, limit) {
   };
 }
 
-function toggleTab(data, tab) {
-  if (data.activeTab === tab) {
-    window.scrollTo({
-      top: 0,
-      behavior: "smooth",
-    });
-    setTimeout(() => {
-      data.isOpen = false;
-      data.activeTab = "";
-    }, 500);
-  } else {
-    data.activeTab = tab;
-    data.isOpen = true;
-    scrollToElem(".active-tab");
-  }
-}
-
-function scrollToElem(selector) {
-  document.querySelector(".active-tab").scrollTop = 0;
-  setTimeout(() => {
-    const yOffset = -7 * verticalUnit;
-    const elem = document.querySelector(selector);
-    const top = elem.getBoundingClientRect().top;
-    window.scrollTo({
-      top: top + window.scrollY + yOffset,
-      behavior: "smooth",
-    });
-  }, 100);
-}
-
 function setWindowHeightFactor() {
   const windowHeight = window.innerHeight;
   const min = 650;
@@ -111,7 +81,8 @@ function toggleLogoState() {
   }
 }
 
-function togglePanel(side) {
+function togglePanel(side, event) {
+  event.stopPropagation();
   document.querySelector(`.panel--${side}`).classList.toggle("open");
   const isOpen = document
     .querySelector(`.panel--${side}`)
@@ -120,9 +91,11 @@ function togglePanel(side) {
   const scrollY = window.scrollY || window.pageYOffset;
 
   if (isOpen) {
-    document.querySelector("html").style.overflowY = "hidden";
-    document.querySelector("#main-header").classList.remove("minimized");
-  } else {
+    if (window.innerWidth < 640) {
+      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");
@@ -130,6 +103,12 @@ function togglePanel(side) {
   }
 }
 
+function closePanels() {
+  document.querySelectorAll(".panel").forEach((panel) => {
+    panel.classList.remove("open");
+  });
+}
+
 function fixFootNotes() {
   const footnotes = document.querySelectorAll('a[href^="#sdfootnote"]');
 
@@ -163,4 +142,18 @@ document.addEventListener("DOMContentLoaded", () => {
   setTimeout(() => {
     enableToggleEntriesVisibility();
   }, 100);
+
+  window.addEventListener("click", () => {
+    closePanels();
+  });
+  window.addEventListener("keyup", (event) => {
+    if (event.key === "Escape") {
+      closePanels();
+    }
+  });
+  document.querySelectorAll(".panel").forEach((panel) => {
+    panel.addEventListener("click", (event) => {
+      event.stopPropagation();
+    });
+  });
 });

site/config/config.php

@@ -1,12 +1,12 @@
 <?php
 
-return [
+return array(
   'debug' => true,
-  'panel' => [
+  'panel' => array(
     'menu' => require __DIR__ . '/menu.php',
-  ],
-  'routes' => [
+  ),
+  'routes' => array(
     require __DIR__ . '/routes/virtual-author.php',
     require __DIR__ . '/routes/virtual-category.php',
-  ]
-];
+  ),
+);

site/snippets/cover.php

@@ -16,11 +16,11 @@ $isOpen = isset($isOpen) ? $isOpen : false;
 </header>
 <div id="entry-btns">
   <button
-    class="entry-btn entry-btn--left toggle-btn left"
-    onclick="togglePanel('left')"
+    class="entry-btn entry-btn--left toggle-btn--left"
+    onclick="togglePanel('left', event)"
   >années</button>
   <button
-    class="entry-btn entry-btn--right toggle-btn right"
-    onclick="togglePanel('right')"
+    class="entry-btn entry-btn--right toggle-btn--right"
+    onclick="togglePanel('right', event)"
   >categories</button>
 </div>

site/snippets/header.php

@@ -7,16 +7,19 @@ $entryTopPos = $entryTopPos ?? 20;
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title><?= $site->title() ?><?= e($page->url() !== $site->url(), '-' . $page->title()) ?></title>
+    
     <link rel="stylesheet" href="<?= url('assets/css/style.css') . '?version-cache-prevent' . rand(0, 1000) ?>" />
+    
     <script src="<?= url('assets') ?>/js/script.js?version-cache-prevent<?= rand(0, 1000)?>" defer></script>
     <script defer src="<?= url('assets/js/alpine.min.js') ?>"></script>
     <script defer src="<?= url('assets/js/ragadjust.js') ?>"></script>
+    
     <meta name="robots" content="noindex, nofollow, noarchive">
   </head>
   <body class="grid" data-template="<?= $page->template() ?>" >
     <header id="main-header">
       <div id="logo" >
-        <a href="/" class="no-line">
+        <a id="logo__link" href="/" class="no-line">
           <h1 id="actuel">actuel</h1>
           <h1 id="inactuel">inactuel</h1>
         </a>

site/snippets/panels.php

@@ -1,3 +1,29 @@
+<sidebar id="desktop-nav">
+  <ul>
+    <li class="left top" style="--left: <?= rand(0, 4) ?>; --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) ?>">
+      <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) ?>">
+      <a href="#">
+        s'abonner
+      </a>
+    </li>
+    <li class="left top" style="--left: <?= rand(0, 4) ?>; --top: <?= rand(0, 6) ?>">
+      <a href="<?= $site->find('a-propos')->url() ?>">
+        à propos
+      </a>
+    </li>
+  </ul>
+</sidebar>
 
 <nav 
   class="panel panel--left"
@@ -7,7 +33,7 @@
     <input 
       class="search__input" 
       type="text" 
-      placeholder="titre / auteur / année / catégorie" 
+      placeholder="titre / auteur / année / catégor…" 
       x-model="search"
     >
     <img 
@@ -58,7 +84,7 @@
         <button 
           :class="edito ? 'open' : 'close'"
           x-show="search.length === 0"
-          class="see-more toggle left" 
+          class="see-more toggle-btn toggle-btn--left" 
           @click="edito = !edito"
         >Lire</button>
         <ul class="panel-item-content__texts">
@@ -111,7 +137,7 @@
     <input 
       class="search__input" 
       type="text" 
-      placeholder="titre / auteur / année / catégorie" 
+      placeholder="titre / auteur / année / catégor…" 
       x-model="search"
     >
     <img 
@@ -131,8 +157,8 @@
   <ul class="panel__items">
     <?php
       $categories = $kirby->collection('categories');
-      shuffle($categories);
-      foreach($categories as $category): ?>
+    shuffle($categories);
+    foreach($categories as $category): ?>
     <li 
       class="panel__item "
       x-data='{ isOpen: false }'
@@ -156,8 +182,8 @@
       >
         <ul class="panel-item-content__texts">
           <?php
-          shuffle($category['texts']);
-          foreach($category['texts'] as $article): ?>
+        shuffle($category['texts']);
+        foreach($category['texts'] as $article): ?>
             <li 
               class="text"
               x-data="{ 

site/snippets/tabs.php

@@ -25,7 +25,7 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
         ><?= $left['label'] ?></button>
       <?php endif ?>
       <button
-        class="toggle right"
+        class="toggle-btn toggle-btn--right"
         :class="activeTab === 'texts' ? 'open' : 'close'"
         title="Voir tous les textes"
         @click="toggleTab($data, 'texts')"
@@ -69,9 +69,9 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
           <?php if (!$authorFilter || $authorFilter == $article->author()->toUser()->name()->value()) : ?>
             <?php snippet(
                 'text-item',
-                [
-                                'article' => $article
-                              ]
+                array(
+                                                        'article' => $article
+                                                      )
             ) ?>
           <?php endif ?>
         <?php endforeach ?>

site/templates/home.php

@@ -10,7 +10,7 @@
     >
       <h2 class="main-title <?= setTitleFontSizeClass($site->subtitle()) ?>"><?= $site->subtitle() ?></h2>
       <p 
-        class="main-edito-btn | toggle-btn left"
+        class="main-edito-btn | toggle-btn toggle-btn--left"
       >édito</p>
     </a>
     <?php endslot() ?>

site/templates/info.php

@@ -2,11 +2,11 @@
 <main id="<?= $page->template() ?>">
 <div id="entry-btns">
   <button
-    class="entry-btn entry-btn--left toggle-btn left"
+    class="entry-btn entry-btn--left toggle-btn toggle-btn--left"
     onclick="togglePanel('left')"
   >années</button>
   <button
-    class="entry-btn entry-btn--right toggle-btn right"
+    class="entry-btn entry-btn--right toggle-btn toggle-btn--right"
     onclick="togglePanel('right')"
   >categories</button>
 </div>