refactor(background): use event listener instead of onload

3 files changed, 31 insertions, 26 deletions

diff --git a/src/component/MosaicBackground.astro b/src/component/MosaicBackground.astro
index c8e01f5..8c38bcf 100644
--- a/src/component/MosaicBackground.astro
+++ b/src/component/MosaicBackground.astro
@@ -7,7 +7,7 @@ const { height = "400" } = Astro.props;
 </div>
 
 <script>
-  window.onload = () => {
+  window.addEventListener("load", () => {
     // because Astro doesn't support defer
     document.querySelectorAll(".bg").forEach((e) => {
       const children = e.children;
@@ -24,9 +24,15 @@ const { height = "400" } = Astro.props;
         // adding elements
         while (i < children.length && currentWidth <= max) {
           let current = children[i++];
-          let ratio = current.clientWidth / current.clientHeight;
-          line.appendChild(current.cloneNode(true));
-          currentWidth += ratio * height;
+          if (!(current instanceof HTMLScriptElement)) {
+            let ratio = current.clientWidth / current.clientHeight;
+            if (!isNaN(ratio)) {
+              line.appendChild(current.cloneNode(true));
+              currentWidth += ratio * height;
+            } else {
+              console.error("is NaN", current)
+            }
+          }
         }
         // setting height
         let h = (max * height) / currentWidth;
@@ -39,5 +45,5 @@ const { height = "400" } = Astro.props;
       }
       e.replaceChildren(...newChildren);
     });
-  };
+  })
 </script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 3d5da47..7d5ef28 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -163,23 +163,22 @@ import Base from "../layout/Base.astro";
       </div>
     </section>
   </main>
-</Base>
-
-<script is:inline defer>
-  const sections = document.querySelectorAll("section[data-scroll]");
-  document.addEventListener("scroll", () => {
-    sections.forEach((section) => {
-      const rect = section.getBoundingClientRect();
-      if (
-        section.top + window.scrollY > window.scrollY ||
-        (rect.bottom + +window.scrollY) * 2 < window.scrollY
-      )
-        return;
-      const content = section.querySelector(".content");
-      if (content == null || !(content instanceof HTMLElement))
-        throw new Error(`Invalid section ${section}`);
-      const ratio = (window.scrollY - rect.top) / (rect.bottom - rect.top);
-      content.style.top = `${65 - ratio * 20}%`;
+  <script is:inline defer>
+    const sections = document.querySelectorAll("section[data-scroll]");
+    document.addEventListener("scroll", () => {
+      sections.forEach((section) => {
+        const rect = section.getBoundingClientRect();
+        if (
+          section.top + window.scrollY > window.scrollY ||
+          (rect.bottom + +window.scrollY) * 2 < window.scrollY
+        )
+          return;
+        const content = section.querySelector(".content");
+        if (content == null || !(content instanceof HTMLElement))
+          throw new Error(`Invalid section ${section}`);
+        const ratio = (window.scrollY - rect.top) / (rect.bottom - rect.top);
+        content.style.top = `${65 - ratio * 20}%`;
+      });
     });
-  });
-</script>
+  </script>
+</Base>
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 17dd30c..a3c4639 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -7,7 +7,7 @@ body {
   font-size: 22px;
   background: $background;
   color: $text;
-  font-family: "Raveo", Inter, Roboto, sans-serif;
+  font-family: "Raveo", Inter, Roboto, Arial, "Liberation Sans", sans-serif;
 }
 
 h1 {
@@ -159,7 +159,7 @@ section[data-scroll] .content {
     inset: 0;
     display: flex;
     justify-content: center;
-    height: 100%;
+    min-height: 100%;
   }
   & .content {
     padding: 4rem;