Merge branch 'master' of gogs-figureslibres.io:kevin/Popsu-coloque

web/themes/custom/colloque2024/colloque2024.libraries.yml

@@ -15,5 +15,7 @@ global-scripts:
     js/lightbox.js: {}
     js/script.js: {}
     js/animation_home.js: {}
+    js/animation_aside.js: {}
+
   dependencies:
     - core/jquery

web/themes/custom/colloque2024/css-compiled/configs/animation.css

@@ -0,0 +1,51 @@
+@keyframes pulse {
+  0% {
+    transform: scale(0); }
+  100% {
+    transform: scale(0.5); } }
+
+@keyframes slidein {
+  from {
+    transform: translateX(0%); }
+  to {
+    transform: translateX(100%); } }
+
+@keyframes dropDown {
+  from {
+    transform: translateY(0%); }
+  to {
+    transform: translateY(100%); } }
+
+@keyframes translateAnimation {
+  0% {
+    transform: translateX(0);
+    /* Start translation */ }
+  50% {
+    transform: translateX(200); }
+  100% {
+    transform: translateX(500px);
+    /* End translation */ } }
+
+@keyframes changeColor {
+  0% {
+    fill: #b9ce00;
+    /* Initial fill color */ }
+  100% {
+    fill: #ff804d;
+    /* Final fill color */ } }
+
+@keyframes changeColor2 {
+  0% {
+    fill: #038788;
+    /* Initial fill color */ }
+  100% {
+    fill: #349a84;
+    /* Final fill color */ } }
+
+@keyframes traceAppear {
+  0% {
+    opacity: 0; }
+  80% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }

web/themes/custom/colloque2024/css-compiled/pages/layout.css

@@ -6,28 +6,15 @@
   main:not(.home) {
     padding: 4rem 0 !important; } }
 
-body {
-  position: relative; }
-  body #content-ontop {
-    z-index: 3000;
-    position: relative;
-    top: -1200px; }
-  body #background-animated {
-    z-index: 2000;
-    position: relative;
-    left: -350px; }
-  body::before {
-    z-index: -1;
-    content: " ";
-    width: 100%;
-    height: 100%;
-    background-repeat: no-repeat;
-    background-size: content;
-    display: block;
-    position: absolute;
-    opacity: 0.5;
-    top: 100px;
-    left: +53px; }
+body #content-ontop {
+  position: relative;
+  top: -1200px; }
+
+body #background-animated {
+  width: 100VW;
+  z-index: -1;
+  position: relative;
+  left: -400px; }
 
 article.publications, article.interviews {
   margin-top: 1rem; }

web/themes/custom/colloque2024/css/components/footer/footer.scss

@@ -1,9 +1,14 @@
 footer{
   background: white;
+  border-top: 1px solid black;
   width: 100%;
   height: auto;
   padding: 2rem 0 0 0;
   margin-top:2rem;
+  .container{
+   max-width: 90vw; 
+
+  }
   & > .d-flex{
     & > div{
       margin-bottom: 1.5rem;

web/themes/custom/colloque2024/css/components/header/header.scss

@@ -89,9 +89,10 @@ header{
         padding-top: 0.25rem;
         z-index: 9999;
       }
-      // .nav-main{
+      .nav-main{
+        display: none;
         @media screen and (min-width: 1200px) {
-        display: flex;
+        display: block;
           ul{
             margin-bottom: 0;
             flex-wrap: wrap;
@@ -106,7 +107,7 @@ header{
               }
             }
           }
-        // }
+        }
         &.is-active{
           display: block;
           position: fixed;
@@ -145,7 +146,7 @@ header{
                   width: 0%;
                   transition: width 1s ease;
                   height: 1px;
-                  background: $color1;
+                  background: $color2024;
                 }
                 &:hover{
                   &::before{
@@ -201,7 +202,7 @@ header.front{
       }
     }
   }
-  #block-colloque2024-renderedsitesettingsblock-2{
-    // display: none;
+  #block-renderedsitesettingsblock-2{
+    display: none;
   }
 }

web/themes/custom/colloque2024/css/components/slides/slides.scss

@@ -19,7 +19,6 @@
     article {
       width: calc(100% - 30px);
       height: 325px;
-      // background: none;
       display: flex;
       flex-direction: column;
       margin: 3rem $gutter 1.5rem $gutter;
@@ -79,35 +78,26 @@
   .views {
     section.wrap_head {
       // @include croix_or;
-      
       .head {
         display: flex;
         flex-direction: row;
         align-items: center;
         position: relative;
-        
-        .custom-line {
-          flex: 1; /* Pour étendre le trait sur toute la largeur disponible */
-          border: none;
-          border-top: 1px solid #000; /* Couleur et style de la ligne */
-          margin: 10px 0; /* Marge supérieure et inférieure pour l'espacement */
-        }
         h3{
-          // &:after{
-          //   content:url(../images/path1.svg);
-          //   max-width: fit-content;
-          // }
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+
+          &:after{
+            display: block;
+            content: "";
+            max-width: fit-content;
+            width: 100%; /* Étendre la ligne sur toute la largeur */
+            border-bottom: 1px solid #000; /* Couleur et style de la ligne */
+          }
         }
         
       }
-      .head::after {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%; /* Étendre la ligne sur toute la largeur */
-        border-bottom: 1px solid #000; /* Couleur et style de la ligne */
-      }
     }
   }
   @media screen and (min-width: 576px) {
@@ -135,7 +125,7 @@
       }
     }
     .flickity-viewport {
-      // overflow: initial;
+      overflow: initial;
     }
     .flickity-slider > div {
       width: 70%;
@@ -150,10 +140,7 @@
 
 .flickity-slider {
   position: absolute;
-  // width: 300px;
+  width: 100%;
   height: 100%;
   margin-left: 10px;
-  &:hover{
-    // border: solid 1px black;
-  }
 }

web/themes/custom/colloque2024/css/configs/animation.scss

@@ -43,4 +43,3 @@
 }
 
 
-

web/themes/custom/colloque2024/css/pages/front.scss

@@ -24,9 +24,7 @@ header {
 
 #txt_present {
   margin: 3rem 0;
-  .medias{
-    display: none;
-  }
+
   @media screen and (min-width: 992px) {
     margin: 5rem 0;
   }
@@ -172,27 +170,37 @@ header {
 
 #block-colloque2024-views-block-slide-programme-block-1 {
   h3 {
-    // &::after {
-    //   display: inline-flex;
-    //   width: 60px;
-    //   height: 60px;
-    //   vertical-align: middle;
-    //   margin-left: 20px;
-    //   // @include labelOnline;
-    // }
+    &::after {
+      display: inline-flex;
+      width: 60px;
+      height: 60px;
+      vertical-align: middle;
+      margin-left: 20px;
+      // @include labelOnline;
+    }
   }
 }
 
-#block-colloque2024-mainpagecontent{
-  background-color: transparent;
-}
 
 
 ///changement 2024
 
-#block-colloque2024-mainpagecontent{
+#mainHome{
+  max-width: 100vw;
+  margin: 0;
+  display: flex;
+  .layout-content{
+    margin: auto;
+    height: 1500px;
+    max-width: 1140px;
+  }
+}
+
+
+
+#txt_present{
   .medias{
-    display: none;
+  display: none;
   }
 }
 

web/themes/custom/colloque2024/css/pages/layout.scss

@@ -10,59 +10,18 @@ main:not(.home) {
 //
 body {
  #content-ontop{
- z-index: 3000;
  position: relative;
  top: -1200px;
  }
- 
-
  #background-animated{
- z-index: 2000;
- position: relative;
-  left: -350px;
- 
- }
+  width: 100VW;
+  z-index: -1;
   position: relative;
-  &::before {
-    z-index: -1;
-    content: " ";
-    width: 100%;
-    height: 100%;
-    // background-image: url("../images/fond-ronds-trace.svg");
-    background-repeat: no-repeat;
-    background-size: content;
-    display: block;
-    position: absolute;
-    opacity: 0.5;
-    top: 100px;
-    left: +53px;
-  }
-
-
-
-
-  // &::after {
-  //   z-index: -1;
-  //   content: " ";
-  //   width: 100%;
-  //   height: 100%;
-  //   background: linear-gradient(
-  //     to top,
-  //     white,
-  //     rgba(255, 255, 255, 0.8)
-  //   );
-  //   display: block;
-  //   position: absolute;
-  //   transform: translateY(-100%);
-  //   top: 100%;
-  //   left: 0;
-  // }
+  left: -400px;
+ }
 }
 
 article {
-  .__title {
-    // @include croix_or;
-  }
   &.publications,
   &.interviews {
     margin-top: 1rem;
@@ -78,7 +37,5 @@ article {
     }
   }
 }
-h4 {
-  // @include croix_or;
-}
+
 

web/themes/custom/colloque2024/css/pages/presentation.scss

@@ -15,4 +15,38 @@
   .__wrapper{
     margin-top: 1rem;
   }
+
+  &.main{
+    max-width: 100vw;
+    margin: 0;
+    display: flex;
+  }
+
+}
+
+
+.layout{
+  display: flex;
+  flex-direction: row;
+  #main-content-node{
+  }
+  #aside-animated{
+    display: flex;
+    z-index: -1;
+    position: absolute;
+    width: 25%;
+    top: 0;
+    left: 0;
+    margin: auto;
+    padding: auto;
+    svg{
+      margin: auto;
+    }
+
+  
+  
+  
+  
+  }
+
 }

web/themes/custom/colloque2024/css/pages/programme.scss

@@ -8,14 +8,13 @@
       position: relative;
       color: $color2024;
       &::after{
-        // display: inline-flex;
-        display: none;
+        display: inline-flex;
         position: absolute;
         right: 0;
         width: 100px;
         height: 100px;
         vertical-align: middle;
-        @include labelOnline;
+        // @include labelOnline;
         @media screen and (min-width: 768px) {
           width: 150px;
           height: 150px;

web/themes/custom/colloque2024/js/animation_aside.js

@@ -0,0 +1,107 @@
+
+
+
+let asideDowns1 = document.getElementsByClassName('asideDown1');
+Array.from(asideDowns1).forEach(asideDown1 => {
+ function slideDown() {
+  let translateY = 0; // Position de départ (en bas)
+  let duration = 17000; // Durée de l'animation en millisecondes
+  let startTime = null; // Temps de départ de l'animation
+  function animate(timestamp) {
+    if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
+    let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
+    progress = Math.min(progress, 0.9); // Limite la progression à 0.3 (pour éviter un dépassement)
+    translateY = 410 * progress * (0.7 - progress); // Réduction de la vitesse vers la fin de l'animation
+    asideDown1.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
+    if (progress < 0.7) {
+        requestAnimationFrame(animate);
+    }
+    // if (progress >= 0.7) {
+    //     // startTime = null;
+    //     requestAnimationFrame(animate);
+
+    // }
+}
+requestAnimationFrame(animate);
+}
+slideDown(); // Lancer l'animation lorsque la page est chargée
+
+});
+
+
+let asideDowns2 = document.getElementsByClassName('asideDown2');
+Array.from(asideDowns2).forEach(asideDown2 => {
+ function slideDown() {
+  let translateY = 0; // Position de départ (en bas)
+  let duration = 25000; // Durée de l'animation en millisecondes
+  let startTime = null; // Temps de départ de l'animation
+  function animate(timestamp) {
+    if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
+    let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
+    progress = Math.min(progress, 1); // Limite la progression à 0.3 (pour éviter un dépassement)
+    translateY = 410 * progress * (0.7 - progress); // Réduction de la vitesse vers la fin de l'animation
+    asideDown2.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
+    if (progress < 0.7) {
+        requestAnimationFrame(animate);
+    }
+    // if (progress >= 0.7) {
+    //     // startTime = null;
+    //     requestAnimationFrame(animate);
+
+    // }
+}
+requestAnimationFrame(animate);
+}
+slideDown(); // Lancer l'animation lorsque la page est chargée
+
+});
+
+
+let asideDown3 = document.getElementById('circle_vert_clair_erable_6');
+ function slideDown() {
+  let translateY = 0; // Position de départ (en bas)
+  let duration = 23000; // Durée de l'animation en millisecondes
+  let startTime = null; // Temps de départ de l'animation
+  function animate(timestamp) {
+    if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
+    let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
+    progress = Math.min(progress, 1); // Limite la progression à 0.3 (pour éviter un dépassement)
+    translateY = 410 * progress * (0.7 - progress); // Réduction de la vitesse vers la fin de l'animation
+    asideDown3.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
+    if (progress < 0.7) {
+        requestAnimationFrame(animate);
+    }
+    // if (progress >= 0.7) {
+    //     // startTime = null;
+    //     requestAnimationFrame(animate);
+
+    // }
+}
+requestAnimationFrame(animate);
+}
+slideDown(); // Lancer l'animation lorsque la page est chargée
+
+
+
+
+// let moveups = document.getElementsByClassName('moveup');
+// console.log(moveups);
+// Array.from(moveups).forEach(moveup => {
+//   function slideUp() {
+//     let translateY = 0; // Position de départ (en bas)
+//     let duration = 6000; // Durée de l'animation en millisecondes
+//     let startTime = null; // Temps de départ de l'animation
+//     function animate(timestamp) {
+//       if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
+//       let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
+//       progress = Math.min(progress, 0.8); // Limite la progression à 1 (pour éviter un dépassement)
+//       translateY = -10 * progress * (0.7 - progress); // Déplacement d'un pixel vers le haut à chaque itération
+//       moveup.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
+//       if (progress < 0.8) {
+//         requestAnimationFrame(animate);
+//       }
+//     }
+//     requestAnimationFrame(animate);
+//   } 
+// slideUp(); // Lancer l'animation lorsque la page est chargée
+// });

web/themes/custom/colloque2024/js/animation_home.js

@@ -3,32 +3,6 @@
 // Récupérer la forme SVG
 
 
-// let dropdowns = document.getElementsByClassName('dropdown');
-// console.log(dropdowns);
-
-// // Parcourir tous les éléments sélectionnés
-// Array.from(dropdowns).forEach(dropdown => {
-//  function slideDown() {
-//   let translateY = -50; // Position de départ (en bas)
-
-//   function animate() {
-//     translateY += 1; // Déplacement d'un pixel vers le haut à chaque itération
-//     dropdown.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
-          
-//     // dropdown.setAttribute('transform', `translate(0, ${translateY})`); // Appliquer la transformation
-
-//     if (translateY < 100) { // Limite la hauteur à laquelle la forme doit être animée
-//       requestAnimationFrame(animate); // Appel récursif de la fonction animate
-//     }
-//   }
-
-//   animate(); // Lancer l'animation
-// }
-
-// slideDown(); // Lancer l'animation lorsque la page est chargée
-// });
-
-
 let dropdowns1 = document.getElementsByClassName('dropdown1');
 console.log(dropdowns1);
 Array.from(dropdowns1).forEach(dropdown1 => {

web/themes/custom/colloque2024/js/script.js

@@ -134,7 +134,7 @@
     var $slide = $('main section .__slide');
 
     var thumbnails = $('.__slide article.programme.is-selected');
-    var $head_date =  $('#block-views-block-slide-programme-block-1 section.first:before');
+    var $head_date =  $('#block-colloque2024-views-block-slide-programme-block-1 section.first:before');
 
     $slide.each(function() {
       $(this).flickity({

web/themes/custom/colloque2024/template/components/header_slide.html.twig

@@ -1,6 +1,5 @@
 <div class="head">
   {{ header }}
-  <hr class="custom-line">
   {% if more or view.storage.id == 'slide_programme' %}
   
   <div class="wrap d-flex">

web/themes/custom/colloque2024/template/node/node--page-d-accueil.html.twig

@@ -73,6 +73,7 @@
  */
 #}
 
+
 <div class="__img-hero">
   {{content.field_image_hero}}
 </div>