css home enjeux

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -1,6 +1,14 @@
 /*quartiers_de_demain*/
 /*global*/
 /* Colors used for quartiers_de_demain */
+p {
+  font-size: 0.6rem;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
 @media (min-width: 48rem) {
   :root {
     font-size: calc(1rem + (1vw - 0.48rem) * 1.389);
@@ -13,6 +21,25 @@
     font-size: 2rem;
   }
 }
+/*Gilroy*/
+@font-face {
+  font-family: "Gilroy";
+  src: url("./theme/custom/quartiers_de_demain/fonts/Gilroy/Gilroy-Light.otf") format("otf");
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Gilroy";
+  src: url("../fonts/Gilroy/Gilroy-Medium.otf") format("otf");
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Gilroy";
+  src: url("../fonts/Gilroy/Gilroy-SemiBold.otf") format("otf");
+  font-weight: 600;
+  font-style: normal;
+}
 /*marianne*/
 @font-face {
   font-family: "Marianne";
@@ -97,7 +124,7 @@
   position: relative;
   width: 100vw;
   background-color: rgb(255, 255, 255);
-  font-family: "Marianne", sans-serif;
+  font-family: "Gilroy", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 0.8rem;
@@ -118,7 +145,7 @@
 }
 
 .layout-content {
-  padding-top: 125px;
+  padding-top: 320px;
 }
 @media (max-width: 500px) {
   .layout-content {
@@ -164,30 +191,13 @@ header {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   grid-template-rows: repeat(3, 1fr);
-  height: 125px;
+  height: 320px;
   background-color: rgb(255, 255, 255);
   z-index: 99;
-  width: 100vw;
+  width: 38vw;
   max-width: 100vw;
-  position: fixed;
   top: 0;
-  border-bottom: 1px solid #808080;
-}
-@media (max-width: 810px) {
-  header {
-    height: 110px;
-  }
-}
-@media (max-width: 660px) {
-  header {
-    height: 70px;
-  }
-}
-@media (max-width: 450px) {
-  header {
-    display: flex;
-    height: 50px;
-  }
+  border: 1px solid #808080;
 }
 header .contextual-region {
   width: max-content;
@@ -206,13 +216,17 @@ header .header_left_container {
     height: inherit;
   }
 }
+header .header_left_container #block-quartiers-de-demain-logorepu-2 {
+  display: none;
+}
 @media (max-width: 891px) {
   header .header_left_container #block-quartiers-de-demain-logorepu-2 {
     height: 110px;
   }
 }
 header .header_left_container #block-quartiers-de-demain-logoepau-2 {
-  height: 125px;
+  display: none;
+  height: 320px;
 }
 @media (max-width: 891px) {
   header .header_left_container #block-quartiers-de-demain-logoepau-2 {
@@ -220,12 +234,13 @@ header .header_left_container #block-quartiers-de-demain-logoepau-2 {
   }
 }
 header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain {
-  margin-left: auto;
   padding-right: 5%;
+  margin: auto;
 }
 header .header_left_container img {
   width: auto;
-  height: 125px;
+  margin: auto;
+  height: 320px;
 }
 @media (max-width: 891px) {
   header .header_left_container img {
@@ -286,13 +301,12 @@ header .header_nav_container {
   display: none;
   grid-row: 3;
   grid-column: 1/span 12;
-  position: absolute;
   top: 100%;
   width: 100%;
   background: rgb(232, 235, 244);
   border-bottom: 1px solid #808080;
   border-top: 1px solid #808080;
-  font-size: 1rem;
+  font-size: 1.2rem;
   text-align: center;
 }
 header .header_nav_container #block-quartiers-de-demain-entete {
@@ -441,7 +455,7 @@ footer span.totop #toTop .arrow-up::before {
   }
 }
 .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau {
-  height: 125px;
+  height: 320px;
 }
 @media (max-width: 700px) {
   .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau {
@@ -450,7 +464,7 @@ footer span.totop #toTop .arrow-up::before {
 }
 .footer #footer-left .footer_left_container img {
   width: auto;
-  height: 125px;
+  height: 320px;
 }
 @media (max-width: 700px) {
   .footer #footer-left .footer_left_container img {
@@ -685,14 +699,14 @@ footer span.totop #toTop .arrow-up::before {
 }
 #home article.node-type-static #paragraph-id--1 {
   background-color: #edefe8;
-  padding-top: 4rem;
-  padding-bottom: 4rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
 }
 #home article.node-type-static #paragraph-id--1 .field_field_picto {
   display: none;
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte {
-  width: 65%;
+  width: 50%;
   margin: auto;
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto {
@@ -702,10 +716,8 @@ footer span.totop #toTop .arrow-up::before {
   justify-content: flex-start;
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto h3 {
-  flex: 1 90%;
+  flex: 1 100%;
   color: #0833c2;
-  font-size: 1.5rem;
-  padding-right: 3rem;
   display: flex;
   flex-direction: column;
 }
@@ -723,52 +735,42 @@ footer span.totop #toTop .arrow-up::before {
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(1)::before {
   content: url("../img/fanion.svg");
   padding-bottom: 1rem;
-  height: 120px;
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(2)::before {
   content: url("../img/pouce.svg");
   padding-bottom: 1rem;
-  height: 120px;
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(3)::before {
   content: url("../img/planete.svg");
   padding-bottom: 1rem;
-  height: 120px;
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(4)::before {
   content: url("../img/puzzle.svg");
   padding-bottom: 1rem;
-  height: 120px;
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(5)::before {
   content: url("../img/cube.svg");
   padding-bottom: 1rem;
-  height: 120px;
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(6)::before {
   content: url("../img/ampoule.svg");
   padding-bottom: 1rem;
-  height: 120px;
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(7)::before {
   content: url("../img/bonhome.svg");
   padding-bottom: 1rem;
-  height: 120px;
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(8)::before {
   content: url("../img/feuilles.svg");
   padding-bottom: 1rem;
-  height: 120px;
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(9)::before {
   content: url("../img/calendrier.svg");
   padding-bottom: 1rem;
-  height: 120px;
 }
 #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(10)::before {
   content: url("../img/crayons.svg");
   padding-bottom: 1rem;
-  height: 120px;
 }
 #home article.node-type-static #paragraph-id--2,
 #home article.node-type-static #paragraph-id--3,

web/themes/custom/quartiers_de_demain/dist/assets/img/ampoule.svg

@@ -5,7 +5,7 @@
    version="1.1"
    id="svg1"
    width="115.54132"
-   height="113.3667"
+   height="80"
    viewBox="0 0 115.54132 113.3667"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">

web/themes/custom/quartiers_de_demain/dist/assets/img/bonhome.svg

@@ -5,7 +5,7 @@
    version="1.1"
    id="svg1"
    width="75.368286"
-   height="114.56152"
+   height="88"
    viewBox="0 0 75.368286 114.56152"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">

web/themes/custom/quartiers_de_demain/dist/assets/img/calendrier.svg

@@ -5,7 +5,7 @@
    version="1.1"
    id="svg1"
    width="126.14136"
-   height="114.36377"
+   height="80"
    viewBox="0 0 126.14136 114.36377"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">

web/themes/custom/quartiers_de_demain/dist/assets/img/crayons.svg

@@ -5,7 +5,7 @@
    version="1.1"
    id="svg1"
    width="71.040039"
-   height="99.820801"
+   height="80"
    viewBox="0 0 71.040039 99.820799"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">

web/themes/custom/quartiers_de_demain/dist/assets/img/cube.svg

@@ -5,7 +5,7 @@
    version="1.1"
    id="svg1"
    width="120.29468"
-   height="111.03076"
+   height="80"
    viewBox="0 0 120.29468 111.03076"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">

web/themes/custom/quartiers_de_demain/dist/assets/img/fanion.svg

@@ -5,7 +5,7 @@
    version="1.1"
    id="svg1"
    width="78.958679"
-   height="110.33325"
+   height="80"
    viewBox="0 0 78.958679 110.33325"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">

web/themes/custom/quartiers_de_demain/dist/assets/img/feuilles.svg

@@ -5,7 +5,7 @@
    version="1.1"
    id="svg1"
    width="94.244873"
-   height="100.66504"
+   height="80"
    viewBox="0 0 94.244873 100.66504"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">

web/themes/custom/quartiers_de_demain/dist/assets/img/planete.svg

@@ -5,7 +5,7 @@
    version="1.1"
    id="svg1"
    width="97.911987"
-   height="97.911865"
+   height="75"
    viewBox="0 0 97.911987 97.911864"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">

web/themes/custom/quartiers_de_demain/dist/assets/img/pouce.svg

@@ -5,7 +5,7 @@
    version="1.1"
    id="svg1"
    width="95.478638"
-   height="100.66577"
+   height="75"
    viewBox="0 0 95.478638 100.66577"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">

web/themes/custom/quartiers_de_demain/dist/assets/img/puzzle.svg

@@ -5,7 +5,7 @@
    version="1.1"
    id="svg1"
    width="110.33337"
-   height="110.32935"
+   height="80"
    viewBox="0 0 110.33337 110.32935"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">