From d47e771521c3136fe6a3b1aa4ca11c56e34a0389 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Tue, 2 Jul 2024 12:54:23 +0200
Subject: [PATCH] optimisation css home

---
 .../dist/assets/css/bundle.css                | 99 +++++--------------
 .../src/assets/scss/pages/home.scss           | 93 +++--------------
 2 files changed, 37 insertions(+), 155 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 9060a43..025f4e9 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
@@ -666,7 +666,7 @@ footer span.totop #toTop .arrow-up::before {
 #home article.node-type-static .field_body > p:nth-child(1) {
   margin-bottom: 0;
   flex: 1 100%;
-  font-size: 1.7rem;
+  font-size: 1.5rem;
 }
 #home article.node-type-static .field_body > p:nth-child(2),
 #home article.node-type-static .field_body p:nth-child(3) {
@@ -676,6 +676,13 @@ footer span.totop #toTop .arrow-up::before {
 #home article.node-type-static .field_body > p:nth-child(2) {
   padding-left: 15rem;
 }
+#home article.node-type-static .field_field_title {
+  width: fit-content;
+  margin: auto;
+  font-size: 2rem;
+  font-weight: 800;
+  padding-bottom: 3rem;
+}
 #home article.node-type-static #paragraph-id--1 {
   background-color: #edefe8;
   padding-top: 4rem;
@@ -684,13 +691,6 @@ footer span.totop #toTop .arrow-up::before {
 #home article.node-type-static #paragraph-id--1 .field_field_picto {
   display: none;
 }
-#home article.node-type-static #paragraph-id--1 .field_field_title {
-  width: fit-content;
-  margin: auto;
-  font-size: 2.5rem;
-  font-weight: 800;
-  padding-bottom: 3rem;
-}
 #home article.node-type-static #paragraph-id--1 .field_field_texte {
   width: 65%;
   margin: auto;
@@ -770,27 +770,28 @@ footer span.totop #toTop .arrow-up::before {
   padding-bottom: 1rem;
   height: 120px;
 }
-#home article.node-type-static #paragraph-id--2 {
+#home article.node-type-static #paragraph-id--2,
+#home article.node-type-static #paragraph-id--3,
+#home article.node-type-static #paragraph-id--8 {
   background-color: white;
   padding-top: 2rem;
   padding-bottom: 3rem;
 }
-#home article.node-type-static #paragraph-id--2 .field_field_picto {
+#home article.node-type-static #paragraph-id--2 .field_field_picto,
+#home article.node-type-static #paragraph-id--3 .field_field_picto,
+#home article.node-type-static #paragraph-id--8 .field_field_picto {
   width: fit-content;
   margin: auto;
 }
-#home article.node-type-static #paragraph-id--2 .field_field_title {
-  width: fit-content;
-  margin: auto;
-  font-size: 2.5rem;
-  font-weight: 800;
-  padding-bottom: 3rem;
-}
-#home article.node-type-static #paragraph-id--2 .field_field_texte {
+#home article.node-type-static #paragraph-id--2 .field_field_texte,
+#home article.node-type-static #paragraph-id--3 .field_field_texte,
+#home article.node-type-static #paragraph-id--8 .field_field_texte {
   width: 65%;
   margin: auto;
 }
-#home article.node-type-static #paragraph-id--2 .field_field_texte .colone-picto h3 {
+#home article.node-type-static #paragraph-id--2 .field_field_texte .colone-picto h3,
+#home article.node-type-static #paragraph-id--3 .field_field_texte .colone-picto h3,
+#home article.node-type-static #paragraph-id--8 .field_field_texte .colone-picto h3 {
   flex: 1 90%;
   color: #0833c2;
   font-size: 1.5rem;
@@ -798,49 +799,20 @@ footer span.totop #toTop .arrow-up::before {
   display: flex;
   flex-direction: column;
 }
-#home article.node-type-static #paragraph-id--2 .field_field_texte .colone-picto h3:nth-of-type(2) {
+#home article.node-type-static #paragraph-id--2 .field_field_texte .colone-picto h3:nth-of-type(2),
+#home article.node-type-static #paragraph-id--3 .field_field_texte .colone-picto h3:nth-of-type(2),
+#home article.node-type-static #paragraph-id--8 .field_field_texte .colone-picto h3:nth-of-type(2) {
   padding-top: 3rem;
   border-top: solid 1px #0833c2;
 }
-#home article.node-type-static #paragraph-id--2 .field_field_texte .colone-picto p {
+#home article.node-type-static #paragraph-id--2 .field_field_texte .colone-picto p,
+#home article.node-type-static #paragraph-id--3 .field_field_texte .colone-picto p,
+#home article.node-type-static #paragraph-id--8 .field_field_texte .colone-picto p {
   padding-right: 2rem;
   padding-bottom: 1rem;
 }
 #home article.node-type-static #paragraph-id--3 {
   background-color: #edefe8;
-  padding-top: 2rem;
-  padding-bottom: 3rem;
-}
-#home article.node-type-static #paragraph-id--3 .field_field_picto {
-  width: fit-content;
-  margin: auto;
-}
-#home article.node-type-static #paragraph-id--3 .field_field_title {
-  width: fit-content;
-  margin: auto;
-  font-size: 2.5rem;
-  font-weight: 800;
-  padding-bottom: 3rem;
-}
-#home article.node-type-static #paragraph-id--3 .field_field_texte {
-  width: 65%;
-  margin: auto;
-}
-#home article.node-type-static #paragraph-id--3 .field_field_texte .colone-picto h3 {
-  flex: 1 90%;
-  color: #0833c2;
-  font-size: 1.5rem;
-  padding-right: 3rem;
-  display: flex;
-  flex-direction: column;
-}
-#home article.node-type-static #paragraph-id--3 .field_field_texte .colone-picto h3:nth-of-type(2) {
-  padding-top: 3rem;
-  border-top: solid 1px #0833c2;
-}
-#home article.node-type-static #paragraph-id--3 .field_field_texte .colone-picto p {
-  padding-right: 2rem;
-  padding-bottom: 1rem;
 }
 #home article.node-type-static #paragraph-id--4 {
   background-color: white;
@@ -851,13 +823,6 @@ footer span.totop #toTop .arrow-up::before {
   width: fit-content;
   margin: auto;
 }
-#home article.node-type-static #paragraph-id--4 .field_field_title {
-  width: fit-content;
-  margin: auto;
-  font-size: 2.5rem;
-  font-weight: 800;
-  padding-bottom: 3rem;
-}
 #home article.node-type-static #paragraph-id--4 .field_field_texte {
   width: 65%;
   margin: auto;
@@ -889,13 +854,6 @@ footer span.totop #toTop .arrow-up::before {
   width: 70%;
   padding-bottom: 2rem;
 }
-#home article.node-type-static #paragraph-id--6 .field_field_title {
-  width: fit-content;
-  margin: auto;
-  font-size: 2.5rem;
-  font-weight: 800;
-  padding-bottom: 3rem;
-}
 #home article.node-type-static #paragraph-id--6 .field_field_texte {
   margin: auto;
 }
@@ -932,14 +890,9 @@ footer span.totop #toTop .arrow-up::before {
   color: white;
 }
 #home article.node-type-static #paragraph-id--7 .field_field_title {
-  width: fit-content;
-  margin: auto;
   width: 70%;
   text-transform: lowercase;
-  font-size: 2.5rem;
-  font-weight: 800;
   padding-top: 3rem;
-  padding-bottom: 3rem;
   text-align: center;
 }
 #home article.node-type-static #paragraph-id--7 .field_field_texte {
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 e6a527c..f11a23e 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
@@ -12,10 +12,9 @@
             flex-direction: row;
             flex-wrap: wrap ;
             > p:nth-child(1){
-                // width: 100%;
                 margin-bottom: 0;
                 flex: 1 100%;
-                font-size: 1.7rem;
+                font-size: 1.5rem;
             }
             > p:nth-child(2),
             p:nth-child(3){
@@ -26,7 +25,13 @@
                 padding-left: 15rem;
             }
         }
-
+        .field_field_title{
+            width: fit-content;
+            margin: auto;
+            font-size: 2rem;
+            font-weight: 800;
+            padding-bottom: 3rem;
+        }
         #paragraph-id--1{  ///// Les enjeux
             background-color: #edefe8;
             padding-top: 4rem;
@@ -34,13 +39,6 @@
             .field_field_picto{
                 display: none;
             }
-            .field_field_title{
-                width: fit-content;
-                margin: auto;
-                font-size: 2.5rem;
-                font-weight: 800;
-                padding-bottom: 3rem;
-            }
             .field_field_texte{
                 width: 65%;
                 margin: auto;
@@ -120,13 +118,13 @@
                             height: 120px;
                         }
                     }
-
                 }
-
             }
         }
 
-        #paragraph-id--2{  ///// Les sites
+        #paragraph-id--2,
+        #paragraph-id--3,
+        #paragraph-id--8{  ///// Les sites
             background-color: white;
             padding-top: 2rem;
             padding-bottom: 3rem;
@@ -134,13 +132,6 @@
                 width: fit-content;
                 margin: auto;
             }
-            .field_field_title{
-                width: fit-content;
-                margin: auto;
-                font-size: 2.5rem;
-                font-weight: 800;
-                padding-bottom: 3rem;
-            }
             .field_field_texte{
                 width: 65%;
                 margin: auto;
@@ -149,7 +140,6 @@
                         flex: 1 90%;
                         color: #0833c2ff;
                         font-size: 1.5rem;
-                        // width: 80%;
                         padding-right: 3rem;
                         display: flex;
                         flex-direction: column;
@@ -162,51 +152,11 @@
                         padding-right: 2rem;
                         padding-bottom: 1rem;
                     }
-
                 }
-
             }
         }
         #paragraph-id--3{  ///// La procédure
             background-color: #edefe8;
-            padding-top: 2rem;
-            padding-bottom: 3rem;
-            .field_field_picto{
-                width: fit-content;
-                margin: auto;
-            }
-            .field_field_title{
-                width: fit-content;
-                margin: auto;
-                font-size: 2.5rem;
-                font-weight: 800;
-                padding-bottom: 3rem;
-            }
-            .field_field_texte{
-                width: 65%;
-                margin: auto;
-                .colone-picto{
-                    h3{
-                        flex: 1 90%;
-                        color: #0833c2ff;
-                        font-size: 1.5rem;
-                        // width: 80%;
-                        padding-right: 3rem;
-                        display: flex;
-                        flex-direction: column;
-                        &:nth-of-type(2){
-                            padding-top: 3rem;
-                            border-top: solid 1px #0833c2ff;
-                        }
-                    }
-                    p{
-                        padding-right: 2rem;
-                        padding-bottom: 1rem;
-                    }
-
-                }
-
-            }
         }
         #paragraph-id--4{  ///// composition des équipes
             background-color: white;
@@ -216,13 +166,6 @@
                 width: fit-content;
                 margin: auto;
             }
-            .field_field_title{
-                width: fit-content;
-                margin: auto;
-                font-size: 2.5rem;
-                font-weight: 800;
-                padding-bottom: 3rem;
-            }
             .field_field_texte{
                 width: 65%;
                 margin: auto;
@@ -259,13 +202,6 @@
             align-items: center;
             width: 70%;
             padding-bottom: 2rem;
-            .field_field_title{
-                width: fit-content;
-                margin: auto;
-                font-size: 2.5rem;
-                font-weight: 800;
-                padding-bottom: 3rem;
-            }
             .field_field_texte{
                 margin: auto;
                 .colone-picto{
@@ -299,19 +235,12 @@
             flex-direction: column;
             margin: auto;
             align-items: center;
-            // width: 70%;
             padding-bottom: 2rem;
             color: white;
             .field_field_title{
-                width: fit-content;
-                margin: auto;
                 width: 70%;
                 text-transform: lowercase;
-
-                font-size: 2.5rem;
-                font-weight: 800;
                 padding-top: 3rem;
-                padding-bottom: 3rem;
                 text-align: center;
             }
             .field_field_texte{