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

View File

@ -99,21 +99,11 @@
font-family: 'gilroy-bold'; font-family: 'gilroy-bold';
padding-bottom: 1rem; padding-bottom: 1rem;
} }
#paragraph-id--1{ ///// Les enjeux #paragraph-id--1{ ///// Les enjeux 1
background-color: #edefe8; background-color: #edefe8;
position: relative; position: relative;
padding-bottom: 6rem; &.paragraph--type--static-parts{padding-bottom: 0 !important;}
// &::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;
// }
// }
.field_field_title{ .field_field_title{
font-family: 'gilroy-bold'; font-family: 'gilroy-bold';
} }
@ -142,10 +132,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 1rem; font-size: 1rem;
&:nth-of-type(2){
padding-top: 3rem;
border-top: solid 1px #0833c2ff;
}
} }
p{ p{
padding-right: 1rem; padding-right: 1rem;
@ -236,7 +222,64 @@
background-size: 50px 50px; 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-image: url("../img/ampoule.svg");
background-size: 90px 100px; background-size: 90px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -251,7 +294,7 @@
background-size: 50px 50px; background-size: 50px 50px;
} }
} }
&:nth-of-type(7)::before{ &:nth-of-type(2)::before{
background-image: url("../img/bonhome.svg"); background-image: url("../img/bonhome.svg");
background-size: 90px 100px; background-size: 90px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -266,7 +309,7 @@
background-size: 50px 50px; background-size: 50px 50px;
} }
} }
&:nth-of-type(8)::before{ &:nth-of-type(3)::before{
background-image: url("../img/feuilles.svg"); background-image: url("../img/feuilles.svg");
background-size: 90px 100px; background-size: 90px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -281,7 +324,7 @@
background-size: 50px 50px; background-size: 50px 50px;
} }
} }
&:nth-of-type(9)::before{ &:nth-of-type(4)::before{
background-image: url("../img/calendrier.svg"); background-image: url("../img/calendrier.svg");
background-size: 90px 100px; background-size: 90px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -296,7 +339,7 @@
background-size: 50px 50px; background-size: 50px 50px;
} }
} }
&:nth-of-type(10)::before{ &:nth-of-type(5)::before{
background-image: url("../img/crayons.svg"); background-image: url("../img/crayons.svg");
background-size: 60px 100px; background-size: 60px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -316,6 +359,7 @@
} }
} }
#paragraph-id--6{ /////// quartier 2030 #paragraph-id--6{ /////// quartier 2030
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

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