From 32483db512d5ef8b57096b2a88bca78985af658e Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Tue, 10 Jan 2023 01:03:40 +0600
Subject: [PATCH] fix card design

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 components/archive/card.vue       | 10 +++----
 components/blog/card.vue          | 44 ++++++++++++++++---------------
 content/blogs/1. hello-world.md   |  4 +--
 content/blogs/2. hello-man.md     |  2 +-
 content/blogs/3. intro-to-nuxt.md |  2 +-
 content/blogs/5. intro-to-ts.md   |  2 +-
 pages/blogs/index.vue             |  2 +-
 7 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/components/archive/card.vue b/components/archive/card.vue
index 06e85eb..54316d2 100644
--- a/components/archive/card.vue
+++ b/components/archive/card.vue
@@ -17,17 +17,17 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <article class="group border p-5 m-2 rounded-2xl shadow-lg text-zinc-700">
-    <NuxtLink :to="link" class="grid grid-cols-1 sm:grid-cols-9 gap-5">
+  <article class="group border m-2 rounded-2xl overflow-hidden shadow-md text-zinc-700">
+    <NuxtLink :to="link" class="grid grid-cols-1 sm:grid-cols-9 gap-3">
       <div class="sm:col-span-2">
         <img
-          class="lg:h-48 md:h-36 sm:h-36 w-full object-cover object-center rounded-2xl shadow-lg group-hover:scale-[1.05] transition-all duration-500"
+          class="md:h-full sm:h-36 w-full object-cover object-center rounded-l-2xl shadow-lg group-hover:scale-[1.05] transition-all duration-500"
           :src="`${link}/cover.jpg`"
           :alt="title"
         />
       </div>
-      <div class="sm:col-span-7">
-        <h2 class="text-3xl font-semibold text-black pb-1 group-hover:text-sky-600">
+      <div class="sm:col-span-7 p-5">
+        <h2 class="text-2xl font-semibold text-black pb-1 group-hover:text-sky-600">
           {{ title }}
         </h2>
         <p class="text-ellipsis line-clamp-2">
diff --git a/components/blog/card.vue b/components/blog/card.vue
index c960267..720d9fc 100644
--- a/components/blog/card.vue
+++ b/components/blog/card.vue
@@ -17,35 +17,37 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <article class="group border p-5 m-2 rounded-2xl shadow-lg text-zinc-700">
+  <article class="group border m-2 overflow-hidden rounded-2xl shadow-lg text-zinc-700">
     <NuxtLink :to="link">
       <img
-        class="lg:h-48 md:h-36 w-full object-cover object-center rounded-2xl shadow-lg group-hover:scale-[1.05] transition-all duration-500"
+        class="lg:h-48 md:h-36 w-full object-cover object-center rounded-t-2xl shadow-lg group-hover:scale-[1.05] transition-all duration-500"
         :src="`${link}/cover.jpg`"
         :alt="title"
       />
-      <div class="text-black text-sm pt-4 pb-2">
-        <div class="flex items-center">
-          <LogoDate />
-          {{ time }}
+      <div class="p-5">
+        <div class="text-black text-sm pt-4 pb-2">
+          <div class="flex items-center">
+            <LogoDate />
+            {{ time }}
+          </div>
+          <div class="flex items-center gap-1 flex-wrap">
+            <LogoTag />
+            <template v-for="tag in tags" :key="tag">
+              <span>{{ tag }}</span>
+            </template>
+          </div>
         </div>
-        <div class="flex items-center gap-1 flex-wrap">
-          <LogoTag />
-          <template v-for="tag in tags" :key="tag">
-            <span>{{ tag }}</span>
-          </template>
+        <h2 class="text-2xl font-semibold text-black pb-1 group-hover:text-sky-600">
+          {{ title }}
+        </h2>
+        <p class="text-ellipsis line-clamp-3">
+          {{ description }}
+        </p>
+        <div class="flex group-hover:underline text-sky-600 items-center pt-2">
+          <p>Read More</p>
+          <LogoArrow />
         </div>
       </div>
-      <h2 class="text-3xl font-semibold text-black pb-1 group-hover:text-sky-600">
-        {{ title }}
-      </h2>
-      <p class="text-ellipsis line-clamp-3">
-        {{ description }}
-      </p>
-      <div class="flex group-hover:underline text-sky-600 items-center pt-2">
-        <p>Read More</p>
-        <LogoArrow />
-      </div>
     </NuxtLink>
   </article>
 </template>
diff --git a/content/blogs/1. hello-world.md b/content/blogs/1. hello-world.md
index c68b25d..e1836d9 100644
--- a/content/blogs/1. hello-world.md	
+++ b/content/blogs/1. hello-world.md	
@@ -1,8 +1,8 @@
 ---
-title: 'Title of the page'
+title: 'How to create a blog size with nuxt3 and nuxt-content-v2'
 description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eum, odit earum porro beatae explicabo quisquam asperiores aliquam similique ipsam non deleniti qui sint ad maxime culpa accusantium. Deleniti.'
 time: 10Jan2022
-tags: ['sdf', 'sdf', 'nuxt']
+tags: ['sdf', 'javascript', 'nuxt']
 ---
 
 ::CustomTitle
diff --git a/content/blogs/2. hello-man.md b/content/blogs/2. hello-man.md
index c27b22c..7c32cd6 100644
--- a/content/blogs/2. hello-man.md	
+++ b/content/blogs/2. hello-man.md	
@@ -2,7 +2,7 @@
 title: 'Title of the page'
 description: 'meta description of the page'
 time: 2Jan2022
-tags: ['vue']
+tags: ['vue', 'javascript']
 ---
 
 # BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
diff --git a/content/blogs/3. intro-to-nuxt.md b/content/blogs/3. intro-to-nuxt.md
index 97e019e..0fb8e6d 100644
--- a/content/blogs/3. intro-to-nuxt.md	
+++ b/content/blogs/3. intro-to-nuxt.md	
@@ -2,7 +2,7 @@
 title: 'Title of the page'
 description: 'meta description of the page'
 time: 4Nov2022
-tags: ['cypress']
+tags: ['cypress', 'javascript']
 ---
 
 # CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCc
diff --git a/content/blogs/5. intro-to-ts.md b/content/blogs/5. intro-to-ts.md
index 679dfdf..a2cc7ea 100644
--- a/content/blogs/5. intro-to-ts.md	
+++ b/content/blogs/5. intro-to-ts.md	
@@ -2,7 +2,7 @@
 title: 'Title of the page'
 description: 'meta description of the page'
 time: 1Jan2023
-tags: ['firebase']
+tags: ['firebase', 'javascript']
 ---
 
 # Hello man
diff --git a/pages/blogs/index.vue b/pages/blogs/index.vue
index b880ced..6a22b8a 100644
--- a/pages/blogs/index.vue
+++ b/pages/blogs/index.vue
@@ -14,7 +14,7 @@ const { data } = await useAsyncData('home', () => queryContent('/blogs').sort({
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <ArchiveHero />
-    <div>
+    <div class="space-y-5 my-5">
       <template v-for="post in data" :key="n">
         <ArchiveCard
           :title="post.title"