Merge pull request #8 from kuzudb/more-fixes

Fix blog thumbnail image margin
kuzudb · Feb 28, 2024 · d94e996 · d94e996
2 parents 6b39c80 + 1fc6a0b
commit d94e996
Showing 1 changed file with 11 additions and 11 deletions.
diff --git a/src/layouts/Posts.astro b/src/layouts/Posts.astro
@@ -27,15 +27,15 @@ type PostType = {
   class="mx-auto grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-3"
 >
   {
-    posts?.slice(0, config.site.pageSize).map((p: PostType) => (
+    posts?.slice(0, config.site.pageSize).map((post: PostType) => (
       <article class="flex w-full flex-col items-start">
         <div class="rounded-lg block overflow-hidden mb-4">
-          {p.data.heroImage && (
-            <a href={`/post/${p.slug}/`}>
-            <figure class="w-24 h-24 md:h-[150px]">
+          {post.data.heroImage && (
+            <a href={`/post/${post.slug}/`}>
+            <figure class="max-w-48 mx-24 mx-auto flex">
               <Image
-                src={p.data.heroImage}
-                alt={p.data.title}
+                src={post.data.heroImage}
+                alt={post.data.title}
                 width={960}
                 height={480}
                 decoding="async"
@@ -46,8 +46,8 @@ type PostType = {
           )}
         </div>
         <div class="flex items-center gap-x-4 text-xs text-zinc-900 dark:text-zinc-400">
-          <FormattedDate date={p.data.pubDate} />
-          {p.data.categories.slice(0, 2).map((item) => (
+          <FormattedDate date={post.data.pubDate} />
+          {post.data.categories.slice(0, 2).map((item) => (
             <a
               href={`/categories/${slugify(item)}`}
               class="capitalize text-md relative z-10 rounded-full bg-zinc-50 px-3 py-1.5 font-medium text-zinc-600 hover:bg-zinc-50 dark:bg-zinc-900 dark:text-zinc-400"
@@ -58,13 +58,13 @@ type PostType = {
         </div>
         <div class="relative">
           <h2 class="mt-3 text-xl text-ellipsis font-semibold leading-6 text-zinc-900 dark:text-white group-hover:text-zinc-600">
-            <a href={`/post/${p.slug}/`}>
+            <a href={`/post/${post.slug}/`}>
               <span class="absolute inset-0" />
-              {p.data.title}
+              {post.data.title}
             </a>
           </h2>
           <p class="mt-5 line-clamp-3 text-ellipsis text-sm leading-6 text-zinc-600 dark:text-zinc-400">
-            {p.data.description}
+            {post.data.description}
           </p>
         </div>
       </article>