diff --git a/web/themes/erabletheme/assets/bg-shapes/bg-1.svg b/web/themes/erabletheme/assets/bg-shapes/bg-1.svg deleted file mode 100644 index 2ff474a..0000000 --- a/web/themes/erabletheme/assets/bg-shapes/bg-1.svg +++ /dev/null @@ -1,234 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/web/themes/erabletheme/assets/bg-shapes/bg-10.svg b/web/themes/erabletheme/assets/bg-shapes/bg-10.svg deleted file mode 100644 index d67d8f8..0000000 --- a/web/themes/erabletheme/assets/bg-shapes/bg-10.svg +++ /dev/null @@ -1,119 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/web/themes/erabletheme/assets/bg-shapes/bg-11.svg b/web/themes/erabletheme/assets/bg-shapes/bg-11.svg deleted file mode 100644 index a4d7e8c..0000000 --- a/web/themes/erabletheme/assets/bg-shapes/bg-11.svg +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/web/themes/erabletheme/assets/bg-shapes/bg-12.png b/web/themes/erabletheme/assets/bg-shapes/bg-12.png deleted file mode 100644 index 9b1453a..0000000 Binary files a/web/themes/erabletheme/assets/bg-shapes/bg-12.png and /dev/null differ diff --git a/web/themes/erabletheme/assets/bg-shapes/bg-2.svg b/web/themes/erabletheme/assets/bg-shapes/bg-2.svg deleted file mode 100644 index d54cdba..0000000 --- a/web/themes/erabletheme/assets/bg-shapes/bg-2.svg +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/web/themes/erabletheme/assets/bg-shapes/bg-3.svg b/web/themes/erabletheme/assets/bg-shapes/bg-3.svg deleted file mode 100644 index 3f24aae..0000000 --- a/web/themes/erabletheme/assets/bg-shapes/bg-3.svg +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/web/themes/erabletheme/assets/bg-shapes/bg-4.svg b/web/themes/erabletheme/assets/bg-shapes/bg-4.svg deleted file mode 100644 index 1fd206a..0000000 --- a/web/themes/erabletheme/assets/bg-shapes/bg-4.svg +++ /dev/null @@ -1,216 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/web/themes/erabletheme/assets/bg-shapes/bg-5.svg b/web/themes/erabletheme/assets/bg-shapes/bg-5.svg deleted file mode 100644 index ac65547..0000000 --- a/web/themes/erabletheme/assets/bg-shapes/bg-5.svg +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/web/themes/erabletheme/assets/bg-shapes/bg-6.svg b/web/themes/erabletheme/assets/bg-shapes/bg-6.svg deleted file mode 100644 index 86c59c3..0000000 --- a/web/themes/erabletheme/assets/bg-shapes/bg-6.svg +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/web/themes/erabletheme/assets/bg-shapes/bg-7.svg b/web/themes/erabletheme/assets/bg-shapes/bg-7.svg deleted file mode 100644 index 9540f5f..0000000 --- a/web/themes/erabletheme/assets/bg-shapes/bg-7.svg +++ /dev/null @@ -1,129 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/web/themes/erabletheme/assets/bg-shapes/bg-8.svg b/web/themes/erabletheme/assets/bg-shapes/bg-8.svg deleted file mode 100644 index bb0e6a8..0000000 --- a/web/themes/erabletheme/assets/bg-shapes/bg-8.svg +++ /dev/null @@ -1,134 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/web/themes/erabletheme/assets/bg-shapes/bg-9.svg b/web/themes/erabletheme/assets/bg-shapes/bg-9.svg deleted file mode 100644 index 7fda1dd..0000000 --- a/web/themes/erabletheme/assets/bg-shapes/bg-9.svg +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/web/themes/erabletheme/assets/new-bg-shapes/left-1.png b/web/themes/erabletheme/assets/new-bg-shapes/left-1.png new file mode 100644 index 0000000..287a2af Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/left-1.png differ diff --git a/web/themes/erabletheme/assets/new-bg-shapes/left-2.png b/web/themes/erabletheme/assets/new-bg-shapes/left-2.png new file mode 100644 index 0000000..65dfbe3 Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/left-2.png differ diff --git a/web/themes/erabletheme/assets/new-bg-shapes/left-3.png b/web/themes/erabletheme/assets/new-bg-shapes/left-3.png new file mode 100644 index 0000000..54c6f3c Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/left-3.png differ diff --git a/web/themes/erabletheme/assets/new-bg-shapes/left-4.png b/web/themes/erabletheme/assets/new-bg-shapes/left-4.png new file mode 100644 index 0000000..d611422 Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/left-4.png differ diff --git a/web/themes/erabletheme/assets/new-bg-shapes/left-5.png b/web/themes/erabletheme/assets/new-bg-shapes/left-5.png new file mode 100644 index 0000000..543171a Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/left-5.png differ diff --git a/web/themes/erabletheme/assets/new-bg-shapes/left-6.png b/web/themes/erabletheme/assets/new-bg-shapes/left-6.png new file mode 100644 index 0000000..bc9c051 Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/left-6.png differ diff --git a/web/themes/erabletheme/assets/new-bg-shapes/mid-left-1.png b/web/themes/erabletheme/assets/new-bg-shapes/mid-left-1.png new file mode 100644 index 0000000..43ed215 Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/mid-left-1.png differ diff --git a/web/themes/erabletheme/assets/new-bg-shapes/mid-left-2.png b/web/themes/erabletheme/assets/new-bg-shapes/mid-left-2.png new file mode 100644 index 0000000..668ae12 Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/mid-left-2.png differ diff --git a/web/themes/erabletheme/assets/new-bg-shapes/right-1.png b/web/themes/erabletheme/assets/new-bg-shapes/right-1.png new file mode 100644 index 0000000..2933dfe Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/right-1.png differ diff --git a/web/themes/erabletheme/assets/new-bg-shapes/right-10.png b/web/themes/erabletheme/assets/new-bg-shapes/right-10.png new file mode 100644 index 0000000..cf50616 Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/right-10.png differ diff --git a/web/themes/erabletheme/assets/new-bg-shapes/right-11.png b/web/themes/erabletheme/assets/new-bg-shapes/right-11.png new file mode 100644 index 0000000..d8fcb86 Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/right-11.png differ diff --git a/web/themes/erabletheme/assets/new-bg-shapes/right-12.png b/web/themes/erabletheme/assets/new-bg-shapes/right-12.png new file mode 100644 index 0000000..9e002cd Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/right-12.png differ diff --git a/web/themes/erabletheme/assets/new-bg-shapes/right-13.png b/web/themes/erabletheme/assets/new-bg-shapes/right-13.png new file mode 100644 index 0000000..ae8e2fb Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/right-13.png differ diff --git a/web/themes/erabletheme/assets/new-bg-shapes/right-2.png b/web/themes/erabletheme/assets/new-bg-shapes/right-2.png new file mode 100644 index 0000000..5c62c70 Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/right-2.png differ diff --git a/web/themes/erabletheme/assets/new-bg-shapes/right-3.png b/web/themes/erabletheme/assets/new-bg-shapes/right-3.png new file mode 100644 index 0000000..a71827d Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/right-3.png differ diff --git a/web/themes/erabletheme/assets/new-bg-shapes/right-4.png b/web/themes/erabletheme/assets/new-bg-shapes/right-4.png new file mode 100644 index 0000000..02a8c59 Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/right-4.png differ diff --git a/web/themes/erabletheme/assets/new-bg-shapes/right-5.png b/web/themes/erabletheme/assets/new-bg-shapes/right-5.png new file mode 100644 index 0000000..fbd1ae1 Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/right-5.png differ diff --git a/web/themes/erabletheme/assets/new-bg-shapes/right-6.png b/web/themes/erabletheme/assets/new-bg-shapes/right-6.png new file mode 100644 index 0000000..35a4a9c Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/right-6.png differ diff --git a/web/themes/erabletheme/assets/new-bg-shapes/right-7.png b/web/themes/erabletheme/assets/new-bg-shapes/right-7.png new file mode 100644 index 0000000..9a6b467 Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/right-7.png differ diff --git a/web/themes/erabletheme/assets/new-bg-shapes/right-8.png b/web/themes/erabletheme/assets/new-bg-shapes/right-8.png new file mode 100644 index 0000000..11af9f4 Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/right-8.png differ diff --git a/web/themes/erabletheme/assets/new-bg-shapes/right-9.png b/web/themes/erabletheme/assets/new-bg-shapes/right-9.png new file mode 100644 index 0000000..7ae3f57 Binary files /dev/null and b/web/themes/erabletheme/assets/new-bg-shapes/right-9.png differ diff --git a/web/themes/erabletheme/css/styles.css b/web/themes/erabletheme/css/styles.css index 3013b7f..23b5a0a 100644 --- a/web/themes/erabletheme/css/styles.css +++ b/web/themes/erabletheme/css/styles.css @@ -82,7 +82,6 @@ body .layout-container footer { z-index: 0; } body .layout-container #background { - display: none; z-index: -1; } @@ -875,138 +874,105 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo } #background { - height: 98%; + position: absolute; + inset: 0; width: 100%; overflow: hidden; - position: absolute; - top: 0; - left: 0; -} -#background img { - position: absolute; + z-index: -1; pointer-events: none; } -#background > div { +#background .decor-tile { position: relative; - height: 80vh; + width: 100%; + height: 220vh; } -#background #bg-top { - /* #bg-1 { - top: 5vh; - left: 0; - } */ - /* #bg-4 { - top: 18vh; - right: -45vw; - } */ -} -#background #bg-top #bg-3 { - top: 13vh; - left: -10vw; - width: 20vw; - z-index: 1; -} -@media screen and (min-width: 1080px) { - #background #bg-top #bg-3 { - width: auto; - z-index: -1; - } -} -@media screen and (min-width: 1600px) { - #background #bg-top #bg-3 { - width: 22vw; - } -} -#background #bg-top #bg-2 { - top: 8vh; - left: -28vw; -} -@media screen and (min-width: 1080px) { - #background #bg-top #bg-2 { - transform: rotate(1deg); - } -} -@media screen and (min-width: 1600px) { - #background #bg-top #bg-2 { - left: -5vw; - top: 9vh; - } -} -#background #bg-top #bg-5 { - width: 20vw; - top: 5vh; - right: -10vw; - z-index: 1; -} -@media screen and (min-width: 1080px) { - #background #bg-top #bg-5 { - z-index: -1; - } -} -@media screen and (min-width: 1600px) { - #background #bg-top #bg-5 { - width: 27vw; - } -} -#background #bg-middle { - /* #bg-8 { - width: 80vw; - top: 45vh; - left: -40vw; - } */ -} -#background #bg-middle #bg-6 { - top: 5vh; - right: -5vw; -} -#background #bg-middle #bg-7 { - width: 85vw; - top: 10vh; - right: 0vw; -} -#background #bg-middle #bg-12 { - width: 105vw; - left: -5vw; - top: 30vh; -} -#background #bg-bottom { - bottom: 0; +#background .decor-tile img { position: absolute; + pointer-events: none; + width: auto; } -#background #bg-bottom #bg-11 { +#background .decor-tile .decor-left { left: 0; } -@media screen and (min-width: 1080px) { - #background #bg-bottom #bg-11 { - left: 50vw; - bottom: 70vh; - } +#background .decor-tile .decor-right { + right: 0; } -#background #bg-bottom #bg-10 { - width: 110vw; - left: 5vw; - bottom: 0; +#background .decor-tile .decor-left-1 { + top: 2%; + height: 20vh; } -@media screen and (min-width: 1080px) { - #background #bg-bottom #bg-10 { - left: 0; - bottom: 20vh; - } +#background .decor-tile .decor-left-2 { + top: 18%; + height: 32vh; } -#background #bg-bottom #bg-4 { - transform: scaleX(-1); - left: -45vw; - bottom: 5vh; +#background .decor-tile .decor-left-3 { + top: 38%; + height: 42vh; } -@media screen and (min-width: 760px) { - #background #bg-bottom #bg-4 { - bottom: 150vhvh; - } +#background .decor-tile .decor-left-4 { + top: 58%; + height: 12vh; } -@media screen and (min-width: 1080px) { - #background #bg-bottom #bg-4 { - bottom: -8vh; - } +#background .decor-tile .decor-left-5 { + top: 70%; + height: 22vh; +} +#background .decor-tile .decor-left_6, +#background .decor-tile .decor-left-6 { + top: 88%; + height: 10vh; +} +#background .decor-tile .decor-right-1 { + top: 1%; + height: 22vh; +} +#background .decor-tile .decor-right-2 { + top: 10%; + height: 38vh; +} +#background .decor-tile .decor-right-3 { + top: 18%; + height: 18vh; +} +#background .decor-tile .decor-right-4 { + top: 26%; + height: 12vh; +} +#background .decor-tile .decor-right-5 { + top: 34%; + height: 26vh; +} +#background .decor-tile .decor-right-6 { + top: 42%; + height: 8vh; +} +#background .decor-tile .decor-right-7 { + top: 48%; + height: 10vh; +} +#background .decor-tile .decor-right-8 { + top: 55%; + height: 8vh; +} +#background .decor-tile .decor-right-9 { + top: 62%; + height: 18vh; +} +#background .decor-tile .decor-right-10 { + top: 72%; + height: 12vh; +} +#background .decor-tile .decor-right-11 { + top: 78%; + height: 20vh; +} +#background .decor-tile .decor-right-12 { + top: 86%; + height: 16vh; +} +#background .decor-tile .decor-right-13 { + top: 92%; + height: 22vh; } /* PAGES */ diff --git a/web/themes/erabletheme/js/erabletheme.js b/web/themes/erabletheme/js/erabletheme.js index d50c989..9d7806c 100644 --- a/web/themes/erabletheme/js/erabletheme.js +++ b/web/themes/erabletheme/js/erabletheme.js @@ -422,33 +422,55 @@ } // - // set bg middle placement + // Décors latéraux parallax v2. + // Cloner le .decor-tile autant de fois que nécessaire pour couvrir + // la hauteur de .layout-container, puis instancier Rellax sur tous + // les .bgImg (originaux + clones). Au resize, on détruit/recompute. // - let pageHeight = document.querySelector('.layout-container').offsetHeight; - toggleBgMiddle(pageHeight) + const bgRoot = document.getElementById('background'); + let rellax = null; - window.addEventListener('resize', () => { - pageHeight = document.querySelector('.layout-container').offsetHeight; - toggleBgMiddle(pageHeight); - }) + function setupBackgroundTiles() { + if (!bgRoot) return; + const original = bgRoot.querySelector('.decor-tile:not([data-tile-clone])'); + if (!original) return; - function toggleBgMiddle(pageHeight) { - const bgMiddle = document.querySelector('#bg-middle'); - const bgOnze = document.querySelector('#bg-11'); - if (pageHeight < 2500) { - bgMiddle.style.display = 'none'; - bgOnze.style.display = 'none'; - } else { - bgMiddle.style.display = 'block'; - bgOnze.style.display = 'block'; + // Nettoyage des clones précédents (cas resize). + bgRoot.querySelectorAll('.decor-tile[data-tile-clone]').forEach(n => n.remove()); + + const layout = document.querySelector('.layout-container'); + const pageHeight = layout ? layout.offsetHeight : window.innerHeight; + const tileHeight = original.getBoundingClientRect().height; + if (tileHeight <= 0) return; + + const tileCount = Math.max(1, Math.ceil(pageHeight / tileHeight)); + for (let i = 1; i < tileCount; i++) { + const clone = original.cloneNode(true); + clone.dataset.tileClone = 'true'; + clone.dataset.tileIndex = String(i); + // .decor-once : formes pensées pour le haut du 1er tile + // (coupées en haut) — on les enlève des clones. + clone.querySelectorAll('.decor-once').forEach(n => n.remove()); + bgRoot.appendChild(clone); } } - // - // bg parallax animation - // - var rellax = new Rellax('.bgImg', { - wrapper: 'body', + function initRellax() { + if (rellax) { try { rellax.destroy(); } catch (e) { /* noop */ } } + rellax = new Rellax('.bgImg', { wrapper: 'body' }); + } + + setupBackgroundTiles(); + initRellax(); + + // Resize debouncé : recalcule le nombre de tiles, repart Rellax propre. + let bgResizeTimer = null; + window.addEventListener('resize', () => { + clearTimeout(bgResizeTimer); + bgResizeTimer = setTimeout(() => { + setupBackgroundTiles(); + initRellax(); + }, 200); }); // footnotes diff --git a/web/themes/erabletheme/scss/global/_global.scss b/web/themes/erabletheme/scss/global/_global.scss index 6195908..a994f84 100644 --- a/web/themes/erabletheme/scss/global/_global.scss +++ b/web/themes/erabletheme/scss/global/_global.scss @@ -28,7 +28,6 @@ body { z-index: 0; } #background { - display: none; z-index: -1; } } diff --git a/web/themes/erabletheme/scss/partials/_background.scss b/web/themes/erabletheme/scss/partials/_background.scss index 87ebcb3..719d554 100644 --- a/web/themes/erabletheme/scss/partials/_background.scss +++ b/web/themes/erabletheme/scss/partials/_background.scss @@ -1,116 +1,65 @@ +// +// Décors latéraux parallax v2. +// +// Un seul .decor-tile (= une "scène" verticale) défini ici puis cloné +// par JS (cf. setupBackgroundTiles dans js/erabletheme.js) pour remplir +// la hauteur de .layout-container. Si la page est plus courte que le +// tile, l'overflow caché de #background tronque proprement. +// +// Positionnement vertical : `top` en % du tile, pour que les frises +// soient repositionnées automatiquement dans chaque clone. +// Ancrage horizontal : .decor-left { left: 0 } / .decor-right { right: 0 } +// → bord gauche / droit du PNG collé au bord viewport. +// + +$tile_height: 220vh; + #background { - height: 98%; + position: absolute; + inset: 0; width: 100%; overflow: hidden; - position: absolute; - top: 0; - left: 0; - img { - position: absolute; - pointer-events: none; - } - > div { + z-index: -1; + pointer-events: none; + + .decor-tile { position: relative; - height: 80vh; - } - #bg-top { - /* #bg-1 { - top: 5vh; - left: 0; - } */ - #bg-3 { - top: 13vh; - left: -10vw; - width: 20vw; - z-index: 1; - @media screen and (min-width: $breakpoint_desktop) { - width: auto; - z-index: -1; - } - @media screen and (min-width: $breakpoint_desktop_large) { - width: 22vw; - } - } - #bg-2 { - top: 8vh; - left: -28vw; - @media screen and (min-width: $breakpoint_desktop) { - transform: rotate(1deg); - } - @media screen and (min-width: $breakpoint_desktop_large) { - left: -5vw; - top: 9vh; - } - } - #bg-5 { - width: 20vw; - top: 5vh; - right: -10vw; - z-index: 1; - @media screen and (min-width: $breakpoint_desktop) { - z-index: -1; - } - @media screen and (min-width: $breakpoint_desktop_large) { - width: 27vw; - } - } - /* #bg-4 { - top: 18vh; - right: -45vw; - } */ + width: 100%; + height: $tile_height; - } - #bg-middle { - #bg-6 { - top: 5vh; - right: -5vw; + img { + position: absolute; + pointer-events: none; + // largeur auto pour préserver le ratio des PNG ; on contrôle la + // taille via height (en vh) pour rester proportionnel au viewport. + width: auto; } - #bg-7 { - width: 85vw; - top: 10vh; - right: 0vw; - } - /* #bg-8 { - width: 80vw; - top: 45vh; - left: -40vw; - } */ - #bg-12 { - width: 105vw; - left: -5vw; - top: 30vh; - } - } - #bg-bottom { - bottom: 0; - position: absolute; - #bg-11 { - left: 0; - @media screen and (min-width: $breakpoint_desktop) { - left: 50vw; - bottom: 70vh; - } - } - #bg-10 { - width: 110vw; - left: 5vw; - bottom: 0; - @media screen and (min-width: $breakpoint_desktop) { - left: 0; - bottom: 20vh; - } - } - #bg-4 { - transform: scaleX(-1); - left: -45vw; - bottom: 5vh; - @media screen and (min-width: $breakpoint_tablet) { - bottom: 150vhvh; - } - @media screen and (min-width: $breakpoint_desktop) { - bottom: -8vh; - } - } + .decor-left { left: 0; } + .decor-right { right: 0; } + + // --- Frises gauches (6 répartiess sur la hauteur du tile) --- + .decor-left-1 { top: 2%; height: 20vh; } + .decor-left-2 { top: 18%; height: 32vh; } + .decor-left-3 { top: 38%; height: 42vh; } + .decor-left-4 { top: 58%; height: 12vh; } + .decor-left-5 { top: 70%; height: 22vh; } + .decor-left_6, + .decor-left-6 { top: 88%; height: 10vh; } + + // --- Frises droites (13 réparties sur la hauteur du tile) --- + .decor-right-1 { top: 1%; height: 22vh; } + .decor-right-2 { top: 10%; height: 38vh; } + .decor-right-3 { top: 18%; height: 18vh; } + .decor-right-4 { top: 26%; height: 12vh; } + .decor-right-5 { top: 34%; height: 26vh; } + .decor-right-6 { top: 42%; height: 8vh; } + .decor-right-7 { top: 48%; height: 10vh; } + .decor-right-8 { top: 55%; height: 8vh; } + .decor-right-9 { top: 62%; height: 18vh; } + .decor-right-10 { top: 72%; height: 12vh; } + .decor-right-11 { top: 78%; height: 20vh; } + .decor-right-12 { top: 86%; height: 16vh; } + .decor-right-13 { top: 92%; height: 22vh; } } } diff --git a/web/themes/erabletheme/templates/page/page.html.twig b/web/themes/erabletheme/templates/page/page.html.twig index a70b3bc..5436f82 100644 --- a/web/themes/erabletheme/templates/page/page.html.twig +++ b/web/themes/erabletheme/templates/page/page.html.twig @@ -99,24 +99,36 @@ + {# + Décors latéraux parallax v2. + Un seul tile (.decor-tile) cloné en JS pour remplir la hauteur de la page. + Frises gauches: bord gauche collé à left:0 ; frises droites: right:0. + Le placement vertical est géré en % du tile dans _background.scss + pour rester cohérent à la répétition. + #}
-
- {# #} - - - - {# #} -
-
- {# #} - - - -
-
- - - +
+ {# decor-once : forme coupée en haut, présente uniquement dans le tile initial #} + + + + + + + + + + + + + + + + + + + +