diff --git a/web/sites/default/files-10-07-2024.zip b/web/sites/default/files-10-07-2024.zip new file mode 100644 index 0000000..bbb8d02 Binary files /dev/null and b/web/sites/default/files-10-07-2024.zip differ diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js index c1715d6..e6dc5aa 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js +++ b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js @@ -36,7 +36,7 @@ eval("\nfunction setLogoContainerSize() {\n let svgContainer = document.query \**********************************************/ /***/ (() => { -eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n 'use strict';\n \n Drupal.behaviors.quartiers_de_demain = {\n attach: function (context, settings) {\n console.log('It works!');\n }\n };\n } (Drupal));\n\n \n // jQuery(document).ready(function($){\n\n // $('.open-block').click(function(){\n // $(this).toggleClass('opened');\n\n // $('.header_nav_container').toggleClass('display-nav-opened');\n \n // if(mobile == true){\n // $(\"body\").css(\"overflow\",\"hidden\");\n // }\n\n // });\n \n // // Hide the header_nav_container when a link inside it is clicked\n // $('.header_nav_container li').click(function() {\n // $('.header_nav_container').fadeOut();\n // });\n\n\n\n\n // });\n\n //////// start header ////////////\n document.addEventListener('DOMContentLoaded', function() {\n\n const header = document.querySelector('header');\n const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');\n const headerNavContainer = document.querySelector('.header_nav_container');\n const isFirstLoad = !performance.getEntriesByType(\"navigation\")[0].type.includes('back_forward');\n const isTargetPath = window.location.pathname === '/';\n\n // Fonction pour démarrer l'animation du logo SVG\n function startLogoAnimation() {\n logo.classList.add('animated');\n }\n \n // Fonction pour arrêter l'animation du logo SVG\n function stopLogoAnimation() {\n logo.classList.remove('animated');\n }\n \n // Vérifier si le header a la classe header--collapse\n function checkHeaderCollapse() {\n if (header.classList.contains('header--collapsed')) {\n stopLogoAnimation();\n } else if (header.classList.contains('header--collapsed-already')) {\n stopLogoAnimation();\n } else {\n startLogoAnimation();\n }\n\n }\n \n // Appeler la fonction au chargement initial\n checkHeaderCollapse();\n \n // Observer les changements de classe sur le header\n const observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(mutation) {\n if (mutation.attributeName === 'class') {\n checkHeaderCollapse();\n }\n });\n });\n observer.observe(header, { attributes: true });\n \n\n // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement\n if (!isFirstLoad || !isTargetPath) {\n header.classList.add('header--collapsed-already');\n // logo.classList.remove('animated');\n stopLogoAnimation();\n } else {\n // Sinon, appliquer la transition après un délai\n setTimeout(() => {\n header.classList.add('header--collapsed');\n }, 5000);\n }\n\n ////////////// \n\n let lastScrollTop = 0;\n let threshold = 100; // Change this value as needed\n let isHidden = false;\n \n function slideOut() {\n headerNavContainer.animate([\n { transform: 'translateX(0)' },\n { transform: 'translateX(-100%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = true;\n }\n \n function slideIn() {\n headerNavContainer.animate([\n { transform: 'translateX(-100%)' },\n { transform: 'translateX(0)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = false;\n }\n \n function slideDown() {\n // headerNavContainer.style.display = 'block';\n headerNavContainer.animate([\n { transform: 'translateY(0%)' },\n { transform: 'translateY(+100%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = false;\n }\n \n function slideUp() {\n headerNavContainer.animate([\n { transform: 'translateY(100%)' },\n { transform: 'translateY(0%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n }).onfinish = function() {\n // headerNavContainer.style.display = 'none';\n };\n isHidden = true;\n }\n // Fonction pour ajuster la hauteur du header lors du défilement\n function adjustHeaderHeight() {\n if (window.scrollY > 0) {\n header.classList.add('shrink');\n } else {\n header.classList.remove('shrink');\n }\n }\n\n function handleScroll() {\n let scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const isMobile = window.innerWidth < 810;\n\n if (scrollTop > threshold && !isHidden) {\n if (isMobile) {\n slideUp();\n } else {\n slideOut();\n }\n } else if (scrollTop <= threshold && isHidden) {\n if (isMobile) {\n slideDown();\n } else {\n slideIn();\n }\n }\n \n \n lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling\n }\n \n function handleTouchAndMouseEnter() {\n if (isHidden) {\n if (window.innerWidth < 810) {\n slideDown();\n } else {\n slideIn();\n }\n }\n }\n \n function handleTouchAndMouseLeave() {\n if (lastScrollTop > threshold && !isHidden) {\n if (window.innerWidth < 810) {\n slideUp();\n } else {\n slideOut();\n }\n }\n }\n \n window.addEventListener('scroll', handleScroll);\n window.addEventListener('scroll', adjustHeaderHeight);\n \n // Mouse events for desktop\n header.addEventListener('mouseenter', handleTouchAndMouseEnter);\n header.addEventListener('mouseleave', handleTouchAndMouseLeave);\n \n // Touch events for tablets and mobile devices\n header.addEventListener('touchstart', handleTouchAndMouseEnter);\n header.addEventListener('touchend', handleTouchAndMouseLeave);\n \n // Initial check to see if we're at the top of the page\n if (window.pageYOffset <= threshold) {\n if (window.innerWidth < 810) {\n slideDown();\n } else { \n slideIn();\n } \n } else {\n if (window.innerWidth < 810) {\n slideUp();\n } else {\n slideIn();\n }\n }\n \n });\n\n //////// end header ////////////\n \n\n\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\n var adjustAnchor = function() {\n var $anchor = $('.sidebar_first_container'),\n fixedElementHeight = 500;\n if ($anchor.length > 0) {\n $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n }\n };\n\n $(window).on('hashchange', function() {\n adjustAnchor();\n });\n\n\n //////////////////////// start script smooth apparition des textes /////////////////\n\n function scrollReaveal(){\n\n const nodes = {\n logo : document.querySelectorAll('#logo-animated-container'),\n chapeau : document.querySelectorAll('.field_body'),\n paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n }\n\n const showUp = {\n origin: 'bottom',\n delay: 100,\n duration: 1000,\n distance: '50px',\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n const Show = {\n delay: 100,\n duration: 600,\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n console.log(nodes);\n\n ScrollReveal().reveal(nodes.logo, Show);\n ScrollReveal().reveal(nodes.chapeau, showUp);\n ScrollReveal().reveal(nodes.paragraph, showUp);\n }\n\n\n $( document ).ready(function() {\n scrollReaveal();\n });\n\n //////////////////////// end script smooth apparition des textes /////////////////\n\n //////////////////// start Timeline script ///////////////////////\n\n\n document.addEventListener('DOMContentLoaded', function() {\n let currentSlide = 0;\n\n //// responsive ///\n function getVisibleSlides() {\n if (window.innerWidth <= 600) {\n return 1; // Show 1 slide on small screens\n } else if (window.innerWidth <= 900) {\n return 2; // Show 2 slides on medium screens\n } else {\n return 3; // Show 3 slides on large screens\n }\n }\n\n function showSlides(index) {\n const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');\n const totalSlides = slides.length;\n const visibleSlides = getVisibleSlides();\n const maxSlide = totalSlides - visibleSlides + 1;\n\n // Adjust the index to ensure it stays within bounds\n currentSlide = Math.max(0.6, Math.min(index, maxSlide));\n\n // Calculate the offset for the transform\n const offset = currentSlide * -70 / visibleSlides;\n document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;\n\n // Enable/disable arrows based on the current slide\n document.getElementById('arrowPrev').disabled = currentSlide === 0;\n document.getElementById('arrowNext').disabled = currentSlide === maxSlide;\n }\n\n function prevSlide() {\n showSlides(currentSlide - 1);\n }\n\n function nextSlide() {\n showSlides(currentSlide + 1);\n }\n\n // Attach event listeners\n document.getElementById('arrowPrev').addEventListener('click', prevSlide);\n document.getElementById('arrowNext').addEventListener('click', nextSlide);\n\n // Update month field to only show the first 3 letters\n document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {\n const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');\n if (monthField) {\n const monthText = monthField.textContent.trim();\n if (monthText.length >= 3) {\n monthField.textContent = monthText.slice(0, 3);\n }\n }\n });\n\n // for each .date element add or remove ::before \n document.querySelectorAll('.date').forEach(function(dateElement) {\n const date2Element = dateElement.querySelector('.date2');\n const yearElement = dateElement.querySelector('.field_field_date_de_annee');\n\n // Check if the .date2 element is empty\n if (date2Element && !date2Element.textContent.trim()) {\n // Add the .only class to the year element\n yearElement.classList.add('only');\n }\n });\n\n // Handle window resize\n window.addEventListener('resize', function() {\n showSlides(currentSlide); // Recalculate the slides on resize\n });\n // });\n\n\n // Initialize\n showSlides(currentSlide);\n });\n\n\n //////////////////////// end Timeline script /////////////////////////////////////////////\n\n /////////////////// caracteres body actus/////////////////////////\n\n document.addEventListener('DOMContentLoaded', function() {\n // Maximum number of characters to display\n const maxChars = 140; // Adjust this value as needed\n \n document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body p').forEach(function(paragraph) {\n let text = paragraph.textContent.trim();\n if (text.length > maxChars) {\n let truncatedText = text.slice(0, maxChars) + '...';\n paragraph.textContent = truncatedText;\n }\n });\n });\n \n\n //////////// slideshow home ////////////////////////// \n\n $(document).ready(function(){\n $('.content-actus .view').slick({\n slidesToShow: 3,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: true,\n adaptiveHeight: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: false,\n arrows: true,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('salut slick home');\n\n });\n\n})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?"); +eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n 'use strict';\n \n Drupal.behaviors.quartiers_de_demain = {\n attach: function (context, settings) {\n console.log('It works!');\n }\n };\n } (Drupal));\n\n \n // jQuery(document).ready(function($){\n\n // $('.open-block').click(function(){\n // $(this).toggleClass('opened');\n\n // $('.header_nav_container').toggleClass('display-nav-opened');\n \n // if(mobile == true){\n // $(\"body\").css(\"overflow\",\"hidden\");\n // }\n\n // });\n \n // // Hide the header_nav_container when a link inside it is clicked\n // $('.header_nav_container li').click(function() {\n // $('.header_nav_container').fadeOut();\n // });\n\n\n\n\n // });\n\n //////// start header ////////////\n document.addEventListener('DOMContentLoaded', function() {\n\n const header = document.querySelector('header');\n const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');\n const headerNavContainer = document.querySelector('.header_nav_container');\n const isFirstLoad = !performance.getEntriesByType(\"navigation\")[0].type.includes('back_forward');\n const isTargetPath = window.location.pathname === '/';\n\n // Fonction pour démarrer l'animation du logo SVG\n function startLogoAnimation() {\n logo.classList.add('animated');\n }\n \n // Fonction pour arrêter l'animation du logo SVG\n function stopLogoAnimation() {\n logo.classList.remove('animated');\n }\n \n // Vérifier si le header a la classe header--collapse\n function checkHeaderCollapse() {\n if (header.classList.contains('header--collapsed')) {\n stopLogoAnimation();\n } else if (header.classList.contains('header--collapsed-already')) {\n stopLogoAnimation();\n } else {\n startLogoAnimation();\n }\n\n }\n \n // Appeler la fonction au chargement initial\n checkHeaderCollapse();\n \n // Observer les changements de classe sur le header\n const observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(mutation) {\n if (mutation.attributeName === 'class') {\n checkHeaderCollapse();\n }\n });\n });\n observer.observe(header, { attributes: true });\n \n\n // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement\n if (!isFirstLoad || !isTargetPath) {\n header.classList.add('header--collapsed-already');\n // logo.classList.remove('animated');\n stopLogoAnimation();\n } else {\n // Sinon, appliquer la transition après un délai\n setTimeout(() => {\n header.classList.add('header--collapsed');\n }, 5000);\n }\n\n ////////////// \n\n let lastScrollTop = 0;\n let threshold = 100; // Change this value as needed\n let isHidden = false;\n \n function slideOut() {\n headerNavContainer.animate([\n { transform: 'translateX(0)' },\n { transform: 'translateX(-100%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = true;\n }\n \n function slideIn() {\n headerNavContainer.animate([\n { transform: 'translateX(-100%)' },\n { transform: 'translateX(0)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = false;\n }\n \n function slideDown() {\n // headerNavContainer.style.display = 'block';\n headerNavContainer.animate([\n { transform: 'translateY(0%)' },\n { transform: 'translateY(+100%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = false;\n }\n \n function slideUp() {\n headerNavContainer.animate([\n { transform: 'translateY(100%)' },\n { transform: 'translateY(0%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n }).onfinish = function() {\n // headerNavContainer.style.display = 'none';\n };\n isHidden = true;\n }\n // Fonction pour ajuster la hauteur du header lors du défilement\n function adjustHeaderHeight() {\n if (window.scrollY > 0) {\n header.classList.add('shrink');\n } else {\n header.classList.remove('shrink');\n }\n }\n\n function handleScroll() {\n let scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const isMobile = window.innerWidth < 811;\n\n if (scrollTop > threshold && !isHidden) {\n if (isMobile) {\n slideUp();\n } else {\n slideOut();\n }\n } else if (scrollTop <= threshold && isHidden) {\n if (isMobile) {\n slideDown();\n } else {\n slideIn();\n }\n }\n \n \n lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling\n }\n \n function handleTouchAndMouseEnter() {\n if (isHidden) {\n if (window.innerWidth < 811) {\n slideDown();\n } else {\n slideIn();\n }\n }\n }\n \n function handleTouchAndMouseLeave() {\n if (lastScrollTop > threshold && !isHidden) {\n if (window.innerWidth < 811) {\n slideUp();\n } else {\n slideOut();\n }\n }\n }\n \n window.addEventListener('scroll', handleScroll);\n window.addEventListener('scroll', adjustHeaderHeight);\n \n // Mouse events for desktop\n header.addEventListener('mouseenter', handleTouchAndMouseEnter);\n header.addEventListener('mouseleave', handleTouchAndMouseLeave);\n \n // Touch events for tablets and mobile devices\n header.addEventListener('touchstart', handleTouchAndMouseEnter);\n header.addEventListener('touchend', handleTouchAndMouseLeave);\n \n // Initial check to see if we're at the top of the page\n if (window.pageYOffset <= threshold) {\n if (window.innerWidth < 811) {\n slideDown();\n } else { \n slideIn();\n } \n } else {\n if (window.innerWidth < 811) {\n slideUp();\n } else {\n slideIn();\n }\n }\n \n });\n\n //////// end header ////////////\n \n\n\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\n var adjustAnchor = function() {\n var $anchor = $('.sidebar_first_container'),\n fixedElementHeight = 500;\n if ($anchor.length > 0) {\n $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n }\n };\n\n $(window).on('hashchange', function() {\n adjustAnchor();\n });\n\n\n //////////////////////// start script smooth apparition des textes /////////////////\n\n function scrollReaveal(){\n\n const nodes = {\n logo : document.querySelectorAll('#logo-animated-container'),\n chapeau : document.querySelectorAll('.field_body'),\n paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n }\n\n const showUp = {\n origin: 'bottom',\n delay: 100,\n duration: 1000,\n distance: '50px',\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n const Show = {\n delay: 100,\n duration: 600,\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n console.log(nodes);\n\n ScrollReveal().reveal(nodes.logo, Show);\n ScrollReveal().reveal(nodes.chapeau, showUp);\n ScrollReveal().reveal(nodes.paragraph, showUp);\n }\n\n\n $( document ).ready(function() {\n scrollReaveal();\n });\n\n //////////////////////// end script smooth apparition des textes /////////////////\n\n //////////////////// start Timeline script ///////////////////////\n\n\n document.addEventListener('DOMContentLoaded', function() {\n let currentSlide = 0;\n\n //// responsive ///\n function getVisibleSlides() {\n if (window.innerWidth <= 600) {\n return 1; // Show 1 slide on small screens\n } else if (window.innerWidth <= 900) {\n return 2; // Show 2 slides on medium screens\n } else {\n return 3; // Show 3 slides on large screens\n }\n }\n\n function showSlides(index) {\n const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');\n const totalSlides = slides.length;\n const visibleSlides = getVisibleSlides();\n const maxSlide = totalSlides - visibleSlides + 1;\n\n // Adjust the index to ensure it stays within bounds\n currentSlide = Math.max(0.6, Math.min(index, maxSlide));\n\n // Calculate the offset for the transform\n const offset = currentSlide * -70 / visibleSlides;\n document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;\n\n // Enable/disable arrows based on the current slide\n document.getElementById('arrowPrev').disabled = currentSlide === 0;\n document.getElementById('arrowNext').disabled = currentSlide === maxSlide;\n }\n\n function prevSlide() {\n showSlides(currentSlide - 1);\n }\n\n function nextSlide() {\n showSlides(currentSlide + 1);\n }\n\n // Attach event listeners\n document.getElementById('arrowPrev').addEventListener('click', prevSlide);\n document.getElementById('arrowNext').addEventListener('click', nextSlide);\n\n // Update month field to only show the first 3 letters\n document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {\n const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');\n if (monthField) {\n const monthText = monthField.textContent.trim();\n if (monthText.length >= 3) {\n monthField.textContent = monthText.slice(0, 3);\n }\n }\n });\n\n // for each .date element add or remove ::before \n document.querySelectorAll('.date').forEach(function(dateElement) {\n const date2Element = dateElement.querySelector('.date2');\n const yearElement = dateElement.querySelector('.field_field_date_de_annee');\n\n // Check if the .date2 element is empty\n if (date2Element && !date2Element.textContent.trim()) {\n // Add the .only class to the year element\n yearElement.classList.add('only');\n }\n });\n\n // Handle window resize\n window.addEventListener('resize', function() {\n showSlides(currentSlide); // Recalculate the slides on resize\n });\n // });\n\n\n // Initialize\n showSlides(currentSlide);\n });\n\n\n //////////////////////// end Timeline script /////////////////////////////////////////////\n\n /////////////////// caracteres body actus/////////////////////////\n\n document.addEventListener('DOMContentLoaded', function() {\n // Maximum number of characters to display\n const maxChars = 140; // Adjust this value as needed\n \n document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body p').forEach(function(paragraph) {\n let text = paragraph.textContent.trim();\n if (text.length > maxChars) {\n let truncatedText = text.slice(0, maxChars) + '...';\n paragraph.textContent = truncatedText;\n }\n });\n });\n \n\n //////////// slideshow home ////////////////////////// \n\n $(document).ready(function(){\n $('.content-actus .view').slick({\n slidesToShow: 3,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: true,\n adaptiveHeight: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: false,\n arrows: true,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('salut slick home');\n\n });\n\n})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?"); /***/ }) diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css index 1804c32..babd8aa 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css +++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css @@ -197,6 +197,11 @@ h2 { .layout-container main#home { padding-top: 0; } +@media (max-width: 810px) { + .layout-container main#home { + padding-top: 320px; + } +} /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ ul { @@ -1041,12 +1046,29 @@ footer { background-repeat: no-repeat; background-size: contain; background-position-x: -20%; + position: relative; } @media (max-width: 1090px) { #home .__container-deroulement { cursor: grab; } } +#home .__container-deroulement::before { + content: url("../img/formes-animees-6.svg"); + display: block; + position: absolute; + z-index: 5; + right: 20%; + top: 2rem; +} +#home .__container-deroulement::after { + content: url("../img/formes-animees-7.svg"); + display: block; + position: absolute; + z-index: 5; + right: 26%; + bottom: -9rem; +} #home .__container-deroulement h2 { width: fit-content; margin: auto; @@ -1057,7 +1079,7 @@ footer { white-space: nowrap; overflow: hidden; padding-top: 5rem; - padding-bottom: 4rem; + padding-bottom: 8rem; } @media (max-width: 1090px) { #home .timeline { @@ -1422,6 +1444,28 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h } /*pages*/ +#home .config_pages--type--diaporama-home { + position: relative; +} +#home .config_pages--type--diaporama-home::after { + content: url("../img/formes-animees-1.svg"); + display: block; + width: 50%; + position: absolute; + z-index: 5; + right: 11rem; + bottom: -6rem; +} +@media (max-width: 810px) { + #home .config_pages--type--diaporama-home::after { + bottom: -5rem; + } +} +@media (max-width: 810px) { + #home .config_pages--type--diaporama-home::after { + bottom: -5rem; + } +} #home .config_pages--type--diaporama-home .field_field_images img { width: 100%; height: auto; @@ -1434,7 +1478,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h padding-bottom: 2rem; } #home article.node-type-static { - padding-top: 4rem; + padding-top: 6rem; } #home article.node-type-static .field_title { display: none; @@ -1445,6 +1489,15 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h display: flex; flex-direction: row; flex-wrap: wrap; + position: relative; +} +#home article.node-type-static .field_body::after { + content: url("../img/formes-animees-2.svg"); + display: block; + position: absolute; + z-index: 5; + left: 1rem; + bottom: 0; } @media (max-width: 1090px) { #home article.node-type-static .field_body { @@ -1496,6 +1549,16 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h } #home article.node-type-static #paragraph-id--1 { background-color: #edefe8; + position: relative; + padding-bottom: 6rem; +} +#home article.node-type-static #paragraph-id--1::after { + content: url("../img/formes-animees-3.svg"); + display: block; + position: absolute; + z-index: 5; + right: 15%; + bottom: 45%; } #home article.node-type-static #paragraph-id--1 .field_field_title { font-family: "gilroy-bold"; @@ -1727,6 +1790,23 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h margin: auto; align-items: center; padding-bottom: 2rem; + position: relative; +} +#home article.node-type-static #paragraph-id--6::before { + content: url("../img/formes-animees-4.svg"); + display: block; + position: absolute; + z-index: 5; + left: 10%; + top: -6rem; +} +#home article.node-type-static #paragraph-id--6::after { + content: url("../img/formes-animees-5.svg"); + display: block; + position: absolute; + z-index: 5; + right: 15%; + top: 3rem; } @media (max-width: 500px) { #home article.node-type-static #paragraph-id--6 { @@ -1735,7 +1815,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h } } #home article.node-type-static #paragraph-id--6 .field_field_title { - padding-top: 4rem; + padding-top: 3rem; padding-bottom: 2rem; } @media (max-width: 500px) { @@ -1840,6 +1920,8 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(2) { grid-row: 2; grid-column: 3; + position: relative; + top: -70px; } @media (max-width: 700px) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(2) { @@ -1891,6 +1973,8 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h grid-column: inherit; padding: 1rem; padding-left: 0; + position: relative; + top: -70px; } @media (max-width: 700px) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) { diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-1.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-1.svg new file mode 100644 index 0000000..c609c06 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-1.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-2.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-2.svg new file mode 100644 index 0000000..5ed0d3f --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-2.svg @@ -0,0 +1,23 @@ + + + + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-3.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-3.svg new file mode 100644 index 0000000..9a1977a --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-3.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-4.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-4.svg new file mode 100644 index 0000000..6a9253b --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-4.svg @@ -0,0 +1,23 @@ + + + + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-5.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-5.svg new file mode 100644 index 0000000..6c33bbb --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-5.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-6.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-6.svg new file mode 100644 index 0000000..4fbec81 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-6.svg @@ -0,0 +1,23 @@ + + + + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-7.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-7.svg new file mode 100644 index 0000000..1c203a7 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-7.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg new file mode 100644 index 0000000..3ebac3c --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/logo-QDD-v2.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/logo-QDD-v2.svg index 2fe9130..cf98e2d 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/logo-QDD-v2.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/logo-QDD-v2.svg @@ -7,8 +7,53 @@ viewBox="0 0 87.153343 29.698406" version="1.1" id="svg1" + sodipodi:docname="logo-QDD-v2.svg" + inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> + + + + + + @@ -320,7 +365,7 @@ id="g1522" transform="translate(747.5991,1522.7208)"> @@ -328,7 +373,7 @@ id="g1526" transform="translate(746.9782,1556.9387)"> diff --git a/web/themes/custom/quartiers_de_demain/src/assets/img/formes-animees.svg b/web/themes/custom/quartiers_de_demain/src/assets/img/formes-animees.svg new file mode 100644 index 0000000..a4133a8 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/src/assets/img/formes-animees.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/src/assets/img/logo-QDD-v2.svg b/web/themes/custom/quartiers_de_demain/src/assets/img/logo-QDD-v2.svg new file mode 100644 index 0000000..cf98e2d --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/src/assets/img/logo-QDD-v2.svg @@ -0,0 +1,399 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js b/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js index ad561e2..9448c99 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js +++ b/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js @@ -157,7 +157,7 @@ function handleScroll() { let scrollTop = window.pageYOffset || document.documentElement.scrollTop; - const isMobile = window.innerWidth < 810; + const isMobile = window.innerWidth < 811; if (scrollTop > threshold && !isHidden) { if (isMobile) { @@ -179,7 +179,7 @@ function handleTouchAndMouseEnter() { if (isHidden) { - if (window.innerWidth < 810) { + if (window.innerWidth < 811) { slideDown(); } else { slideIn(); @@ -189,7 +189,7 @@ function handleTouchAndMouseLeave() { if (lastScrollTop > threshold && !isHidden) { - if (window.innerWidth < 810) { + if (window.innerWidth < 811) { slideUp(); } else { slideOut(); @@ -210,13 +210,13 @@ // Initial check to see if we're at the top of the page if (window.pageYOffset <= threshold) { - if (window.innerWidth < 810) { + if (window.innerWidth < 811) { slideDown(); } else { slideIn(); } } else { - if (window.innerWidth < 810) { + if (window.innerWidth < 811) { slideUp(); } else { slideIn(); diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss index 8fc2168..93f7c55 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss @@ -42,6 +42,11 @@ $width-menu-slidedown : 550px; } &#home{ padding-top: 0; + + + @media(max-width: 810px){ + padding-top: 320px; + } } } } diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss index cae83b1..30438f7 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss @@ -21,8 +21,6 @@ font-size: 2rem; } - - } .node-type-static{ &::before{ diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss index 9aac37e..6e9bc58 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss @@ -1,6 +1,23 @@ #home{ + .config_pages--type--diaporama-home{ + position: relative; + &::after{ + content: url('../img/formes-animees-1.svg'); + display: block; + width: 50%; + position: absolute; + z-index: 5; + right: 11rem; + bottom: -6rem; + @media(max-width: 810px){ + bottom: -5rem; + } + @media(max-width: 810px){ + bottom: -5rem; + } + } .field_field_images{ img{ width: 100%; @@ -18,7 +35,8 @@ padding-bottom: 2rem; } article.node-type-static{ - padding-top: 4rem; + padding-top: 6rem; + .field_title{ display: none; } @@ -28,6 +46,21 @@ display: flex; flex-direction: row; flex-wrap: wrap ; + position: relative; + &::after{ + content: url('../img/formes-animees-2.svg'); + display: block; + position: absolute; + z-index: 5; + left: 1rem; + bottom: 0; + // @media(max-width: 810px){ + // bottom: -5rem; + // } + // @media(max-width: 810px){ + // bottom: -5rem; + // } + } @media(max-width: 1090px){ flex-direction: column; } @@ -70,6 +103,16 @@ } #paragraph-id--1{ ///// Les enjeux background-color: #edefe8; + position: relative; + padding-bottom: 6rem; + &::after{ + content: url('../img/formes-animees-3.svg'); + display: block; + position: absolute; + z-index: 5; + right: 15%; + bottom: 45%; + } .field_field_title{ font-family: 'gilroy-bold'; } @@ -278,12 +321,29 @@ margin: auto; 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; + } + &::after{ + content: url('../img/formes-animees-5.svg'); + display: block; + position: absolute; + z-index: 5; + right: 15%; + top: 3rem; + } @media(max-width: 500px){ width: 90%; text-align: center; } .field_field_title{ - padding-top: 4rem; + padding-top: 3rem; padding-bottom: 2rem; @media(max-width: 500px){ padding-top: 0; @@ -378,6 +438,8 @@ h5:nth-of-type(2){ grid-row: 2; grid-column: 3; + position: relative; + top: -70px; @media(max-width: 700px){ grid-row: 4; grid-column: 2; @@ -421,6 +483,8 @@ grid-column: inherit; padding: 1rem; padding-left: 0; + position: relative; + top: -70px; @media(max-width: 700px){ grid-row: 4; grid-column: 1 /span 2 ; @@ -486,44 +550,4 @@ } } - // .config_pages--type--deroulement{ - // .field_field_phase{ - // .__timeline{ - // display: flex; - // flex-direction: row; - // .paragraph--type--phase-deroulement{ - // width: 30%; - // display: grid; - // grid-template-columns: auto auto; - // grid-template-rows: auto auto auto; - // .field_field_date_de_jour{ - // grid-row: 1 /span 3; - // grid-column: 1; - // } - // .field_field_date_de_moi{ - // grid-row: 2 /span 3; - // grid-column: 1; - - // } - // .field_field_date_de_annee{ - // grid-row: 3; - // grid-column: 1; - // } - // .field_field_titre{ - // grid-column: 2; - // grid-row: 1; - // } - // .field_field_description{ - // grid-row: 2 /span 3; - // grid-column: 2; - // } - // } - // #paragraph-id--16{ - - // } - // } - - // } - // } - } \ No newline at end of file diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/formes-animees.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/formes-animees.scss new file mode 100644 index 0000000..c9b4c5d --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/formes-animees.scss @@ -0,0 +1,29 @@ +// #home{ +// #background-animated { +// position: absolute; +// top: 0; +// left: 0; +// width: 100%; +// 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; +// } +// svg{ +// max-width: 100%; +// position: relative; +// top: -1500px; +// } + +// } + +// .layout-content { +// position: relative; +// z-index: 2; /* S'assure que le contenu soit au-dessus des animations */ +// } + +// .layout-container.home { +// position: relative; +// } +// } \ No newline at end of file diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss index c61627a..492dec0 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss @@ -12,7 +12,24 @@ background-position-x: -20%; @media(max-width:1090px){ cursor:grab; - } + } + position: relative; + &::before{ + content: url('../img/formes-animees-6.svg'); + display: block; + position: absolute; + z-index: 5; + right: 20%; + top: 2rem; + } + &::after{ + content: url('../img/formes-animees-7.svg'); + display: block; + position: absolute; + z-index: 5; + right: 26%; + bottom: -9rem; + } h2{ width: fit-content; margin: auto; @@ -26,7 +43,7 @@ white-space: nowrap; overflow: hidden; padding-top: 5rem; - padding-bottom: 4rem; + padding-bottom: 8rem; @media(max-width:1090px){ padding-top: 18rem; overflow: scroll; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss index 83bc256..fb76810 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss @@ -30,7 +30,7 @@ @import "partials/timeline"; @import "partials/actu-caroussel-home"; @import "partials/animation-logo-header"; - +@import "partials/formes-animees"; // @import "partials/slick_custom"; diff --git a/web/themes/custom/quartiers_de_demain/templates/field--block-content--logo-link.html.twig b/web/themes/custom/quartiers_de_demain/templates/field--block-content--logo-link.html.twig index 362acc8..638a0cc 100644 --- a/web/themes/custom/quartiers_de_demain/templates/field--block-content--logo-link.html.twig +++ b/web/themes/custom/quartiers_de_demain/templates/field--block-content--logo-link.html.twig @@ -288,7 +288,7 @@ transform="translate(1161.8838,1648.1403)"> @@ -385,7 +385,7 @@ transform="translate(747.5991,1522.7208)"> @@ -394,7 +394,7 @@ transform="translate(746.9782,1556.9387)"> diff --git a/web/themes/custom/quartiers_de_demain/templates/page--front.html.twig b/web/themes/custom/quartiers_de_demain/templates/page--front.html.twig index e9b02e5..413e923 100644 --- a/web/themes/custom/quartiers_de_demain/templates/page--front.html.twig +++ b/web/themes/custom/quartiers_de_demain/templates/page--front.html.twig @@ -81,7 +81,9 @@ #} {{ page.content }} {# /.layout-content #} - + {#
+ {% include active_theme_path() ~ '/dist/assets/img/formes-animees.svg' %} +
#} {% if page.sidebar_first %}