65 lines
2.3 KiB
HTML
65 lines
2.3 KiB
HTML
<article class="bg-transparent rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 badge-{{ .Params.badgeColor }} flex flex-col h-full">
|
|
<!-- Badge couleur -->
|
|
{{ with .Params.badge }}
|
|
<style>
|
|
.badge {
|
|
background-color: color-mix(in srgb, var(--badge-color) 40%, transparent);
|
|
color: #222;
|
|
}
|
|
.badge-icon {
|
|
color: var(--badge-color);
|
|
}
|
|
</style>
|
|
<div class="px-6 pt-6">
|
|
<span class="badge inline-flex items-center rounded-full px-4 py-1.5 text-sm font-medium">
|
|
{{ . }}
|
|
</span>
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ with .Params.featured_image }}
|
|
<a href="{{ $.RelPermalink }}" class="block aspect-w-16 aspect-h-9 overflow-hidden">
|
|
<img
|
|
src="{{ . }}"
|
|
alt="{{ $.Title }}"
|
|
class="object-cover w-full h-full transform hover:scale-105 transition-transform duration-300"
|
|
loading="lazy"
|
|
>
|
|
</a>
|
|
{{ end }}
|
|
|
|
<div class="p-6 pt-2 flex flex-col h-full">
|
|
<!-- Title -->
|
|
<h2 class="text-2xl font-bold mb-3 hover:text-primary-600 transition-colors duration-200">
|
|
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
|
|
</h2>
|
|
|
|
<!-- Description -->
|
|
<p class="text-gray-600 mb-4 line-clamp-2">
|
|
{{ with .Description }}
|
|
{{ . }}
|
|
{{ else }}
|
|
{{ .Summary | truncate 160 }}
|
|
{{ end }}
|
|
</p>
|
|
|
|
<!-- Read More link and Reading Time -->
|
|
<div class="flex justify-between items-center mt-auto">
|
|
<!-- Reading Time -->
|
|
<span class="text-sm text-gray-500 flex items-center">
|
|
|
|
</span>
|
|
|
|
<a href="{{ .RelPermalink }}"
|
|
class="inline-flex items-center text-primary-600 hover:text-primary-700 font-medium">
|
|
{{ i18n "discoverFeature" }}
|
|
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
|
</svg>
|
|
</a>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</article>
|