redesign b&w

assets/css/src/article.css

@@ -4,3 +4,9 @@ article .content {
   margin-top: calc(var(--unit--vertical) * 2);
   padding-bottom: calc(var(--unit--vertical) * 2);
 }
+
+@media screen and (min-width: 640px) {
+  article .content {
+    max-width: auto;
+  }
+}

assets/css/src/header.css

@@ -3,10 +3,9 @@
   z-index: 3;
   top: 0;
   left: 0;
-  box-sizing: border-box;
-  width: 100vw;
-  height: calc(var(--unit--vertical) * 4.5);
-  padding: var(--unit--vertical) var(--unit--horizontal);
+  width: calc(100vw - (2 * var(--unit--horizontal)));
+  height: calc(var(--unit--vertical) * 11.5);
+  padding: 0 var(--unit--horizontal);
   padding-bottom: 0;
   transition: height 0.2s ease-in-out;
 }
@@ -16,6 +15,8 @@
 }
 
 #logo__link {
+  position: relative;
+  transform: translateY(-3rem);
   display: block;
   height: 100%;
 }
@@ -23,20 +24,23 @@
 #main-header.open #actuel {
   color: var(--color-background);
 }
-#logo #actuel {
-  color: var(--color-primary--transparent);
-  position: relative;
-  z-index: 1;
-}
+
+#logo #actuel,
 #logo #inactuel {
   position: absolute;
-  bottom: 0;
-  z-index: 0;
-  color: var(--color-secondary);
-  transition: bottom 0.2s ease-in-out;
+  mix-blend-mode: difference;
 }
-#main-header.minimized {
-  height: 5.6rem;
+#logo #actuel {
+  top: 0;
+  right: 0;
+}
+#logo #inactuel {
+  top: 15vw;
+  transition: all 0.3s ease-in-out;
+}
+
+#main-header.minimized #logo #inactuel {
+  top: 0.1vw;
 }
 
 body {
@@ -136,10 +140,10 @@ button.toggle.right::before {
 
 @media screen and (min-width: 640px) {
   #logo {
-    width: 37vw;
+    width: 100%;
   }
   #logo * {
-    font-size: 11vw;
+    font-size: 25.8vw;
   }
 
   .page-cover:not(
@@ -149,6 +153,7 @@ button.toggle.right::before {
     ) {
     height: 100vh;
     padding: calc(10 * var(--unit--vertical)) 0;
+    padding-top: calc(41.5vw);
   }
   [data-template="author"] .page-cover,
   [data-template="category"] .page-cover,

assets/css/src/html.css

@@ -59,17 +59,16 @@ html {
 }
 
 @media screen and (min-width: 640px) {
-  body {
-    --padding-body: calc(15 * var(--unit--horizontal));
-  }
-
   body.full-width {
     --padding-body: calc(var(--unit--horizontal) * 10);
   }
 
-  body,
-  #logo {
+  body {
     padding-left: var(--padding-body) !important;
     box-sizing: content-box;
   }
+
+  main {
+    padding: 0 calc(10 * var(--unit--horizontal));
+  }
 }

assets/css/src/nav.css

@@ -133,15 +133,46 @@ button.search__icon {
     position: fixed;
     box-sizing: border-box;
     z-index: 3;
-    top: 0;
+    bottom: 0;
     left: 0;
     width: var(--padding-body);
-    height: 100vh;
+    height: 29vh;
     padding: var(--unit--vertical) var(--unit--horizontal);
   }
   #desktop-nav .empty {
     height: calc(3 * var(--unit--vertical));
   }
+
+  #subscribe-btn-wrapper {
+    height: 2.5rem;
+    margin-bottom: 0.2rem;
+  }
+
+  #subscribe-form {
+    position: relative;
+    width: fit-content;
+  }
+
+  #subscribe-form input {
+    background-color: transparent;
+    border: none;
+    border-bottom: 1px solid #fff;
+    box-sizing: border-box;
+    padding-bottom: 0.3rem;
+    padding-right: 2rem;
+    color: #fff;
+    width: 15rem;
+  }
+  #subscribe-form input:focus-visible {
+    outline: none;
+  }
+  #subscribe-form button[type="submit"] {
+    color: #fff;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
   .panel {
     z-index: 4;
     width: var(--padding-body);

assets/css/src/texts.css

@@ -19,7 +19,6 @@
 
 #logo * {
   font-size: 25vw;
-  line-height: 4rem;
   font-weight: var(--font-weight-extra-bold);
 }
 
@@ -133,6 +132,11 @@ p {
   transform: translateY(3px);
 }
 
+input {
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-light);
+}
+
 button {
   display: flex;
   align-items: center;