@@ -28,8 +28,8 @@ withDefaults(defineProps<Props>(), {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<article class="group border m-2 rounded-2xl overflow-hidden shadow-md text-zinc-700">
|
<article class="group border m-2 rounded-2xl overflow-hidden shadow-md text-zinc-700">
|
||||||
<NuxtLink :to="path" class="grid grid-cols-1 sm:grid-cols-9 gap-3">
|
<NuxtLink :to="path" class="grid grid-cols-1 sm:grid-cols-10 gap-1">
|
||||||
<div class="sm:col-span-2">
|
<div class="sm:col-span-3">
|
||||||
<NuxtImg
|
<NuxtImg
|
||||||
class="h-full w-full object-cover object-center rounded-t-2xl sm:rounded-l-2xl sm:rounded-t-none shadow-lg group-hover:scale-[1.05] transition-all duration-500"
|
class="h-full w-full object-cover object-center rounded-t-2xl sm:rounded-l-2xl sm:rounded-t-none shadow-lg group-hover:scale-[1.05] transition-all duration-500"
|
||||||
:provider="provider"
|
:provider="provider"
|
||||||
@@ -44,7 +44,7 @@ withDefaults(defineProps<Props>(), {
|
|||||||
<p class="text-ellipsis line-clamp-2">
|
<p class="text-ellipsis line-clamp-2">
|
||||||
{{ description }}
|
{{ description }}
|
||||||
</p>
|
</p>
|
||||||
<div class="text-black text-sm pt-4 pb-2">
|
<div class="text-black text-sm pt-2 pb-1 sm:space-y-1 md:flex md:space-x-6">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<LogoDate />
|
<LogoDate />
|
||||||
{{ date }}
|
{{ date }}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
class="w-4 h-4 mr-2"
|
class="w-4 h-4 mr-1"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
class="w-4 h-4 mr-1"
|
class="w-4 h-4"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
|
|||||||
@@ -28,9 +28,9 @@ const data = computed<BlogPost>(() => {
|
|||||||
:alt="data.alt || ''"
|
:alt="data.alt || ''"
|
||||||
class="m-auto rounded-2xl shadow-lg h-52 md:h-96 w-4/5 content-center object-cover"
|
class="m-auto rounded-2xl shadow-lg h-52 md:h-96 w-4/5 content-center object-cover"
|
||||||
/>
|
/>
|
||||||
<p class="text-sm my-3 mx-10 text-center text-zinc-600">{{ data.description }}</p>
|
<p class="text-sm my-3 max-w-3xl mx-auto text-center text-zinc-600">{{ data.description }}</p>
|
||||||
<div class="flex w-full justify-center text-xs md:text-base my-8">
|
<div class="flex w-full justify-center text-xs md:text-base my-8">
|
||||||
<div class="md:flex text-black content-center gap-7">
|
<div class="md:flex text-black content-center gap-8 text-sm">
|
||||||
<div class="flex items-center font-semibold">
|
<div class="flex items-center font-semibold">
|
||||||
<LogoDate />
|
<LogoDate />
|
||||||
<p>{{ data.date || '' }}</p>
|
<p>{{ data.date || '' }}</p>
|
||||||
@@ -38,7 +38,7 @@ const data = computed<BlogPost>(() => {
|
|||||||
<div class="flex items-center gap-2 flex-wrap my-5">
|
<div class="flex items-center gap-2 flex-wrap my-5">
|
||||||
<LogoTag />
|
<LogoTag />
|
||||||
<template v-for="tag in data.tags">
|
<template v-for="tag in data.tags">
|
||||||
<p class="bg-gray-200 rounded-md px-3 py-1 font-semibold">{{ tag }}</p>
|
<span class="bg-gray-200 rounded-md px-2 py-1 font-semibold">{{ tag }}</span>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user