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);
 }