Minor css tweaks - adding icons

This commit is contained in:
Julio Ruiz 2026-02-11 22:38:51 -05:00
parent a7e5c8abac
commit 4a4b31fa61
6 changed files with 33 additions and 9 deletions

View File

@ -2,16 +2,17 @@
import { Icon } from "astro-icon/components";
const { props } = Astro.props;
const textColor = props.textColor || ''
const imageUrl = props.image || ''
//const bgClass = props.type === 'text'? `bg-[${props.bgColor}]` : `bg-[url(${props.image})] bg-cover`
---
<div class="aspect-square overflow-hidden">
<div class={`flex flex-col justify-between h-full bg-[${props.bgColor}]`}>
<div class={`flex flex-col justify-center h-full bg-[${props.bgColor}]`}>
{ props.type === 'text' && (
<div class="p-16">
<Icon name={props.icon} class="text-8xl" />
<p>{props.text}</p>
<div class="p-16 flex flex-col justify-between h-full">
<Icon name={props.icon} class={`text-[${textColor}] text-8xl`} />
<p class={`text-[${textColor}]`}>{props.text}</p>
</div>
)}
{ props.type === 'image' && (

View File

@ -11,7 +11,7 @@ const { props } = Astro.props;
<p class="text-lg text-tertiary">Compromiso activo con un orden justo, basado en principios morales, respeto por la dignidad humana y defensa de valores permanentes.</p>
</div>
<div class="rightcol flex justify-end align-bottom min-h-full ">
<Icon name="ph:scales-thin" class="text-9xl text-tertiary self-end" />
<Icon name="icon_justice_1" class="text-9xl text-tertiary self-end" />
</div>
</div>
<div class="bg-tertiary p-24 grid grid-cols-2">
@ -20,7 +20,7 @@ const { props } = Astro.props;
<p class="text-[#CBA16A] text-lg">Coherencia entre pensamiento, palabra y acción; transparencia institucional y respon- sabilidad en el espacio público.</p>
</div>
<div class="rightcol flex justify-end align-bottom min-h-full ">
<Icon name="ph:brain-thin" class="text-[#EBE5D0] text-9xl self-end" />
<Icon name="icon_justice_2" class="text-[#EBE5D0] text-9xl self-end" />
</div>
</div>
</div>

View File

@ -30,7 +30,8 @@ const cards = [
type: 'text',
icon: 'ph:arrow-circle-up-thin',
text: 'Dirección de La Gran Carpa Catedral. Puerto Rico',
bgColor: '#EBE5D0'
textColor: '#EBE5D0',
bgColor: '#003421'
},
{
type: 'image',
@ -40,7 +41,7 @@ const cards = [
type: 'text',
icon: 'ph:arrow-circle-left-thin',
text: 'Participación activa en escenarios internacionales.',
bgColor: '#BEA48D'
bgColor: '#EBE5D0'
},
];
---

View File

@ -36,7 +36,7 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
sizeTitle: 'text-2xl',
}} />
</div>
<div class="col-span-1 py-38 px-24 bg-tertiary">
<div class="col-span-1 py-38 px-24 bg-[#21523F]">
<img src="/src/assets/logo-ligth.webp" alt="Logo del CPyJ">
</div>
</div>

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.7 KiB

View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 616 552" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-7535.97,-45395.3)">
<g transform="matrix(5.55556,0,0,5.55556,0,0)">
<g transform="matrix(1,0,0,1,1417.13,8270.48)">
<path d="M0,-99.316C-4.241,-99.316 -8.425,-98.043 -11.998,-95.401C-21.722,-99.316 -31.997,-94.41 -36.279,-87.53C-45.946,-85.535 -52.824,-76.989 -52.841,-67.248C-52.841,-66.67 -52.797,-66.146 -52.74,-65.623C-56.883,-62.418 -59.778,-57.684 -60.487,-52.184C-61.165,-46.899 -59.708,-41.784 -56.756,-37.714C-57.828,-34.138 -57.901,-30.299 -56.927,-26.649C-54.393,-17.207 -45.083,-10.698 -36.027,-12.107L-32.551,-1.75C-32.195,-0.719 -31.221,-0.014 -30.133,-0.014L-21.41,-0.014C-20.349,0 -19.392,-0.646 -19.009,-1.636C-15.561,-10.354 -12.055,-15.257 -8.989,-17.932C-5.937,-20.602 -3.392,-21.163 -1.121,-21.237C4.162,-21.391 9.461,-21.858 14.014,-23.624C17.688,-25.049 20.865,-27.198 22.816,-31.438C25.233,-30.475 26.758,-30.296 29.376,-30.296C40.807,-30.296 50.149,-39.608 50.149,-51.042C50.149,-57.922 46.741,-64.551 40.875,-68.309C41.046,-83.726 28.538,-91.472 17.346,-89.86C13.536,-95.612 6.998,-99.316 0,-99.316M0,-94.185C5.809,-94.185 11.119,-90.962 13.821,-85.831C14.372,-84.8 15.528,-84.265 16.662,-84.531C17.807,-84.8 18.979,-84.941 20.149,-84.955C28.405,-84.955 35.104,-78.608 35.706,-70.512C34.467,-70.794 33.161,-70.951 31.848,-70.979L23.426,-70.979C20.008,-70.979 20.273,-65.666 23.698,-65.848L31.821,-65.848C33.688,-65.805 35.451,-65.395 37.079,-64.649C41.982,-61.878 45.024,-56.693 45.024,-51.039C45.024,-42.376 38.056,-35.424 29.406,-35.424C27.599,-35.424 25.803,-35.736 24.107,-36.344C24.262,-37.654 24.262,-39 24.08,-40.341C23.936,-41.369 23.684,-42.365 23.358,-43.32C26.243,-43.884 28.94,-45.045 31.287,-46.768C33.322,-48.198 32.347,-51.405 29.857,-51.446C29.295,-51.446 28.728,-51.267 28.261,-50.925C26.072,-49.313 23.497,-48.369 20.732,-48.125C17.975,-51.601 13.849,-53.834 9.255,-53.907L-20.222,-53.907C-22.881,-53.934 -25.353,-55.109 -27.176,-57.027C-27.643,-57.537 -28.31,-57.833 -28.999,-57.849C-31.306,-57.903 -32.507,-55.122 -30.88,-53.483C-28.166,-50.629 -24.408,-48.836 -20.298,-48.779L9.165,-48.779C14.014,-48.706 18.38,-44.877 19.001,-39.651C19.625,-34.507 16.404,-30.098 12.15,-28.413C8.631,-27 3.782,-26.522 -1.289,-26.365C-4.452,-26.264 -8.468,-25.217 -12.38,-21.798C-15.943,-18.675 -19.674,-12.969 -23.022,-5.139L-28.28,-5.139L-31.856,-15.791C-32.28,-17.075 -33.636,-17.81 -34.952,-17.443C-42.229,-15.509 -49.859,-20.113 -51.978,-27.984C-52.444,-29.737 -52.561,-31.544 -52.401,-33.313C-50.382,-31.816 -48.065,-30.668 -45.507,-29.992C-42.047,-28.815 -40.604,-34.22 -44.193,-34.936C-51.611,-36.9 -56.376,-43.979 -55.402,-51.544C-54.428,-59.089 -48.008,-64.741 -40.319,-64.798C-36.773,-64.697 -36.816,-70.086 -40.362,-69.929C-42.896,-69.899 -45.339,-69.419 -47.585,-68.542C-46.975,-75.719 -41.608,-81.612 -34.374,-82.686C-33.612,-82.784 -32.933,-83.237 -32.535,-83.902C-29.721,-88.65 -24.634,-91.559 -19.112,-91.575C-16.893,-91.559 -14.714,-91.078 -12.695,-90.175C-11.805,-89.768 -10.745,-89.909 -9.998,-90.557C-7.196,-92.899 -3.644,-94.185 0,-94.185" style="fill:rgb(235,229,208);fill-rule:nonzero;"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB