23 lines
1.2 KiB
Handlebars
23 lines
1.2 KiB
Handlebars
|
<article class="post-grid-item opacity-0 relative bg-[var(--bg-secondary)] rounded-lg shadow-lg overflow-hidden group">
|
||
|
|
<a href="{{url}}" class="block">
|
||
|
|
{{#if feature_image}}
|
||
|
|
<img
|
||
|
|
class="w-full h-72 object-cover transition-transform duration-300 ease-in-out group-hover:scale-105"
|
||
|
|
src="{{img_url feature_image size="m"}}"
|
||
|
|
srcset="{{img_url feature_image size="s"}} 400w,
|
||
|
|
{{img_url feature_image size="m"}} 600w,
|
||
|
|
{{img_url feature_image size="l"}} 1000w,
|
||
|
|
{{img_url feature_image size="xl"}} 2000w"
|
||
|
|
sizes="(max-width: 800px) 400px, (max-width: 1200px) 600px, 1000px"
|
||
|
|
alt="{{title}}"
|
||
|
|
loading="lazy"
|
||
|
|
>
|
||
|
|
{{else}}
|
||
|
|
<div class="w-full h-72 flex items-center justify-center bg-[var(--bg-tertiary)] text-[var(--text-tertiary)] text-2xl">No Image</div>
|
||
|
|
{{/if}}
|
||
|
|
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
|
||
|
|
<h2 class="text-[var(--text-primary)] text-xl font-semibold leading-tight">{{title}}</h2>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</article>
|