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>
<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">