feat: some stuff

src/components/GoogleyEye.svelte

@@ -95,8 +95,7 @@
   role="img"
   aria-label="Toggle Googley Eyes"
   aria-hidden="true"
-  on:keydown={(ev) => (ev.key === "Enter" ? ($visible = !$visible) : "")}
->
+  on:keydown={(ev) => (ev.key === "Enter" ? ($visible = !$visible) : "")}>
   {#if $visible}
     <div class="eye" bind:this={eye} transition:scale>
       <div class="pupil"></div>
@@ -110,8 +109,10 @@
     width: 100%;
     height: 100%;
     display: flex;
-    width: 50px;
-    height: 50px;
+    max-width: 50px;
+    max-height: 50px;
+    width: 10vw;
+    height: 10vw;
     justify-content: center;
     align-items: center;
   }
@@ -119,8 +120,10 @@
   .eye {
     position: relative;
     overflow: hidden;
-    width: 50px;
-    height: 50px;
+    max-width: 50px;
+    max-height: 50px;
+    width: 10vw;
+    height: 10vw;
     border-radius: 50%;
     background-color: white;
     display: flex;

src/components/HeroCard.astro

@@ -32,11 +32,10 @@ const link = translatePath(`/${collection}/${slug.split("/")[0]}`);
 ---
 
 <Card
-  classes={`grid gradient border-1 border-neutral overflow-hidden  ${cover ? "grid-rows-[200px_1fr] xs:grid-rows-none xs:grid-cols-[1fr_200px]" : ""}`}
->
+  classes={`grid gradient border-1 border-neutral overflow-hidden  ${cover ? "grid-rows-[200px_1fr] xs:grid-rows-none xs:grid-cols-[1fr_200px]" : ""}`}>
   <Card.Content classes="px-8 py-7 order-last xs:order-first">
     <Card.Title classes="text-4xl flex items-center gap-2">
-      {icon && <img src={icon} class="h-6" />}
+      {icon && <img src={icon} class="h-6 w-6" />}
       {title}
     </Card.Title>
     <Card.Description>

src/components/Image.astro

@@ -54,5 +54,6 @@ const sizes = [
   widths={sizes.map((size) => size.width)}
   sizes={sizes
     .map((size) => `${size.media || "100vw"} ${size.width}px`)
-    .join(", ")}
-/>
+    .join(", ")}>
+  <slot />
+</AstroImage>

src/components/Max.astro

@@ -10,24 +10,24 @@ const t = useTranslations(Astro.url);
 ---
 
 <Card
-  classes="googley-eye-target relative rounded-diag-md border border-neutral bg-dark grid xs:grid-cols-[250px_1fr] min-h-[180px] sm:h-[180px] mt-8"
->
+  classes="googley-eye-target relative rounded-diag-md border border-neutral bg-dark grid xs:grid-cols-[250px_1fr] min-h-[180px] sm:h-[180px] mt-8">
   <div
-    class="image relative h-[130%] self-end items-end flex overflow-hidden order-last xs:order-first"
-  >
-    <Image
-      src={MaxImg}
-      alt="its mee"
-      class="object-bottom h-full object-cover w-1/2 xs:w-full"
-      hash={false}
-      maxWidth={700}
-      loader={false}
-    />
-    <div class="eye right">
-      <GoogleyEye client:load />
-    </div>
-    <div class="eye left">
-      <GoogleyEye client:load />
+    class="image relative h-[130%] self-end items-end flex overflow-hidden order-last xs:order-first">
+    <div class="relative inline w-1/2 xs:w-full">
+      <Image
+        src={MaxImg}
+        alt="its mee"
+        class="object-bottom h-full object-cover"
+        hash={false}
+        maxWidth={700}
+        loader={false}
+      />
+      <div class="eye right">
+        <GoogleyEye client:load />
+      </div>
+      <div class="eye left">
+        <GoogleyEye client:load />
+      </div>
     </div>
   </div>
 
@@ -81,11 +81,11 @@ const t = useTranslations(Astro.url);
     position: absolute;
   }
   .eye.left {
-    top: 29%;
-    right: 28%;
+    top: 24%;
+    right: 27%;
   }
   .eye.right {
-    top: 31%;
-    right: 12%;
+    top: 26%;
+    right: 13%;
   }
 </style>

src/components/ThemeToggle.svelte

@@ -10,6 +10,8 @@
     document.documentElement.classList.remove("light", "dark");
     document.documentElement.classList.add($theme);
     localStorage.setItem("theme", $theme);
+    // @ts-ignore
+    window["updateBackgroundColor"]?.();
   }
 
   function toggleTheme() {