RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix card design

Browse Source 
Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
nurRiyad
2023-01-10 01:03:40 +06:00
parent 1ad480bab5
commit 32483db512
7 changed files with 34 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/archive/card.vue
View File

@@ -17,17 +17,17 @@ withDefaults(defineProps<Props>(), {
</script> </script>
<template> <template>
<article class="group border p-5 m-2 rounded-2xl shadow-lg text-zinc-700"> <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-5"> <NuxtLink :to="link" class="grid grid-cols-1 sm:grid-cols-9 gap-3">
<div class="sm:col-span-2"> <div class="sm:col-span-2">
<img <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`" :src="`${link}/cover.jpg`"
:alt="title" :alt="title"
/> />
</div> </div>
<div class="sm:col-span-7"> <div class="sm:col-span-7 p-5">
<h2 class="text-3xl font-semibold text-black pb-1 group-hover:text-sky-600"> <h2 class="text-2xl font-semibold text-black pb-1 group-hover:text-sky-600">
{{ title }} {{ title }}
</h2> </h2>
<p class="text-ellipsis line-clamp-2"> <p class="text-ellipsis line-clamp-2">

44
components/blog/card.vue
View File

@@ -17,35 +17,37 @@ withDefaults(defineProps<Props>(), {
</script> </script>
<template> <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"> <NuxtLink :to="link">
<img <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`" :src="`${link}/cover.jpg`"
:alt="title" :alt="title"
/> />
<div class="text-black text-sm pt-4 pb-2"> <div class="p-5">
<div class="flex items-center"> <div class="text-black text-sm pt-4 pb-2">
<LogoDate /> <div class="flex items-center">
{{ time }} <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>
<div class="flex items-center gap-1 flex-wrap"> <h2 class="text-2xl font-semibold text-black pb-1 group-hover:text-sky-600">
<LogoTag /> {{ title }}
<template v-for="tag in tags" :key="tag"> </h2>
<span>{{ tag }}</span> <p class="text-ellipsis line-clamp-3">
</template> {{ description }}
</p>
<div class="flex group-hover:underline text-sky-600 items-center pt-2">
<p>Read More</p>
<LogoArrow />
</div> </div>
</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> </NuxtLink>
</article> </article>
</template> </template>

4
content/blogs/1. hello-world.md
View File

@@ -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.' 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 time: 10Jan2022
tags: ['sdf', 'sdf', 'nuxt'] tags: ['sdf', 'javascript', 'nuxt']
--- ---
::CustomTitle ::CustomTitle

2
content/blogs/2. hello-man.md
View File

@@ -2,7 +2,7 @@
title: 'Title of the page' title: 'Title of the page'
description: 'meta description of the page' description: 'meta description of the page'
time: 2Jan2022 time: 2Jan2022
tags: ['vue'] tags: ['vue', 'javascript']
--- ---
# BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB # BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB

2
content/blogs/3. intro-to-nuxt.md
View File

@@ -2,7 +2,7 @@
title: 'Title of the page' title: 'Title of the page'
description: 'meta description of the page' description: 'meta description of the page'
time: 4Nov2022 time: 4Nov2022
tags: ['cypress'] tags: ['cypress', 'javascript']
--- ---
# CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCc # CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCc

2
content/blogs/5. intro-to-ts.md
View File

@@ -2,7 +2,7 @@
title: 'Title of the page' title: 'Title of the page'
description: 'meta description of the page' description: 'meta description of the page'
time: 1Jan2023 time: 1Jan2023
tags: ['firebase'] tags: ['firebase', 'javascript']
--- ---
# Hello man # Hello man

2
pages/blogs/index.vue
View File

@@ -14,7 +14,7 @@ const { data } = await useAsyncData('home', () => queryContent('/blogs').sort({
<template> <template>
<main class="container max-w-5xl mx-auto text-zinc-600"> <main class="container max-w-5xl mx-auto text-zinc-600">
<ArchiveHero /> <ArchiveHero />
<div> <div class="space-y-5 my-5">
<template v-for="post in data" :key="n"> <template v-for="post in data" :key="n">
<ArchiveCard <ArchiveCard
:title="post.title" :title="post.title"