h4ckx0r/webSostenible
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Arreglo posts horizontales

Browse Source
This commit is contained in:
Natanael Gómez Ortiz
2025-03-25 09:47:24 +01:00
parent c16fd89953
commit e1c6cf61cb
1 changed files with 47 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/components/ListadoPostsHorizontal.astro
View File

@@ -1,61 +1,57 @@
--- ---
import { getCollection } from "astro:content"; import { getCollection } from "astro:content";
const posts = await getCollection("posts"); const posts = await getCollection("posts");
// Selecciona 3 posts aleatorios // Selecciona 3 posts aleatorios
const selectedPosts = posts.sort(() => Math.random() - 0.5).slice(0, 3); const selectedPosts = posts.sort(() => Math.random() - 0.5).slice(0, 3);
--- ---
<div class="flex flex-wrap justify-center -mx-2"> <div class="flex flex-wrap justify-center -mx-2">
{ {
selectedPosts.map((post) => ( selectedPosts.map((post) => (
<div class="w-full md:w-1/3 p-2 mb-4 animate-on-scroll"> <div class="w-full md:w-1/3 p-2 mb-4 animate-on-scroll">
<div class="card bg-base-100 shadow-lg h-full"> <div class="card relative overflow-hidden bg-gradient-to-b from-neutral/80 to-neutral/90 dark:from-base-100/80 dark:to-base-100/90 shadow-lg h-full">
<div class="flex flex-wrap"> <div class="absolute inset-0 z-0">
<div class="w-full md:w-1/2"> <div class="aspect-[16/9] overflow-hidden">
<div class="aspect-square overflow-hidden rounded-l"> <img
<img src={post.data.imagen} class="object-cover w-full h-full" alt={post.data.titulo} /> src={post.data.imagen}
</div> class="w-full h-full object-cover opacity-40 dark:opacity-50"
</div> alt={post.data.titulo}
<div class="w-full md:w-1/2"> />
<div class="card-body flex flex-col h-full p-4">
<h5 class="text-xl font-semibold mb-2">
{post.data.titulo}
</h5>
<p class="text-base flex-grow post-content">
{post.data.descripcion}
</p>
<a href={"/posts/" + post.id} class="btn btn-primary mt-auto">
Ver detalles
</a>
</div>
</div>
</div>
</div>
</div> </div>
)) <div class="absolute inset-0 bg-black/40 dark:bg-black/30"></div>
} </div>
<div class="relative z-10 flex flex-col p-6 h-full">
<h5 class="text-xl font-bold mb-3 text-white dark:text-base-content">
{post.data.titulo}
</h5>
<p class="text-base mb-4 text-white/90 dark:text-base-content/80 line-clamp-3">
{post.data.descripcion}
</p>
<a
href={"/posts/" + post.id}
class="btn btn-primary w-full mt-auto"
>
Leer post
</a>
</div>
</div>
</div>
))
}
</div> </div>
<style> <style>
.post-content { .card {
display: -webkit-box; transition:
-webkit-box-orient: vertical; transform 0.3s ease,
flex-grow: 1; box-shadow 0.3s ease;
overflow: hidden; }
-webkit-line-clamp: 3; .card:hover {
} transform: translateY(-5px);
.card { box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease; }
display: flex; .line-clamp-3 {
flex-direction: column; display: -webkit-box;
height: 100%; -webkit-line-clamp: 3;
} -webkit-box-orient: vertical;
.card:hover { overflow: hidden;
transform: translateY(-5px); }
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important; </style>
}
.btn-primary {
transition: transform 0.3s ease;
}
</style>