fix: Improve image performance and add loading animation and snail an…

…imation (#135)

src/components/ArticleLink.astro

@@ -53,6 +53,7 @@ const { title, date, url, subhead, authors, description, image } = Astro.props;
     font-size: var(--step-3);
     font-weight: 600;
     max-width: 36ch;
+    text-wrap: balance;
     hyphens: auto;
     margin-block-end: var(--space-xs);
   }

src/components/Footer.astro

@@ -30,12 +30,14 @@ const linkGroups: LinkGroup[] = [
 ---
 
 <footer>
-  <img
-    class="footer-illustration"
-    src="/assets/footer/snail.png"
-    alt="A snail moving to the left"
-    width="240"
-  />
+  <div class="footer-illustration">
+    <img
+      class="footer-illustration"
+      src="/assets/footer/snail.png"
+      alt="A snail moving to the left"
+      width="240"
+    />
+  </div>
   <div class="content">
     <Subscribe />
     <div class="links">
@@ -135,13 +137,34 @@ const linkGroups: LinkGroup[] = [
     }
   }
 
+  @keyframes snailing {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(calc(-100% - 100vw));
+    }
+  }
+
   .footer-illustration {
-    width: 120px;
+    width: 100%;
     position: absolute;
-    bottom: calc(100% - 4px);
-    right: 20px;
-    mix-blend-mode: multiply;
-    user-select: none;
+    bottom: 100%;
+    height: 48px;
+    overflow: hidden;
+
+    img {
+      height: 100%;
+      width: auto;
+      position: absolute;
+      left: 100%;
+      bottom: -4px;
+      mix-blend-mode: multiply;
+      user-select: none;
+      animation: snailing 300s infinite linear;
+      // Offset start
+      animation-delay: -24s;
+    }
   }
 
   .links {

src/components/Partners.astro

@@ -51,7 +51,7 @@ const shuffledPartners = partners.sort(() => 0.5 - Math.random());
       display: grid;
       justify-items: center;
       align-items: center;
-      grid-template-columns: repeat(3, 240px);
+      grid-template-columns: repeat(3, 1fr);
       grid-auto-rows: 80px;
       gap: var(--space-l) var(--space-xl);
       user-select: none;

src/layouts/ProseLayout.astro

@@ -49,6 +49,7 @@ const { title, date, description, ogImage, ogAlt, annotation, color } =
     h2,
     h3 {
       margin-block: var(--space-2xl) var(--space-m);
+      text-wrap: balance;
     }
 
     p,

src/pages/index.astro

@@ -22,15 +22,15 @@ const { Content } = await entry.render();
         src={heroIllustration}
         alt="Some snails and flowers on top of a court order document"
         class="illustration"
-        width={900}
-        densities={[1, 2]}
+        widths={[800, 1200, 1800]}
+        sizes={`(max-width: 400px) 800px, (max-width: 600px) 1200px, 1800px`}
       />
     </div>
     <div class="content">
       <Content />
+      <Partners />
     </div>
   </div>
-  <Partners />
 </BaseLayout>
 
 <script>
@@ -53,18 +53,30 @@ const { Content } = await entry.render();
     align-items: center;
   }
 
+  @keyframes slideInUp {
+    from {
+      transform: translateY(var(--space-m));
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
   .hero {
     padding-inline: var(--space-2xs);
-    padding-block-start: var(--space-2xl);
+    padding-block-start: var(--space-3xl);
     margin-inline: calc(-1 * var(--space-m));
     position: relative;
   }
 
   .illustration {
-    max-width: 100%;
+    max-width: 900px;
     user-select: none;
     pointer-events: none;
     mix-blend-mode: multiply;
+    animation: slideInUp 0.6s ease-out 0.3s both;
   }
 
   h1 {
@@ -88,6 +100,7 @@ const { Content } = await entry.render();
     padding-block-start: var(--space-xl);
     max-width: 760px;
     font-size: var(--step-1);
+    animation: slideInUp 0.6s ease-out 0.6s both;
 
     :global(p) + :global(p) {
       margin-top: var(--space-l);