makes entire post card clickable

coders51 · Apr 17, 2024 · 037feff · 037feff
1 parent 839b0a6
commit 037feff
Showing 1 changed file with 7 additions and 7 deletions.
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -15,20 +15,20 @@ const posts = (await getCollection("blog")).sort(
     <section class="flex flex-col gap-4">
       {
         posts.map(post => (
-          <div class="prose-img:m-0 prose-h3:mb-1 prose-h3:mt-0 prose-p:mt-0">
-            <a href={`/${post.slug}/`}>
+          <a href={`/${post.slug}/`} class="group no-underline">
+            <div class="prose-img:m-0 prose-h3:mb-1 prose-h3:mt-0 prose-p:mt-0">
               <div class="flex flex-col rounded-lg shadow-lg dark:bg-darkBg/80 bg-lightBg/30">
                 <img
                   class="w-full h-32 xl:h-36 rounded-t-lg object-cover"
                   src={`/posts/${post.data.heroImage}`}
                   alt={post.data.title}
                 />
                 <div class="px-4 pb-4 pt-2">
-                  <a href={`/${post.slug}/`} class="no-underline">
-                    <h3 class="line-clamp-2 transition duration-300 hover:text-sky-600 dark:hover:text-sky-500">
+                  <div>
+                    <h3 class="line-clamp-2 transition duration-300 group-hover:text-sky-600 dark:group-hover:text-sky-500">
                       {post.data.title}
                     </h3>
-                  </a>
+                  </div>
                   <p class="sm:line-clamp-3 line-clamp-2 leading-tight">
                     {post.data.description}
                   </p>
@@ -39,8 +39,8 @@ const posts = (await getCollection("blog")).sort(
                   </div>
                 </div>
               </div>
-            </a>
-          </div>
+            </div>
+          </a>
         ))
       }
     </section>