Start making new post card

web/src/components/postList/postCard.astro

@@ -6,13 +6,24 @@ const pb = await authPB()
 const { p } = Astro.props
 ---
 
-<div class="mb-5 w-2/3">
+<div class="mb-8 flex flex-col md:flex-row gap-4 md:gap-3">
-    <time datetime={p['publishDate']} class=" text-gray-500">{getFormattedDate(p['publishDate'])}</time>
+    <!-- Text content on left -->
-    <div>
+    <div class="flex-1  flex flex-col justify-start order-2 md:order-1">
-        <a href={`/posts/${p['slug']}/`} rel="prefetch">
+        
-            <img src={ pb.files.getURL(p, p.headerImage) } class="rounded-xl border-12 border-white"/>
+        <time datetime={p.publishDate} class="text-sm text-gray-500">{getFormattedDate(p.publishDate)}</time>
-            {p['title']}
+        <a href={`/posts/${p.slug}/`} rel="prefetch" class="no-underline hover:underline">
+            <h2 class="text-2xl font-bold ">{p.title}</h2>
+        </a>
+        {
+            p.description !== "" &&
+            <q class="line-clamp-3 block italic text-gray-700">{p['description']}</q>
+        }
+    </div>
+    
+    <!-- Image on right -->
+    <div class="md:w-80 order-1 md:order-2">
+        <a href={`/posts/${p.slug}/`} rel="prefetch">
+            <img src={ pb.files.getURL(p, p.headerImage) } class="rounded-sm w-full h-48 md:h-full object-cover" alt={p['title']}/>
         </a>
     </div>
-    <q class="line-clamp-3 block italic">{p['description']}</q>
 </div>

web/src/pages/posts/index.astro

@@ -24,7 +24,7 @@ const uniqueTags = tags.filter((v, i, a) => a.indexOf(v) === i)
         <TagList tags={uniqueTags}/>
     </div>
     
-    <div slot="content" class="py-12">
+    <div slot="content" class="md:py-12">
         { posts.map(p => <PostCard p={p}/>) }
     </div>
 </Base>