LGCC
/
cdrdpyj
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fixed heigth of images and sticky gallery images inside content of news

This commit is contained in:
Esteban 2026-02-13 08:54:25 -05:00
parent 0511c1e938
commit 667334bae5
2 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/section/CarouselSection.astro
View File

@ -9,14 +9,14 @@ const { images, class: className } = Astro.props;
<div class="bg-white"> <div class="bg-white">
<div class="mx-auto"> <div class="mx-auto">
<div class="swiper h-200"> <div class="swiper lg:h-200 md:h-150 h-100">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
{ {
images.map((image) => ( images.map((image) => (
<div class="swiper-slide h-full"> <div class="swiper-slide h-full">
<div class="flex! h-full flex-col items-center justify-center relative"> <div class="flex! h-full flex-col items-center justify-center relative">
{image.text && ( {image.text && (
<div class="uppercase text-2xl lg:text-9xl text-white text-shadow-lg absolute font-secondary"> <div class="uppercase lg:text-9xl md:text-5xl text-4xl text-white text-shadow-lg absolute font-secondary">
{image.text} {image.text}
</div> </div>
)} )}

26
src/pages/news/[id].astro
View File

@ -31,22 +31,22 @@ const { Content } = await render(post);
<div class="container mx-auto"> <div class="container mx-auto">
{post.data.gallery && <CarouselSection images={post.data.gallery} />} {post.data.gallery && <CarouselSection images={post.data.gallery} />}
<div class="grid md:grid-cols-10"> <div class="grid md:grid-cols-10">
<div class="md:col-span-7 bg-white p-8 md:p-20 prose-p:mb-4 text-[#003421]"> <div class="md:col-span-7 bg-white p-8 md:p-20 prose-p:mb-4 text-[#003421]">
<Content /> <Content />
</div> </div>
<div class="md:col-span-3 bg-tertiary"> <div class="md:col-span-3 bg-tertiary md:sticky top-0 h-fit">
{ post.data.youtube && ( { post.data.youtube && (
<YouTube id={post.data.youtube} /> <YouTube id={post.data.youtube} />
)} )}
{post.data.gallery && ( {post.data.gallery && (
post.data.gallery.map(galleryImage => ( post.data.gallery.map(galleryImage => (
<Image src={galleryImage.image} alt={galleryImage.text} /> <Image src={galleryImage.image} alt={galleryImage.text} />
)) ))
)} )}
</div> </div>
</div> </div>
</div> </div>
</MainLayout> </MainLayout>