improve design

assets/css/src/article.css

@@ -1,4 +1,4 @@
-article .content {
+article #main-content {
   max-width: calc(18 * var(--unit--horizontal));
   scroll-margin-block-start: calc(var(--unit--vertical) * 6);
   margin-top: calc(var(--unit--vertical) * 2);
@@ -6,7 +6,7 @@ article .content {
 }
 
 @media screen and (min-width: 640px) {
-  article .content {
+  article #main-content {
     max-width: auto;
   }
 }

assets/css/src/footer.css

@@ -1,4 +1,6 @@
 #main-footer {
+  position: fixed;
+  bottom: 0;
   width: 100%;
   box-sizing: border-box;
   padding: var(--unit--horizontal);
@@ -23,6 +25,12 @@
 
 @media screen and (min-width: 640px) {
   #main-footer {
-    display: none;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: var(--body-padding);
+  }
+  #main-footer ul {
+    display: block;
   }
 }

assets/css/src/generic.css

@@ -84,11 +84,12 @@ body {
 
 /* ================= BUTTONS ================= */
 .toggle-btn--left::after,
-.plus-btn::after {
+button.plus::after {
   margin-left: var(--unit--horizontal);
 }
+
 .toggle-btn--left::after,
-.plus-btn::after {
+button.plus::after {
   content: "+";
 }
 .toggle-btn--left.open::after {

assets/css/src/grid.css

@@ -4,7 +4,7 @@ body.full-width #desktop-nav {
 body.full-width #desktop-nav .empty {
   height: calc(var(--unit--vertical) / 2);
 }
-body.full-width .content {
+body.full-width #main-content {
   position: absolute;
   left: 0;
   width: 100vw;

assets/css/src/header.css

@@ -2,6 +2,7 @@
   position: fixed;
   box-sizing: border-box;
   width: 100vw;
+  padding-top: calc(var(--unit--vertical) / 2);
 }
 
 #logo * {
@@ -11,7 +12,7 @@
 
 #logo span {
   height: 20vw;
-  width: 100vw;
+  width: 100%;
   box-sizing: border-box;
   padding-right: 1vw;
   display: flex;
@@ -31,16 +32,17 @@
 #logo #inactuel {
   transition: margin-top 0.3s ease-in-out, transform 0.3s ease-in-out;
 }
+
 #main-header.minimized #inactuel {
-  margin-top: -20vw;
+  margin-top: -19.6vw;
   transform: translateX(-2px) translateY(-2px);
 }
 
 .page-cover {
   position: relative;
-  height: calc(100svh - var(--entry-btns-height));
+  height: 100svh;
   box-sizing: border-box;
-  padding-top: calc(var(--unit--vertical-relative) * 5);
+  padding-top: calc(var(--unit--vertical-relative) * 9);
 
   display: flex;
   flex-direction: column;
@@ -51,10 +53,6 @@
   overflow: auto;
 }
 
-[data-template="home"] .page-cover {
-  padding-top: calc(var(--unit--vertical-relative) * 6);
-}
-
 /* ================= ENTRY BTNS ================= */
 #entry-btns {
   position: sticky;
@@ -101,12 +99,19 @@ button.toggle.right::before {
 }
 
 @media screen and (min-width: 640px) {
-  /* #logo {
+  body:not([data-template="home"]) #main-header {
-    width: 100%;
+    width: var(--body-padding);
+  }
+  body:not([data-template="home"]) #logo * {
+    font-size: 6vw;
+  }
+  body:not([data-template="home"]) #logo span {
+    height: 5vw;
+  }
+  body:not([data-template="home"]) #main-header.minimized #inactuel {
+    margin-top: -4.9vw;
+    transform: translateX(-2px) translateY(-2px);
   }
-  #logo * {
-    font-size: 25.8vw;
-  } */
 
   .page-cover:not(
       [data-template="author"] .page-cover,
@@ -115,8 +120,12 @@ button.toggle.right::before {
     ) {
     height: 100vh;
     padding: calc(10 * var(--unit--vertical)) 0;
-    padding-top: calc(41.5vw);
+    padding-top: calc(var(--unit--vertical) * 8);
   }
+  [data-template="home"] .page-cover {
+    padding-top: calc(42.5vw) !important;
+  }
+
   [data-template="author"] .page-cover,
   [data-template="category"] .page-cover,
   [data-template="year"] .page-cover {

assets/css/src/html.css

@@ -69,6 +69,6 @@ html {
   }
 
   main {
-    padding: 0 calc(10 * var(--unit--horizontal));
+    padding: 0 var(--body-padding);
   }
 }

assets/css/src/print.css

@@ -60,7 +60,7 @@
     text-decoration: none !important;
   }
 
-  article .content {
+  article #main-content {
     width: 60%;
     margin: auto;
   }

assets/css/src/texts.css

@@ -95,7 +95,7 @@ button,
 }
 .fs-xxl {
   font-size: var(--font-size-xxl) !important;
-  line-height: calc(var(--unit--vertical) * 3) !important;
+  line-height: calc(var(--unit--vertical) * 2.5) !important;
 }
 
 p,
@@ -141,18 +141,18 @@ a * {
   transition: font 0.2s ease-in-out;
 }
 
-a.no-line.text__title:hover * {
+a.no-underline.text__title:hover * {
   text-decoration: underline;
   text-decoration-color: inherit;
   text-decoration-line: underline;
   text-underline-offset: 0.2rem;
   text-decoration-thickness: 0.5px;
 }
-a:not(.no-line):hover {
+a:not(.no-underline):hover {
   text-decoration: none;
 }
 
-a:not(.no-line) {
+a:not(.no-underline) {
   text-decoration: underline;
   text-decoration-color: inherit;
   text-decoration-line: underline;

assets/css/style.css

@@ -69,5 +69,7 @@
     --font-weight-light: 200;
     --font-weight-bold: 400;
     --font-weight-extra-bold: 550;
+
+    --body-padding: calc(10 * var(--unit--horizontal));
   }
 }

assets/dist/style.css

@@ -284,13 +284,13 @@ button {
 a * {
   transition: font 0.2s ease-in-out;
 }
-a.no-line:hover * {
+a.no-underline:hover * {
   font-weight: 250;
 }
-a:not(.no-line):hover {
+a:not(.no-underline):hover {
   text-decoration: none;
 }
-a:not(.no-line) {
+a:not(.no-underline) {
   text-decoration: underline;
   text-decoration-color: inherit;
   text-decoration-line: underline;

assets/js/script.js

@@ -38,41 +38,6 @@ function roundToNearestHalf(num) {
   return Math.max(round, 0);
 }
 
-function enableToggleEntriesVisibility() {
-  const entries = document.querySelector("#entry-btns");
-
-  const leftBtn = entries.querySelector(".entry-btn--left");
-  const rightBtn = entries.querySelector(".entry-btn--right");
-  const leftBtnWidth = leftBtn.offsetWidth;
-  const rightBtnWidth = rightBtn.offsetWidth;
-
-  leftBtn.style = `--width: ${leftBtnWidth}px`;
-  rightBtn.style = `--width: ${rightBtnWidth}px`;
-
-  const toggleVisibility = (items) => {
-    items.forEach((item) => {
-      const isIntersecting = item.isIntersecting;
-      if (isIntersecting) {
-        entries.classList.remove("minimized");
-      } else {
-        entries.classList.add("minimized");
-      }
-    });
-  };
-
-  const top = verticalUnit * 8;
-
-  const observer = new IntersectionObserver(toggleVisibility, {
-    root: null,
-    rootMargin: `-${top}px 0px 0px 0px`,
-    threshold: 0,
-  });
-
-  observer.observe(entries);
-  leftBtn.classList.add("transition");
-  rightBtn.classList.add("transition");
-}
-
 function toggleLogoState() {
   const scrollY = window.scrollY || window.pageYOffset;
 
@@ -83,36 +48,6 @@ function toggleLogoState() {
   }
 }
 
-function togglePanel(side, event) {
-  document.querySelector(`.panel--${side}`).classList.toggle("open");
-  const isOpen = document
-    .querySelector(`.panel--${side}`)
-    .classList.contains("open");
-
-  const scrollY = window.scrollY || window.pageYOffset;
-
-  if (isOpen) {
-    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");
-      }
-    }
-  }
-  event.stopPropagation();
-}
-
-function closePanels() {
-  document.querySelectorAll(".panel").forEach((panel) => {
-    panel.classList.remove("open");
-  });
-}
-
 function fixFootNotes() {
   const footnotes = document.querySelectorAll('a[href^="#sdfootnote"]');
 
@@ -141,6 +76,7 @@ function slugify(str) {
   return removeAccents(str.toLowerCase());
 }
 
+const subscribeBtn = document.querySelector("#subscribe-btn");
 function showSubscribeField(event) {
   event.preventDefault();
   const button = event.target;
@@ -169,6 +105,16 @@ function subscribe(event) {
   }
 }
 
+const panelNav = document.querySelector(".panel");
+const navOverlay = document.querySelector("#nav-overlay");
+const openNavBtn = document.querySelector("button.open-nav");
+const closeNavBtn = document.querySelector(".panel-close");
+function closeNav() {
+  panelNav.classList.remove("panel--visible");
+  navOverlay.classList.remove("nav-overlay--visible");
+  document.body.classList.remove("no-scroll");
+}
+
 document.addEventListener("DOMContentLoaded", () => {
   ragadjust("h1, h2, h3, h4, h5", ["all"]);
   window.window.scrollTo({
@@ -186,17 +132,9 @@ document.addEventListener("DOMContentLoaded", () => {
 
   fixFootNotes();
 
-  // Wait for fonts applied
-  setTimeout(() => {
-    enableToggleEntriesVisibility();
-  }, 100);
-
-  window.addEventListener("click", () => {
-    closePanels();
-  });
   window.addEventListener("keyup", (event) => {
     if (event.key === "Escape") {
-      closePanels();
+      closeNav();
     }
   });
   document.querySelectorAll(".panel").forEach((panel) => {
@@ -231,25 +169,18 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   });
 
-  const panelNav = document.querySelector(".panel");
-  const navOverlay = document.querySelector("#nav-overlay");
-
-  const openNavBtn = document.querySelector("button.open-nav");
   openNavBtn.addEventListener("click", () => {
     panelNav.classList.add("panel--visible");
     navOverlay.classList.add("nav-overlay--visible");
     document.body.classList.add("no-scroll");
   });
 
-  const closeNavBtn = document.querySelector(".panel-close");
   closeNavBtn.addEventListener("click", () => {
-    panelNav.classList.remove("panel--visible");
+    closeNav();
-    navOverlay.classList.remove("nav-overlay--visible");
-    document.body.classList.remove("no-scroll");
   });
   navOverlay.addEventListener("click", () => {
-    panelNav.classList.remove("panel--visible");
+    closeNav();
-    navOverlay.classList.remove("nav-overlay--visible");
-    document.body.classList.remove("no-scroll");
   });
+
+  subscribeBtn.addEventListener("click", showSubscribeField);
 });

site/snippets/cover.php

@@ -6,7 +6,9 @@ $isOpen = isset($isOpen) ? $isOpen : false;
   class="page-cover"
 >
   <div class="title-wrapper">
-    <?= $slots->title() ?>
+    <a href="#main-content" class="no-underline">
+      <?= $slots->title() ?>
+    </a>
   </div>
   <?php if ($slots->text()): ?>  
     <div class="text-wrapper">

site/snippets/desktop-nav.php

@@ -1,46 +0,0 @@
-<?php
-  $firstCol = rand(0, 8);
-  $secondCol = rand(0, 8);
-?>
-
-<sidebar id="desktop-nav">
-  <ul>
-    <li 
-      class="left top" 
-    >
-      <button class="toggle-btn toggle-btn--left" onclick="togglePanel('left', event)">
-        années
-      </button>
-    </li>
-    <li 
-      class="left top" 
-    >
-      <button class="toggle-btn toggle-btn--left" onclick="togglePanel('right', event)">
-        catégories
-      </button>
-    </li>
-    <li class="empty
-    "></li>
-    <li 
-      class="left top" 
-      id="subscribe-btn-wrapper"
-    >
-      <button onclick="showSubscribeField(event)">
-        s'inscrire
-      </button>
-      <form id="subscribe-form" class="hidden">
-        <label for="email">
-          <input type="email" name="email" id="email" placeholder="votre e-mail">
-          <button type="submit" onclick="subscribe(event)">→</button>
-        </label>
-      </form>
-    </li>
-    <li 
-      class="left top" 
-    >
-      <a href="<?= $site->find('a-propos')->url() ?>">
-        à propos
-      </a>
-    </li>
-  </ul>
-</sidebar>

site/snippets/footer.php

@@ -1,13 +1,26 @@
     <footer id="main-footer">
       <ul id="links">
+        <li>
+          <button class="plus open-nav" title="ouvrir la navigation">textes</button>
+        </li>
+        <li 
+          id="subscribe-btn-wrapper"
+        >
+          <button id="subscribe-btn" class="plus">
+            s'inscrire
+          </button>
+          <form id="subscribe-form" class="hidden">
+            <label for="email">
+              <input type="email" name="email" id="email" placeholder="votre e-mail">
+              <button type="submit" onclick="subscribe(event)">→</button>
+            </label>
+          </form>
+        </li>
         <li>
           <a href="<?= $site->find('a-propos')->url() ?>">
             à propos
           </a>
         </li>
-        <li>
-          <a href="#">s'abonner</a>
-        </li>
       </ul>
     </footer>
   </body>

site/snippets/header.php

@@ -36,7 +36,7 @@ $entryTopPos = $entryTopPos ?? 20;
   </head>
   <body class="background-grid <?= e($page->fullWidth() == 'true', 'full-width') ?>" data-template="<?= $page->template() ?>" >
     <header id="main-header">
-      <a id="logo" href="/" class="no-line">
+      <a id="logo" href="<?= $site->url() ?>" class="no-underline" title="aller à l'accueil">
         <h1>
           <span id="actuel">actuel</span>
           <span id="inactuel">inactuel</span>

site/snippets/nav__texts--all.php

@@ -16,7 +16,7 @@
         || slugify(category).includes(slugify(search))
       "
     >
-      <a href="<?= $article->url() ?>" class="text__title no-line">
+      <a href="<?= $article->url() ?>" class="text__title no-underline">
         <h4><?= $article->title() ?></h4>
       </a>
       <div class="text__infos">

site/snippets/nav__texts--collection.php

@@ -4,7 +4,7 @@
     class="panel__item "
     x-data='{ isOpen: false }'
   >
-    <a class="no-line" href="#<?= $section->slug() ?>" id="<?= $section->slug() ?>">
+    <a class="no-underline" href="#<?= $section->slug() ?>" id="<?= $section->slug() ?>">
       <button 
         class="panel__toggle-btn"
         :class="isOpen ? '' : 'short'"
@@ -55,7 +55,7 @@
               || slugify(category).includes(slugify(search))
             "
           >
-            <a href="<?= $article->url() ?>" class="text__title no-line">
+            <a href="<?= $article->url() ?>" class="text__title no-underline">
               <h4><?= $article->title() ?></h4>
             </a>
             <div class="text__infos">

site/snippets/text-item.php

@@ -1,7 +1,7 @@
 <li 
   class="text"
 >
-  <a href="<?= $article->url() ?>" class="text__title no-line">
+  <a href="<?= $article->url() ?>" class="text__title no-underline">
     <h3><?= $article->title() ?></h3>
   </a>
   <div class="text__infos">

site/templates/author.php

@@ -14,7 +14,7 @@
             <li 
               class="text"
             >
-              <a href="<?= $article->url() ?>" class="text__title no-line">
+              <a href="<?= $article->url() ?>" class="text__title no-underline">
                 <h4><?= $article->title() ?></h4>
               </a>
               <div class="text__infos">

site/templates/category.php

@@ -14,7 +14,7 @@
               <li 
                 class="text"
               >
-                <a href="<?= $article->url() ?>" class="text__title no-line">
+                <a href="<?= $article->url() ?>" class="text__title no-underline">
                   <h4><?= $article->title() ?></h4>
                 </a>
                 <div class="text__infos">

site/templates/grid.php

@@ -12,7 +12,7 @@
       </p>
       <?php endslot() ?>
     <?php endsnippet() ?>
-    <div class="content">
+    <div id="main-content">
       <?php foreach ($page->body()->toLayouts() as $layout): ?>
       <section class="grid" id="<?= $layout->id() ?>" data-columns="<?= $layout->columns()->count() ?>">
         <?php foreach ($layout->columns() as $column): ?>

site/templates/home.php

@@ -6,7 +6,7 @@
       <?php slot('title') ?>
       <a 
         href="#main-edito" 
-        class="no-line" 
+        class="no-underline" 
         title="lire l'éditorial"
       >
         <h2 class="main-title <?= setTitleFontSizeClass($site->subtitle()) ?>"><?= $site->subtitle()->inline() ?></h2>
@@ -14,10 +14,9 @@
           class="main-edito-btn | toggle-btn toggle-btn--left"
         >éditorial</p>
       </a>
-      <button class="plus-btn open-nav">textes</button>
       <?php endslot() ?>
     <?php endsnippet() ?>
-    <div id="main-edito" class="content">
+    <div id="main-edito" id="main-content">
       <?= $site->edito() ?>
     </div>
   </article>

site/templates/info.php

@@ -11,7 +11,7 @@
   >categories</button>
 </div>
   <article>
-    <div class="content">
+    <div id="main-content">
       <?= $page->body() ?>
     </div>
   </article>

site/templates/linear.php

@@ -12,7 +12,7 @@
       </p>
       <?php endslot() ?>
     <?php endsnippet() ?>
-    <div class="content">
+    <div id="main-content">
       <?= $page->body() ?>
     </div>
   </article>

site/templates/year.php

@@ -12,7 +12,7 @@
       <li 
         class="text"
       >
-        <a href="<?= $article->url() ?>" class="text__title no-line">
+        <a href="<?= $article->url() ?>" class="text__title no-underline">
           <h4><?= $article->title() ?></h4>
         </a>
         <div class="text__infos">