From 119451da1a9a70a969156e3f9b6cff44e89c5d53 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Mon, 15 Jul 2024 14:30:53 +0200
Subject: [PATCH] fix anim header

---
 .../dist/assets/css/bundle.css                | 46 ++++++++++++-------
 .../dist/assets/img/noun-arrow-to-right.svg   |  4 +-
 .../src/assets/scss/pages/partenaires.scss    |  5 +-
 .../scss/partials/animation-logo-header.scss  | 21 +++++----
 .../src/assets/scss/partials/footer.scss      |  4 +-
 .../src/assets/scss/partials/header.scss      |  6 +++
 6 files changed, 56 insertions(+), 30 deletions(-)

diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
index 011a77e..703a7d5 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
@@ -445,6 +445,9 @@ header .header:hover + .header_nav_container {
   transform-origin: bottom right;
   transition: all 1s ease-in-out;
 }
+.header--collapsed .qdd-header {
+  opacity: 1 !important;
+}
 @media (max-width: 810px) {
   .header--collapsed {
     width: 100%;
@@ -478,6 +481,9 @@ header .header:hover + .header_nav_container {
   transform-origin: bottom right;
   transition: all 0s ease-in-out;
 }
+.header--collapsed-already .qdd-header {
+  opacity: 1 !important;
+}
 @media (max-width: 810px) {
   .header--collapsed-already {
     width: 100%;
@@ -571,8 +577,7 @@ footer {
 .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau img {
   width: auto;
   height: 40px;
-  padding-left: 1rem;
-  padding-bottom: 1rem;
+  padding-bottom: 0.2rem;
 }
 @media (max-width: 700px) {
   .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau img {
@@ -1413,7 +1418,11 @@ footer {
   }
 }
 
+header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header {
+  opacity: 0;
+}
 header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated {
+  opacity: 1;
   transform: scale(2);
 }
 @media (max-width: 820px) {
@@ -1422,24 +1431,28 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   }
 }
 header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-blue {
+  opacity: 0;
   animation-delay: 0.2s;
   animation-name: blink;
-  animation-duration: 5s;
+  animation-duration: 10s;
 }
 header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-red {
-  animation-delay: 0.4s;
-  animation-name: blink;
-  animation-duration: 5s;
-}
-header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black {
-  animation-delay: 0.6s;
-  animation-name: blink;
-  animation-duration: 5s;
-}
-header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black2 {
+  opacity: 0;
   animation-delay: 0.8s;
   animation-name: blink;
-  animation-duration: 5s;
+  animation-duration: 10s;
+}
+header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black {
+  opacity: 0;
+  animation-delay: 1.5s;
+  animation-name: blink;
+  animation-duration: 10s;
+}
+header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black2 {
+  opacity: 0;
+  animation-delay: 2s;
+  animation-name: blink;
+  animation-duration: 10s;
 }
 @keyframes blink {
   0%, 100% {
@@ -2430,9 +2443,10 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   display: none;
 }
 .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a::after {
-  display: inline-block;
+  display: inline-flex;
   content: url("../img/noun-arrow-to-right.svg");
-  padding-right: 0.5rem;
+  padding-right: 0.2rem;
+  padding-left: 0.2rem;
 }
 
 .node-type-static main {
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right.svg
index c4efa01..3084e74 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right.svg
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right.svg
@@ -2,8 +2,8 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   width="7mm"
-   height="7mm"
+   width="35px"
+   height="35px"
    viewBox="0 0 10.531931 10.531931"
    version="1.1"
    id="svg1"
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/partenaires.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/partenaires.scss
index 8322045..a332785 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/partenaires.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/partenaires.scss
@@ -94,9 +94,10 @@
                                 display: none;
                             }
                             &::after{
-                                display: inline-block;
+                                display: inline-flex;
                                 content: url("../img/noun-arrow-to-right.svg");
-                                padding-right: 0.5rem;
+                                padding-right: 0.2rem;
+                                padding-left: 0.2rem;
                                 
                             }
                         }
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-logo-header.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-logo-header.scss
index cfa3d04..5d4754a 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-logo-header.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-logo-header.scss
@@ -2,35 +2,40 @@ header{
     #block-quartiers-de-demain-logoquartiersdedemain{
         .field_field_logo{
             .qdd-header{
-                
+                opacity: 0;
                 &.animated{
+                    opacity: 1;
                     transform: scale(2);   
                     @media(max-width:820px) {
                         transform: scale(1);
                     }
                     .blink-blue {
+                        opacity: 0;
                         // animation: blink 3s 3;
                         animation-delay: 0.2s;
                         animation-name: blink;
-                        animation-duration: 5s;
+                        animation-duration: 10s;
                     }
     
                     .blink-red {
-                        animation-delay: 0.4s;
+                        opacity: 0;
+                        animation-delay: 0.8s;
                         animation-name: blink;
-                        animation-duration: 5s;
+                        animation-duration: 10s;
                     }
     
                     .blink-black {
-                        animation-delay: 0.6s;
+                        opacity: 0;
+                        animation-delay: 1.5s;
                         animation-name: blink;
-                        animation-duration: 5s;        
+                        animation-duration: 10s;        
                     }
     
                     .blink-black2 {
-                        animation-delay: 0.8s;
+                        opacity: 0;
+                        animation-delay: 2s;
                         animation-name: blink;
-                        animation-duration: 5s;
+                        animation-duration: 10s;
                     }
                     @keyframes blink {
                         0%, 100% {
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/footer.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/footer.scss
index 83762dd..2be1edf 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/footer.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/footer.scss
@@ -57,8 +57,8 @@ footer{
                 img{
                     width: auto;
                     height: 40px;
-                    padding-left: 1rem;
-                    padding-bottom: 1rem;
+                    // padding-left: 1rem;
+                    padding-bottom: 0.2rem;
                     @media(max-width: 700px){
                         height: 30px;
                         padding-left: 0;
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
index 9efcc73..cfaccad 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
@@ -193,6 +193,9 @@ header{
     width: 45%;
     transform-origin: bottom right; 
     transition: all 1s ease-in-out;
+    .qdd-header{
+        opacity: 1 !important;
+    }
     @media(max-width: 810px){
      width: 100%;
      height: 170px;
@@ -220,6 +223,9 @@ header{
     width: 45%;
     transform-origin: bottom right; 
     transition: all 0s ease-in-out;
+    .qdd-header{
+        opacity: 1 !important;
+    }
     @media(max-width: 810px){
         width: 100%;
         height: 170px;