redesign nav and logo

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,