refresh formes pos on window resize

web_main/themes/custom/mathallo/assets/js/main.js

@@ -1,8 +1,8 @@
-import { createApp } from 'vue'
+// import { createApp } from 'vue'
 import '../scss/main.scss'
-import Content from './vuejs/Content.vue'
+// import Content from './vuejs/Content.vue'
 
-import REST from './api/rest-axios'
+// import REST from './api/rest-axios'
 
 // import LocomotiveScroll from 'locomotive-scroll';
 // const scroll = new LocomotiveScroll();
@@ -50,6 +50,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
 
     let sizes = [];
 
+    let cardsForms = [];
 
     //  ___      _ _
     // |_ _|_ _ (_) |_
@@ -93,6 +94,14 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
       
     }
 
+    function onWindowResize() {
+      cardsForms.forEach(({card, forme, formepos}) => {
+        // console.log(`card`, card, 'forme', forme, 'formepos', formepos);
+        forme.style.top = `${card.offsetTop + formepos.top}px`;
+        forme.style.left = `${card.offsetLeft + formepos.left}px`;
+      })
+    }
+
     async function initBgFormes(){
       const container = document.querySelector('main[role="main"] > .layout-content > .wrapper');
       // console.log('container', container);
@@ -111,6 +120,9 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
       let oddeven=1;
       for (const card of cards) {
         // console.log('card', card);
+        let cardFormObject = {
+          card: card
+        };
 
         // random forme
         // avoid duplicated formes
@@ -125,6 +137,19 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
 
         container.prepend(forme);
 
+        cardFormObject.forme = forme;
+
+        // register relative position of forme against card
+        cardFormObject.formepos = {
+          left: forme.offsetLeft - card.offsetLeft,
+          top: forme.offsetTop - card.offsetTop
+        }
+
+        // register cards and formes
+        cardsForms.push(cardFormObject);
+        // console.log('cardsForms', cardsForms);
+        
+
         // Snap au centre de la fenêtre pour la card en utilisant le plugin Snap de GSAP
         // ScrollTrigger.create({
         //   trigger: document.querySelector('.partie-principes-pratique'),
@@ -210,9 +235,13 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
 
         // inverse oddeven
         oddeven*=-1;
+
       }
+
+      window.addEventListener('resize', onWindowResize);
     }
 
+
     async function createForme(card, n){
         let forme = document.createElement('div');
         forme.classList.add('bg-forme');

web_main/themes/custom/mathallo/assets/scss/main.scss

@@ -417,6 +417,7 @@ main[role="main"]{
         // transform: translateY(-3em);
         position: absolute;
         top:-1em;
+        font-size: 1.2em;
         &>*{
           font-weight: 600;
         }