clean up styles

Author: maxphillipsdev

src/layouts/BlogPost.astro

@@ -21,7 +21,7 @@ export const buildOGURL = (slug: string | undefined) => {
     <img
       src={heroImage || buildOGURL(slug)}
       alt=""
-      class="mb-6 w-full rounded-xl shadow-lg md:max-w-4xl"
+      class="mb-6 w-full rounded-xl border border-slate-3 shadow-lg md:max-w-4xl"
     />
     {pubDate && <FormattedDate date={pubDate} />}
     {

src/pages/blog/index.astro

@@ -7,6 +7,9 @@ import FormattedDate from "../../components/FormattedDate.astro";
 const posts = (await getCollection("blog")).sort(
   (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
 );
+
+const BASE_CARD_STYLES =
+  "prose prose-slate border-slate-8 bg-slate-2 flex flex-col justify-between rounded-lg border p-6 shadow-md";
 ---
 
 <Layout title={SITE_TITLE} description={SITE_DESCRIPTION}>
@@ -25,20 +28,20 @@ const posts = (await getCollection("blog")).sort(
       <!-- Blog post cards -->
       {
         posts.map((post) => (
-          <div class="prose prose-slate border-slate-8 bg-slate-2 flex flex-col justify-between rounded-lg border p-6 shadow-md">
-            <h2 class="mb-4 text-xl">
-              <a href={`/blog/${post.slug}/`} class="no-underline">
-                {post.data.title}
-              </a>
+          <a
+            href={`/blog/${post.slug}/`}
+            class:list={[BASE_CARD_STYLES]}
+            class="h-96 w-96"
+          >
+            <h2 class="text-2xl">
+              <p>{post.data.title}</p>
             </h2>
             <FormattedDate date={post.data.pubDate} />
             <div class="">
               <p class="">{post.data.description}</p>
             </div>
-            <a href={`/blog/${post.slug}/`} class="decoration-wavy">
-              Read more &rarr;
-            </a>
-          </div>
+            <p class="decoration-wavy">Read more &rarr;</p>
+          </a>
         ))
       }
     </div>

src/pages/index.astro

@@ -16,7 +16,11 @@ const data = await response.json();
   >
     <h1>Welcome! 👋</h1>
     <div class="w-full md:max-w-4xl">
-      <img src={"/placeholder-about.png"} alt="" class="rounded-xl shadow-lg" />
+      <img
+        src={"/placeholder-about.png"}
+        alt=""
+        class="rounded-xl border border-slate-3 shadow-lg"
+      />
       <div class="rounded-lg border-2 border-slate-4 bg-slate-3 px-3">
         <p>
           {data.summary}