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 {
-    width: 100%;
+  body:not([data-template="home"]) #main-header {
+    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");
-    navOverlay.classList.remove("nav-overlay--visible");
-    document.body.classList.remove("no-scroll");
+    closeNav();
   });
   navOverlay.addEventListener("click", () => {
-    panelNav.classList.remove("panel--visible");
-    navOverlay.classList.remove("nav-overlay--visible");
-    document.body.classList.remove("no-scroll");
+    closeNav();
   });
+
+  subscribeBtn.addEventListener("click", showSubscribeField);
 });