Files
Blogv3/layouts/partials/posts.html
2025-06-18 16:14:17 -03:00

57 lines
2.0 KiB
HTML

<div class="container mx-auto px-4 py-8">
<h2 class="text-2xl font-bold mb-6 text-center">Todos los Posts</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{{ range first 6 (where .Site.RegularPages "Section" "posts") }}
<div
class="
bg-white rounded-lg
border-4 border-black
shadow-[0_4px_0_black]
hover:shadow-[0_8px_0_black]
hover:-translate-y-1
hover:scale-105
transition-all duration-100 ease-linear
overflow-hidden
transform
mx-auto
hover:z-2
"
>
{{ if .Params.image }}
<img
src="{{ .Params.image }}"
alt="{{ .Title }}"
class="w-full h-48 object-cover"
/>
{{ else }}
<div
class="w-full h-48 bg-gray-200 flex items-center justify-center"
>
<span class="text-gray-500 font-mono text-sm">No image</span>
</div>
{{ end }}
<div class="p-4">
<h2 class="text-xl font-bold mb-2">{{ .Title }}</h2>
<p class="text-gray-700 mb-4 font-sans">
{{ with .Params.description }}{{ . | truncate 150 }}{{ else
}}{{ .Summary | truncate 150 }}{{ end }}
</p>
<div class="flex justify-between items-center">
<a
href="{{ .Permalink }}"
class="text-blue-700 underline hover:text-blue-900 font-medium"
>Leer más</a
>
<span class="text-sm text-gray-600 font-mono">
{{ .Date.Format "Jan 2, 2006" }}
</span>
</div>
</div>
</div>
{{ end }}
</div>
</div>