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: calc(100vw - (2 * var(--unit--horizontal)));
-  width: 100vw;
+  height: calc(var(--unit--vertical) * 11.5);
-  height: calc(var(--unit--vertical) * 4.5);
+  padding: 0 var(--unit--horizontal);
-  padding: var(--unit--vertical) 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);
+#logo #actuel,
-  position: relative;
-  z-index: 1;
-}
 #logo #inactuel {
   position: absolute;
-  bottom: 0;
+  mix-blend-mode: difference;
-  z-index: 0;
-  color: var(--color-secondary);
-  transition: bottom 0.2s ease-in-out;
 }
-#main-header.minimized {
+#logo #actuel {
-  height: 5.6rem;
+  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,
+  body {
-  #logo {
     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;

assets/css/style.css

@@ -15,7 +15,7 @@
   --color-primary: #ffffff;
   --color-primary--transparent: rgba(255, 255, 255, 0.86);
 
-  --color-secondary-rgb: 120, 171, 150;
+  /* --color-secondary-rgb: 120, 171, 150;
   --color-secondary: rgba(var(--color-secondary-rgb), 0.86);
   --color-secondary--light: rgba(var(--color-secondary-rgb), 0.2);
   --color-secondary--x-light: rgb(var(--color-secondary-rgb), 0.1);
@@ -23,6 +23,15 @@
   --color-tertiary-rgb: 253, 68, 26;
   --color-tertiary: rgba(var(--color-tertiary-rgb), 0.86);
   --color-tertiary--light: rgba(var(--color-tertiary-rgb), 0.2);
+  --color-tertiary--x-light: rgb(var(--color-tertiary-rgb), 0.1); */
+  --color-secondary-rgb: 200, 200, 200;
+  --color-secondary: rgba(var(--color-secondary-rgb), 0.86);
+  --color-secondary--light: rgba(var(--color-secondary-rgb), 0.2);
+  --color-secondary--x-light: rgb(var(--color-secondary-rgb), 0.1);
+
+  --color-tertiary-rgb: 200, 200, 200;
+  --color-tertiary: rgba(var(--color-tertiary-rgb), 0.86);
+  --color-tertiary--light: rgba(var(--color-tertiary-rgb), 0.2);
   --color-tertiary--x-light: rgb(var(--color-tertiary-rgb), 0.1);
 
   --unit--horizontal: 5vw;

assets/js/script.js

@@ -141,6 +141,34 @@ function slugify(str) {
   return removeAccents(str.toLowerCase());
 }
 
+function showSubscribeField(event) {
+  event.preventDefault();
+  const button = event.target;
+  const li = button.parentNode;
+  const form = li.querySelector("#subscribe-form");
+  const input = form.querySelector("input");
+
+  form.classList.remove("hidden");
+  button.classList.add("hidden");
+  input.focus();
+}
+
+function subscribe(event) {
+  event.preventDefault();
+  const email = document.querySelector("#subscribe-form input");
+
+  if (email.value.toLowerCase().match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
+    const header = {
+      method: "POST",
+      body: email.value,
+    };
+
+    fetch("/subscribe.json");
+  } else {
+    email.value = "E-mail invalide. Recommencez.";
+  }
+}
+
 document.addEventListener("DOMContentLoaded", () => {
   ragadjust("h1, h2, h3, h4, h5", ["all"]);
   window.window.scrollTo({

site/snippets/desktop-nav.php

@@ -23,10 +23,17 @@
     "></li>
     <li 
       class="left top" 
+      id="subscribe-btn-wrapper"
     >
-      <a href="#">
+      <button onclick="showSubscribeField(event)">
-        s'abonner
+        s'inscrire
-      </a>
+      </button>
+      <form id="subscribe-form" class="hidden">
+        <label for="email">
+          <input type="email" name="email" id="email" placeholder="votre e-mail">
+          <button type="submit" onclick="subscribe(event)">→</button>
+        </label>
+      </form>
     </li>
     <li 
       class="left top" 

site/templates/home.php

@@ -3,17 +3,17 @@
 <main>
   <article>
     <?php snippet('cover', slots: true) ?>
-    <?php slot('title') ?>
+      <?php slot('title') ?>
-    <a 
+      <a 
-      href="#main-edito" 
+        href="#main-edito" 
-      class="no-line" 
+        class="no-line" 
-    >
+      >
-      <h2 class="main-title <?= setTitleFontSizeClass($site->subtitle()) ?>"><?= $site->subtitle()->inline() ?></h2>
+        <h2 class="main-title <?= setTitleFontSizeClass($site->subtitle()) ?>"><?= $site->subtitle()->inline() ?></h2>
-      <p 
+        <p 
-        class="main-edito-btn | toggle-btn toggle-btn--left"
+          class="main-edito-btn | toggle-btn toggle-btn--left"
-      >éditorial</p>
+        >éditorial</p>
-    </a>
+      </a>
-    <?php endslot() ?>
+      <?php endslot() ?>
     <?php endsnippet() ?>
     <div id="main-edito" class="content">
       <?= $site->edito() ?>