enjeux smooth

This commit is contained in:
ouidade 2024-07-11 16:53:56 +02:00
parent 7d48a18ff0
commit 5ecbe76fad
3 changed files with 149 additions and 41 deletions

View File

@ -1539,7 +1539,9 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home article.node-type-static #paragraph-id--1 {
background-color: #edefe8;
position: relative;
padding-bottom: 6rem;
}
#home article.node-type-static #paragraph-id--1.paragraph--type--static-parts {
padding-bottom: 0 !important;
}
#home article.node-type-static #paragraph-id--1 .field_field_title {
font-family: "gilroy-bold";
@ -1575,10 +1577,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
flex-direction: column;
font-size: 1rem;
}
#home article.node-type-static #paragraph-id--1 .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--1 .field_field_texte .colone-picto p {
padding-right: 1rem;
padding-bottom: 1rem;
@ -1680,7 +1678,67 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
background-size: 50px 50px;
}
}
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(6)::before {
#home article.node-type-static #paragraph-id--21 {
background-color: #edefe8;
position: relative;
padding-bottom: 6rem;
}
#home article.node-type-static #paragraph-id--21.paragraph--type--static-parts {
padding-top: 0 !important;
}
#home article.node-type-static #paragraph-id--21 .field_field_title {
font-family: "gilroy-bold";
}
#home article.node-type-static #paragraph-id--21 .field_field_picto {
display: none;
}
#home article.node-type-static #paragraph-id--21 .field_field_texte {
width: 65%;
margin: auto;
}
@media (max-width: 1090px) {
#home article.node-type-static #paragraph-id--21 .field_field_texte {
width: 80%;
}
}
#home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
padding-left: 6rem;
}
@media (max-width: 1090px) {
#home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto {
padding-left: 1.5rem;
}
}
#home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto h3 {
flex: 0 80%;
color: #0833c2;
display: flex;
flex-direction: column;
font-size: 1rem;
padding-top: 3rem;
border-top: solid 1px #0833c2;
}
#home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto p {
padding-right: 1rem;
padding-bottom: 1rem;
flex: 1 30%;
max-width: 30%;
display: flex;
flex-direction: column;
}
@media (max-width: 1090px) {
#home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto p {
padding-right: 1rem;
flex: 1 30%;
max-width: 50%;
font-size: 0.9rem;
}
}
#home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto p:nth-of-type(1)::before {
background-image: url("../img/ampoule.svg");
background-size: 90px 100px;
background-repeat: no-repeat;
@ -1691,13 +1749,13 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
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 {
#home article.node-type-static #paragraph-id--21 .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(7)::before {
#home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto p:nth-of-type(2)::before {
background-image: url("../img/bonhome.svg");
background-size: 90px 100px;
background-repeat: no-repeat;
@ -1708,13 +1766,13 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
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 {
#home article.node-type-static #paragraph-id--21 .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(8)::before {
#home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto p:nth-of-type(3)::before {
background-image: url("../img/feuilles.svg");
background-size: 90px 100px;
background-repeat: no-repeat;
@ -1725,13 +1783,13 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
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 {
#home article.node-type-static #paragraph-id--21 .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(9)::before {
#home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto p:nth-of-type(4)::before {
background-image: url("../img/calendrier.svg");
background-size: 90px 100px;
background-repeat: no-repeat;
@ -1742,13 +1800,13 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
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 {
#home article.node-type-static #paragraph-id--21 .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(10)::before {
#home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto p:nth-of-type(5)::before {
background-image: url("../img/crayons.svg");
background-size: 60px 100px;
background-repeat: no-repeat;
@ -1759,7 +1817,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
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 {
#home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto p:nth-of-type(5)::before {
width: 50px;
height: 50px;
background-size: 50px 50px;
@ -2376,7 +2434,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
.node-type-static .layout-content .content_container article.node-type-static div.field_body {
width: 80%;
padding-top: 2rem;
padding-bottom: 2rem;
padding-bottom: 4rem;
margin: auto;
justify-content: center;
display: flex;
@ -2387,13 +2445,16 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
margin-bottom: 0;
}
.node-type-static .layout-content .content_container article.node-type-static div.field_body p {
margin-top: 0;
margin: 0;
}
.node-type-static .layout-content .content_container article.node-type-static div.field_body h4 {
font-size: 1rem;
width: 70%;
margin: auto;
}
.node-type-static .layout-content .content_container article.node-type-static div.field_body h5 {
font-size: 0.9rem;
margin-bottom: 0.2rem;
}
#page-node .content_container {

View File

@ -99,21 +99,11 @@
font-family: 'gilroy-bold';
padding-bottom: 1rem;
}
#paragraph-id--1{ ///// Les enjeux
#paragraph-id--1{ ///// Les enjeux 1
background-color: #edefe8;
position: relative;
padding-bottom: 6rem;
// &::after{
// content: url('../img/formes-animees-3.svg');
// display: block;
// position: absolute;
// z-index: 5;
// right: 15%;
// bottom: 45%;
// @media(max-width: 810px){
// display: none;
// }
// }
&.paragraph--type--static-parts{padding-bottom: 0 !important;}
.field_field_title{
font-family: 'gilroy-bold';
}
@ -142,10 +132,6 @@
display: flex;
flex-direction: column;
font-size: 1rem;
&:nth-of-type(2){
padding-top: 3rem;
border-top: solid 1px #0833c2ff;
}
}
p{
padding-right: 1rem;
@ -236,7 +222,64 @@
background-size: 50px 50px;
}
}
&:nth-of-type(6)::before{
}
}
}
}
#paragraph-id--21{ ///// Les enjeux 2
&.paragraph--type--static-parts{padding-top: 0 !important;}
background-color: #edefe8;
position: relative;
padding-bottom: 6rem;
.field_field_title{
font-family: 'gilroy-bold';
}
.field_field_picto{
display: none;
}
.field_field_texte{
width: 65%;
margin: auto;
@media(max-width: 1090px){
width: 80%;
}
.colone-picto{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
padding-left: 6rem;
@media(max-width: 1090px){
padding-left: 1.5rem;
}
h3{
flex: 0 80%;
color: #0833c2ff;
display: flex;
flex-direction: column;
font-size: 1rem;
padding-top: 3rem;
border-top: solid 1px #0833c2ff;
}
p{
padding-right: 1rem;
padding-bottom: 1rem;
flex: 1 30%;
max-width: 30%;
display: flex;
flex-direction: column;
@media(max-width: 1090px){
padding-right: 1rem;
flex: 1 30%;
max-width: 50%;
font-size: 0.9rem;
}
/////////
&:nth-of-type(1)::before{
background-image: url("../img/ampoule.svg");
background-size: 90px 100px;
background-repeat: no-repeat;
@ -251,7 +294,7 @@
background-size: 50px 50px;
}
}
&:nth-of-type(7)::before{
&:nth-of-type(2)::before{
background-image: url("../img/bonhome.svg");
background-size: 90px 100px;
background-repeat: no-repeat;
@ -266,7 +309,7 @@
background-size: 50px 50px;
}
}
&:nth-of-type(8)::before{
&:nth-of-type(3)::before{
background-image: url("../img/feuilles.svg");
background-size: 90px 100px;
background-repeat: no-repeat;
@ -281,7 +324,7 @@
background-size: 50px 50px;
}
}
&:nth-of-type(9)::before{
&:nth-of-type(4)::before{
background-image: url("../img/calendrier.svg");
background-size: 90px 100px;
background-repeat: no-repeat;
@ -296,7 +339,7 @@
background-size: 50px 50px;
}
}
&:nth-of-type(10)::before{
&:nth-of-type(5)::before{
background-image: url("../img/crayons.svg");
background-size: 60px 100px;
background-repeat: no-repeat;
@ -316,6 +359,7 @@
}
}
#paragraph-id--6{ /////// quartier 2030
display: flex;
flex-direction: column;

View File

@ -42,7 +42,7 @@
div.field_body{
width: 80%;
padding-top: 2rem;
padding-bottom: 2rem;
padding-bottom: 4rem;
margin: auto;
justify-content: center;
display: flex;
@ -54,13 +54,16 @@
margin-bottom: 0;
}
p{
margin-top: 0;
margin: 0;
}
h4{
font-size: 1rem;
width: 70%;
margin: auto;
}
h5{
font-size: 0.9rem;
margin-bottom: 0.2rem;
}
}
}