diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/component/ImageBackground.astro | 71 | ||||
| -rw-r--r-- | src/pages/index.astro | 112 |
2 files changed, 95 insertions, 88 deletions
diff --git a/src/component/ImageBackground.astro b/src/component/ImageBackground.astro index 9277472..d568172 100644 --- a/src/component/ImageBackground.astro +++ b/src/component/ImageBackground.astro @@ -1,42 +1,49 @@ --- - +const { height = "400" } = Astro.props; --- -<div class="bg"> - <slot/> +<div class="bg" data-height={height}> + <slot /> </div> -<script lang="js"> - document.querySelectorAll(".bg").forEach((e) => { - const children = e.children; - const max = e.clientWidth; - const height = e.hasAttribute("data-height") ? e.getAttribute("data-height") : 400; - const newChildren = []; +<script> + window.onload = () => { + // because Astro doesn't support defer + document.querySelectorAll(".bg").forEach((e) => { + const children = e.children; + const max = e.clientWidth; + const height = e.getAttribute("data-height"); + const newChildren = []; + console.log(e.hasAttribute("data-height")); - let line = document.createElement("div"); - let currentWidth = 0; - let i = 0; + let line = document.createElement("div"); + 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; - } + const fn = () => { + let current = children[i++]; + console.log(current.getBoundingClientRect().width, current.getBoundingClientRect().height); + 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() - // setting height - let h = (max * height) / currentWidth; - line.style.height = `${h}px`; - newChildren.push(line); - if (i < children.length) { - line = document.createElement("div"); - currentWidth = 0 + while (i < children.length) { + // adding elements + while (i < children.length && currentWidth <= max) fn(); + if (i < children.length) fn(); + // setting height + console.log(currentWidth); + let h = (max * height) / currentWidth; + console.log(`${h}px`); + line.style.height = `${h - 1}px`; + newChildren.push(line); + if (i < children.length) { + line = document.createElement("div"); + currentWidth = 0; + } } - } - e.replaceChildren(...newChildren); - }); + e.replaceChildren(...newChildren); + }); + }; </script> diff --git a/src/pages/index.astro b/src/pages/index.astro index 1d6dee5..b43b927 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -4,61 +4,61 @@ import ImageBackground from "../component/ImageBackground.astro"; --- <html lang="fr"> -<head> - <meta charset="utf-8"/> - <link rel="icon" type="image/svg+xml" href="/favicon.svg"/> - <meta name="viewport" content="width=device-width"/> - <meta name="generator" content={Astro.generator}/> - <title>Arnaud Hergès</title> -</head> -<body> -<header> - <h1>Arnaud Hergès</h1> - <div class="tags"> - <p class="tag">batteur</p> - <p class="tag">-</p> - <p class="tag">compositeur</p> - <p class="tag">-</p> - <p class="tag">producteur</p> - <p class="tag">-</p> - <p class="tag">références</p> - <p class="tag">-</p> - <p class="tag">contact</p> - </div> -</header> -</body> -<main> - <article class="batteur"> - <ImageBackground> - <img src="https://placehold.co/600x400"/> - <img src="https://placehold.co/500x200"/> - <img src="https://placehold.co/400x400"/> - <img src="https://placehold.co/600x400"/> - <img src="https://placehold.co/800x400"/> - <img src="https://placehold.co/600x400"/> - <img src="https://placehold.co/600x400"/> - <img src="https://placehold.co/600x400"/> - </ImageBackground> - <div class="content"> - <div class="content__header"> - <h2>Batteur</h2> - <h3>Studio & Live</h3> + <head> + <meta charset="utf-8" /> + <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> + <meta name="viewport" content="width=device-width" /> + <meta name="generator" content={Astro.generator} /> + <title>Arnaud Hergès</title> + </head> + <body> + <header> + <h1>Arnaud Hergès</h1> + <div class="tags"> + <p class="tag">batteur</p> + <p class="tag">-</p> + <p class="tag">compositeur</p> + <p class="tag">-</p> + <p class="tag">producteur</p> + <p class="tag">-</p> + <p class="tag">références</p> + <p class="tag">-</p> + <p class="tag">contact</p> </div> - <p> - A tous les âges, sur tous les kits et avec toutes les coupes de cheveux, cela fait 40 - ans que la batterie m’accompagne et qu’elle me suit pour agrémenter vos concerts et vos - séances des meilleures « rythmiques » possibles. - </p> - <p> - Quelque soit le style, sur partition ou sur séquence, sur acoustique, électronique ou de - mon spd-sx, au clic ou au feeling, ce sont plus de 800 concerts en salles, événements et - festivals et des dizaines de titres déjà enregistrés en studio. - </p> - <p> - Jamais rassasié, je suis toujours dispo pour de futurs projets, qu’ils soient scéniques - ou enregistrés. Contactez-moi pour en parler ! - </p> - </div> - </article> -</main> + </header> + </body> + <main> + <article class="batteur"> + <ImageBackground height="500"> + <img src="/batteur/old.jpg" /> + <img src="/batteur/dark_scene.jpg" /> + <img src="/batteur/mid_rock.jpg" /> + <img src="/batteur/black_and_white.jpg" /> + <img src="/batteur/old2.jpg" /> + <img src="/batteur/mid_outdoor.jpg" /> + <img src="/batteur/mid_rock2.jpg" /> + <img src="/batteur/recent.jpg" /> + </ImageBackground> + <div class="content"> + <div class="content__header"> + <h2>Batteur</h2> + <h3>Studio & Live</h3> + </div> + <p> + A tous les âges, sur tous les kits et avec toutes les coupes de cheveux, cela fait 40 ans + que la batterie m’accompagne et qu’elle me suit pour agrémenter vos concerts et vos + séances des meilleures « rythmiques » possibles. + </p> + <p> + Quelque soit le style, sur partition ou sur séquence, sur acoustique, électronique ou de + mon spd-sx, au clic ou au feeling, ce sont plus de 800 concerts en salles, événements et + festivals et des dizaines de titres déjà enregistrés en studio. + </p> + <p> + Jamais rassasié, je suis toujours dispo pour de futurs projets, qu’ils soient scéniques ou + enregistrés. Contactez-moi pour en parler ! + </p> + </div> + </article> + </main> </html> |