diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/component/ImageBackground.astro | 42 | ||||
| -rw-r--r-- | src/pages/index.astro | 103 | ||||
| -rw-r--r-- | src/scss/style.scss | 10 |
3 files changed, 107 insertions, 48 deletions
diff --git a/src/component/ImageBackground.astro b/src/component/ImageBackground.astro index e69de29..9277472 100644 --- a/src/component/ImageBackground.astro +++ b/src/component/ImageBackground.astro @@ -0,0 +1,42 @@ +--- + +--- + +<div class="bg"> + <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 = []; + + 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; + } + + 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 + } + } + e.replaceChildren(...newChildren); + }); +</script> diff --git a/src/pages/index.astro b/src/pages/index.astro index ea79d11..1d6dee5 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -4,52 +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> +<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> </div> - </header> - </body> - <main> - <article class="batteur"> - <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> + <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> diff --git a/src/scss/style.scss b/src/scss/style.scss index 060fc28..c0f977b 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -48,12 +48,16 @@ header { article { min-height: 100vh; + position: relative; } .content { - position: relative; + position: absolute; display: flex; flex-direction: column; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); gap: 1rem; background: black; color: white; @@ -70,3 +74,7 @@ article { } } } + +.bg img { + height: 100%; +} |