Compare commits

...

11 Commits

Author SHA1 Message Date
ouidade 59d7abe4f0 Merge branch 'prod' of gitea-figureslibres.io:bachir/drupal-quartiersdedemain into prod 2024-09-26 23:01:32 +02:00
ouidade de628d6ef9 calendrier 2024-09-26 22:54:53 +02:00
ouidade cfa848d40d calendrier puce 2024-09-26 22:52:31 +02:00
ouidade d76be6f9e6 paralax 2024-09-26 21:52:41 +02:00
ouidade 48a9cecef1 slick home diap 2024-09-26 21:44:49 +02:00
Bachir Soussi Chiadmi 4ce3aa9833 editor_adbanced_link 2024-09-26 21:37:46 +02:00
Bachir Soussi Chiadmi 375aee5950 actu liens target _blank 2024-09-26 21:24:27 +02:00
Bachir Soussi Chiadmi 507b022b1e linkedin target _blank 2024-09-26 21:20:25 +02:00
Bachir Soussi Chiadmi 27d3ab626c image very large 2024-09-26 21:10:00 +02:00
Bachir Soussi Chiadmi 2fe4798381 image compression 2024-09-26 21:04:23 +02:00
Bachir Soussi Chiadmi f1c4829bd8 date format 2024-09-26 21:00:07 +02:00
11 changed files with 107 additions and 90 deletions

File diff suppressed because one or more lines are too long

View File

@ -1165,32 +1165,34 @@ footer {
height: fit-content; height: fit-content;
} }
} }
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track.__paragraphs ::before {
content: ".";
}
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding-right: 1rem; padding-right: 1rem;
padding-bottom: 1rem;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement {
flex-direction: column; flex-direction: column;
align-items: baseline; align-items: baseline;
padding-bottom: 1rem;
} }
} }
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement:before { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .border-symbol {
content: "."; align-self: end;
font-size: 4rem; font-size: 2.5rem;
position: absolute; display: inline-block; /* Permet d'utiliser height */
top: 50%; line-height: 0; /* Assure que la hauteur est minimale */
transform: translateY(-50%); /* Centrer parfaitement verticalement */ transform: translateX(1rem);
} }
@media (max-width: 550px) { @media (max-width: 500px) {
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement:before { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .border-symbol {
display: none; align-self: center;
font-size: 2.5rem;
display: inline-block;
line-height: 0;
transform: translateY(22.5rem);
padding-right: 3rem;
} }
} }
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date {
@ -1273,6 +1275,7 @@ footer {
width: 41%; width: 41%;
min-width: 35%; min-width: 35%;
height: 300px; height: 300px;
margin-bottom: 1rem;
} }
@media (max-width: 1090px) { @media (max-width: 1090px) {
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .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 {
@ -1506,6 +1509,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
} }
#home #background-animated { #home #background-animated {
display: none;
position: absolute; position: absolute;
top: 2000px; top: 2000px;
left: 350px; left: 350px;
@ -1624,7 +1628,9 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home .config_pages--type--diaporama-home .diaporama .slick-list .cadre-img-zoom img { #home .config_pages--type--diaporama-home .diaporama .slick-list .cadre-img-zoom img {
width: 100%; width: 100%;
height: auto; height: auto;
animation: zoomOut 2.5s ease-in infinite; animation-duration: 4.5s;
animation-name: zoomOut;
animation-iteration-count: infinite;
} }
#home .config_pages--type--diaporama-home .diaporama .slick-list blockquote { #home .config_pages--type--diaporama-home .diaporama .slick-list blockquote {
position: relative; position: relative;
@ -1637,10 +1643,10 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
} }
@keyframes zoomOut { @keyframes zoomOut {
0% { 0% {
transform: scale(1); transform: scale(1.1);
} }
100% { 100% {
transform: scale(1.05); transform: scale(1.3);
} }
} }
#home .content_container #block-quartiers-de-demain-titredepage { #home .content_container #block-quartiers-de-demain-titredepage {

View File

@ -4,9 +4,9 @@
<svg <svg
version="1.1" version="1.1"
id="svg1" id="svg1"
width="1440.5675" width="1399.6859"
height="6585.9683" height="4141.061"
viewBox="0 0 1440.5675 6585.9684" viewBox="0 0 1399.6859 4141.0611"
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,51 +46,47 @@
</defs> </defs>
<g <g
id="g3" id="g3"
transform="translate(-509.36305,-2445.5661)"> transform="translate(-509.36305,-2803.6546)">
<g <g
id="g2"> id="g2">
<g <g
id="g1" id="g1"
transform="translate(0.17944336,-2.9196463)"> transform="translate(0.17944336,-2.9196463)">
<path
id="path148"
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" />
<path
id="path151"
d="m 1818.0282,2628.0978 v 160.571"
style="fill:none;stroke:#0833c2;stroke-width:78.092;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path <path
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,9034.4538)" transform="matrix(0.48783546,0,0,-0.48783546,1583.811,6947.6351)"
clip-path="url(#clipPath255)" /> clip-path="url(#clipPath255)" />
<path <path
id="path256" id="path256"
d="m 533.81621,3347.9845 163.08557,194.3583" d="m 533.81621,3347.9845 163.08557,194.3583"
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
id="path256-3"
d="m 1652.1683,6058.9184 -163.0856,194.3583"
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="path257" id="path257"
d="M 0,0 C -205.098,0 -371.361,-166.265 -371.361,-371.362" d="M 0,0 C -205.098,0 -371.361,-166.265 -371.361,-371.362"
style="fill:none;stroke:#f7002b;stroke-width:137.482;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" style="fill:none;stroke:#f7002b;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,1388.9577,2511.6402)" transform="matrix(-0.47297787,0,0,-0.47297787,1700.711,2839.0872)"
clip-path="url(#clipPath258)" /> clip-path="url(#clipPath258)" />
<path <path
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,4755.9014)" transform="matrix(0.72647042,0,0,-0.72647042,1636.7965,4238.0583)"
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,6246.5711)" transform="matrix(0.82260013,0,0,-0.82260013,1865.1937,5133.4927)"
clip-path="url(#clipPath303)" /> clip-path="url(#clipPath303)" />
<path <path
id="path311" id="path311"
d="M 552.65311,6047.771 V 5787.7705" d="M 552.65311,4967.771 V 4707.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>

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

@ -3,7 +3,7 @@ document.addEventListener('scroll', function() {
const background = document.getElementById('background-animated'); const background = document.getElementById('background-animated');
if (background) { if (background) {
// Adjust this value to control the speed of the parallax effect // Adjust this value to control the speed of the parallax effect
const parallaxSpeed = 0.2; const parallaxSpeed = 0.5;
background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)'; background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';
} }
}); });

View File

@ -561,32 +561,36 @@
////////////////////// end diaporama home swiper ///////////////////////////////// ////////////////////// end diaporama home swiper /////////////////////////////////
$(document).ready(function(){ $(document).ready(function () {
let diapohome = $('.config_pages--type--diaporama-home .diaporama'); let diapohome = $('.config_pages--type--diaporama-home .diaporama');
if (diapohome) {
diapohome.slick({ if (diapohome.length) {
slidesToShow: 1, // Initialisation de Slick
dots: false, diapohome.slick({
arrows: false, slidesToShow: 1,
centerMode: false, // Désactivé pour éviter les sauts dots: false,
adaptiveHeight: false, // Désactivé pour éviter les changements de hauteur arrows: false,
autoplay: true, centerMode: true,
autoplaySpeed: 2000, adaptiveHeight: true,
infinite: true, autoplay: true, // Activer l'autoplay
responsive: [ autoplaySpeed: 4000, // Changement de slide toutes les 4 secondes
{ infinite: true,
breakpoint: 810, pauseOnHover: false, // Ne pas arrêter l'autoplay lors du survol
settings: { pauseOnFocus: false,
slidesToShow: 1, responsive: [
adaptiveHeight: false, {
arrows: true, breakpoint: 810,
draggable: true, settings: {
centerMode: true, // Désactivé seulement pour les petits écrans slidesToShow: 1,
} adaptiveHeight: false,
}] arrows: false,
}); draggable: true,
console.log('Diaporama initialisé'); centerMode: false,
} }
}]
});
}
}); });

View File

@ -13,7 +13,11 @@
img{ img{
width: 100%; width: 100%;
height: auto; height: auto;
animation: zoomOut 2.5s ease-in infinite; // animation: zoomOut infinite 4.3s ease-in-out;
animation-duration: 4.5s;
animation-name: zoomOut;
animation-iteration-count: infinite;
} }
} }
blockquote{ blockquote{
@ -28,10 +32,10 @@
@keyframes zoomOut { @keyframes zoomOut {
0% { 0% {
transform: scale(1); transform: scale(1.1);
} }
100% { 100% {
transform: scale(1.05); transform: scale(1.3);
} }
} }

View File

@ -1,7 +1,7 @@
#home{ #home{
#background-animated { #background-animated {
// display: none; display: none;
position: absolute; position: absolute;
top: 2000px; top: 2000px;
left: 350px; left: 350px;

View File

@ -41,32 +41,48 @@
} }
&.__paragraphs{ &.__paragraphs{
::before{ // ::before{
content: '.'; // content: '\002022';
} // }
} }
.paragraph--type--phase-deroulement{ .paragraph--type--phase-deroulement{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding-right: 1rem; padding-right: 1rem;
padding-bottom: 1rem; // padding-bottom: 1rem;
@media(max-width:500px){ @media(max-width:500px){
flex-direction: column; flex-direction: column;
align-items: baseline; align-items: baseline;
padding-bottom: 1rem;
}
.border-symbol{
align-self: end;
font-size: 2.5rem;
display: inline-block; /* Permet d'utiliser height */
line-height: 0; /* Assure que la hauteur est minimale */
transform: translateX(1rem);
@media(max-width:500px){
align-self: center;
font-size: 2.5rem;
display: inline-block;
line-height: 0;
transform: translateY(22.5rem);
padding-right: 3rem;
}
} }
// border-bottom: solid black 1px; // border-bottom: solid black 1px;
&:before{ // &:before{
content:"."; // content:".";
font-size: 4rem; // font-size: 4rem;
position: absolute; // position: absolute;
top: 50%; // top: 50%;
transform: translateY(-50%); /* Centrer parfaitement verticalement */ // transform: translateY(-50%); /* Centrer parfaitement verticalement */
@media(max-width:550px){ // @media(max-width:550px){
display: none; // display: none;
} // }
} // }
.date{ .date{
width: fit-content !important; width: fit-content !important;
@ -153,7 +169,7 @@
width: 41%; width: 41%;
min-width: 35%; min-width: 35%;
height: 300px; height: 300px;
margin-bottom: 1rem;
@media(max-width:1090px){ @media(max-width:1090px){
height: 200px; height: 200px;

View File

@ -18,5 +18,4 @@ set classes = [
%} %}
<div{{ attributes.addClass(classes) }}> <div{{ attributes.addClass(classes) }}>
{{ content }} {{ content }}
{# {% include active_theme_path() ~ '/dist/assets/img/formes-animees-1.svg' %} #}
</div> </div>

View File

@ -68,14 +68,6 @@
<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">
<button id='arrowPrev' class="arrow arrow__prev" aria-label="Previous" type="button">
{% include active_theme_path() ~ '/dist/assets/img/prev.svg' %}
</button>
<button id='arrowNext' class="arrow arrow__next" aria-label="Next" type="button">
{% include active_theme_path() ~ '/dist/assets/img/next.svg' %}
</button>
</div> #}
<div class="__timeline-content"> <div class="__timeline-content">
{% if multiple %} {% if multiple %}
{% endif %} {% endif %}

View File

@ -50,7 +50,7 @@
{% block paragraph %} {% block paragraph %}
{# <div{{ attributes.addClass(classes) }}> #} {# <div{{ attributes.addClass(classes) }}> #}
<div{{ attributes.addClass(classes).setAttribute('id', 'paragraph-id--' ~ paragraph.id()) }}> <div{{ attributes.addClass(classes).setAttribute('id', 'paragraph-id--' ~ paragraph.id()) }}>
<span class="border-symbol">&#x2022;</span> <!-- Ajout du symbole -->
{% block content %} {% block content %}
{# {{ content }} #} {# {{ content }} #}
<div class="date"> <div class="date">