add logo animation

assets/css/src/generic.css

@@ -37,6 +37,8 @@ body.progress * {
   font-weight: normal;
   transition: opacity 0.2s ease-in-out;
   font-size: var(--font-size-h2);
+  transition: font-size 0.3s var(--curve-quick-slow);
+  line-height: 1;
 }
 
 .logo > * {
@@ -45,6 +47,7 @@ body.progress * {
 
 .logo > *:not(:first-child) {
   margin-left: 2.4ch;
+  transition: margin 0.3s var(--curve-quick-slow);
 }
 
 .social-icons {

assets/css/src/nav.css

@@ -110,10 +110,29 @@
 }
 
 /* Main nav small */
+.main-nav .logo {
+  line-height: 0.5;
+}
+.main-nav .logo__detail {
+  display: inline-block;
+  overflow: hidden;
+  max-width: 10rem;
+  height: 2.2rem;
+  line-height: 1;
+  transform: translateY(0.55rem);
+  margin-left: 0;
+  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
+}
 
 .main-nav--small .logo__detail {
-  opacity: 0;
+  max-width: 0;
+  height: 1.5rem;
   pointer-events: none;
+  transform: translateY(0.4rem);
+}
+
+.main-nav--small .logo {
+  font-size: var(--font-size-m);
 }
 
 .main-nav--small .logo > *:not(:first-child) {

assets/js/script.js

@@ -8,6 +8,7 @@ document.addEventListener("DOMContentLoaded", () => {
     expandedNav: document.querySelector(".expanded-nav"),
     main: document.querySelector("main"),
     footer: document.querySelector(".main-footer"),
+    nav: document.querySelector(".main-nav"),
   };
 
   // Listeners
@@ -24,5 +25,13 @@ document.addEventListener("DOMContentLoaded", () => {
     if (nodes.expandedNav.classList.contains("open")) {
       closeNav(nodes);
     }
+    if (
+      window.scrollY > 100 &&
+      !nodes.nav.classList.contains("main-nav--small")
+    ) {
+      nodes.nav.classList.add("main-nav--small");
+    } else if (window.scrollY < 100) {
+      nodes.nav.classList.remove("main-nav--small");
+    }
   });
 });

site/snippets/nav.php

@@ -1,7 +1,7 @@
 <header class="main-header">
   <div class="main-header__infos-banner"></div>
   <a href="/" title="Aller à l'accueil">
-  <nav class="main-nav main-nav--small">
+  <nav class="main-nav">
       <h1 class="logo">
         <span>
           N<span class="logo__detail">ouveau</span>