aside

web/themes/custom/colloque2024/css-compiled/index.css

@@ -517,6 +517,7 @@ body #content-ontop {
   top: -1200px; }
 
 body #background-animated {
+  width: 100VW;
   z-index: -1;
   position: relative;
   left: -400px; }
@@ -701,6 +702,24 @@ header #block-colloque2024-mainnavigation ul li {
       margin: 2rem 0; } }
   #presentation .__wrapper {
     margin-top: 1rem; }
+  #presentation.main {
+    max-width: 100vw;
+    margin: 0;
+    display: flex; }
+
+.layout {
+  display: flex;
+  flex-direction: row; }
+  .layout #aside-animated {
+    display: flex;
+    z-index: -1;
+    position: absolute;
+    width: 25%;
+    left: 0;
+    margin: auto;
+    padding: auto; }
+    .layout #aside-animated svg {
+      margin: auto; }
 
 .container.programme {
   padding-top: 1.5rem; }
@@ -1972,6 +1991,8 @@ footer {
   height: auto;
   padding: 2rem 0 0 0;
   margin-top: 2rem; }
+  footer .container {
+    max-width: 90vw; }
   footer > .d-flex > div {
     margin-bottom: 1.5rem; }
   @media (min-width: 992px) {

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

@@ -11,6 +11,7 @@ body #content-ontop {
   top: -1200px; }
 
 body #background-animated {
+  width: 100VW;
   z-index: -1;
   position: relative;
   left: -400px; }

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

@@ -5,6 +5,10 @@ footer{
   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/pages/layout.scss

@@ -14,10 +14,10 @@ body {
  top: -1200px;
  }
  #background-animated{
- z-index: -1;
- position: relative;
+  width: 100VW;
+  z-index: -1;
+  position: relative;
   left: -400px;
- 
  }
 }
 

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

@@ -15,4 +15,32 @@
   .__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%;
+    left: 0;
+    margin: auto;
+    padding: auto;
+    svg{
+      margin: auto;
+    }
+  }
+
 }

web/themes/custom/colloque2024/js/animation-aside.js

@@ -0,0 +1,21 @@
+let dropdowns1 = document.getElementById('circle_vert_clair_erable_3');
+
+ 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.3); // Limite la progression à 0.3 (pour éviter un dépassement)
+    translateY = 410 * progress * (0.48 - progress); // Réduction de la vitesse vers la fin de l'animation
+    dropdown1.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
+    if (progress < 0.999999) {
+        requestAnimationFrame(animate);
+    }
+}
+requestAnimationFrame(animate);
+}
+slideDown(); // Lancer l'animation lorsque la page est chargée
+
+