redesign nav panel years

assets/css/src/generic.css

@@ -66,6 +66,10 @@
   flex-direction: column;
 }
 
+.light {
+  opacity: var(--opacity-light);
+}
+
 /* ================= COLORS ================= */
 .color {
   color: var(--color);

assets/css/src/html.css

@@ -1,13 +1,13 @@
 body {
   position: relative;
   box-sizing: border-box;
-  padding: 0 var(--unit--horizontal);
   background-color: var(--color-background);
   color: var(--color-primary);
 }
 
 main {
   position: relative;
+  padding: 0 var(--unit--horizontal);
 }
 
 hr {

assets/css/src/nav.css

@@ -91,3 +91,36 @@
 .panel-close::after {
   content: "◀";
 }
+
+/* ================= YEARS ================= */
+.year__toggle {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--unit--vertical);
+}
+
+.year__toggle-icon {
+  color: var(--color-secondary);
+  font-size: var(--font-size-xl);
+}
+
+.year__edito {
+  margin-bottom: calc(var(--unit--vertical) / 2);
+}
+
+.year__edito.short {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+  overflow: hidden;
+}
+
+.year__texts {
+  margin-top: var(--unit--vertical);
+}
+
+/* ================= TEXT ITEM ================= */
+.text {
+  margin-bottom: var(--unit--vertical);
+}

assets/css/src/variables.css

@@ -22,6 +22,8 @@
   --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);
 }
 

assets/js/script.js

@@ -2,12 +2,8 @@ const verticalUnit = getUnit("--unit--vertical");
 
 function getUnit(id) {
   const remFactor = 16;
-  const rawUnit = getComputedStyle(document.documentElement).getPropertyValue(
-    id
-  );
-  if (rawUnit.length === 0) {
-    throw new Error(`getUnit() error : css variable ${id} doesn't exists.`);
-  }
+  const rawUnit =
+    getComputedStyle(document.documentElement).getPropertyValue(id) || "1.7rem";
   const remUnit = parseFloat(rawUnit);
   const pxUnit = remUnit * remFactor;
   return pxUnit;
@@ -126,12 +122,9 @@ document.addEventListener("DOMContentLoaded", () => {
     top: 0,
   });
 
-  window.addEventListener(
-    "scroll",
-    throttle(() => {
-      toggleLogoState();
-    }, 10)
-  );
+  window.addEventListener("scroll", () => {
+    toggleLogoState();
+  });
 
   setWindowHeightFactor();