zenn
d47134c46d
좌측 네비게이션과 카테고리의 간격 및 hover 인터랙션을 원본 패턴에 맞게 보정하고, 테마 전환/사이드바 전환 애니메이션과 샘플 폴더 Git 제외 설정을 함께 반영해 사용자 화면 일관성을 높였다. Co-authored-by: Cursor <cursoragent@cursor.com>
37 lines
1.1 KiB
Vue
37 lines
1.1 KiB
Vue
<script setup>
|
|
defineProps({
|
|
post: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<article class="post-card site-section site-panel-hover">
|
|
<div class="post-card__body site-section-body flex gap-4">
|
|
<img
|
|
v-if="post.featuredImage"
|
|
class="post-card__thumb h-20 w-36 shrink-0 rounded-lg bg-surface object-cover"
|
|
:src="post.featuredImage"
|
|
:alt="post.title"
|
|
loading="lazy"
|
|
>
|
|
<div v-else class="post-card__thumb h-20 w-36 shrink-0 rounded-lg bg-[linear-gradient(135deg,#06333a,#f4a261)]" />
|
|
<div class="post-card__content min-w-0">
|
|
<h2 class="post-card__title text-base font-semibold leading-tight">
|
|
<NuxtLink class="post-card__title-link site-interactive hover:opacity-70" :to="post.to">
|
|
{{ post.title }}
|
|
</NuxtLink>
|
|
</h2>
|
|
<p class="post-card__excerpt mt-2 text-sm leading-6 site-muted">
|
|
{{ post.excerpt }}
|
|
</p>
|
|
<p class="post-card__meta mt-2 text-xs site-muted">
|
|
{{ post.publishedAt }} / {{ post.tag }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</template>
|