1 files changed, 92 insertions, 0 deletions
diff --git a/layouts/partials/article-card.html b/layouts/partials/article-card.html
new file mode 100644
index 0000000..d803464
--- /dev/null
+++ b/layouts/partials/article-card.html
@@ -0,0 +1,92 @@
+{{ $articleType := .Params.type | default "life" }}
+{{ $typeConfig := .Site.Params.articleTypes }}
+{{ $typeData := index $typeConfig $articleType }}
+{{ $excerpt := .Description | default .Summary }}
+
+{{ $imageURL := "" }}
+{{ $useDefaultThumbnail := false }}
+{{ if .Params.image }}
+  {{ $resource := .Resources.GetMatch .Params.image }}
+  {{ if $resource }}
+    {{ $imageURL = $resource.RelPermalink }}
+  {{ else }}
+    {{ $imageURL = .Params.image }}
+  {{ end }}
+{{ else }}
+  {{ $useDefaultThumbnail = true }}
+{{ end }}
+
+<article class="card group bg-bg">
+  <!-- Thumbnail -->
+  {{ if or $imageURL $useDefaultThumbnail }}
+  <a href="{{ .RelPermalink }}" class="block overflow-hidden bg-surface/50 relative" tabindex="-1">
+    {{ if $useDefaultThumbnail }}
+    <picture>
+      <source srcset="/images/default_thumbnail_light.png" media="(prefers-color-scheme: light)" />
+      <img
+        src="/images/default_thumbnail_dark.png"
+        alt="{{ .Title }}"
+        class="card-image group-hover:scale-105 transition-transform duration-200"
+        loading="lazy"
+      />
+    </picture>
+    {{ else }}
+    <img
+      src="{{ $imageURL }}"
+      alt="{{ .Title }}"
+      class="card-image group-hover:scale-105 transition-transform duration-200"
+      loading="lazy"
+    />
+    {{ end }}
+    <!-- Type badge pill overlay -->
+    {{ if $typeData }}
+    <div
+      class="absolute top-3 right-3 px-3 py-1.5 rounded-full text-xs font-semibold transition-opacity"
+      style="background-color: var(--type-{{ $articleType }}); color: var(--type-{{ $articleType }}-text);"
+    >
+      {{ i18n $articleType }}
+    </div>
+    {{ end }}
+  </a>
+  {{ end }}
+
+  <!-- Content -->
+  <div class="card-body">
+    <!-- Pinned badge -->
+    {{ if .Params.pinned }}
+    <div class="inline-flex items-center gap-1 px-2 py-1 rounded text-sm font-semibold" style="color: {{ .Site.Params.secondaryAccent }};">
+      📌 PINNED
+    </div>
+    {{ end }}
+
+    <!-- Title -->
+    <h3 class="text-xl font-semibold">
+      <a href="{{ .RelPermalink }}" class="group-hover:text-accent transition-colors">
+        {{ .Title }}
+      </a>
+    </h3>
+
+    <!-- Metadata -->
+    <div class="flex flex-wrap items-center gap-3 text-sm text-text-dim">
+      <time datetime="{{ .PublishDate.Format "2006-01-02T15:04:05Z07:00" }}">
+        {{ .PublishDate.Format "Jan 2, 2006" }}
+      </time>
+    </div>
+
+    <!-- Excerpt -->
+    {{ if $excerpt }}
+    <p class="text-text-dim text-sm line-clamp-3 leading-relaxed">
+      {{ $excerpt | plainify }}
+    </p>
+    {{ end }}
+
+    <!-- CTA Button -->
+    <a
+      href="{{ .RelPermalink }}"
+      class="btn btn-sm mt-2"
+    >
+      {{ i18n "readMore" }}
+      <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
+    </a>
+  </div>
+</article>