refresh formes pos on window resize

config/sync/block.block.mathallo_contenu_3.yml

@@ -0,0 +1,46 @@
+uuid: e74678f7-d85f-4b43-9301-dc7952b86aa1
+langcode: fr
+status: true
+dependencies:
+  config:
+    - system.menu.contenu
+  module:
+    - block_class
+    - menu_block
+    - node
+  theme:
+    - mathallo
+third_party_settings:
+  block_class:
+    classes: next-chapitre
+id: mathallo_contenu_3
+theme: mathallo
+region: content
+weight: -3
+provider: null
+plugin: 'menu_block:contenu'
+settings:
+  id: 'menu_block:contenu'
+  label: 'Contenu next chapitre'
+  label_display: '0'
+  provider: menu_block
+  follow: true
+  follow_parent: active
+  display_empty: false
+  label_link: false
+  label_type: block
+  level: 1
+  depth: 1
+  expand_all_items: false
+  parent: 'contenu:'
+  render_parent: false
+  suggestion: contenu
+  hide_on_nonactive: true
+visibility:
+  'entity_bundle:node':
+    id: 'entity_bundle:node'
+    negate: false
+    context_mapping:
+      node: '@node.node_route_context:node'
+    bundles:
+      chapitre: chapitre

config/sync/block.block.mathallo_contenu_4.yml

@@ -0,0 +1,46 @@
+uuid: fa1097ba-d47a-4939-97a1-c310e6257709
+langcode: fr
+status: true
+dependencies:
+  config:
+    - system.menu.contenu
+  module:
+    - block_class
+    - menu_block
+    - node
+  theme:
+    - mathallo
+third_party_settings:
+  block_class:
+    classes: prev-chapitre
+id: mathallo_contenu_4
+theme: mathallo
+region: content
+weight: 0
+provider: null
+plugin: 'menu_block:contenu'
+settings:
+  id: 'menu_block:contenu'
+  label: 'Contenu prev chapitre'
+  label_display: '0'
+  provider: menu_block
+  follow: true
+  follow_parent: active
+  display_empty: false
+  label_link: false
+  label_type: block
+  level: 1
+  depth: 1
+  expand_all_items: false
+  parent: 'contenu:'
+  render_parent: false
+  suggestion: contenu
+  hide_on_nonactive: true
+visibility:
+  'entity_bundle:node':
+    id: 'entity_bundle:node'
+    negate: false
+    context_mapping:
+      node: '@node.node_route_context:node'
+    bundles:
+      chapitre: chapitre

config/sync/block_class.settings.yml

@@ -4,6 +4,9 @@ langcode: fr
 maxlength_block_class_field: 255
 field_type: multiple_textfields
 default_case: standard
+block_classes_stored:
+  - next-chapitre
+  - prev-chapitre
 enable_attributes: true
 enable_auto_complete: true
 qty_classes_per_block: 10

config/sync/config_ignore.settings.yml

@@ -1,6 +1,9 @@
 _core:
   default_config_hash: LzdDtE3Im_Ysio7g1Eo8ymSMq0mgSQMPzv0khsr_J64
 langcode: fr
-mode: simple
+mode: intermediate
 ignored_config_entities:
-  - shield.settings.yml
+  import:
+    - shield.settings
+  export:
+    - shield.settings

config/sync/core.entity_view_mode.paragraph.preview.yml

@@ -1,5 +1,5 @@
 uuid: 74f4d612-52d4-4c83-9ae2-b3fb78a6a82b
-langcode: en
+langcode: fr
 status: true
 dependencies:
   module:
@@ -7,7 +7,7 @@ dependencies:
 _core:
   default_config_hash: h3BeHVei4Lnyqbkao3YiF4KqoY-DhRvUNfEgKG8Rgjg
 id: paragraph.preview
-label: Preview
+label: Aperçu
 description: ''
 targetEntityType: paragraph
 cache: true

config/sync/shield.settings.yml

@@ -1,11 +1,11 @@
 _core:
   default_config_hash: FLJZME3II5fjmMSrdEvJHp95ZJf8V_X0jbX0VdVU1BU
-shield_enable: false
+shield_enable: true
 credential_provider: shield
 credentials:
   shield:
-    user: ''
+    user: mathallo
-    pass: ''
+    pass: 6eATX3mpGf2TvX
 allow_cli: true
 debug_header: false
 unset_basic_auth_headers: true

web_main/themes/custom/mathallo/assets/img/grid_0.svg

@@ -7,7 +7,7 @@
    viewBox="0 0 21.166666 21.166666"
    version="1.1"
    id="svg1"
-   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
    sodipodi:docname="grid_0.svg"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
@@ -23,11 +23,11 @@
      inkscape:pagecheckerboard="0"
      inkscape:deskcolor="#d1d1d1"
      inkscape:document-units="px"
-     inkscape:zoom="4.094343"
+     inkscape:zoom="10.502538"
-     inkscape:cx="51.29028"
+     inkscape:cx="49.083373"
-     inkscape:cy="56.175068"
+     inkscape:cy="53.034799"
      inkscape:window-width="1920"
-     inkscape:window-height="1149"
+     inkscape:window-height="1029"
      inkscape:window-x="0"
      inkscape:window-y="0"
      inkscape:window-maximized="1"
@@ -40,11 +40,11 @@
      id="layer1">
     <path
        style="fill:none;fill-rule:evenodd;stroke:#afbeea;stroke-width:0.264584px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="M 21.034375,1.3229166 V 19.84375"
+       d="M 20.769791,1.3229166 V 19.84375"
        id="path1" />
     <path
        style="fill:none;fill-rule:evenodd;stroke:#afbeea;stroke-width:0.264584px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="M 1.3229167,21.034375 H 19.84375"
+       d="M 1.3229167,20.769791 H 19.84375"
        id="path1-3" />
   </g>
 </svg>

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,7 +120,10 @@ 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
         let n = Math.round(Math.random() * (formesclasses.length -1));
@@ -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');
@@ -286,13 +315,24 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
       });
 
       ScrollSmoother.create({
-        smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position
+        smooth: 3, // how long (in seconds) it takes to "catch up" to the native scroll position
         effects: true, // looks for data-speed and data-lag attributes on elements
         smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices)
         wrapper: 'main[role="main"]',
         content: 'main[role="main"]>.layout-content'
       });
 
+      gsap.to('#parallax-bg', {
+        y: (i, target) => -(ScrollTrigger.maxScroll(window) * 1.2),
+        ease: "none",
+        scrollTrigger: {
+          trigger: 'main[role="main"] > .layout-content > .wrapper',
+          start: "top bottom",
+          end: "bottom top",
+          scrub: true,
+          invalidateOnRefresh: true
+        }
+      });
 
       
       

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

@@ -10,9 +10,6 @@ a, a:visited{
 
 body{
   margin: 0;
-  background-image: url('/themes/custom/mathallo/assets/img/grid_0.svg');
-  background-repeat: repeat;
-  background-position: center;
 }
 
 $header_height: 50px;
@@ -262,7 +259,40 @@ nav[role="breadcrumb"]{
 // \_|  |_/\__,_|_|_| |_|
                       
 main[role="main"]{
+  position: relative;
   &>div.layout-content{
+    position: relative;
+
+    div#parallax-bg{
+      position: absolute;
+      z-index: -1;
+      top:0;
+      left: 0;
+      margin-top: -40vh;
+      width: 100vw;
+      height:400%;
+
+
+      background-image: url('/themes/custom/mathallo/assets/img/grid_0.svg');
+      background-repeat: repeat;
+      background-position: center;
+
+      // mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
+
+    }
+
+    // div#custom-cursor{
+    //   position: absolute;
+    //   top:40vh; left:50vh;
+    //   display: block;
+    //   $wh:100px;
+    //   width:$wh; height:$wh;
+    //   border-radius: $wh / 2;
+    //   background-color: #000;
+    //   // mix-blend-mode:color;
+    //   mask-composite: exclude;
+    // }
+
     &>.wrapper{
       position:relative;
       padding-bottom: 100vh;
@@ -387,6 +417,7 @@ main[role="main"]{
         // transform: translateY(-3em);
         position: absolute;
         top:-1em;
+        font-size: 1.2em;
         &>*{
           font-weight: 600;
         }

web_main/themes/custom/mathallo/templates/page.html.twig

@@ -70,8 +70,10 @@
 
   <main role="main">
     <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
-
+    
     <div class="layout-content">
+      <div id="parallax-bg"></div>
+      {# <div id="custom-cursor"></div> #}
       {{ page.content }}
     </div>{# /.layout-content #}