feat: improve styling for newsletter list

Author: tonyaellie

src/components/EmailSub.astro

@@ -18,6 +18,11 @@
       >Subscribe</button
     >
   </form>
+  <a
+    rel="prefetch"
+    class="mt-2 block text-sm text-blue-500 hover:underline w-min whitespace-nowrap"
+    href="/newsletter">View our past newsletters</a
+  >
 </div>
 
 <script>

src/pages/newsletter/index.astro

@@ -12,18 +12,25 @@ const newsletters = await Astro.glob<Frontmatter>('./*.md');
 ---
 
 <Layout title="Newsletters">
-  <h1>Newsletters</h1>
-  <div class="">
+  <h1 class="text-2xl font-bold text-center mb-16">Newsletters</h1>
+  <div class="m-auto flex max-w-4xl flex-wrap justify-center gap-4">
     {
       newsletters.map((newsletter) => (
-        <a rel="prefetch" href={newsletter.url}>
+        <a
+          class="flex flex-col items-center w-72 hover:text-blue-500 hover:underline"
+          rel="prefetch"
+          href={newsletter.url}
+        >
           <Image
+            class="rounded-lg w-full"
             src={`/assets/newsletter/${newsletter.frontmatter.date}.png`}
             alt={newsletter.frontmatter.title}
             width={256}
             height={144}
           />
-          <h2>{newsletter.frontmatter.title}</h2>
+          <h2 class="mt-2 text-lg font-medium">
+            {newsletter.frontmatter.title}
+          </h2>
         </a>
       ))
     }