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

slick calendrier

This commit is contained in:
ouidade 2024-09-26 13:40:57 +02:00
parent d6b2bc3d10
commit cbfd54cd9b
11 changed files with 642 additions and 485 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

175
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -1119,8 +1119,6 @@ footer {
display: none; display: none;
} }
/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#home * { #home * {
box-sizing: border-box; box-sizing: border-box;
} }
@ -1143,145 +1141,67 @@ footer {
padding-top: 4rem; padding-top: 4rem;
font-size: 1.7rem; font-size: 1.7rem;
} }
#home .timeline { #home .__container-deroulement .config_pages--type--deroulement {
display: flex; height: 550px;
flex-direction: column; margin-top: 4.5rem;
white-space: nowrap; }
overflow: hidden; #home .__container-deroulement .config_pages--type--deroulement .field_field_phase {
height: 100%;
}
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline {
height: 100%;
}
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content {
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 3rem;
height: 800px;
} }
@media (max-width: 1090px) { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track {
#home .timeline { height: 350px;
overflow: scroll;
height: 600px;
}
} }
#home .timeline .__timeline-arrows { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement {
width: fit-content;
margin: auto;
margin-top: 0;
margin-bottom: 4rem;
padding-bottom: 2rem;
}
@media (max-width: 1090px) {
#home .timeline .__timeline-arrows {
margin-bottom: 9rem;
}
}
#home .timeline .__timeline-arrows button {
background-color: transparent;
border: none;
padding-left: 1rem;
}
#home .timeline .__timeline-arrows button:hover {
opacity: 0.5;
}
@media (max-width: 1090px) {
#home .timeline .__timeline-arrows button svg {
padding: 0.5rem;
}
}
#home .timeline .__timeline-content {
width: fit-content;
padding-top: 7rem;
padding-bottom: 2rem;
padding-left: 3rem;
transition: all 1s;
}
#home .timeline .__timeline-content .__paragraphs {
position: relative;
display: inline-flex;
width: 600px;
height: 1px;
background: black;
}
#home .timeline .__timeline-content .__paragraphs:not(:first-child) {
margin-left: 14px;
}
#home .timeline .__timeline-content .__paragraphs::after {
content: "";
position: absolute;
top: 50%;
left: -18px;
bottom: 0;
width: 17px;
height: 17px;
transform: translateY(-50%);
border-radius: 50%;
background: black;
}
@media (max-width: 810px) {
#home .timeline .__timeline-content .__paragraphs {
width: 100vw;
}
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
position: absolute; align-items: center;
padding-right: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
left: -18px; border-bottom: solid black 1px;
top: -16px;
transform: translateY(-100%);
width: 600px;
height: 300px;
font-size: 1rem;
white-space: normal;
color: black;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .slick-list { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement:before {
padding: 0 !important; content: ".";
width: 100%; font-size: 4rem;
position: absolute;
top: 216px;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .slick-list .slick-track { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date {
width: 100% !important;
}
@media (max-width: 550px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement {
padding-left: 0rem;
width: 240px;
align-items: end;
height: 200px;
}
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date {
width: fit-content !important; width: fit-content !important;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: auto;
margin-left: 0;
margin-right: 0;
align-items: flex-start;
padding-right: 1rem; padding-right: 1rem;
margin-bottom: 1rem;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_jour { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .field_field_date_de_jour {
font-size: 2.5rem; font-size: 2.5rem;
line-height: 0.3rem; line-height: 0.3rem;
} }
@media (max-width: 550px) { @media (max-width: 550px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_jour { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .field_field_date_de_jour {
font-size: 3rem; font-size: 3rem;
line-height: 1.3rem; line-height: 1.3rem;
} }
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .field_field_date_de_moi {
padding-right: 0.2rem; padding-right: 0.2rem;
text-transform: uppercase; text-transform: uppercase;
font-size: 4rem; font-size: 4rem;
display: inline-flex; display: inline-flex;
} }
@media (max-width: 550px) { @media (max-width: 550px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .field_field_date_de_moi {
font-size: 4rem; font-size: 4rem;
} }
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi .after::after { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .field_field_date_de_moi .after::after {
content: "."; content: ".";
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .annee {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 0.6rem; font-size: 0.6rem;
@ -1289,71 +1209,72 @@ footer {
top: -10px; top: -10px;
} }
@media (max-width: 1090px) { @media (max-width: 1090px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .annee {
font-size: 1.2rem; font-size: 1.2rem;
} }
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee::after { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee::after {
content: url("../img/noun-arrow-to-right-black.svg"); content: url("../img/noun-arrow-to-right-black.svg");
display: flex; display: flex;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee.only { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee.only {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee.only::after { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee.only::after {
content: ""; content: "";
display: flex; display: flex;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .date2 { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .annee .date2 {
display: inline-flex; display: inline-flex;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .date2 .field_field_date_a_jour { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .annee .date2 .field_field_date_a_jour {
padding-right: 0.2rem; padding-right: 0.2rem;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .date2 .field_field_date_a_moi { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .annee .date2 .field_field_date_a_moi {
padding-right: 0.2rem; padding-right: 0.2rem;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .text {
border: solid rgb(7, 50, 194) 1px; border: solid rgb(7, 50, 194) 1px;
border-radius: 5%; border-radius: 5%;
padding: 0.6rem 0.6rem; padding: 0.6rem 0.6rem;
line-height: 1.1; line-height: 1.1;
width: 41%; width: 41%;
min-width: 35%; min-width: 35%;
height: 300px;
} }
@media (max-width: 1090px) { @media (max-width: 1090px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .text {
height: 200px; height: 200px;
min-width: 80%; min-width: 80%;
} }
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .text .field_field_titre {
font-size: 0.6rem; font-size: 0.7rem;
font-family: "gilroy-semibold"; font-family: "gilroy-semibold";
} }
@media (max-width: 1090px) { @media (max-width: 1090px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .text .field_field_titre {
font-size: 1rem; font-size: 1rem;
} }
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .text .field_field_description {
font-family: "gilroy-regular"; font-family: "gilroy-regular";
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description p { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .text .field_field_description p {
font-size: 0.6rem !important; font-size: 0.7rem !important;
margin: 0; margin: 0;
} }
@media (max-width: 1090px) { @media (max-width: 1090px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description p { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .text .field_field_description p {
font-size: 1rem !important; font-size: 1rem !important;
} }
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description .field--label-above { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .text .field_field_description .field--label-above {
display: none; display: none;
} }

191
web/themes/custom/quartiers_de_demain/dist/assets/img/carte-qdd-avec-points.svg vendored Normal file
View File

@ -0,0 +1,191 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="160.57019mm"
height="171.90887mm"
viewBox="0 0 160.57019 171.90887"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath88">
<path
d="M 0,0 H 438.71561 V -470.27432 H 0 Z"
transform="matrix(1.3333333,0,0,-1.3333333,543.93475,1857.6088)"
clip-rule="evenodd"
id="path88" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath84">
<path
d="M 0,-470.27432 H 1260 V 470.27432 H 0 Z"
transform="translate(-407.036,-85.659762)"
id="path84" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath85">
<path
d="M 0,-470.27432 H 1260 V 470.27432 H 0 Z"
transform="translate(-2.5000001e-6,-470.27432)"
id="path85" />
</clipPath>
</defs>
<g
id="layer1"
transform="translate(-25.237685,-27.066503)">
<rect
style="fill:#b3b3b3;stroke:#f50029;stroke-width:0;paint-order:fill markers stroke"
id="rect1"
width="160.57019"
height="171.90887"
x="25.237686"
y="27.066502" />
<g
id="g87"
clip-path="url(#clipPath88)"
transform="matrix(0.26458333,0,0,0.26458333,-117.12499,-462.76799)">
<path
d="M 22.94948,0 24.34889,-18.0149 0,-25.72302 5.65439,-72.56693 20.36713,-85.65977 31.67962,-51.59929 30.80613,-4.91625 Z"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1.3333333,0,0,-1.3333333,1086.6494,2370.4282)"
clip-path="url(#clipPath84)"
id="path86" />
<path
d="M 213.91022,-8.56159 245.88833,0 c 0,0 58.73522,-78.05274 188.63529,-102.77609 0,0 -13.72994,-23.9062 -20.7684,-68.77233 l -46.76509,-59.13289 22.59883,4.10628 9.98215,-59.15478 -15.22238,-6.69194 c 0,0 21.10627,-42.02694 33.11738,-51.15904 l -49.61728,-51.89156 c 0,0 -54.37257,40.3184 -83.08495,23.05862 -26.13166,-16.38332 -20.26669,-47.73592 -20.26669,-47.73592 l -84.48157,7.5286 -73.42912,23.87167 c 0,0 13.68285,68.86637 13.5616,120.85908 l 13.70164,-16.03089 -8.31311,25.90453 c -7.71795,24.04996 -30.44003,42.76792 -30.59939,44.58536 -3.6948,42.13802 -38.37183,51.8082 -82.82932,56.0101 L 0,-120.94655 l 48.38804,11.38921 63.90371,-13.15789 c 0,0 -1.62874,19.5427 -17.78042,51.54499 l 20.25382,7.61331 c 0,0 16.51357,-27.83033 25.80184,-26.51089 4.8781,0.69253 23.95695,21.70897 32.12568,26.76126 7.32295,4.5292 35.79484,10.58956 36.55389,13.534 2.94469,10.87069 4.66366,41.21097 4.66366,41.21097 z"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1.3333333,0,0,-1.3333333,543.93475,1857.6088)"
clip-path="url(#clipPath85)"
id="path87" />
</g>
<path
id="path89"
d="m 141.42707,58.038178 c 2.54231,0 4.60352,-2.063358 4.60352,-4.608992 0,-2.545337 -2.06121,-4.608692 -4.60352,-4.608692 -2.54231,0 -4.60351,2.063355 -4.60351,4.608692 0,2.545634 2.0612,4.608992 4.60351,4.608992 z"
style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path90"
d="m 141.42704,51.407326 v 4.045331"
style="fill:none;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path91"
d="m 139.40669,53.429218 h 4.04052"
style="fill:none;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path92"
d="m 114.16196,75.650697 c 2.54231,0 4.60352,-2.063358 4.60352,-4.608992 0,-2.545337 -2.06121,-4.608692 -4.60352,-4.608692 -2.54231,0 -4.60351,2.063355 -4.60351,4.608692 0,2.545634 2.0612,4.608992 4.60351,4.608992 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path93"
d="m 114.16193,69.019844 v 4.045331"
style="fill:none;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path94"
d="m 112.14158,71.041737 h 4.04052"
style="fill:none;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
onmouseover="" />
<path
id="path92-1"
d="m 112.82019,38.104154 c 2.54231,0 4.60352,-2.063358 4.60352,-4.608992 0,-2.545337 -2.06121,-4.608692 -4.60352,-4.608692 -2.54231,0 -4.60351,2.063355 -4.60351,4.608692 0,2.545634 2.0612,4.608992 4.60351,4.608992 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path93-2"
d="m 112.82016,31.473301 v 4.045331"
style="fill:none;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path94-7"
d="m 110.79981,33.495194 h 4.04052"
style="fill:none;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
onmouseover="" />
<path
id="path92-6"
d="m 171.98291,87.5186 c 2.54231,0 4.60352,-2.06336 4.60352,-4.60899 0,-2.545338 -2.06121,-4.608693 -4.60352,-4.608693 -2.54231,0 -4.60351,2.063355 -4.60351,4.608693 0,2.54563 2.0612,4.60899 4.60351,4.60899 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path93-0"
d="M 171.98288,80.887748 V 84.93308"
style="fill:none;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path94-6"
d="m 169.96253,82.90964 h 4.04052"
style="fill:none;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
onmouseover="" />
<path
id="path95"
d="m 76.380105,65.10721 c 2.54231,0 4.60352,-2.063358 4.60352,-4.608992 0,-2.545337 -2.06121,-4.608692 -4.60352,-4.608692 -2.54231,0 -4.60351,2.063355 -4.60351,4.608692 0,2.545634 2.0612,4.608992 4.60351,4.608992 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path96"
d="m 76.380085,58.476357 v 4.045331"
style="fill:none;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path97"
d="m 74.359725,60.49825 h 4.04052"
style="fill:none;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path98"
d="m 85.343635,85.361249 c 2.54231,0 4.60352,-2.063358 4.60352,-4.608992 0,-2.545337 -2.06121,-4.608692 -4.60352,-4.608692 -2.54231,0 -4.60351,2.063355 -4.60351,4.608692 0,2.545634 2.0612,4.608992 4.60351,4.608992 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path99"
d="m 85.343615,78.730396 v 4.045331"
style="fill:none;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path100"
d="m 83.323255,80.752289 h 4.04052"
style="fill:none;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path101"
d="m 76.030555,143.13159 c 2.54231,0 4.60352,-2.06336 4.60352,-4.60899 0,-2.54534 -2.06121,-4.60869 -4.60352,-4.60869 -2.54231,0 -4.60351,2.06335 -4.60351,4.60869 0,2.54563 2.0612,4.60899 4.60351,4.60899 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path102"
d="m 76.030525,136.50074 v 4.04533"
style="fill:none;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path103"
d="m 74.010175,138.52263 h 4.04052"
style="fill:none;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path104"
d="m 123.48097,159.75377 c 2.54231,0 4.60352,-2.06335 4.60352,-4.60899 0,-2.54534 -2.06121,-4.60869 -4.60352,-4.60869 -2.54231,0 -4.60351,2.06335 -4.60351,4.60869 0,2.54564 2.0612,4.60899 4.60351,4.60899 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path105"
d="m 123.48095,153.12292 v 4.04533"
style="fill:none;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path106"
d="m 121.4606,155.14479 h 4.04052"
style="fill:none;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path107"
d="m 148.93452,166.64347 c 2.54231,0 4.60352,-2.06335 4.60352,-4.60899 0,-2.54534 -2.06121,-4.60869 -4.60352,-4.60869 -2.54231,0 -4.60351,2.06335 -4.60351,4.60869 0,2.54564 2.0612,4.60899 4.60351,4.60899 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path108"
d="m 148.93448,160.01262 v 4.04533"
style="fill:none;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path109"
d="m 146.91414,162.03448 h 4.04052"
style="fill:none;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path110"
d="m 153.88746,157.38191 c 2.54231,0 4.60352,-2.06335 4.60352,-4.60899 0,-2.54534 -2.06121,-4.60869 -4.60352,-4.60869 -2.54231,0 -4.60351,2.06335 -4.60351,4.60869 0,2.54564 2.0612,4.60899 4.60351,4.60899 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path111"
d="m 153.88743,150.75106 v 4.04533"
style="fill:none;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path112"
d="m 151.8671,152.77293 h 4.04052"
style="fill:none;stroke:#ffffff;stroke-width:0.699283;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

64
web/themes/custom/quartiers_de_demain/dist/assets/img/carte-qdd-vierge.svg vendored Normal file
View File

@ -0,0 +1,64 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="154.7691mm"
height="165.90233mm"
viewBox="0 0 154.7691 165.90233"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath88">
<path
d="M 0,0 H 438.71561 V -470.27432 H 0 Z"
transform="matrix(1.3333333,0,0,-1.3333333,543.93475,1857.6088)"
clip-rule="evenodd"
id="path88" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath84">
<path
d="M 0,-470.27432 H 1260 V 470.27432 H 0 Z"
transform="translate(-407.036,-85.659762)"
id="path84" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath85">
<path
d="M 0,-470.27432 H 1260 V 470.27432 H 0 Z"
transform="translate(-2.5000001e-6,-470.27432)"
id="path85" />
</clipPath>
</defs>
<g
id="layer1"
transform="translate(-22.815678,-21.746124)">
<g
id="g448"
transform="matrix(0.26458333,0,0,0.26458333,-121.10039,-469.7462)">
<g
id="g87"
clip-path="url(#clipPath88)">
<path
d="M 22.94948,0 24.34889,-18.0149 0,-25.72302 5.65439,-72.56693 20.36713,-85.65977 31.67962,-51.59929 30.80613,-4.91625 Z"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1.3333333,0,0,-1.3333333,1086.6494,2370.4282)"
clip-path="url(#clipPath84)"
id="path86" />
<path
d="M 213.91022,-8.56159 245.88833,0 c 0,0 58.73522,-78.05274 188.63529,-102.77609 0,0 -13.72994,-23.9062 -20.7684,-68.77233 l -46.76509,-59.13289 22.59883,4.10628 9.98215,-59.15478 -15.22238,-6.69194 c 0,0 21.10627,-42.02694 33.11738,-51.15904 l -49.61728,-51.89156 c 0,0 -54.37257,40.3184 -83.08495,23.05862 -26.13166,-16.38332 -20.26669,-47.73592 -20.26669,-47.73592 l -84.48157,7.5286 -73.42912,23.87167 c 0,0 13.68285,68.86637 13.5616,120.85908 l 13.70164,-16.03089 -8.31311,25.90453 c -7.71795,24.04996 -30.44003,42.76792 -30.59939,44.58536 -3.6948,42.13802 -38.37183,51.8082 -82.82932,56.0101 L 0,-120.94655 l 48.38804,11.38921 63.90371,-13.15789 c 0,0 -1.62874,19.5427 -17.78042,51.54499 l 20.25382,7.61331 c 0,0 16.51357,-27.83033 25.80184,-26.51089 4.8781,0.69253 23.95695,21.70897 32.12568,26.76126 7.32295,4.5292 35.79484,10.58956 36.55389,13.534 2.94469,10.87069 4.66366,41.21097 4.66366,41.21097 z"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1.3333333,0,0,-1.3333333,543.93475,1857.6088)"
clip-path="url(#clipPath85)"
id="path87" />
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

55
web/themes/custom/quartiers_de_demain/dist/assets/img/carte-qdd.svg vendored Normal file
View File

@ -0,0 +1,55 @@
<!-- Image Map Generated by https://www.fla-shop.com/image-map/ -->
<svg style="width:100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 585 627">
<style>
.image-mapper-shape {
fill: rgba(0, 0, 0, 0);
}
g:hover .image-mapper-shape {
stroke: white;
stroke-width: 2px;
opacity: 20%;
}
</style>
<image xlink:href="carte-qdd-avec-points.svg" style="width: 585px;"></image>
<a xlink:href="#" target="---" xlink:title="">
<g>
<circle cx="223" cy="196" r="26.92582403567252" class="image-mapper-shape" data-index="1"></circle>
</g>
</a>
<a xlink:href="#" target="_self" xlink:title="Test 1">
<g>
<circle cx="185" cy="121" r="26.570660511172846" class="image-mapper-shape" data-index="2"></circle>
</g>
</a>
<a xlink:href="#" target="_self" xlink:title="test 2">
<g>
<circle cx="330" cy="158" r="24.08318915758459" class="image-mapper-shape" data-index="3"></circle>
</g>
</a>
<a xlink:href="#https://stage.quartiersdedemain.figli.io/sites/clone-colmar-test" target="_self" xlink:title="Sedan, Quartier du Lac">
<g>
<circle cx="433" cy="94" r="25.495097567963924" class="image-mapper-shape" data-index="4"></circle>
</g>
</a>
<a xlink:href="#" target="---" xlink:title="">
<g>
<circle cx="477" cy="464" r="24.20743687382041" class="image-mapper-shape" data-index="5"></circle>
</g>
</a>
<a xlink:href="#" target="---" xlink:title="">
<g>
<circle cx="458" cy="508" r="24.73863375370596" class="image-mapper-shape" data-index="6"></circle>
</g>
</a>
<a xlink:href="#" target="---" xlink:title="">
<g>
<circle cx="367" cy="478" r="22.67156809750927" class="image-mapper-shape" data-index="7"></circle>
</g>
</a>
<a xlink:href="#" target="---" xlink:title="">
<g>
<circle cx="183" cy="415" r="24.331050121192877" class="image-mapper-shape" data-index="8"></circle>
</g>
</a>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

16
web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg vendored
View File

@ -5,8 +5,8 @@
version="1.1" version="1.1"
id="svg1" id="svg1"
width="1440.5675" width="1440.5675"
height="6329.9683" height="6585.9683"
viewBox="0 0 1440.5675 6329.9684" viewBox="0 0 1440.5675 6585.9684"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<defs <defs
@ -46,7 +46,7 @@
</defs> </defs>
<g <g
id="g3" id="g3"
transform="translate(-509.36304,-2445.5661)"> transform="translate(-509.36305,-2445.5661)">
<g <g
id="g2"> id="g2">
<g <g
@ -54,7 +54,7 @@
transform="translate(0.17944336,-2.9196463)"> transform="translate(0.17944336,-2.9196463)">
<path <path
id="path148" id="path148"
d="m 1544.4558,7857.9597 194.3574,-163.0856" d="m 1544.4558,8077.9597 194.3574,-163.0856"
style="fill:none;stroke:#0833c2;stroke-width:64.3111;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> style="fill:none;stroke:#0833c2;stroke-width:64.3111;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path <path
id="path151" id="path151"
@ -64,7 +64,7 @@
id="path254" id="path254"
d="M 0,0 C 0,205.098 -166.265,371.361 -371.362,371.361" d="M 0,0 C 0,205.098 -166.265,371.361 -371.362,371.361"
style="fill:none;stroke:#000000;stroke-width:137.482;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" style="fill:none;stroke:#000000;stroke-width:137.482;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(0.91872984,0,0,-0.91872984,1649.0098,8778.4538)" transform="matrix(0.91872984,0,0,-0.91872984,1649.0098,9034.4538)"
clip-path="url(#clipPath255)" /> clip-path="url(#clipPath255)" />
<path <path
id="path256" id="path256"
@ -80,17 +80,17 @@
id="path300" id="path300"
d="M 0,0 C 0,-126.805 102.795,-229.6 229.6,-229.6" d="M 0,0 C 0,-126.805 102.795,-229.6 229.6,-229.6"
style="fill:none;stroke:#f7002b;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" style="fill:none;stroke:#f7002b;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(0.91872984,0,0,-0.91872984,1738.8107,4535.9014)" transform="matrix(0.91872984,0,0,-0.91872984,1738.8107,4755.9014)"
clip-path="url(#clipPath301)" /> clip-path="url(#clipPath301)" />
<path <path
id="path302" id="path302"
d="M 0,0 C 0,126.805 -102.795,229.6 -229.6,229.6" d="M 0,0 C 0,126.805 -102.795,229.6 -229.6,229.6"
style="fill:none;stroke:#0833c2;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" style="fill:none;stroke:#0833c2;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(0.91872984,0,0,-0.91872984,1874.1866,6026.5711)" transform="matrix(0.91872984,0,0,-0.91872984,1874.1866,6246.5711)"
clip-path="url(#clipPath303)" /> clip-path="url(#clipPath303)" />
<path <path
id="path311" id="path311"
d="M 552.65311,5827.771 V 5567.7705" d="M 552.65311,6047.771 V 5787.7705"
style="fill:none;stroke:#000000;stroke-width:78.092;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> style="fill:none;stroke:#000000;stroke-width:78.092;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g> </g>
</g> </g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

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

@ -286,84 +286,84 @@
//////////////////////// end script smooth apparition des textes ///////////////// //////////////////////// end script smooth apparition des textes /////////////////
//////////////////// start Timeline script /////////////////////// // //////////////////// start Timeline script ///////////////////////
document.addEventListener('DOMContentLoaded', function() { // // document.addEventListener('DOMContentLoaded', function() {
let currentSlide = 0; // // let currentSlide = 0;
//// responsive /// // // //// responsive ///
function getVisibleSlides() { // // function getVisibleSlides() {
if (window.innerWidth <= 600) { // // if (window.innerWidth <= 600) {
return 1; // Show 1 slide on small screens // // return 1; // Show 1 slide on small screens
} else if (window.innerWidth <= 900) { // // } else if (window.innerWidth <= 900) {
return 4; // Show 4 slides on medium screens // // return 4; // Show 4 slides on medium screens
} else { // // } else {
return 4; // Show 4 slides on large screens // // return 4; // Show 4 slides on large screens
} // // }
} // // }
function showSlides(index) { // // function showSlides(index) {
const slides = document.querySelectorAll('.__paragraphs'); // // const slides = document.querySelectorAll('.__paragraphs');
const totalSlides = slides.length; // // const totalSlides = slides.length;
const visibleSlides = getVisibleSlides(); // // const visibleSlides = getVisibleSlides();
const maxSlide = totalSlides - visibleSlides; // // const maxSlide = totalSlides - visibleSlides;
// Adjust the index to ensure it loops // // // Adjust the index to ensure it loops
if (index > maxSlide) { // // if (index > maxSlide) {
currentSlide = 0; // Go back to the first slide // // currentSlide = 0; // Go back to the first slide
} else if (index < 0) { // // } else if (index < 0) {
currentSlide = maxSlide; // Go to the last slide // // currentSlide = maxSlide; // Go to the last slide
} else { // // } else {
currentSlide = index; // // currentSlide = index;
} // // }
// Calculate the offset for the transform // // // Calculate the offset for the transform
const offset = currentSlide * -50 / visibleSlides; // // const offset = currentSlide * -50 / visibleSlides;
const offsetmobile = currentSlide * -10 / visibleSlides; // // const offsetmobile = currentSlide * -10 / visibleSlides;
let timeline = document.querySelector('.__timeline-content'); // // let timeline = document.querySelector('.__timeline-content');
if (timeline) { // // if (timeline) {
if (window.innerWidth <= 600){ // // if (window.innerWidth <= 600){
timeline.style.transform = `translateX(${offsetmobile}%)`; // // timeline.style.transform = `translateX(${offsetmobile}%)`;
} else { // // } else {
timeline.style.transform = `translateX(${offset}%)`; // // timeline.style.transform = `translateX(${offset}%)`;
} // // }
} // // }
// Enable/disable arrows based on the current slide // // // Enable/disable arrows based on the current slide
// document.getElementById('arrowPrev').disabled = false; // Always enabled now // // // document.getElementById('arrowPrev').disabled = false; // Always enabled now
// document.getElementById('arrowNext').disabled = false; // Always enabled now // // // document.getElementById('arrowNext').disabled = false; // Always enabled now
// Attach event listeners // // // Attach event listeners
let arrowprev = document.getElementById('arrowPrev'); // // let arrowprev = document.getElementById('arrowPrev');
if (arrowprev) { // // if (arrowprev) {
arrowprev.disabled = false; // Always enabled now // // arrowprev.disabled = false; // Always enabled now
} // // }
let arrownext = document.getElementById('arrowNext') // // let arrownext = document.getElementById('arrowNext')
if (arrownext) { // // if (arrownext) {
arrownext.disabled = false; // Always enabled now // // arrownext.disabled = false; // Always enabled now
} // // }
} // // }
// function prevSlide() { // // // function prevSlide() {
// showSlides(currentSlide - 1); // // // showSlides(currentSlide - 1);
// } // // // }
// function nextSlide() { // // // function nextSlide() {
// showSlides(currentSlide + 1); // // // showSlides(currentSlide + 1);
// } // // // }
// // Attach event listeners // // // // Attach event listeners
// document.getElementById('arrowPrev').addEventListener('click', prevSlide); // // // document.getElementById('arrowPrev').addEventListener('click', prevSlide);
// document.getElementById('arrowNext').addEventListener('click', nextSlide); // // // document.getElementById('arrowNext').addEventListener('click', nextSlide);
// Attach event listeners // // // Attach event listeners
let arrowprev = document.getElementById('arrowPrev'); // // let arrowprev = document.getElementById('arrowPrev');
if (arrowprev) { // // if (arrowprev) {
arrowprev.addEventListener('click', prevSlide); // // arrowprev.addEventListener('click', prevSlide);
} // // }
let arrownext = document.getElementById('arrowNext') // // let arrownext = document.getElementById('arrowNext')
if (arrownext) { // // if (arrownext) {
arrownext.addEventListener('click', nextSlide); // // arrownext.addEventListener('click', nextSlide);
} // // }
// Update month field to only show the first 3 letters // Update month field to only show the first 3 letters
@ -413,20 +413,55 @@
} }
}); });
// Configuration de l'observateur // // Configuration de l'observateur
const config = { childList: true, subtree: true }; // const config = { childList: true, subtree: true };
// Démarrer l'observateur sur le document entier ou sur un conteneur spécifique // // Démarrer l'observateur sur le document entier ou sur un conteneur spécifique
observer.observe(document.body, config); // observer.observe(document.body, config);
// Handle window resize // // // Handle window resize
window.addEventListener('resize', function() { // // window.addEventListener('resize', function() {
showSlides(currentSlide); // Recalculate the slides on resize // // showSlides(currentSlide); // Recalculate the slides on resize
}); // // });
// // // Initialize
// // showSlides(currentSlide);
// // });
// ////////////////////// start calendrier home /////////////////////////////////
$(document).ready(function(){
$('.__timeline-content').slick({
slidesToShow: 3,
// slidesToScroll: 1,
dots: false,
arrows: true,
centerMode: true,
adaptiveHeight: true,
autoplay: false,
draggable: true,
// autoplaySpeed: 1500,
infinite: true,
// centerPadding: '100px',
responsive: [
{
breakpoint: 810,
settings: {
slidesToShow: 1,
adaptiveHeight: false,
arrows: true,
draggable: true,
centerMode: true,
autoplay: false,
// autoplaySpeed: 2000,
}
}]
});
console.log('salut slick calendrier');
});
// ////////////////////// end calendrier home /////////////////////////////////
// Initialize
showSlides(currentSlide);
});
//////////////////////// end Timeline script ///////////////////////////////////////////// //////////////////////// end Timeline script /////////////////////////////////////////////
@ -506,39 +541,6 @@
////////////////////// end diaporama home swiper ///////////////////////////////// ////////////////////// end diaporama home swiper /////////////////////////////////
////////////////////// start calendrier home swiper /////////////////////////////////
$(document).ready(function(){
$('.paragraph--type--phase-deroulement').slick({
slidesToShow: 3,
// slidesToScroll: 1,
dots: false,
arrows: true,
centerMode: true,
adaptiveHeight: true,
autoplay: false,
draggable: true,
// autoplaySpeed: 1500,
// infinite: true,
// centerPadding: '100px',
responsive: [
{
breakpoint: 810,
settings: {
slidesToShow: 1,
adaptiveHeight: false,
arrows: true,
draggable: true,
centerMode: true,
autoplay: false,
// autoplaySpeed: 2000,
}
}]
});
console.log('salut slick home');
});
////////////////////// end diaporama home swiper /////////////////////////////////

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

@ -1,6 +1,6 @@
/* TIMELINE // /* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */ // –––––––––––––––––––––––––––––––––––––––––––––––––– */
#home{ #home{
* { box-sizing: border-box; } * { box-sizing: border-box; }
@ -14,243 +14,164 @@
cursor:grab; cursor:grab;
} }
position: relative; position: relative;
h2{ h2{
width: fit-content;
margin: auto;
padding-top: 4rem;
font-size: 1.7rem;
}
}
.timeline {
display: flex;
flex-direction: column;
white-space: nowrap;
overflow: hidden;
padding-top: 2rem;
padding-bottom: 3rem;
height: 800px;
@media(max-width:1090px){
// padding-top: 14rem;
overflow: scroll;
height: 600px;
}
.__timeline-arrows{
width: fit-content; width: fit-content;
margin: auto; margin: auto;
margin-top: 0; padding-top: 4rem;
margin-bottom: 4rem; font-size: 1.7rem;
padding-bottom: 2rem;
@media(max-width:1090px){ }
// top: -211px; .config_pages--type--deroulement{
// display: none; height: 550px;
margin-bottom: 9rem; margin-top: 4.5rem;
} .field_field_phase{
button{ height: 100%;
background-color: transparent; .timeline{
border: none; height: 100%;
padding-left: 1rem; .__timeline-content{
&:hover{ padding-top: 2rem;
opacity: 0.5;
}
@media(max-width:1090px){
svg{
padding: 0.5rem;
}
}
}
}
.__timeline-content{
// font-size: 0;
// width: 100vw;
width: fit-content;
padding-top: 7rem;
padding-bottom: 2rem;
padding-left: 3rem;
transition: all 1s;
.__paragraphs{
position: relative;
display: inline-flex;
width: 600px;
height: 1px;
background: black;
// &:last-of-type{
// height: 0px;
// }
// &:last-child {
// width: 20px;
// }
&:not(:first-child) {
margin-left: 14px;
}
&::after {
content: "";
position: absolute;
top: 50%;
left: -18px;
bottom: 0;
width: 17px;
height: 17px;
transform: translateY(-50%);
border-radius: 50%;
background: black;
}
@media(max-width:810px){
width: 100vw;
}
.paragraph--type--phase-deroulement{
display: flex;
flex-direction: row;
position: absolute;
padding-bottom: 1rem;
// left: 65%;
left: -18px;
top: -16px;
transform: translateY(-100%);
width: 600px;
height: 300px;
font-size: 1rem;
white-space: normal;
color: black;
.slick-list{
padding: 0 !important;
width: 100%;
.slick-track{ .slick-track{
width: 100% !important; height: 350px;
// .slick-slide&.date{ // border-bottom: solid black 1px;
// width: fit-content !important; // &.__paragraphs{
// ::before{
// content: '.';
// }
// } // }
} .paragraph--type--phase-deroulement{
} display: flex;
flex-direction: row;
// padding-bottom: 1rem;
// padding-left: 2rem;
// padding-right: 2rem;
@media(max-width:550px){
padding-left: 0rem;
width: 240px;
align-items: end;
height: 200px;
}
.date{
width: fit-content !important;
display: flex;
flex-direction: column;
margin: auto;
margin-left: 0;
margin-right: 0;
align-items: flex-start;
padding-right: 1rem;
margin-bottom: 1rem;
.field_field_date_de_jour{
font-size: 2.5rem;
line-height: 0.3rem;
@media(max-width:550px){
font-size: 3rem;
line-height: 1.3rem;
}
}
.field_field_date_de_moi{
padding-right: 0.2rem;
text-transform: uppercase;
font-size: 4rem;
display: inline-flex;
@media(max-width:550px){
font-size: 4rem;
}
.after{
&::after{
content: '.';
}
}
}
.annee{
display: flex;
align-items: center;
font-size: 0.6rem;
position: relative;
top: -10px;
@media(max-width:1090px){
font-size: 1.2rem;
}
.field_field_date_de_annee{
display: inline-flex;
align-items: center; align-items: center;
&::after{ padding-right: 1rem;
content: url('../img/noun-arrow-to-right-black.svg'); padding-bottom: 1rem;
border-bottom: solid black 1px;
&:before{
content:".";
font-size: 4rem;
position: absolute;
top: 216px;
}
.date{
width: fit-content !important;
display: flex; display: flex;
flex-direction: column;
padding-right: 1rem;
.field_field_date_de_jour{
font-size: 2.5rem;
line-height: 0.3rem;
@media(max-width:550px){
font-size: 3rem;
line-height: 1.3rem;
}
}
.field_field_date_de_moi{
padding-right: 0.2rem;
text-transform: uppercase;
font-size: 4rem;
display: inline-flex;
@media(max-width:550px){
font-size: 4rem;
}
.after{
&::after{
content: '.';
}
}
}
.annee{
display: flex;
align-items: center;
font-size: 0.6rem;
position: relative;
top: -10px;
@media(max-width:1090px){
font-size: 1.2rem;
}
.field_field_date_de_annee{
display: inline-flex;
align-items: center;
&::after{
content: url('../img/noun-arrow-to-right-black.svg');
display: flex;
}
}
.field_field_date_de_annee.only{
display: inline-flex;
align-items: center;
&::after{
content: '';
display: flex;
}
}
.date2{
display: inline-flex;
.field_field_date_a_jour{
padding-right: 0.2rem;
}
.field_field_date_a_moi{
padding-right: 0.2rem;
}
}
}
} }
} .text{
.field_field_date_de_annee.only{ border: solid $blue_QDD 1px;
display: inline-flex; border-radius: 5%;
align-items: center; padding: 0.6rem 0.6rem;
&::after{ line-height: 1.1;
content: ''; width: 41%;
display: flex; min-width: 35%;
} height: 300px;
}
.date2{
display: inline-flex;
.field_field_date_a_jour{ @media(max-width:1090px){
padding-right: 0.2rem; height: 200px;
} min-width: 80%;
.field_field_date_a_moi{ }
padding-right: 0.2rem; .field_field_titre{
font-size: 0.7rem;
// font-weight: 800;
font-family: 'gilroy-semibold';
@media(max-width:1090px){
font-size: 1rem;
}
}
.field_field_description{
font-family: 'gilroy-regular';
p{
font-size: 0.7rem !important;
margin: 0;
@media(max-width:1090px){
font-size: 1rem !important;
}
}
.field--label-above{
display: none;
}
}
} }
} }
} }
} }
.text{
border: solid $blue_QDD 1px;
border-radius: 5%;
padding: 0.6rem 0.6rem;
line-height: 1.1;
width: 41%;
min-width: 35%;
@media(max-width:1090px){
height: 200px;
min-width: 80%;
}
.field_field_titre{
font-size: 0.6rem;
// font-weight: 800;
font-family: 'gilroy-semibold';
@media(max-width:1090px){
font-size: 1rem;
}
}
.field_field_description{
font-family: 'gilroy-regular';
p{
font-size: 0.6rem !important;
margin: 0;
@media(max-width:1090px){
font-size: 1rem !important;
}
}
.field--label-above{
display: none;
}
}
}
} }
} }
} }
} }
} }

4
web/themes/custom/quartiers_de_demain/templates/field--config-pages--deroulement.html.twig
View File

@ -68,14 +68,14 @@
<div{{ attributes }}> <div{{ attributes }}>
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div> <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
<div class='timeline'> <div class='timeline'>
<div class="__timeline-arrows"> {# <div class="__timeline-arrows">
<button id='arrowPrev' class="arrow arrow__prev" aria-label="Previous" type="button"> <button id='arrowPrev' class="arrow arrow__prev" aria-label="Previous" type="button">
{% include active_theme_path() ~ '/dist/assets/img/prev.svg' %} {% include active_theme_path() ~ '/dist/assets/img/prev.svg' %}
</button> </button>
<button id='arrowNext' class="arrow arrow__next" aria-label="Next" type="button"> <button id='arrowNext' class="arrow arrow__next" aria-label="Next" type="button">
{% include active_theme_path() ~ '/dist/assets/img/next.svg' %} {% include active_theme_path() ~ '/dist/assets/img/next.svg' %}
</button> </button>
</div> </div> #}
<div class="__timeline-content"> <div class="__timeline-content">
{% if multiple %} {% if multiple %}
{% endif %} {% endif %}

2
web/themes/custom/quartiers_de_demain/templates/field--config-pages--diaporama-home.html.twig
View File

@ -50,6 +50,8 @@
{% {%
set ancre_href = '#paragraph-id--' ~ paragraph.id() set ancre_href = '#paragraph-id--' ~ paragraph.id()
%} %}
{% if label_hidden %} {% if label_hidden %}
{% if multiple %} {% if multiple %}
<div {{ attributes }}> <div {{ attributes }}>

11
web/themes/custom/quartiers_de_demain/templates/page--front.html.twig
View File

@ -80,12 +80,13 @@
</div> </div>
</div> #} </div> #}
{{ page.content }} {{ page.content }}
</div>{# /.layout-content #}
<div id="background-animated" >
{% include active_theme_path() ~ '/dist/assets/img/formes-animees.svg' %}
<img src="/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg" id="formes-animees"/>
</div> </div>{# /.layout-content #}
<div id="background-animated" >
{% include active_theme_path() ~ '/dist/assets/img/formes-animees.svg' %}
<img src="/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg" id="formes-animees"/>
</div>
{% if page.sidebar_first %} {% if page.sidebar_first %}
<aside class="layout-sidebar-first" role="complementary"> <aside class="layout-sidebar-first" role="complementary">
{{ page.sidebar_first }} {{ page.sidebar_first }}