From e0fadca980cdc4949c616c276a88b63ef86ac87c Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Tue, 24 Sep 2024 22:30:45 +0200
Subject: [PATCH] responsive page site

---
 .../dist/assets/css/bundle.css                | 76 ++++++++++++++++---
 .../src/assets/scss/pages/node-type-site.scss | 34 +++++++++
 .../src/assets/scss/partials/footer.scss      |  9 ++-
 .../src/assets/scss/partials/header.scss      |  8 +-
 4 files changed, 113 insertions(+), 14 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 2dc7216..8487fca 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
@@ -407,7 +407,7 @@ header .header_nav_container #block-quartiers-de-demain-entete ul {
 }
 @media (max-width: 1090px) {
   header .header_nav_container #block-quartiers-de-demain-entete ul li {
-    padding-top: 0.3rem;
+    padding-top: 0.5rem;
   }
 }
 header .header_nav_container #block-quartiers-de-demain-entete ul li a {
@@ -417,7 +417,7 @@ header .header_nav_container #block-quartiers-de-demain-entete ul li a {
 }
 @media (max-width: 1090px) {
   header .header_nav_container #block-quartiers-de-demain-entete ul li a {
-    font-size: 0.6rem;
+    font-size: 0.9rem;
   }
 }
 @media (max-width: 500px) {
@@ -425,13 +425,12 @@ header .header_nav_container #block-quartiers-de-demain-entete ul li a {
     display: flex;
     flex-direction: column;
     align-items: center;
-    font-size: 0.9rem;
+    font-size: 1rem;
   }
 }
 header .header_nav_container #block-quartiers-de-demain-entete ul li:not(:last-of-type) ::after {
   content: "";
   display: block;
-  width: 80px;
   border-bottom: solid white 1px;
   padding-bottom: 0.3rem;
 }
@@ -580,11 +579,6 @@ footer {
 .footer #footer-left .footer_left_container .logo-qdd {
   display: none;
 }
-@media (max-width: 500px) {
-  .footer #footer-left .footer_left_container {
-    padding-left: 15%;
-  }
-}
 .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau {
   height: fit-content;
   margin: auto;
@@ -629,6 +623,9 @@ footer {
   padding-bottom: 0.2rem;
 }
 @media (max-width: 700px) {
+  .footer #footer-middle #block-quartiers-de-demain-pieddepage {
+    padding-left: 40px;
+  }
   .footer #footer-middle #block-quartiers-de-demain-pieddepage ul {
     padding-left: 0rem;
   }
@@ -650,6 +647,11 @@ footer {
 .footer #footer-right #block-quartiers-de-demain-socialmedialinks {
   flex-direction: column;
 }
+@media (max-width: 700px) {
+  .footer #footer-right #block-quartiers-de-demain-socialmedialinks {
+    padding-left: 1rem;
+  }
+}
 .footer #footer-right #block-quartiers-de-demain-socialmedialinks h2 {
   display: flex;
   flex-direction: column;
@@ -657,6 +659,11 @@ footer {
   font-weight: 400;
   font-size: 0.6rem;
 }
+@media (max-width: 700px) {
+  .footer #footer-right #block-quartiers-de-demain-socialmedialinks h2 {
+    width: 50%;
+  }
+}
 .footer #footer-right #block-quartiers-de-demain-socialmedialinks li {
   padding: 0;
 }
@@ -2814,6 +2821,13 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 .node-type-site .layout--threecol-25-50-25 {
   flex-wrap: nowrap;
 }
+@media (max-width: 500px) {
+  .node-type-site .layout--threecol-25-50-25 {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+}
 .node-type-site .layout--threecol-25-50-25 .layout__region--first {
   flex: 1 0 20%;
   display: flex;
@@ -2823,6 +2837,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 .node-type-site .layout--threecol-25-50-25 .layout__region--first .block-region-first {
   width: 100%;
 }
+@media (max-width: 500px) {
+  .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) {
+    margin-top: 1rem;
+  }
+}
 .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) h2, .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) .field--label-above, .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) span:not(.file) {
   display: none;
 }
@@ -2832,6 +2851,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   font-size: 0.4rem;
   text-transform: uppercase;
 }
+@media (max-width: 500px) {
+  .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) .file--mime-application-pdf {
+    font-size: 0.8rem;
+  }
+}
 .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) .file--mime-application-pdf a {
   color: white;
   padding: 0.5rem 0.3rem;
@@ -2843,6 +2867,12 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   text-transform: uppercase;
   width: fit-content;
 }
+@media (max-width: 500px) {
+  .node-type-site .layout--threecol-25-50-25 .layout__region--first .field_field_liens_site div div {
+    margin-top: 0.5rem;
+    font-size: 0.8rem;
+  }
+}
 .node-type-site .layout--threecol-25-50-25 .layout__region--first .field_field_liens_site div div a {
   color: white;
   padding: 0.5rem 0.3rem;
@@ -2856,6 +2886,12 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   flex-wrap: wrap;
   margin-left: 2.5rem;
 }
+@media (max-width: 500px) {
+  .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second {
+    margin-left: 0.5rem;
+    margin-top: 1rem;
+  }
+}
 .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_title,
 .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_numero,
 .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_sous_titre {
@@ -2930,6 +2966,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_parties) {
   margin-top: 2rem;
 }
+@media (max-width: 500px) {
+  .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_parties) {
+    width: 100%;
+  }
+}
 .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_parties) .paragraph--type--site-parts .field_field_titre_site {
   font-family: "gilroy-semibold";
   font-size: 0.6rem;
@@ -2944,6 +2985,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   flex-direction: row !important;
   justify-content: space-between;
 }
+@media (max-width: 500px) {
+  .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .paragraph--type--site-diapo .field_field_images .diaporama {
+    flex-direction: column !important;
+  }
+}
 .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .paragraph--type--site-diapo .field_field_images .diaporama .cadre-img-zoom {
   margin: auto;
 }
@@ -2959,10 +3005,22 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   font-size: 0.3rem;
   font-family: "gilroy-light";
 }
+@media (max-width: 500px) {
+  .node-type-site .layout--threecol-25-50-25 .layout__region--third {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+}
 .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div {
   display: flex;
   flex-direction: row;
 }
+@media (max-width: 500px) {
+  .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div {
+    justify-content: center;
+  }
+}
 .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .prev-site {
   padding-right: 0.5rem;
 }
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss
index d9ccaa8..df415c5 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss
@@ -8,6 +8,11 @@
     }
     .layout--threecol-25-50-25{
         flex-wrap: nowrap;
+        @media(max-width: 500px){
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+        }
         .layout__region--first{
             flex: 1 0 20%;
             display: flex;
@@ -20,6 +25,9 @@
                 // width: fit-content;
             }
             div:has(.field_field_documents){
+                @media(max-width: 500px){
+                    margin-top: 1rem;
+                }
                 
                 h2, .field--label-above, span:not(.file){
                     display: none;
@@ -29,6 +37,9 @@
                     color: white;
                     font-size: 0.4rem;
                     text-transform: uppercase;
+                    @media(max-width: 500px){
+                        font-size: 0.8rem;
+                    }
                     a{
                         color: white;
                         padding: 0.5rem 0.3rem;
@@ -42,6 +53,10 @@
                 font-size: 0.4rem;
                 text-transform: uppercase;
                 width: fit-content;
+                @media(max-width: 500px){
+                    margin-top: 0.5rem;
+                    font-size: 0.8rem;
+                }
                 a{
                     color: white;
                     padding: 0.5rem 0.3rem;
@@ -55,6 +70,10 @@
                 flex-direction: row;
                 flex-wrap: wrap;
                 margin-left: 2.5rem;
+                @media(max-width: 500px){
+                    margin-left: 0.5rem;
+                    margin-top: 1rem;
+                }
                 .field_title, 
                 .field_field_numero,
                 .field_field_sous_titre{
@@ -143,6 +162,9 @@
     
                 div:has(.field_field_parties){
                     margin-top: 2rem;
+                    @media(max-width: 500px){
+                        width: 100%;
+                    }
                     .paragraph--type--site-parts{
                         
                         .field_field_titre_site{
@@ -164,6 +186,9 @@
                             display: flex !important;
                             flex-direction: row !important;
                             justify-content: space-between;
+                            @media(max-width: 500px){
+                                flex-direction: column !important;
+                            }
                             .cadre-img-zoom{
                                margin: auto;
                                 img{
@@ -190,10 +215,19 @@
 
 
         .layout__region--third{
+            @media(max-width: 500px){
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+            }
             .block-region-third{
                 div{
                     display: flex;
                     flex-direction: row;
+                    @media(max-width: 500px){
+                        justify-content: center;
+                    }
+
                     .prev-site{
                         padding-right: 0.5rem;
                         &::before{
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 caa64c8..c93ec63 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
@@ -41,7 +41,7 @@ footer{
                 // max-width: 50vw;
             }
             @media (max-width: 500px){
-                padding-left: 15%;
+                // padding-left: 15%;
             }
             display: flex;
             flex-direction: row;
@@ -94,6 +94,7 @@ footer{
                 padding-bottom: 0.2rem;
             }
             @media(max-width: 700px){
+                padding-left: 40px;
              ul{
                  padding-left: 0rem;
              }
@@ -120,6 +121,9 @@ footer{
         #block-quartiers-de-demain-socialmedialinks{
             // display: none;
             flex-direction: column;
+            @media (max-width: 700px){
+                padding-left: 1rem;
+             }
             h2{
                 display: flex;
                 flex-direction: column;
@@ -128,6 +132,9 @@ footer{
                 
                 // padding-bottom: 0.6rem;
                 font-size: 0.6rem;
+                @media (max-width: 700px){
+                    width: 50%;
+                 }
 
             }
             // .fa-3x{
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 014c54f..600819b 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
@@ -149,20 +149,20 @@ header{
                 }
                 li{
                     @media(max-width: 1090px){
-                        padding-top: 0.3rem;
+                        padding-top: 0.5rem;
                     }
                     a{
                         text-transform: uppercase;
                         color: white;
                         font-size: 0.5rem;
                         @media(max-width:1090px){
-                            font-size: 0.6rem;
+                            font-size: 0.9rem;
                         }
                         @media(max-width: 500px){
                             display: flex;
                             flex-direction: column;
                             align-items: center;
-                            font-size: 0.9rem;
+                            font-size: 1rem;
                         }
                        
                     }
@@ -170,7 +170,7 @@ header{
                         ::after{
                             content: "";
                             display: block;
-                            width: 80px;
+                            // width: 80px;
                             border-bottom: solid white 1px;
                             padding-bottom: 0.3rem;
                         }