diff --git a/assets/css/src/hero.css b/assets/css/src/hero.css index 97a749a..789029a 100644 --- a/assets/css/src/hero.css +++ b/assets/css/src/hero.css @@ -2,25 +2,21 @@ --empty-space: 11.9rem; background-color: var(--color-beige-light); --padding-vertical: calc(var(--space-m) / 1.5); - display: grid; - grid-template-columns: 1.6fr 3fr; - column-gap: calc(var(--space-m) / 1.5); - height: calc(100vh - var(--empty-space)); + /* height: calc(100vh - var(--empty-space)); */ overflow: hidden; } .hero__text { position: relative; + padding: var(--padding-vertical) var(--space-m); display: flex; - flex-direction: column; justify-content: space-between; - overflow: auto; + align-items: flex-end; } .hero__text h2 { font-size: max(4.167vw, 3rem); width: 100%; - margin-bottom: var(--padding-vertical); } .hero__text h2.big { @@ -39,14 +35,11 @@ margin-bottom: 1rem; } -.hero__text p:first-of-type { - margin-top: var(--padding-vertical); -} - .hero__link { font-weight: bold; margin-top: 0.5rem; } + .hero__link::before { display: inline-block; content: "→"; diff --git a/assets/css/src/responsive.css b/assets/css/src/responsive.css index 34d1e18..d786535 100644 --- a/assets/css/src/responsive.css +++ b/assets/css/src/responsive.css @@ -5,3 +5,9 @@ row-gap: var(--padding-vertical); } } + +@media screen and (max-width: 800px) { + .hero__text { + display: block; + } +} diff --git a/assets/css/src/vanilla.css b/assets/css/src/vanilla.css index 474bc28..b2387cd 100644 --- a/assets/css/src/vanilla.css +++ b/assets/css/src/vanilla.css @@ -2,7 +2,7 @@ scroll-behavior: smooth; } -section:not(.collapsable), +section:not(.collapsable, .hero), footer { box-sizing: border-box; padding: var(--padding-vertical) var(--space-m); @@ -10,7 +10,7 @@ footer { section:not(:last-child, .collapsable, .collapsable-sections) { border-bottom: var(--border); } -.temporality-wrapper:not(:last-of-type) section.forced-border{ +.temporality-wrapper:not(:last-of-type) section.forced-border { border-bottom: var(--border); } diff --git a/assets/js/script.js b/assets/js/script.js index 3346c4d..ad70577 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -12,10 +12,6 @@ document.addEventListener("DOMContentLoaded", () => { jsLinks: document.querySelectorAll(".js-link"), }; - setTimeout(() => { - nodes.images = document.querySelectorAll("img"); - }, 0); - // Listeners nodes.burgerBtn.addEventListener("click", () => expandNav(nodes)); nodes.closeNavBtn.addEventListener("click", () => closeNav(nodes)); @@ -24,17 +20,13 @@ document.addEventListener("DOMContentLoaded", () => { jsLink.addEventListener("click", () => (location.href = to)); }); - setTimeout(() => { - nodes.images.forEach((image) => { - if (image.complete) { - show(image); - } else { - image.addEventListener("load", () => { - show(image); - }); - } - }); - }, 50); + document.querySelectorAll("img").forEach((image) => { + if (image.complete && image.naturalWidth > 0) { + show(image); + } else { + image.addEventListener("load", () => show(image)); + } + }); // Key shortcuts window.addEventListener("keyup", (event) => {