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 bb91370..c66408d 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js +++ b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js @@ -26,7 +26,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \******************************************/ /***/ (() => { -eval("document.addEventListener('scroll', function() {\n const scrolled = window.pageYOffset;\n const background = document.getElementById('background-animated');\n \n // Adjust this value to control the speed of the parallax effect\n const parallaxSpeed = 0.2;\n background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';\n});\n\n // Sélectionnez l'élément SVG\nconst svg = document.querySelector('#paragraph-id--7 .pilliers-animes');\n\n// Configuration de l'observateur d'intersection\nconst observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // Ajoute une classe lorsque l'élément est visible\n svg.classList.add('svg-visible');\n } else {\n // Optionnel : Retirez la classe si nécessaire\n svg.classList.remove('svg-visible');\n }\n });\n});\n\n// Observer l'élément SVG\nobserver.observe(svg);\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/animated_formes.js?"); +eval("document.addEventListener('scroll', function() {\n const scrolled = window.pageYOffset;\n const background = document.getElementById('background-animated');\n \n // Adjust this value to control the speed of the parallax effect\n const parallaxSpeed = 0.2;\n background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';\n});\n\n\n\n\n //ANimation Pilliers \nconst svg = document.querySelector('#paragraph-id--7 .pilliers-animes');\n\n// Configuration de l'observateur d'intersection\nconst observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // Ajoute une classe lorsque l'élément est visible\n svg.classList.add('svg-visible');\n } else {\n // Optionnel : Retirez la classe si nécessaire\n svg.classList.remove('svg-visible');\n }\n });\n});\n\n// Observer l'élément SVG\nobserver.observe(svg);\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/animated_formes.js?"); /***/ }), @@ -36,7 +36,7 @@ eval("document.addEventListener('scroll', function() {\n const scrolled = win \**********************************************/ /***/ (() => { -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 const offsetmobile = currentSlide * -130 / visibleSlides;\n if (window.innerWidth <= 600){\n document.querySelector('.__timeline-content').style.transform = `translateX(${offsetmobile}%)`;\n } else {\n document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;\n }\n \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 const offsetmobile = currentSlide * -100 / visibleSlides;\n if (window.innerWidth <= 600){\n document.querySelector('.__timeline-content').style.transform = `translateX(${offsetmobile}%)`;\n } else {\n document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;\n }\n \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 b26fcc4..2243d9f 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 @@ -385,7 +385,8 @@ header .header_nav_container #block-quartiers-de-demain-entete ul { @media (max-width: 810px) { header .header_nav_container #block-quartiers-de-demain-entete ul { top: 27.5px; - padding-left: 15%; + align-items: center; + margin: 1rem; } } @media (max-width: 1090px) { @@ -407,8 +408,8 @@ header .header_nav_container #block-quartiers-de-demain-entete ul li a { header .header_nav_container #block-quartiers-de-demain-entete ul li a { display: flex; flex-direction: column; - align-items: flex-start; - font-size: 0.6rem; + align-items: center; + font-size: 0.9rem; } } header .header_nav_container #block-quartiers-de-demain-entete ul li:not(:last-of-type) ::after { @@ -1139,6 +1140,11 @@ footer { 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 { position: absolute; left: 65%; @@ -1467,9 +1473,9 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h 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) { +@media (max-width: 1400px) { #home #background-animated { - top: 1820px; + display: none; } } #home #background-animated svg { @@ -1505,7 +1511,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h } @media (max-width: 810px) { #home article.node-type-static { - padding-top: 4rem; + padding-top: 2rem; } } #home article.node-type-static .field_title { @@ -1522,6 +1528,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h @media (max-width: 1090px) { #home article.node-type-static .field_body { flex-direction: column; + width: 90%; } } #home article.node-type-static .field_body > p:nth-child(1) { @@ -1634,9 +1641,8 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h content: ""; padding-bottom: 1rem; } -@media (max-width: 500px) { +@media (max-width: 810px) { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(1)::before { - width: 50px; height: 50px; background-size: 50px 50px; } @@ -1651,9 +1657,8 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h content: ""; padding-bottom: 1rem; } -@media (max-width: 500px) { +@media (max-width: 810px) { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(2)::before { - width: 50px; height: 50px; background-size: 50px 50px; } @@ -1668,9 +1673,8 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h content: ""; padding-bottom: 1rem; } -@media (max-width: 500px) { +@media (max-width: 810px) { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(3)::before { - width: 50px; height: 50px; background-size: 50px 50px; } @@ -1685,9 +1689,8 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h content: ""; padding-bottom: 1rem; } -@media (max-width: 500px) { +@media (max-width: 810px) { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(4)::before { - width: 50px; height: 50px; background-size: 50px 50px; } @@ -1702,9 +1705,8 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h content: ""; padding-bottom: 1rem; } -@media (max-width: 500px) { +@media (max-width: 810px) { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(5)::before { - width: 50px; height: 50px; background-size: 50px 50px; } @@ -1791,7 +1793,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h content: ""; padding-bottom: 1rem; } -@media (max-width: 500px) { +@media (max-width: 810px) { #home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto p:nth-of-type(1)::before, #home article.node-type-static #paragraph-id--28 .field_field_texte .colone-picto p:nth-of-type(1)::before { width: 50px; @@ -1810,7 +1812,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h content: ""; padding-bottom: 1rem; } -@media (max-width: 500px) { +@media (max-width: 810px) { #home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto p:nth-of-type(2)::before, #home article.node-type-static #paragraph-id--28 .field_field_texte .colone-picto p:nth-of-type(2)::before { width: 50px; @@ -1829,7 +1831,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h content: ""; padding-bottom: 1rem; } -@media (max-width: 500px) { +@media (max-width: 810px) { #home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto p:nth-of-type(3)::before, #home article.node-type-static #paragraph-id--28 .field_field_texte .colone-picto p:nth-of-type(3)::before { width: 50px; @@ -1848,7 +1850,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h content: ""; padding-bottom: 1rem; } -@media (max-width: 500px) { +@media (max-width: 810px) { #home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto p:nth-of-type(4)::before, #home article.node-type-static #paragraph-id--28 .field_field_texte .colone-picto p:nth-of-type(4)::before { width: 50px; @@ -1867,7 +1869,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h content: ""; padding-bottom: 1rem; } -@media (max-width: 500px) { +@media (max-width: 810px) { #home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto p:nth-of-type(5)::before, #home article.node-type-static #paragraph-id--28 .field_field_texte .colone-picto p:nth-of-type(5)::before { width: 50px; @@ -1883,7 +1885,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h padding-bottom: 2rem; position: relative; } -@media (max-width: 500px) { +@media (max-width: 810px) { #home article.node-type-static #paragraph-id--6 { width: 90%; text-align: center; @@ -1893,7 +1895,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h padding-top: 3rem; padding-bottom: 2rem; } -@media (max-width: 500px) { +@media (max-width: 810px) { #home article.node-type-static #paragraph-id--6 .field_field_title { padding-top: 0; } @@ -1902,7 +1904,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h width: 50%; margin: auto; } -@media (max-width: 500px) { +@media (max-width: 810px) { #home article.node-type-static #paragraph-id--6 .field_field_texte { width: 90%; } @@ -1922,7 +1924,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h align-self: center; padding-top: 1.5rem; } -@media (max-width: 500px) { +@media (max-width: 810px) { #home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(2) { width: 80%; padding-top: 0; @@ -1956,12 +1958,13 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h @media (max-width: 550px) { #home article.node-type-static #paragraph-id--7 .field_field_title { width: 90%; + padding-top: 2rem; } } #home article.node-type-static #paragraph-id--7 .field_field_texte { width: 80%; } -@media (max-width: 700px) { +@media (max-width: 820px) { #home article.node-type-static #paragraph-id--7 .field_field_texte { position: relative; top: -80px; @@ -1974,13 +1977,18 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h grid-template-columns: repeat(6 auto); grid-template-rows: repeat(3 auto); } -@media (max-width: 700px) { +@media (max-width: 820px) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto { grid-template-rows: repeat(10 auto); grid-template-columns: repeat(2 1fr); padding-left: 0; } } +@media (max-width: 1090px) { + #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto { + padding-left: 0; + } +} #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5 { font-size: 5rem; font-weight: 800; @@ -1998,7 +2006,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h position: relative; top: -70px; } -@media (max-width: 700px) { +@media (max-width: 820px) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(2) { grid-row: 4; grid-column: 2; @@ -2011,7 +2019,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h grid-row: 1; grid-column: 5; } -@media (max-width: 700px) { +@media (max-width: 820px) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) { grid-row: 8; grid-column: 1; @@ -2026,7 +2034,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:not(:last-of-type) { padding-right: 2rem; } -@media (max-width: 700px) { +@media (max-width: 820px) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p { font-size: 1.2rem; } @@ -2036,13 +2044,18 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h grid-column: 1/span 2; padding: 1rem; } -@media (max-width: 700px) { +@media (max-width: 820px) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(1) { width: 230px; top: 50px; position: relative; } } +@media (max-width: 1090px) { + #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(1) { + width: 270px; + } +} #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) { grid-row: 3; grid-column: inherit; @@ -2051,7 +2064,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h position: relative; top: -70px; } -@media (max-width: 700px) { +@media (max-width: 820px) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) { grid-row: 4; grid-column: 1/span 2; @@ -2060,6 +2073,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h top: -10px; } } +@media (max-width: 1090px) { + #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) { + width: 270px; + } +} #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) { grid-row: 1/span 2; grid-column: 5/span 6; @@ -2068,7 +2086,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h position: relative; left: -0.5rem; } -@media (max-width: 700px) { +@media (max-width: 820px) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) { grid-row: 8; grid-column: 1/span 2; @@ -2079,18 +2097,28 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h position: relative; } } +@media (max-width: 1090px) { + #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) { + width: 270px; + } +} #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(1) { grid-row: 3; grid-column: 1/span 2; padding-left: 1rem; } +@media (max-width: 820px) { + #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(1) { + padding: 1rem; + } +} #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(2) { display: block; grid-row: 1; height: fit-content; padding-top: 0%; } -@media (max-width: 700px) { +@media (max-width: 820px) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(2) { grid-row: 7; grid-column: 1/span 2; @@ -2101,9 +2129,9 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h } #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) { grid-row: 3; - grid-column: 5; + grid-column: 5/span 6; } -@media (max-width: 700px) { +@media (max-width: 820px) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) { grid-row: 9; grid-column: 1/span 2; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js b/web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js index 977cf2b..02caad4 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js +++ b/web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js @@ -7,7 +7,10 @@ document.addEventListener('scroll', function() { background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)'; }); - // Sélectionnez l'élément SVG + + + + //ANimation Pilliers const svg = document.querySelector('#paragraph-id--7 .pilliers-animes'); // Configuration de l'observateur d'intersection 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 088afa7..2480922 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 @@ -312,7 +312,7 @@ // Calculate the offset for the transform const offset = currentSlide * -70 / visibleSlides; - const offsetmobile = currentSlide * -130 / visibleSlides; + const offsetmobile = currentSlide * -100 / visibleSlides; if (window.innerWidth <= 600){ document.querySelector('.__timeline-content').style.transform = `translateX(${offsetmobile}%)`; } else { 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 385f02e..7276efe 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 @@ -22,7 +22,7 @@ article.node-type-static{ padding-top: 6rem; @media(max-width: 810px){ - padding-top: 4rem; + padding-top: 2rem; } .field_title{ @@ -37,6 +37,7 @@ position: relative; @media(max-width: 1090px){ flex-direction: column; + width: 90%; } > p:nth-child(1){ margin-bottom: 0; @@ -131,8 +132,8 @@ height: 100px; content: ""; padding-bottom: 1rem; - @media(max-width: 500px){ - width: 50px; + @media(max-width: 810px){ + // width: 50px; height: 50px; background-size: 50px 50px; } @@ -146,8 +147,8 @@ height: 100px; content: ""; padding-bottom: 1rem; - @media(max-width: 500px){ - width: 50px; + @media(max-width: 810px){ + // width: 50px; height: 50px; background-size: 50px 50px; } @@ -161,8 +162,8 @@ height: 100px; content: ""; padding-bottom: 1rem; - @media(max-width: 500px){ - width: 50px; + @media(max-width: 810px){ + // width: 50px; height: 50px; background-size: 50px 50px; } @@ -177,8 +178,8 @@ height: 100px; content: ""; padding-bottom: 1rem; - @media(max-width: 500px){ - width: 50px; + @media(max-width: 810px){ + // width: 50px; height: 50px; background-size: 50px 50px; } @@ -192,8 +193,8 @@ height: 100px; content: ""; padding-bottom: 1rem; - @media(max-width: 500px){ - width: 50px; + @media(max-width: 810px){ + // width: 50px; height: 50px; background-size: 50px 50px; } @@ -265,7 +266,7 @@ height: 100px; content: ""; padding-bottom: 1rem; - @media(max-width: 500px){ + @media(max-width: 810px){ width: 50px; height: 50px; background-size: 50px 50px; @@ -280,7 +281,7 @@ height: 100px; content: ""; padding-bottom: 1rem; - @media(max-width: 500px){ + @media(max-width: 810px){ width: 50px; height: 50px; background-size: 50px 50px; @@ -295,7 +296,7 @@ height: 100px; content: ""; padding-bottom: 1rem; - @media(max-width: 500px){ + @media(max-width: 810px){ width: 50px; height: 50px; background-size: 50px 50px; @@ -310,7 +311,7 @@ height: 100px; content: ""; padding-bottom: 1rem; - @media(max-width: 500px){ + @media(max-width: 810px){ width: 50px; height: 50px; background-size: 50px 50px; @@ -325,7 +326,7 @@ height: 100px; content: ""; padding-bottom: 1rem; - @media(max-width: 500px){ + @media(max-width: 810px){ width: 50px; height: 50px; background-size: 50px 50px; @@ -344,37 +345,14 @@ align-items: center; padding-bottom: 2rem; position: relative; - // &::before{ - // content: url('../img/formes-animees-4.svg'); - // display: block; - // position: absolute; - // z-index: 5; - // left: 10%; - // top: -6rem; - // @media(max-width: 810px){ - // display: none; - - // } - // } - // &::after{ - // content: url('../img/formes-animees-5.svg'); - // display: block; - // position: absolute; - // z-index: 5; - // right: 15%; - // top: 3rem; - // @media(max-width: 810px){ - // display: none; - // } - // } - @media(max-width: 500px){ + @media(max-width: 810px){ width: 90%; text-align: center; } .field_field_title{ padding-top: 3rem; padding-bottom: 2rem; - @media(max-width: 500px){ + @media(max-width: 810px){ padding-top: 0; } @@ -382,7 +360,7 @@ .field_field_texte{ width: 50%; margin: auto; - @media(max-width: 500px){ + @media(max-width: 810px){ width: 90%; } .colone-picto{ @@ -398,7 +376,7 @@ font-size: 0.8rem; align-self: center; padding-top: 1.5rem; - @media(max-width: 500px){ + @media(max-width: 810px){ width: 80%; padding-top: 0; } @@ -432,11 +410,12 @@ font-size: 1.8rem; @media(max-width: 550px){ width: 90%; + padding-top: 2rem; } } .field_field_texte{ width: 80%; - @media(max-width: 700px){ + @media(max-width: 820px){ position: relative; top: -80px; } @@ -446,11 +425,14 @@ display: grid; grid-template-columns: repeat(6 auto); grid-template-rows: repeat(3 auto); - @media(max-width: 700px){ + @media(max-width: 820px){ grid-template-rows: repeat(10 auto); grid-template-columns: repeat(2 1fr); padding-left: 0; } + @media(max-width: 1090px){ + padding-left: 0; + } h5{ font-size: 5rem; @@ -469,7 +451,7 @@ grid-column: 3; position: relative; top: -70px; - @media(max-width: 700px){ + @media(max-width: 820px){ grid-row: 4; grid-column: 2; margin: auto; @@ -480,7 +462,7 @@ h5:nth-of-type(3){ grid-row: 1; grid-column: 5; - @media(max-width: 700px){ + @media(max-width: 820px){ grid-row: 8; grid-column: 1; padding-left: 1rem; @@ -493,7 +475,7 @@ &:not(:last-of-type){ padding-right: 2rem; } - @media(max-width: 700px){ + @media(max-width: 820px){ font-size: 1.2rem; } } @@ -501,11 +483,14 @@ grid-row: 1 /span 2; grid-column: 1 /span 2; padding: 1rem; - @media(max-width: 700px){ + @media(max-width: 820px){ width: 230px; top: 50px; position: relative; } + @media(max-width: 1090px){ + width: 270px; + } } svg:nth-of-type(2){ @@ -515,7 +500,7 @@ padding-left: 0; position: relative; top: -70px; - @media(max-width: 700px){ + @media(max-width: 820px){ grid-row: 4; grid-column: 1 /span 2 ; width: 230px; @@ -523,8 +508,9 @@ top: -10px; } - - + @media(max-width: 1090px){ + width: 270px; + } } svg:nth-of-type(3){ grid-row: 1 /span 2; @@ -533,7 +519,7 @@ padding-left: 0; position: relative; left: -0.5rem; - @media(max-width: 700px){ + @media(max-width: 820px){ grid-row: 8 ; grid-column: 1 /span 2; width: 230px; @@ -542,19 +528,25 @@ padding-left: 1rem; position: relative; } + @media(max-width: 1090px){ + width: 270px; + } } p:nth-of-type(1){ grid-row: 3; grid-column: 1 /span 2; padding-left: 1rem; + @media(max-width: 820px){ + padding: 1rem; + } } p:nth-of-type(2){ display: block; grid-row: 1; height: fit-content; padding-top: 0%; - @media(max-width: 700px){ + @media(max-width: 820px){ grid-row: 7; grid-column: 1 /span 2; padding: 1rem; @@ -564,18 +556,24 @@ } p:nth-of-type(3){ grid-row: 3; - grid-column: 5; - @media(max-width: 700px){ + grid-column: 5 /span 6; + @media(max-width: 820px){ grid-row: 9; grid-column: 1 /span 2; padding-left: 1rem; top: -80px; position: relative; } + @media(max-width: 1090px){ + } + } } } } + + + /////////////////animation pilliers ////////////// #paragraph-id--7 .colone-picto svg #pillier-1-path365{ stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ 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 index b38c2b6..74e116c 100644 --- 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 @@ -1,4 +1,5 @@ #home{ + #background-animated { position: absolute; top: 1000px; @@ -7,16 +8,20 @@ height: 100%; pointer-events: none; /* Permet de cliquer à travers l'élément */ z-index: 5; /* S'assure que l'élément soit au-dessus */ - @media(max-width: 810px){ - top: 1820px; + @media(max-width: 1400px){ + display: none; } svg{ max-width: 100%; position: relative; top: -1500px; } - - } + } + // .not-visible{ + // @media (max-width:1100px) { + // display: none; + // } + // } .layout-content { position: relative; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss index 1094496..9efcc73 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss @@ -128,7 +128,8 @@ header{ margin: 0; @media(max-width: 810px){ top: calc($header-height-pad / 4 ); - padding-left: 15%; + align-items: center; + margin: 1rem; } li{ @media(max-width: 1090px){ @@ -145,8 +146,8 @@ header{ @media(max-width: 500px){ display: flex; flex-direction: column; - align-items: flex-start; - font-size: 0.6rem; + align-items: center; + font-size: 0.9rem; } } 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 4377374..c72b99d 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 @@ -89,6 +89,9 @@ border-radius: 50%; background: black; } + @media(max-width:810px){ + width: 100vw; + } .paragraph--type--phase-deroulement{ position: absolute;