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

Fixed css image positioning for grid

This commit is contained in:
Julio Ruiz 2026-02-11 23:16:21 -05:00
parent d9c0acb6b5
commit 9f3c03fd46
2 changed files with 29 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/cards/GridCard.astro
View File

@ -7,12 +7,13 @@ const textColor = props.textColor || ''
const imageUrl = props.image || '' const imageUrl = props.image || ''
//const bgClass = props.type === 'text'? `bg-[${props.bgColor}]` : `bg-[url(${props.image})] bg-cover` //const bgClass = props.type === 'text'? `bg-[${props.bgColor}]` : `bg-[url(${props.image})] bg-cover`
--- ---
{props.type !== 'imgText' && (
<div class="aspect-square overflow-hidden"> <div class="aspect-square overflow-hidden">
<div class={`flex flex-col justify-center h-full bg-[${props.bgColor}]`}> <div class={`flex flex-col justify-between h-full bg-[${props.bgColor}]`}>
{ props.type === 'text' && ( { props.type === 'text' && (
<div class="p-16 flex flex-col justify-between h-full"> <div class="p-16">
<Icon name={props.icon} class={`text-[${textColor}] text-8xl`} /> <Icon name={props.icon} class="text-8xl" />
<p class={`text-[${textColor}]`}>{props.text}</p> <p>{props.text}</p>
</div> </div>
)} )}
{ props.type === 'image' && ( { props.type === 'image' && (
@ -22,6 +23,7 @@ const imageUrl = props.image || ''
)} )}
</div> </div>
</div> </div>
)}
{ props.type === 'imgText' && ( { props.type === 'imgText' && (
<div class={`flex flex-col justify-between h-full bg-[${props.bgColor}]`}> <div class={`flex flex-col justify-between h-full bg-[${props.bgColor}]`}>

18
src/components/section/ProjectionSection.astro
View File

@ -9,9 +9,9 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
<div class="container mx-auto"> <div class="container mx-auto">
<div class="grid grid-cols-12 overflow-hidden bg-white w-full"> <div class="grid grid-cols-3 bg-red-100 w-full">
<div class="row-span-2 col-span-8 p-24 text-tertiary grid gap-8 "> <div class="row-span-2 col-span-2 p-24 text-tertiary">
<div class="grid gap-5 md:text-lg"> <div class="flex flex-col gap-5 md:text-lg">
<h2 class="font-secondary text-5xl font-bold">{title}</h2> <h2 class="font-secondary text-5xl font-bold">{title}</h2>
<Icon name="ph:minus" class="text-tertiary text-4xl" /> <Icon name="ph:minus" class="text-tertiary text-4xl" />
<p class="text-lg">El <strong>Centro del Reino de Paz y Justicia</strong> lleva adelante una activa política de diplomacia pública, entendida como la construcción consciente de vínculos éticos, culturales y estratégicos entre pueblos, instituciones y liderazgos globales.</p> <p class="text-lg">El <strong>Centro del Reino de Paz y Justicia</strong> lleva adelante una activa política de diplomacia pública, entendida como la construcción consciente de vínculos éticos, culturales y estratégicos entre pueblos, instituciones y liderazgos globales.</p>
@ -41,15 +41,19 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
text: 'Apoyo claro y permanente al pueblo judío y al Estado de Israel' text: 'Apoyo claro y permanente al pueblo judío y al Estado de Israel'
}} /> }} />
</div> </div>
</div> </div>
<div class="col-span-4 over h-full bg-[#CBA16A]"> <div class="row-span-2 col-span-1 over bg-[#CBA16A] relative">
<div class="relative">
<BoxContainer props={{ <BoxContainer props={{
bgImage: '../src/assets/dove-bg.webp', bgImage: '../src/assets/dove-bg.webp',
bgColor: '#CBA16A', bgColor: '#CBA16A',
}} /> }} />
<div class="col-span-1 py-38 px-24 flex items-start relative justify-center bg-[#22523F] h-full bg-[url('/src/assets/DRJBP-2.webp')] bg-no-repeat bg-center"> <div class="absolute -bottom-[8rem] z-10 w-full">
<img src="/src/assets/logo-ligth.webp" class="w-1/2" alt="Logo del CPyJ"> <img src="/src/assets/logo-ligth.webp" class="w-1/2 mx-auto" alt="Logo del CPyJ">
</div>
</div>
<div class="bg-[#22523F] object-cover pt-64 justify-end flex">
<img src="/src/assets/DRJBP-2.webp" class="h-full object-cover" />
</div> </div>
</div> </div>