redesign nav and logo

assets/css/src/generic.css

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

assets/css/src/header.css

@@ -1,4 +1,42 @@
 #main-header {
+  position: fixed;
+  box-sizing: border-box;
+  width: 100vw;
+}
+
+#logo * {
+  font-size: 26.65vw;
+  font-weight: var(--font-weight-extra-bold);
+}
+
+#logo span {
+  height: 20vw;
+  width: 100vw;
+  box-sizing: border-box;
+  padding-right: 1vw;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+#logo {
+  text-align: right;
+}
+
+#logo #actuel,
+#logo #inactuel {
+  mix-blend-mode: difference;
+}
+
+#logo #inactuel {
+  transition: margin-top 0.3s ease-in-out, transform 0.3s ease-in-out;
+}
+#main-header.minimized #inactuel {
+  margin-top: -20vw;
+  transform: translateX(-2px) translateY(-2px);
+}
+
+/* #main-header {
   position: fixed;
   z-index: 3;
   top: 0;
@@ -41,7 +79,7 @@
 
 #main-header.minimized #logo #inactuel {
   top: 0.1vw;
-}
+} */
 
 body {
   --entry-btns-height: 10svh;
@@ -91,15 +129,11 @@ button.toggle.right::before {
   transition: all 0.5s var(--curve-sine);
   content: "+";
 }
-.entry-btn--left::after {
+button.open-nav::after {
   margin-left: var(--unit--horizontal);
 }
-.entry-btn--right::before {
-  margin-right: var(--unit--horizontal);
-}
 
-#entry-btns .entry-btn--left::before,
-#entry-btns .entry-btn--right::after {
+button.open-nav::after {
   content: "";
   position: absolute;
   background-color: transparent;
@@ -109,13 +143,6 @@ button.toggle.right::before {
   transition: all 0.5s var(--curve-sine);
 }
 
-#entry-btns .entry-btn--left::before {
-  right: 0;
-}
-#entry-btns .entry-btn--right::after {
-  left: 0;
-}
-
 #entry-btns.minimized {
   color: #000;
 }
@@ -139,12 +166,12 @@ button.toggle.right::before {
 }
 
 @media screen and (min-width: 640px) {
-  #logo {
+  /* #logo {
     width: 100%;
   }
   #logo * {
     font-size: 25.8vw;
-  }
+  } */
 
   .page-cover:not(
       [data-template="author"] .page-cover,

assets/css/src/nav.css

@@ -3,43 +3,59 @@
   display: none;
 }
 .panel {
+  display: none;
   position: fixed;
+  overflow: auto;
   width: 100vw;
   height: 100dvh;
   top: 0;
   background-color: #000;
   outline: 1px solid #fff;
   transition: all 0.5s var(--curve-sine);
-  z-index: 2;
-  padding-top: calc(var(--unit--vertical) * 5);
+  z-index: 3;
   box-sizing: border-box;
 
-  display: flex;
   flex-direction: column;
 }
 
-.search,
-.panel__items {
-  padding: 0 var(--unit--horizontal);
+.panel.panel--visible {
+  display: flex;
 }
 
-.panel--left {
-  left: calc(-100vw - 1px);
-}
-.panel--right {
-  right: calc(-100vw - 1px);
+.panel header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: #000;
+  padding: var(--unit--vertical) var(--unit--horizontal);
+  padding-bottom: 0;
 }
 
-.panel--left.open {
-  left: 0;
+.sort-btns {
+  box-sizing: border-box;
 }
-.panel--right.open {
-  right: 0;
+
+.sort-btns button {
+  all: unset;
+  cursor: pointer;
+  display: inline-block;
+  margin-right: 2vw;
+}
+
+.sort-btns button:hover {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+.sort-btns button.active {
+  text-decoration: underline;
+  text-underline-offset: 4px;
 }
 
 .search {
   position: relative;
   width: 100%;
+  margin-top: var(--unit--vertical);
   background-color: #000;
   z-index: 1;
   top: 0;
@@ -66,24 +82,26 @@
   width: 1.2rem;
   height: 1.2rem;
   padding: 0.5rem;
-  bottom: 0;
-  right: var(--unit--horizontal);
-  transform: translateX(0.5rem) translateY(-0.2rem);
+  right: 0;
+  transform: translateX(0.5rem) translateY(0.2rem);
 }
 button.search__icon {
   cursor: pointer;
 }
 
-.panel__items {
+.panel__collection {
   scroll-behavior: smooth;
   height: 100%;
-  padding-top: var(--unit--vertical);
   overflow: auto;
+  padding: var(--unit--vertical) var(--unit--horizontal);
 }
 
 .panel-close {
+  position: fixed;
+  box-sizing: border-box;
+  bottom: 0;
   justify-content: center;
-  width: calc(100% - 2 * var(--unit--horizontal));
+  width: 100%;
   outline: none;
   border-top: 1px solid #fff;
   font-size: var(--font-size-m);
@@ -119,7 +137,7 @@ button.search__icon {
 }
 
 .panel-item-content__texts {
-  margin-top: var(--unit--vertical);
+  padding: var(--unit--vertical) var(--unit--horizontal);
 }
 
 /* ================= TEXT ITEM ================= */

assets/css/src/texts.css

@@ -17,11 +17,6 @@
   font-family: "Switzer-Variable", sans-serif;
 }
 
-#logo * {
-  font-size: 25vw;
-  font-weight: var(--font-weight-extra-bold);
-}
-
 h1,
 h1 *,
 h2,
@@ -45,7 +40,7 @@ h2 {
 h3,
 .h3 {
   font-size: var(--font-size-xl);
-  color: var(--color-secondary);
+  color: var(--color-primary);
 }
 
 article h2 {