From abdae701ec582b729b913f4911dc923c78dadcbf Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Fri, 12 Jul 2024 22:06:26 +0200
Subject: [PATCH] vm css footer

---
 .../dist/assets/css/bundle.css                | 57 ++++++++++++-------
 .../dist/assets/img/date-actu.svg             |  4 +-
 .../dist/assets/img/type-actu.svg             |  4 +-
 .../src/assets/scss/pages/home.scss           |  2 +-
 .../src/assets/scss/partials/footer.scss      | 57 ++++++++++++++-----
 .../templates/page--front.html.twig           |  8 ++-
 .../templates/page--node--%.html.twig         | 19 ++++---
 .../templates/page--node--6.html.twig         |  7 ++-
 .../templates/page--node--7.html.twig         |  7 ++-
 .../templates/page--partenaires.html.twig     |  9 ++-
 .../templates/page.html.twig                  | 16 ++++--
 11 files changed, 126 insertions(+), 64 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 7bd23a5..316ea2f 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
@@ -509,13 +509,17 @@ footer {
 }
 
 .footer {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  grid-template-rows: repeat(1, 1fr);
+  display: flex;
+  flex-direction: row;
   background-color: #edefe8;
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+@media (max-width: 700px) {
+  .footer {
+    flex-direction: column-reverse;
+  }
+}
 .footer section {
   width: fit-content;
 }
@@ -534,13 +538,9 @@ footer {
     flex-wrap: nowrap;
   }
 }
-.footer #footer-left {
-  grid-column: 1/span 5;
-  grid-row: 1;
-}
 @media (max-width: 500px) {
   .footer #footer-left {
-    max-width: 25%;
+    width: 100%;
   }
 }
 .footer #footer-left .footer_left_container {
@@ -552,11 +552,6 @@ footer {
 .footer #footer-left .footer_left_container .logo-qdd {
   display: none;
 }
-@media (max-width: 700px) {
-  .footer #footer-left .footer_left_container {
-    max-width: 50vw;
-  }
-}
 @media (max-width: 500px) {
   .footer #footer-left .footer_left_container {
     padding-left: 15%;
@@ -567,18 +562,40 @@ footer {
   margin: auto;
   padding-left: 2rem;
 }
+@media (max-width: 700px) {
+  .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau {
+    padding-left: 0;
+  }
+}
 .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau img {
   width: auto;
-  height: 65px;
+  height: 40px;
   padding-left: 1rem;
+  padding-bottom: 1rem;
+}
+@media (max-width: 700px) {
+  .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau img {
+    height: 30px;
+    padding-left: 0;
+    padding-bottom: 0;
+  }
 }
 .footer #footer-left .footer_left_container img {
   width: auto;
-  height: 150px;
+  height: 90px;
+}
+@media (max-width: 700px) {
+  .footer #footer-left .footer_left_container img {
+    height: 60px;
+  }
+}
+.footer .first-row {
+  flex: 1 60%;
+  justify-content: space-evenly;
+  display: flex;
+  flex-direction: row;
 }
 .footer #footer-middle {
-  grid-column: 6/span 7;
-  grid-row: 1;
   font-size: 0.6rem;
 }
 .footer #footer-middle #block-quartiers-de-demain-pieddepage ul li {
@@ -586,13 +603,9 @@ footer {
 }
 @media (max-width: 700px) {
   .footer #footer-middle #block-quartiers-de-demain-pieddepage ul {
-    padding-left: 0.5rem;
+    padding-left: 0rem;
   }
 }
-.footer #footer-right {
-  grid-column: 10/12;
-  grid-row: 1;
-}
 @media (max-width: 700px) {
   .footer #footer-right {
     display: flex;
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/date-actu.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/date-actu.svg
index de7d496..8a8c5eb 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/img/date-actu.svg
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/date-actu.svg
@@ -4,8 +4,8 @@
 <svg
    version="1.1"
    id="svg1"
-   width="30"
-   height="30"
+   width="20"
+   height="20"
    viewBox="0 0 31.925354 31.926757"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/type-actu.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/type-actu.svg
index 5c9b6ed..523f296 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/img/type-actu.svg
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/type-actu.svg
@@ -4,8 +4,8 @@
 <svg
    version="1.1"
    id="svg1"
-   width="30"
-   height="30"
+   width="20"
+   height="20"
    viewBox="0 0 33.440002 38.374023"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
index 6cfc889..ad5e58b 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
@@ -239,8 +239,8 @@
                         font-size: 1rem;
                         padding-top: 3rem;
                         border-top: solid 1px #0833c2ff;
-                       
                     }
+                    
                     p{
                         padding-right: 1rem;
                         padding-bottom: 1rem;
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 291aef7..83762dd 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
@@ -2,13 +2,17 @@ footer{
     z-index: 100;
 }
 .footer{
-    
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    grid-template-rows: repeat(1, 1fr);
+    display: flex;    
+    flex-direction: row;
+    // display: grid;
+    // grid-template-columns: repeat(12, 1fr);
+    // grid-template-rows: repeat(1, 1fr);
     background-color: #edefe8;
     padding-top: 1rem;
     padding-bottom: 1rem;
+    @media(max-width: 700px){
+        flex-direction: column-reverse;
+    }
     section{width: fit-content;}
     h2, ul{margin: 0;}
     // border-top: 1px solid #808080;
@@ -22,10 +26,11 @@ footer{
     }     
 
     #footer-left{
-        grid-column: 1 /span 5;
-        grid-row: 1;
+        // grid-column: 1 /span 5;
+        // grid-row: 1;
         @media (max-width: 500px){
-            max-width: 25%;
+            // flex: 1 100%;
+            width: 100%;
         }
         .footer_left_container{
            
@@ -33,7 +38,7 @@ footer{
             padding-left: 3rem;
             .logo-qdd{display: none;}
             @media(max-width: 700px){
-                max-width: 50vw;
+                // max-width: 50vw;
             }
             @media (max-width: 500px){
                 padding-left: 15%;
@@ -45,38 +50,60 @@ footer{
                 height: fit-content;
                 margin: auto;
                 padding-left: 2rem;
+                @media(max-width: 700px){
+                    padding-left: 0;
+                }
 
                 img{
                     width: auto;
-                    height: 65px;
+                    height: 40px;
                     padding-left: 1rem;
+                    padding-bottom: 1rem;
+                    @media(max-width: 700px){
+                        height: 30px;
+                        padding-left: 0;
+                        padding-bottom: 0;
+                    }
                 }
             }
             img{
                 width: auto;
-                height: 150px;
+                height: 90px;
+                @media(max-width: 700px){
+                    height: 60px;
+                }
             }
         }
  
+    }
+    .first-row{
+        // grid-column: 6 /span 12;
+        flex: 1 60%;
+        justify-content: space-evenly;
+        display: flex;
+        flex-direction: row;
+        
+
+        
     }
     #footer-middle{
-        grid-column: 6 /span 7;
-        grid-row: 1;
+        // grid-column: 6 /span 7;
+        // grid-row: 1;
         #block-quartiers-de-demain-pieddepage{
             ul li{
                 padding-bottom: 0.2rem;
             }
             @media(max-width: 700px){
              ul{
-                 padding-left: 00.5rem;
+                 padding-left: 0rem;
              }
             }
         }
         font-size: 0.6rem;
     }
     #footer-right{
-        grid-column: 10 / 12;
-        grid-row: 1;
+        // grid-column: 10 / 12;
+        // grid-row: 1;
          @media (max-width: 700px){
             display: flex;
             justify-content: flex-end;
diff --git a/web/themes/custom/quartiers_de_demain/templates/page--front.html.twig b/web/themes/custom/quartiers_de_demain/templates/page--front.html.twig
index b9f805e..7eec1e2 100644
--- a/web/themes/custom/quartiers_de_demain/templates/page--front.html.twig
+++ b/web/themes/custom/quartiers_de_demain/templates/page--front.html.twig
@@ -98,7 +98,6 @@
     {% endif %}
 
   </main>
-
   {# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
     <footer role="contentinfo">
       {# <section id="footer-top"> #}
@@ -106,8 +105,11 @@
       {# </section>  #}
       <div class="footer">
         <section id="footer-left">{{ page.footer_left }}</section> 
-        <section id="footer-middle">{{ page.footer_middle }}</section> 
-        <section id="footer-right">{{ page.footer_right }}</section> 
+        <div class='first-row'>
+          <section id="footer-middle">{{ page.footer_middle }}</section> 
+          <section id="footer-right">{{ page.footer_right }}</section> 
+        </div>
+
       </div> 
       {# <section id="footer-bottom">{{ page.footer_bottom }}</section>  #}
     </footer>
diff --git a/web/themes/custom/quartiers_de_demain/templates/page--node--%.html.twig b/web/themes/custom/quartiers_de_demain/templates/page--node--%.html.twig
index 9dadca0..d859003 100644
--- a/web/themes/custom/quartiers_de_demain/templates/page--node--%.html.twig
+++ b/web/themes/custom/quartiers_de_demain/templates/page--node--%.html.twig
@@ -77,15 +77,20 @@
     {% endif %}
 
   </main>
-
+  {# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
     <footer role="contentinfo">
-
+      {# <section id="footer-top"> #}
+          <span class="totop"><a href="#" id="toTop"><i class="arrow-up"></i></a></span>
+      {# </section>  #}
       <div class="footer">
         <section id="footer-left">{{ page.footer_left }}</section> 
-        <section id="footer-middle">{{ page.footer_middle }}</section> 
-        <section id="footer-right">{{ page.footer_right }}</section> 
-      </div> 
-      <section id="footer-bottom">{{ page.footer_bottom }}</section> 
-    </footer>
+        <div class='first-row'>
+          <section id="footer-middle">{{ page.footer_middle }}</section> 
+          <section id="footer-right">{{ page.footer_right }}</section> 
+        </div>
 
+      </div> 
+      {# <section id="footer-bottom">{{ page.footer_bottom }}</section>  #}
+    </footer>
+  {# {% endif %} #}
 </div>{# /.layout-container #}
diff --git a/web/themes/custom/quartiers_de_demain/templates/page--node--6.html.twig b/web/themes/custom/quartiers_de_demain/templates/page--node--6.html.twig
index 3d70225..4496ba3 100644
--- a/web/themes/custom/quartiers_de_demain/templates/page--node--6.html.twig
+++ b/web/themes/custom/quartiers_de_demain/templates/page--node--6.html.twig
@@ -84,8 +84,11 @@
       {# </section>  #}
       <div class="footer">
         <section id="footer-left">{{ page.footer_left }}</section> 
-        <section id="footer-middle">{{ page.footer_middle }}</section> 
-        <section id="footer-right">{{ page.footer_right }}</section> 
+        <div class='first-row'>
+          <section id="footer-middle">{{ page.footer_middle }}</section> 
+          <section id="footer-right">{{ page.footer_right }}</section> 
+        </div>
+
       </div> 
       {# <section id="footer-bottom">{{ page.footer_bottom }}</section>  #}
     </footer>
diff --git a/web/themes/custom/quartiers_de_demain/templates/page--node--7.html.twig b/web/themes/custom/quartiers_de_demain/templates/page--node--7.html.twig
index 591eb11..717bdd7 100644
--- a/web/themes/custom/quartiers_de_demain/templates/page--node--7.html.twig
+++ b/web/themes/custom/quartiers_de_demain/templates/page--node--7.html.twig
@@ -84,8 +84,11 @@
       {# </section>  #}
       <div class="footer">
         <section id="footer-left">{{ page.footer_left }}</section> 
-        <section id="footer-middle">{{ page.footer_middle }}</section> 
-        <section id="footer-right">{{ page.footer_right }}</section> 
+        <div class='first-row'>
+          <section id="footer-middle">{{ page.footer_middle }}</section> 
+          <section id="footer-right">{{ page.footer_right }}</section> 
+        </div>
+
       </div> 
       {# <section id="footer-bottom">{{ page.footer_bottom }}</section>  #}
     </footer>
diff --git a/web/themes/custom/quartiers_de_demain/templates/page--partenaires.html.twig b/web/themes/custom/quartiers_de_demain/templates/page--partenaires.html.twig
index ab14a80..bfa1c41 100644
--- a/web/themes/custom/quartiers_de_demain/templates/page--partenaires.html.twig
+++ b/web/themes/custom/quartiers_de_demain/templates/page--partenaires.html.twig
@@ -80,12 +80,15 @@
   {# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
     <footer role="contentinfo">
       {# <section id="footer-top"> #}
-          {# <span class="totop"><a href="#" id="toTop"><i class="arrow-up"></i></a></span> #}
+          <span class="totop"><a href="#" id="toTop"><i class="arrow-up"></i></a></span>
       {# </section>  #}
       <div class="footer">
         <section id="footer-left">{{ page.footer_left }}</section> 
-        <section id="footer-middle">{{ page.footer_middle }}</section> 
-        <section id="footer-right">{{ page.footer_right }}</section> 
+        <div class='first-row'>
+          <section id="footer-middle">{{ page.footer_middle }}</section> 
+          <section id="footer-right">{{ page.footer_right }}</section> 
+        </div>
+
       </div> 
       {# <section id="footer-bottom">{{ page.footer_bottom }}</section>  #}
     </footer>
diff --git a/web/themes/custom/quartiers_de_demain/templates/page.html.twig b/web/themes/custom/quartiers_de_demain/templates/page.html.twig
index 54b2871..1b8084f 100644
--- a/web/themes/custom/quartiers_de_demain/templates/page.html.twig
+++ b/web/themes/custom/quartiers_de_demain/templates/page.html.twig
@@ -77,15 +77,21 @@
     {% endif %}
 
   </main>
-
+  {# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
     <footer role="contentinfo">
-
+      {# <section id="footer-top"> #}
+          <span class="totop"><a href="#" id="toTop"><i class="arrow-up"></i></a></span>
+      {# </section>  #}
       <div class="footer">
         <section id="footer-left">{{ page.footer_left }}</section> 
-        <section id="footer-middle">{{ page.footer_middle }}</section> 
-        <section id="footer-right">{{ page.footer_right }}</section> 
+        <div class='first-row'>
+          <section id="footer-middle">{{ page.footer_middle }}</section> 
+          <section id="footer-right">{{ page.footer_right }}</section> 
+        </div>
+
       </div> 
-      <section id="footer-bottom">{{ page.footer_bottom }}</section> 
+      {# <section id="footer-bottom">{{ page.footer_bottom }}</section>  #}
     </footer>
+  {# {% endif %} #}
 
 </div>{# /.layout-container #}