From 5d5ad21366f058724117e0514d8295d8f29fe52b Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Sun, 7 Jul 2024 15:20:10 +0200
Subject: [PATCH] mobile home

---
 .../dist/assets/css/bundle.css                | 204 ++++++++++++++++--
 .../src/assets/scss/pages/home.scss           | 166 +++++++++++++-
 .../src/assets/scss/partials/header.scss      |   2 +-
 3 files changed, 348 insertions(+), 24 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 484acea..56a80ba 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
@@ -232,7 +232,7 @@ header {
   transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
   /* Classes for scroll effect */
 }
-@media (max-width: 500px) {
+@media (max-width: 700px) {
   header {
     height: 110px;
   }
@@ -1153,14 +1153,30 @@ footer {
   flex: 1 100%;
   font-size: 1.5rem;
 }
+@media (max-width: 500px) {
+  #home article.node-type-static .field_body > p:nth-child(1) {
+    font-size: 1.3rem;
+  }
+}
 #home article.node-type-static .field_body > p:nth-child(2),
 #home article.node-type-static .field_body p:nth-child(3) {
   flex: 1;
   padding: 1rem;
 }
+@media (max-width: 500px) {
+  #home article.node-type-static .field_body > p:nth-child(2),
+  #home article.node-type-static .field_body p:nth-child(3) {
+    padding-left: 0;
+  }
+}
 #home article.node-type-static .field_body > p:nth-child(2) {
   padding-left: 15rem;
 }
+@media (max-width: 500px) {
+  #home article.node-type-static .field_body > p:nth-child(2) {
+    padding-left: 0;
+  }
+}
 #home article.node-type-static .field_field_title {
   width: fit-content;
   margin: auto;
@@ -1178,6 +1194,11 @@ footer {
   width: 50%;
   margin: auto;
 }
+@media (max-width: 500px) {
+  #home article.node-type-static #paragraph-id--1 .field_field_texte {
+    width: 80%;
+  }
+}
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto {
   display: flex;
   flex-direction: row;
@@ -1197,50 +1218,188 @@ footer {
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p {
   padding-right: 2rem;
   padding-bottom: 1rem;
-  width: 30%;
+  flex: 1 30%;
+  max-width: 30%;
   display: flex;
   flex-direction: column;
 }
+@media (max-width: 500px) {
+  #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p {
+    padding-right: 1rem;
+    flex: 1 30%;
+    max-width: 50%;
+  }
+}
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(1)::before {
-  content: url("../img/fanion.svg");
+  background-image: url("../img/fanion.svg");
+  background-size: 60px 80px;
+  background-repeat: no-repeat;
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  content: "";
   padding-bottom: 1rem;
 }
+@media (max-width: 500px) {
+  #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(1)::before {
+    width: 50px;
+    height: 50px;
+    background-size: 50px 50px;
+  }
+}
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(2)::before {
-  content: url("../img/pouce.svg");
+  background-image: url("../img/pouce.svg");
+  background-size: 60px 80px;
+  background-repeat: no-repeat;
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  content: "";
   padding-bottom: 1rem;
 }
+@media (max-width: 500px) {
+  #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(2)::before {
+    width: 50px;
+    height: 50px;
+    background-size: 50px 50px;
+  }
+}
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(3)::before {
-  content: url("../img/planete.svg");
+  background-image: url("../img/planete.svg");
+  background-size: 60px 80px;
+  background-repeat: no-repeat;
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  content: "";
   padding-bottom: 1rem;
 }
+@media (max-width: 500px) {
+  #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(3)::before {
+    width: 50px;
+    height: 50px;
+    background-size: 50px 50px;
+  }
+}
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(4)::before {
-  content: url("../img/puzzle.svg");
+  background-image: url("../img/puzzle.svg");
+  background-size: 60px 80px;
+  background-repeat: no-repeat;
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  content: "";
   padding-bottom: 1rem;
 }
+@media (max-width: 500px) {
+  #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(4)::before {
+    width: 50px;
+    height: 50px;
+    background-size: 50px 50px;
+  }
+}
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(5)::before {
-  content: url("../img/cube.svg");
+  background-image: url("../img/cube.svg");
+  background-size: 70px 80px;
+  background-repeat: no-repeat;
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  content: "";
   padding-bottom: 1rem;
 }
+@media (max-width: 500px) {
+  #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(5)::before {
+    width: 50px;
+    height: 50px;
+    background-size: 50px 50px;
+  }
+}
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(6)::before {
-  content: url("../img/ampoule.svg");
+  background-image: url("../img/ampoule.svg");
+  background-size: 60px 80px;
+  background-repeat: no-repeat;
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  content: "";
   padding-bottom: 1rem;
 }
+@media (max-width: 500px) {
+  #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(6)::before {
+    width: 50px;
+    height: 50px;
+    background-size: 50px 50px;
+  }
+}
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(7)::before {
-  content: url("../img/bonhome.svg");
+  background-image: url("../img/bonhome.svg");
+  background-size: 60px 80px;
+  background-repeat: no-repeat;
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  content: "";
   padding-bottom: 1rem;
 }
+@media (max-width: 500px) {
+  #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(7)::before {
+    width: 50px;
+    height: 50px;
+    background-size: 50px 50px;
+  }
+}
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(8)::before {
-  content: url("../img/feuilles.svg");
+  background-image: url("../img/feuilles.svg");
+  background-size: 60px 80px;
+  background-repeat: no-repeat;
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  content: "";
   padding-bottom: 1rem;
 }
+@media (max-width: 500px) {
+  #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(8)::before {
+    width: 50px;
+    height: 50px;
+    background-size: 50px 50px;
+  }
+}
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(9)::before {
-  content: url("../img/calendrier.svg");
+  background-image: url("../img/calendrier.svg");
+  background-size: 60px 80px;
+  background-repeat: no-repeat;
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  content: "";
   padding-bottom: 1rem;
 }
+@media (max-width: 500px) {
+  #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(9)::before {
+    width: 50px;
+    height: 50px;
+    background-size: 50px 50px;
+  }
+}
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(10)::before {
-  content: url("../img/crayons.svg");
+  background-image: url("../img/crayons.svg");
+  background-size: 48px 80px;
+  background-repeat: no-repeat;
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  content: "";
   padding-bottom: 1rem;
 }
+@media (max-width: 500px) {
+  #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(10)::before {
+    width: 50px;
+    height: 50px;
+    background-size: 50px 50px;
+  }
+}
 #home article.node-type-static #paragraph-id--6 {
   display: flex;
   flex-direction: column;
@@ -1249,6 +1408,12 @@ footer {
   width: 70%;
   padding-bottom: 2rem;
 }
+@media (max-width: 500px) {
+  #home article.node-type-static #paragraph-id--6 {
+    width: 90%;
+    text-align: center;
+  }
+}
 #home article.node-type-static #paragraph-id--6 .field_field_texte {
   margin: auto;
 }
@@ -1266,6 +1431,11 @@ footer {
   font-size: 1.2rem;
   align-self: center;
 }
+@media (max-width: 500px) {
+  #home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(2) {
+    width: 80%;
+  }
+}
 #home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(3) {
   width: 80%;
   align-self: center;
@@ -1290,6 +1460,11 @@ footer {
   padding-top: 3rem;
   text-align: center;
 }
+@media (max-width: 550px) {
+  #home article.node-type-static #paragraph-id--7 .field_field_title {
+    width: 90%;
+  }
+}
 #home article.node-type-static #paragraph-id--7 .field_field_texte {
   width: 80%;
 }
@@ -1329,6 +1504,11 @@ footer {
   grid-row: 1/span 2;
   grid-column: 1/span 2;
 }
+@media (max-width: 700px) {
+  #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(1) {
+    width: 200px;
+  }
+}
 #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) {
   grid-row: 3;
   grid-column: inherit;
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 afefb63..7fa6827 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
@@ -19,14 +19,23 @@
                 margin-bottom: 0;
                 flex: 1 100%;
                 font-size: 1.5rem;
+                @media(max-width: 500px){
+                    font-size: 1.3rem;
+                }
             }
             > p:nth-child(2),
             p:nth-child(3){
                 flex: 1 ;
                 padding: 1rem;
+                @media(max-width: 500px){
+                    padding-left: 0 ;
+                }
             }
             > p:nth-child(2){
                 padding-left: 15rem;
+                @media(max-width: 500px){
+                    padding-left: 0 ;
+                }
             }
         }
         .field_field_title{
@@ -44,11 +53,15 @@
             .field_field_texte{
                 width: 50%;
                 margin: auto;
+                @media(max-width: 500px){
+                    width: 80%;
+                }
                 .colone-picto{
                     display: flex;
                     flex-direction: row;
                     flex-wrap: wrap;
                     justify-content: flex-start;
+                   
                     h3{
                         flex: 1 100%;
                         color: #0833c2ff;
@@ -65,48 +78,165 @@
                     p{
                         padding-right: 2rem;
                         padding-bottom: 1rem;
-                        width: 30%;
+                        flex: 1 30%;
+                        max-width: 30%;
                         display: flex;
                         flex-direction: column;
+                        @media(max-width: 500px){
+                            padding-right: 1rem;
+                            flex: 1 30%;
+                            max-width: 50%;
+                        }
                         &:nth-of-type(1)::before{
-                            content: url("../img/fanion.svg");
+                            background-image: url("../img/fanion.svg");
+                            background-size: 60px 80px;
+                            background-repeat: no-repeat;
+                            display: inline-block;
+                            width: 80px;
+                            height: 80px;
+                            content: "";
                             padding-bottom: 1rem;
+                            @media(max-width: 500px){
+                                width: 50px;
+                                height: 50px;
+                                background-size: 50px 50px;
+                            }
                         }
                         &:nth-of-type(2)::before{
-                            content: url("../img/pouce.svg");
+                            background-image: url("../img/pouce.svg");
+                            background-size: 60px 80px;
+                            background-repeat: no-repeat;
+                            display: inline-block;
+                            width: 80px;
+                            height: 80px;
+                            content: "";
                             padding-bottom: 1rem;
+                            @media(max-width: 500px){
+                                width: 50px;
+                                height: 50px;
+                                background-size: 50px 50px;
+                            }
                         }
                         &:nth-of-type(3)::before{
-                            content: url("../img/planete.svg");
+                            background-image: url("../img/planete.svg");
+                            background-size: 60px 80px;
+                            background-repeat: no-repeat;
+                            display: inline-block;
+                            width: 80px;
+                            height: 80px;
+                            content: "";
                             padding-bottom: 1rem;
+                            @media(max-width: 500px){
+                                width: 50px;
+                                height: 50px;
+                                background-size: 50px 50px;
+                            }
+
                         }
                         &:nth-of-type(4)::before{
-                            content: url("../img/puzzle.svg");
+                            background-image: url("../img/puzzle.svg");
+                            background-size: 60px 80px;
+                            background-repeat: no-repeat;
+                            display: inline-block;
+                            width: 80px;
+                            height: 80px;
+                            content: "";
                             padding-bottom: 1rem;
+                            @media(max-width: 500px){
+                                width: 50px;
+                                height: 50px;
+                                background-size: 50px 50px;
+                            }
                         }
                         &:nth-of-type(5)::before{
-                            content: url("../img/cube.svg");
+                            background-image: url("../img/cube.svg");
+                            background-size: 70px 80px;
+                            background-repeat: no-repeat;
+                            display: inline-block;
+                            width: 80px;
+                            height: 80px;
+                            content: "";
                             padding-bottom: 1rem;
+                            @media(max-width: 500px){
+                                width: 50px;
+                                height: 50px;
+                                background-size: 50px 50px;
+                            }
                         }
                         &:nth-of-type(6)::before{
-                            content: url("../img/ampoule.svg");
+                            background-image: url("../img/ampoule.svg");
+                            background-size: 60px 80px;
+                            background-repeat: no-repeat;
+                            display: inline-block;
+                            width: 80px;
+                            height: 80px;
+                            content: "";
                             padding-bottom: 1rem;
+                            @media(max-width: 500px){
+                                width: 50px;
+                                height: 50px;
+                                background-size: 50px 50px;
+                            }
                         }
                         &:nth-of-type(7)::before{
-                            content: url("../img/bonhome.svg");
+                            background-image: url("../img/bonhome.svg");
+                            background-size: 60px 80px;
+                            background-repeat: no-repeat;
+                            display: inline-block;
+                            width: 80px;
+                            height: 80px;
+                            content: "";
                             padding-bottom: 1rem;
+                            @media(max-width: 500px){
+                                width: 50px;
+                                height: 50px;
+                                background-size: 50px 50px;
+                            }
                         }
                         &:nth-of-type(8)::before{
-                            content: url("../img/feuilles.svg");
+                            background-image: url("../img/feuilles.svg");
+                            background-size: 60px 80px;
+                            background-repeat: no-repeat;
+                            display: inline-block;
+                            width: 80px;
+                            height: 80px;
+                            content: "";
                             padding-bottom: 1rem;
+                            @media(max-width: 500px){
+                                width: 50px;
+                                height: 50px;
+                                background-size: 50px 50px;
+                            }
                         }
                         &:nth-of-type(9)::before{
-                            content: url("../img/calendrier.svg");
+                            background-image: url("../img/calendrier.svg");
+                            background-size: 60px 80px;
+                            background-repeat: no-repeat;
+                            display: inline-block;
+                            width: 80px;
+                            height: 80px;
+                            content: "";
                             padding-bottom: 1rem;
+                            @media(max-width: 500px){
+                                width: 50px;
+                                height: 50px;
+                                background-size: 50px 50px;
+                            }
                         }
                         &:nth-of-type(10)::before{
-                            content: url("../img/crayons.svg");
+                            background-image: url("../img/crayons.svg");
+                            background-size: 48px 80px;
+                            background-repeat: no-repeat;
+                            display: inline-block;
+                            width: 80px;
+                            height: 80px;
+                            content: "";
                             padding-bottom: 1rem;
+                            @media(max-width: 500px){
+                                width: 50px;
+                                height: 50px;
+                                background-size: 50px 50px;
+                            }
                         }
                     }
                 }
@@ -121,6 +251,10 @@
             align-items: center;
             width: 70%;
             padding-bottom: 2rem;
+            @media(max-width: 500px){
+                width: 90%;
+                text-align: center;
+            }
             .field_field_texte{
                 margin: auto;
                 .colone-picto{
@@ -135,6 +269,9 @@
                         width: 60%;
                         font-size: 1.2rem;
                         align-self: center;
+                        @media(max-width: 500px){
+                            width: 80%;
+                        }
                     }
                     > p:nth-of-type(3){
                         width: 80%;
@@ -161,6 +298,9 @@
                 text-transform: lowercase;
                 padding-top: 3rem;
                 text-align: center;
+                @media(max-width: 550px){
+                    width: 90%;
+                }
             }
             .field_field_texte{
                 width: 80%;
@@ -169,6 +309,7 @@
                     display: grid;
                     grid-template-columns: repeat(6 auto);
                     grid-template-rows: repeat(3 1fr);
+                    
                     h5{
                         font-size: 5rem;
                         font-weight: 800;
@@ -198,6 +339,9 @@
                     svg:nth-of-type(1){
                         grid-row: 1 /span 2;
                         grid-column: 1 /span 2;
+                        @media(max-width: 700px){
+                           width: 200px;
+                        }
                     }
                     svg:nth-of-type(2){
                         grid-row: 3;
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 67855e9..51bddda 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
@@ -9,7 +9,7 @@ header{
     position: fixed;
     top: 0;
     transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
-    @media(max-width: 500px){
+    @media(max-width: 700px){
         height: $header-height-pad;
     }