--- /dev/null
+{{ $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 text-white transition-opacity"
+ style="background-color: var(--type-{{ $articleType }});"
+ >
+ {{ 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>
<!-- Pinned posts first -->
{{ range (sort $pinned "Date" "desc") }}
<div class="relative">
- {{ partial "article-list-item.html" . }}
+ {{ partial "article-card.html" . }}
<span class="absolute top-4 right-4 px-2 py-0.5 rounded text-xs font-mono bg-surface text-text-dim border border-border/30">
{{ i18n "postCount" .Pages.Len }}
</span>
<!-- Regular posts -->
{{ range (sort $unpinned "Date" "desc") }}
<div class="relative">
- {{ partial "article-list-item.html" . }}
+ {{ partial "article-card.html" . }}
<span class="absolute top-4 right-4 px-2 py-0.5 rounded text-xs font-mono bg-surface text-text-dim border border-border/30">
{{ i18n "postCount" .Pages.Len }}
</span>