bachir/drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css enjeux

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-07-15 13:04:02 +02:00
parent 0db3a90e5c
commit 7a3a139c3f
8 changed files with 671 additions and 6099 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
View File

@@ -254,6 +254,7 @@
logo : document.querySelectorAll('#logo-animated-container'),
chapeau : document.querySelectorAll('.field_body'),
paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),
enjeux : document.querySelectorAll('.field_field_textes .paragraph--type--static-parts .enjeux'),
}
const showUp = {
@@ -275,6 +276,7 @@
ScrollReveal().reveal(nodes.logo, Show);
ScrollReveal().reveal(nodes.chapeau, showUp);
ScrollReveal().reveal(nodes.paragraph, showUp);
ScrollReveal().reveal(nodes.enjeux, showUp);
}

368
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
View File

@@ -201,141 +201,249 @@
}
}
.enjeux{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
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;
display: inline-block;
width: 100px;
height: 100px;
content: "";
padding-bottom: 1rem;
@media(max-width: 810px){
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
&:nth-of-type(2)::before{
background-image: url("../img/bonhome.svg");
background-size: 90px 100px;
background-repeat: no-repeat;
display: inline-block;
width: 100px;
height: 100px;
content: "";
padding-bottom: 1rem;
@media(max-width: 810px){
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
&:nth-of-type(3)::before{
background-image: url("../img/feuilles.svg");
background-size: 90px 100px;
background-repeat: no-repeat;
display: inline-block;
width: 100px;
height: 100px;
content: "";
padding-bottom: 1rem;
@media(max-width: 810px){
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
&:nth-of-type(4)::before{
background-image: url("../img/calendrier.svg");
background-size: 90px 100px;
background-repeat: no-repeat;
display: inline-block;
width: 100px;
height: 100px;
content: "";
padding-bottom: 1rem;
@media(max-width: 810px){
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
&:nth-of-type(5)::before{
background-image: url("../img/crayons.svg");
background-size: 60px 100px;
background-repeat: no-repeat;
display: inline-block;
width: 100px;
height: 100px;
content: "";
padding-bottom: 1rem;
@media(max-width: 810px){
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
}
}
}
}
}
#paragraph-id--21,
#paragraph-id--28{ ///// 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;
}
// #paragraph-id--21,
// #paragraph-id--28{ ///// 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;
}
// 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;
}
// 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;
display: inline-block;
width: 100px;
height: 100px;
content: "";
padding-bottom: 1rem;
@media(max-width: 810px){
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
&:nth-of-type(2)::before{
background-image: url("../img/bonhome.svg");
background-size: 90px 100px;
background-repeat: no-repeat;
display: inline-block;
width: 100px;
height: 100px;
content: "";
padding-bottom: 1rem;
@media(max-width: 810px){
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
&:nth-of-type(3)::before{
background-image: url("../img/feuilles.svg");
background-size: 90px 100px;
background-repeat: no-repeat;
display: inline-block;
width: 100px;
height: 100px;
content: "";
padding-bottom: 1rem;
@media(max-width: 810px){
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
&:nth-of-type(4)::before{
background-image: url("../img/calendrier.svg");
background-size: 90px 100px;
background-repeat: no-repeat;
display: inline-block;
width: 100px;
height: 100px;
content: "";
padding-bottom: 1rem;
@media(max-width: 810px){
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
&:nth-of-type(5)::before{
background-image: url("../img/crayons.svg");
background-size: 60px 100px;
background-repeat: no-repeat;
display: inline-block;
width: 100px;
height: 100px;
content: "";
padding-bottom: 1rem;
@media(max-width: 810px){
width: 50px;
height: 50px;
background-size: 50px 50px;
}
}
}
}
}
}
// /////////
// &:nth-of-type(1)::before{
// background-image: url("../img/ampoule.svg");
// background-size: 90px 100px;
// background-repeat: no-repeat;
// display: inline-block;
// width: 100px;
// height: 100px;
// content: "";
// padding-bottom: 1rem;
// @media(max-width: 810px){
// width: 50px;
// height: 50px;
// background-size: 50px 50px;
// }
// }
// &:nth-of-type(2)::before{
// background-image: url("../img/bonhome.svg");
// background-size: 90px 100px;
// background-repeat: no-repeat;
// display: inline-block;
// width: 100px;
// height: 100px;
// content: "";
// padding-bottom: 1rem;
// @media(max-width: 810px){
// width: 50px;
// height: 50px;
// background-size: 50px 50px;
// }
// }
// &:nth-of-type(3)::before{
// background-image: url("../img/feuilles.svg");
// background-size: 90px 100px;
// background-repeat: no-repeat;
// display: inline-block;
// width: 100px;
// height: 100px;
// content: "";
// padding-bottom: 1rem;
// @media(max-width: 810px){
// width: 50px;
// height: 50px;
// background-size: 50px 50px;
// }
// }
// &:nth-of-type(4)::before{
// background-image: url("../img/calendrier.svg");
// background-size: 90px 100px;
// background-repeat: no-repeat;
// display: inline-block;
// width: 100px;
// height: 100px;
// content: "";
// padding-bottom: 1rem;
// @media(max-width: 810px){
// width: 50px;
// height: 50px;
// background-size: 50px 50px;
// }
// }
// &:nth-of-type(5)::before{
// background-image: url("../img/crayons.svg");
// background-size: 60px 100px;
// background-repeat: no-repeat;
// display: inline-block;
// width: 100px;
// height: 100px;
// content: "";
// padding-bottom: 1rem;
// @media(max-width: 810px){
// width: 50px;
// height: 50px;
// background-size: 50px 50px;
// }
// }
// }
// }
// }
// }
#paragraph-id--6{ /////// quartier 2030
@@ -610,8 +718,8 @@
}
}
}
.paragraph--type--static-parts:not(#paragraph-id--7){
#svg1{
display: none;