actus caroussel overflow....

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -732,7 +732,7 @@ footer {
   cursor: pointer;
   background: transparent;
   color: transparent;
-  top: -1rem;
+  top: -2rem;
   -webkit-transform: translate(0, -1rem);
   -ms-transform: translate(0, -1rem);
   transform: translate(0, -1rem);
@@ -977,7 +977,7 @@ footer {
 #home * {
   box-sizing: border-box;
 }
-#home .config_pages--type--deroulement {
+#home .__container-deroulement {
   background-color: #f3f5fc;
   background-image: url(../../../dist/assets/img/pillier-1.svg);
   background-repeat: no-repeat;
@@ -985,14 +985,21 @@ footer {
   background-position-x: -20%;
 }
 @media (max-width: 1090px) {
-  #home .config_pages--type--deroulement {
+  #home .__container-deroulement {
     cursor: grab;
   }
 }
+#home .__container-deroulement h2 {
+  width: fit-content;
+  margin: auto;
+  padding-top: 3rem;
+  font-size: 1.7rem;
+  font-weight: bold;
+}
 #home .timeline {
   white-space: nowrap;
   overflow: hidden;
-  padding-top: 10rem;
+  padding-top: 5rem;
   padding-bottom: 4rem;
 }
 @media (max-width: 1090px) {
@@ -1006,6 +1013,7 @@ footer {
   margin: auto;
   position: relative;
   top: -115px;
+  padding-bottom: 2rem;
 }
 @media (max-width: 1090px) {
   #home .timeline .__timeline-arrows {
@@ -1020,9 +1028,6 @@ footer {
 #home .timeline .__timeline-arrows button:hover {
   opacity: 0.5;
 }
-#home .timeline .__timeline-arrows button svg {
-  padding: 0.5rem;
-}
 #home .timeline .__timeline-content {
   width: 100vw;
   padding-top: 7rem;
@@ -1153,8 +1158,9 @@ footer {
 }
 #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre {
   font-size: 0.5rem;
+  font-weight: 800;
 }
-@media (max-width: 10900px) {
+@media (max-width: 1090px) {
   #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre {
     font-size: 1rem;
   }
@@ -1176,10 +1182,11 @@ footer {
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding-bottom: 3rem;
 }
 #actus-caroussel h2 {
   width: fit-content;
-  padding-bottom: 0.6rem;
+  padding-bottom: 0.4rem;
   margin-top: 3rem;
   margin-bottom: 3rem;
   font-size: 1.7rem;
@@ -1193,7 +1200,7 @@ footer {
 }
 #actus-caroussel .content-actus .views-row {
   width: 500px !important;
-  padding: 1rem;
+  padding: 2rem;
 }
 @media (max-width: 550px) {
   #actus-caroussel .content-actus .views-row {
@@ -1248,6 +1255,7 @@ footer {
   color: red;
   display: inline-flex;
   align-items: center;
+  font-size: 0.6rem;
 }
 #actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_date::before {
   content: url("../img/date-actu.svg");
@@ -1261,6 +1269,10 @@ footer {
   font-size: 0.8rem;
   color: rgb(7, 50, 194);
 }
+#actus-caroussel .content-actus .views-row article.node-type-actualite .field_body {
+  opacity: 1 !important;
+  transform: none !important;
+}
 #actus-caroussel .content-actus .views-row article.node-type-actualite .field_body p {
   margin: 0;
 }

web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js

@@ -150,133 +150,149 @@
   });
 
 
-//////////////////////// smooth apparition des textes
+  //////////////////////// smooth apparition des textes
 
 
-function scrollReaveal(){
+  function scrollReaveal(){
 
-  const nodes = {
+    const nodes = {
-    logo : document.querySelectorAll('#logo-animated-container'),
+      logo : document.querySelectorAll('#logo-animated-container'),
-    chapeau :  document.querySelectorAll('.field_body'),
+      chapeau :  document.querySelectorAll('.field_body'),
-    paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),
+      paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),
-  }
-
-  const showUp = {
-      origin: 'bottom',
-      delay: 100,
-      duration: 1000,
-      distance: '50px',
-      easing: 'cubic-bezier(0.5, 0, 0, 1)'
-  }
-
-  const Show = {
-    delay: 100,
-    duration: 600,
-    easing: 'cubic-bezier(0.5, 0, 0, 1)'
-  }
-
-  console.log(nodes);
-
-  ScrollReveal().reveal(nodes.logo, Show);
-  ScrollReveal().reveal(nodes.chapeau, showUp);
-  ScrollReveal().reveal(nodes.paragraph, showUp);
-}
-
-
-$( document ).ready(function() {
-  scrollReaveal();
-});
-
-
-
-////////////////// Timeline ///////////////////////
-
-
-document.addEventListener('DOMContentLoaded', function() {
-  let currentSlide = 0;
-
-  function getVisibleSlides() {
-    if (window.innerWidth <= 600) {
-      return 1; // Show 1 slide on small screens
-    } else if (window.innerWidth <= 900) {
-      return 2; // Show 2 slides on medium screens
-    } else {
-      return 3; // Show 3 slides on large screens
     }
+
+    const showUp = {
+        origin: 'bottom',
+        delay: 100,
+        duration: 1000,
+        distance: '50px',
+        easing: 'cubic-bezier(0.5, 0, 0, 1)'
+    }
+
+    const Show = {
+      delay: 100,
+      duration: 600,
+      easing: 'cubic-bezier(0.5, 0, 0, 1)'
+    }
+
+    console.log(nodes);
+
+    ScrollReveal().reveal(nodes.logo, Show);
+    ScrollReveal().reveal(nodes.chapeau, showUp);
+    ScrollReveal().reveal(nodes.paragraph, showUp);
   }
 
-  function showSlides(index) {
-    const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');
-    const totalSlides = slides.length;
-    const visibleSlides = getVisibleSlides();
-    const maxSlide = totalSlides - visibleSlides + 1;
 
-    // Adjust the index to ensure it stays within bounds
+  $( document ).ready(function() {
-    currentSlide = Math.max(0.6, Math.min(index, maxSlide));
+    scrollReaveal();
+  });
 
-    // Calculate the offset for the transform
-    const offset = currentSlide * -70 / visibleSlides;
-    document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;
 
-    // Enable/disable arrows based on the current slide
-    document.getElementById('arrowPrev').disabled = currentSlide === 0;
-    document.getElementById('arrowNext').disabled = currentSlide === maxSlide;
-  }
 
-  function prevSlide() {
+ ////////////////// Timeline ///////////////////////
-    showSlides(currentSlide - 1);
-  }
 
-  function nextSlide() {
-    showSlides(currentSlide + 1);
-  }
 
-  // Attach event listeners
+  document.addEventListener('DOMContentLoaded', function() {
-  document.getElementById('arrowPrev').addEventListener('click', prevSlide);
+    let currentSlide = 0;
-  document.getElementById('arrowNext').addEventListener('click', nextSlide);
 
-  // Initialize the first view of the slides
+    function getVisibleSlides() {
-  showSlides(currentSlide);
+      if (window.innerWidth <= 600) {
-
+        return 1; // Show 1 slide on small screens
-  // Update month field to only show the first 3 letters
+      } else if (window.innerWidth <= 900) {
-  document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
+        return 2; // Show 2 slides on medium screens
-    const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
+      } else {
-    if (monthField) {
+        return 3; // Show 3 slides on large screens
-      const monthText = monthField.textContent.trim();
-      if (monthText.length >= 3) {
-        monthField.textContent = monthText.slice(0, 3);
       }
     }
-  });
 
-  // Handle window resize
+    function showSlides(index) {
-  window.addEventListener('resize', function() {
+      const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');
-    showSlides(currentSlide); // Recalculate the slides on resize
+      const totalSlides = slides.length;
-  });
+      const visibleSlides = getVisibleSlides();
-// });
+      const maxSlide = totalSlides - visibleSlides + 1;
 
+      // Adjust the index to ensure it stays within bounds
+      currentSlide = Math.max(0.6, Math.min(index, maxSlide));
 
-  // Initialize
+      // Calculate the offset for the transform
-  showSlides(currentSlide);
+      const offset = currentSlide * -70 / visibleSlides;
-});
+      document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;
 
-document.addEventListener('DOMContentLoaded', function() {
+      // Enable/disable arrows based on the current slide
-  // Iterate over each .date element
+      document.getElementById('arrowPrev').disabled = currentSlide === 0;
-  document.querySelectorAll('.date').forEach(function(dateElement) {
+      document.getElementById('arrowNext').disabled = currentSlide === maxSlide;
-    const date2Element = dateElement.querySelector('.date2');
-    const yearElement = dateElement.querySelector('.field_field_date_de_annee');
-
-    // Check if the .date2 element is empty
-    if (date2Element && !date2Element.textContent.trim()) {
-      // Add the .only class to the year element
-      yearElement.classList.add('only');
     }
+
+    function prevSlide() {
+      showSlides(currentSlide - 1);
+    }
+
+    function nextSlide() {
+      showSlides(currentSlide + 1);
+    }
+
+    // Attach event listeners
+    document.getElementById('arrowPrev').addEventListener('click', prevSlide);
+    document.getElementById('arrowNext').addEventListener('click', nextSlide);
+
+    // Initialize the first view of the slides
+    showSlides(currentSlide);
+
+    // Update month field to only show the first 3 letters
+    document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
+      const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
+      if (monthField) {
+        const monthText = monthField.textContent.trim();
+        if (monthText.length >= 3) {
+          monthField.textContent = monthText.slice(0, 3);
+        }
+      }
+    });
+
+    // Handle window resize
+    window.addEventListener('resize', function() {
+      showSlides(currentSlide); // Recalculate the slides on resize
+    });
+  // });
+
+
+    // Initialize
+    showSlides(currentSlide);
+  });
+
+  document.addEventListener('DOMContentLoaded', function() {
+    // Iterate over each .date element
+    document.querySelectorAll('.date').forEach(function(dateElement) {
+      const date2Element = dateElement.querySelector('.date2');
+      const yearElement = dateElement.querySelector('.field_field_date_de_annee');
+
+      // Check if the .date2 element is empty
+      if (date2Element && !date2Element.textContent.trim()) {
+        // Add the .only class to the year element
+        yearElement.classList.add('only');
+      }
+    });
   });
-});
 
 
 
-//  slideshow home 
+  ///////////////////  caracteres  body actus/////////////////////////
+
+  document.addEventListener('DOMContentLoaded', function() {
+    // Maximum number of characters to display
+    const maxChars = 140; // Adjust this value as needed
+  
+    document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body p').forEach(function(paragraph) {
+      let text = paragraph.textContent.trim();
+      if (text.length > maxChars) {
+        let truncatedText = text.slice(0, maxChars) + '...';
+        paragraph.textContent = truncatedText;
+      }
+    });
+  });
+  
+
+ ////////////  slideshow home  ////////////////////////// 
 
   $(document).ready(function(){
       $('.content-actus .view').slick({

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualite.scss

@@ -1,5 +1,4 @@
 #page-node{
-    // .node-id-11{
         .content_container{
             width: 60%;
             display: flex;

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss

@@ -2,9 +2,10 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding-bottom: 3rem;
     h2{
         width: fit-content;
-        padding-bottom: 0.6rem;
+        padding-bottom: 0.4rem;
         margin-top: 3rem;
         margin-bottom: 3rem;
         font-size: 1.7rem;
@@ -20,10 +21,10 @@
         }
         .views-row{
             width: 500px !important;
+            padding: 2rem;
             @media(max-width: 550px){
                 width: 296px !important;
             }
-            padding: 1rem;
             article.node-type-actualite{
                 display: flex;
                 flex-direction: column;
@@ -68,6 +69,7 @@
                     color: red;
                     display: inline-flex;
                     align-items: center;
+                    font-size: 0.6rem;
                     &::before{
                         content: url('../img/date-actu.svg');
                         padding-right: 0.2rem;
@@ -86,7 +88,9 @@
                     } 
                 }
                 .field_body{
-                  
+                    // visibility: visible;
+                    opacity: 1 !important;
+                    transform: none !important;
                     p{
                         margin: 0;
                     }
@@ -99,5 +103,6 @@
             top: 60px;
         } 
 
+
     }
 }

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss

@@ -76,7 +76,7 @@ $slick-opacity-not-active: 0.25 !default;
     cursor: pointer;
     background: transparent;
     color: transparent;
-    top: -1rem;
+    top: -2rem;
     -webkit-transform: translate(0, -1rem);
     -ms-transform: translate(0, -1rem);
     transform: translate(0, -1rem);

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss

@@ -4,7 +4,7 @@
 #home{
    
     * { box-sizing: border-box; }
-    .config_pages--type--deroulement{
+    .__container-deroulement{
         background-color: #f3f5fcff;
         background-image: url(../../../dist/assets/img/pillier-1.svg);
         background-repeat: no-repeat;
@@ -13,12 +13,19 @@
         @media(max-width:1090px){
             cursor:grab;
     }
+    h2{
+        width: fit-content;
+        margin: auto;
+        padding-top: 3rem;
+        font-size: 1.7rem;
+        font-weight: bold;
+    }
 
     }
     .timeline {
         white-space: nowrap;
         overflow: hidden;
-        padding-top: 10rem;
+        padding-top: 5rem;
         padding-bottom: 4rem;
         @media(max-width:1090px){
             padding-top: 18rem;
@@ -29,6 +36,7 @@
             margin: auto;
             position: relative;
             top: -115px;
+            padding-bottom: 2rem;
             @media(max-width:1090px){
                 top: -211px;
                 display: none;
@@ -39,10 +47,10 @@
                 &:hover{
                     opacity: 0.5;
                 } 
-                svg{
+                // svg{
-                    padding: 0.5rem;
+                //     padding: 0.5rem;
 
-                }
+                // }
             }
         }
         .__timeline-content{
@@ -179,7 +187,8 @@
                         min-width: 65%;
                         .field_field_titre{
                             font-size: 0.5rem;
-                            @media(max-width:10900px){
+                            font-weight: 800;
+                            @media(max-width:1090px){
                                 font-size: 1rem;
                             }
                         }

web/themes/custom/quartiers_de_demain/templates/block--config-pages--deroulement.html.twig

@@ -0,0 +1,40 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="__container-deroulement"{{ attributes }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</div>