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

vm css

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-07-14 23:13:27 +02:00
parent 10150c3ca1
commit 0db3a90e5c
8 changed files with 141 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js
View File

@@ -7,7 +7,10 @@ document.addEventListener('scroll', function() {
background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';
});
// Sélectionnez l'élément SVG
//ANimation Pilliers
const svg = document.querySelector('#paragraph-id--7 .pilliers-animes');
// Configuration de l'observateur d'intersection

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

@@ -312,7 +312,7 @@
// Calculate the offset for the transform
const offset = currentSlide * -70 / visibleSlides;
const offsetmobile = currentSlide * -130 / visibleSlides;
const offsetmobile = currentSlide * -100 / visibleSlides;
if (window.innerWidth <= 600){
document.querySelector('.__timeline-content').style.transform = `translateX(${offsetmobile}%)`;
} else {

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

@@ -22,7 +22,7 @@
article.node-type-static{
padding-top: 6rem;
@media(max-width: 810px){
padding-top: 4rem;
padding-top: 2rem;
}
.field_title{
@@ -37,6 +37,7 @@
position: relative;
@media(max-width: 1090px){
flex-direction: column;
width: 90%;
}
> p:nth-child(1){
margin-bottom: 0;
@@ -131,8 +132,8 @@
height: 100px;
content: "";
padding-bottom: 1rem;
@media(max-width: 500px){
width: 50px;
@media(max-width: 810px){
// width: 50px;
height: 50px;
background-size: 50px 50px;
}
@@ -146,8 +147,8 @@
height: 100px;
content: "";
padding-bottom: 1rem;
@media(max-width: 500px){
width: 50px;
@media(max-width: 810px){
// width: 50px;
height: 50px;
background-size: 50px 50px;
}
@@ -161,8 +162,8 @@
height: 100px;
content: "";
padding-bottom: 1rem;
@media(max-width: 500px){
width: 50px;
@media(max-width: 810px){
// width: 50px;
height: 50px;
background-size: 50px 50px;
}
@@ -177,8 +178,8 @@
height: 100px;
content: "";
padding-bottom: 1rem;
@media(max-width: 500px){
width: 50px;
@media(max-width: 810px){
// width: 50px;
height: 50px;
background-size: 50px 50px;
}
@@ -192,8 +193,8 @@
height: 100px;
content: "";
padding-bottom: 1rem;
@media(max-width: 500px){
width: 50px;
@media(max-width: 810px){
// width: 50px;
height: 50px;
background-size: 50px 50px;
}
@@ -265,7 +266,7 @@
height: 100px;
content: "";
padding-bottom: 1rem;
@media(max-width: 500px){
@media(max-width: 810px){
width: 50px;
height: 50px;
background-size: 50px 50px;
@@ -280,7 +281,7 @@
height: 100px;
content: "";
padding-bottom: 1rem;
@media(max-width: 500px){
@media(max-width: 810px){
width: 50px;
height: 50px;
background-size: 50px 50px;
@@ -295,7 +296,7 @@
height: 100px;
content: "";
padding-bottom: 1rem;
@media(max-width: 500px){
@media(max-width: 810px){
width: 50px;
height: 50px;
background-size: 50px 50px;
@@ -310,7 +311,7 @@
height: 100px;
content: "";
padding-bottom: 1rem;
@media(max-width: 500px){
@media(max-width: 810px){
width: 50px;
height: 50px;
background-size: 50px 50px;
@@ -325,7 +326,7 @@
height: 100px;
content: "";
padding-bottom: 1rem;
@media(max-width: 500px){
@media(max-width: 810px){
width: 50px;
height: 50px;
background-size: 50px 50px;
@@ -344,37 +345,14 @@
align-items: center;
padding-bottom: 2rem;
position: relative;
// &::before{
// content: url('../img/formes-animees-4.svg');
// display: block;
// position: absolute;
// z-index: 5;
// left: 10%;
// top: -6rem;
// @media(max-width: 810px){
// display: none;
// }
// }
// &::after{
// content: url('../img/formes-animees-5.svg');
// display: block;
// position: absolute;
// z-index: 5;
// right: 15%;
// top: 3rem;
// @media(max-width: 810px){
// display: none;
// }
// }
@media(max-width: 500px){
@media(max-width: 810px){
width: 90%;
text-align: center;
}
.field_field_title{
padding-top: 3rem;
padding-bottom: 2rem;
@media(max-width: 500px){
@media(max-width: 810px){
padding-top: 0;
}
@@ -382,7 +360,7 @@
.field_field_texte{
width: 50%;
margin: auto;
@media(max-width: 500px){
@media(max-width: 810px){
width: 90%;
}
.colone-picto{
@@ -398,7 +376,7 @@
font-size: 0.8rem;
align-self: center;
padding-top: 1.5rem;
@media(max-width: 500px){
@media(max-width: 810px){
width: 80%;
padding-top: 0;
}
@@ -432,11 +410,12 @@
font-size: 1.8rem;
@media(max-width: 550px){
width: 90%;
padding-top: 2rem;
}
}
.field_field_texte{
width: 80%;
@media(max-width: 700px){
@media(max-width: 820px){
position: relative;
top: -80px;
}
@@ -446,11 +425,14 @@
display: grid;
grid-template-columns: repeat(6 auto);
grid-template-rows: repeat(3 auto);
@media(max-width: 700px){
@media(max-width: 820px){
grid-template-rows: repeat(10 auto);
grid-template-columns: repeat(2 1fr);
padding-left: 0;
}
@media(max-width: 1090px){
padding-left: 0;
}
h5{
font-size: 5rem;
@@ -469,7 +451,7 @@
grid-column: 3;
position: relative;
top: -70px;
@media(max-width: 700px){
@media(max-width: 820px){
grid-row: 4;
grid-column: 2;
margin: auto;
@@ -480,7 +462,7 @@
h5:nth-of-type(3){
grid-row: 1;
grid-column: 5;
@media(max-width: 700px){
@media(max-width: 820px){
grid-row: 8;
grid-column: 1;
padding-left: 1rem;
@@ -493,7 +475,7 @@
&:not(:last-of-type){
padding-right: 2rem;
}
@media(max-width: 700px){
@media(max-width: 820px){
font-size: 1.2rem;
}
}
@@ -501,11 +483,14 @@
grid-row: 1 /span 2;
grid-column: 1 /span 2;
padding: 1rem;
@media(max-width: 700px){
@media(max-width: 820px){
width: 230px;
top: 50px;
position: relative;
}
@media(max-width: 1090px){
width: 270px;
}
}
svg:nth-of-type(2){
@@ -515,7 +500,7 @@
padding-left: 0;
position: relative;
top: -70px;
@media(max-width: 700px){
@media(max-width: 820px){
grid-row: 4;
grid-column: 1 /span 2 ;
width: 230px;
@@ -523,8 +508,9 @@
top: -10px;
}
@media(max-width: 1090px){
width: 270px;
}
}
svg:nth-of-type(3){
grid-row: 1 /span 2;
@@ -533,7 +519,7 @@
padding-left: 0;
position: relative;
left: -0.5rem;
@media(max-width: 700px){
@media(max-width: 820px){
grid-row: 8 ;
grid-column: 1 /span 2;
width: 230px;
@@ -542,19 +528,25 @@
padding-left: 1rem;
position: relative;
}
@media(max-width: 1090px){
width: 270px;
}
}
p:nth-of-type(1){
grid-row: 3;
grid-column: 1 /span 2;
padding-left: 1rem;
@media(max-width: 820px){
padding: 1rem;
}
}
p:nth-of-type(2){
display: block;
grid-row: 1;
height: fit-content;
padding-top: 0%;
@media(max-width: 700px){
@media(max-width: 820px){
grid-row: 7;
grid-column: 1 /span 2;
padding: 1rem;
@@ -564,18 +556,24 @@
}
p:nth-of-type(3){
grid-row: 3;
grid-column: 5;
@media(max-width: 700px){
grid-column: 5 /span 6;
@media(max-width: 820px){
grid-row: 9;
grid-column: 1 /span 2;
padding-left: 1rem;
top: -80px;
position: relative;
}
@media(max-width: 1090px){
}
}
}
}
}
/////////////////animation pilliers //////////////
#paragraph-id--7 .colone-picto svg #pillier-1-path365{
stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */

13
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/formes-animees.scss
View File

@@ -1,4 +1,5 @@
#home{
#background-animated {
position: absolute;
top: 1000px;
@@ -7,16 +8,20 @@
height: 100%;
pointer-events: none; /* Permet de cliquer à travers l'élément */
z-index: 5; /* S'assure que l'élément soit au-dessus */
@media(max-width: 810px){
top: 1820px;
@media(max-width: 1400px){
display: none;
}
svg{
max-width: 100%;
position: relative;
top: -1500px;
}
}
}
// .not-visible{
// @media (max-width:1100px) {
// display: none;
// }
// }
.layout-content {
position: relative;

7
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
View File

@@ -128,7 +128,8 @@ header{
margin: 0;
@media(max-width: 810px){
top: calc($header-height-pad / 4 );
padding-left: 15%;
align-items: center;
margin: 1rem;
}
li{
@media(max-width: 1090px){
@@ -145,8 +146,8 @@ header{
@media(max-width: 500px){
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 0.6rem;
align-items: center;
font-size: 0.9rem;
}
}

3
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
View File

@@ -89,6 +89,9 @@
border-radius: 50%;
background: black;
}
@media(max-width:810px){
width: 100vw;
}
.paragraph--type--phase-deroulement{
position: absolute;