diff options
| author | William Hergès <william@herges.fr> | 2025-08-09 17:23:35 +0200 |
|---|---|---|
| committer | William Hergès <william@herges.fr> | 2025-08-09 17:23:35 +0200 |
| commit | f4c971dc8769f845cc48443dab020cb2e9df661a (patch) | |
| tree | b7e38847e663fbd126a5fb875dfb2a0796af71c2 | |
| parent | 1b763e17ecbe46a3cee806a7177b0bd60e15bf44 (diff) | |
refactor(background): cleaner and more logical
| -rw-r--r-- | src/component/MosaicBackground.astro | 15 | ||||
| -rw-r--r-- | src/pages/index.astro | 5 |
2 files changed, 8 insertions, 12 deletions
diff --git a/src/component/MosaicBackground.astro b/src/component/MosaicBackground.astro index df81a25..c8e01f5 100644 --- a/src/component/MosaicBackground.astro +++ b/src/component/MosaicBackground.astro @@ -20,17 +20,14 @@ const { height = "400" } = Astro.props; let currentWidth = 0; let i = 0; - const fn = () => { - let current = children[i++]; - let ratio = current.clientWidth / current.clientHeight; - line.appendChild(current.cloneNode(true)); - currentWidth += ratio * height; - }; - while (i < children.length) { // adding elements - while (i < children.length && currentWidth <= max) fn(); - if (i < children.length) fn(); + while (i < children.length && currentWidth <= max) { + let current = children[i++]; + let ratio = current.clientWidth / current.clientHeight; + line.appendChild(current.cloneNode(true)); + currentWidth += ratio * height; + } // setting height let h = (max * height) / currentWidth; line.style.height = `${h - 0.01}px`; diff --git a/src/pages/index.astro b/src/pages/index.astro index d648c4b..889c5a3 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -20,10 +20,9 @@ import Base from "../layout/Base.astro"; <p class="tag">contact</p> </div> </header> - </body> <main> <section class="batteur"> - <MosaicBackground height="500"> + <MosaicBackground height="400"> <img src="/batteur/old2.jpg" /> <img src="/batteur/old3.jpg" /> <VideoAuto src="/batteur/video/bb.webm" /> @@ -31,8 +30,8 @@ import Base from "../layout/Base.astro"; <img src="/batteur/mid_rock.jpg" /> <img src="/batteur/black_and_white.jpg" /> <img src="/batteur/old.jpg" /> - <img src="/batteur/mid_outdoor.jpg" /> <VideoAuto src="/batteur/video/solo.webm" /> + <img src="/batteur/mid_outdoor.jpg" /> <VideoAuto src="/batteur/video/balance.webm" /> <img src="/batteur/mid_rock2.jpg" /> <img src="/batteur/recent.jpg" /> |