firq-dev-website/src/components/blogCard.astro

---
export interface Props {
	url: string | undefined;
	title: string;
    pubdate: string;
    description: string;
}

const options_date: Intl.DateTimeFormatOptions = {
    year: "numeric",
    month: "long",
    day: "2-digit",
}
const { description, pubdate, url, title } = Astro.props;
const date = new Date(pubdate).toLocaleDateString('en-GB', options_date);
---

<a href={url} rel="noopener noreferrer">
    <article>
        <h2>{title}</h2>
        <h3>{date}</h3>
        <p>{description}</p>
    </article>
</a>

<style>
    a {
        text-decoration: none;
        height: auto;
        margin: 0.5rem;
    }
    p {
        color: white;
        padding: 0em 0.5em;
        text-align: left;
        font-size: 1.1em;
        margin: 0.5em;
    }
    article>h2 {
        margin: 0.3em 0px;
        color: var(--c-darkpurple);
        font-size: 1.3em;
        line-height: normal;
        text-decoration: none;
    }
    article>h3 {
        margin: 0.2em;
        color: white;
        font-size: 0.8em;
        line-height: normal;
        text-decoration: none;
    }
    article {
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        align-content: flex-start;
        justify-content: baseline;
        background-color: var(--c-darkergray);
        padding: 10px;
        text-align: center;
        transition: transform var(--speed) var(--ease);
        min-height: 100%;
        width: 11rem;
    }
    a:hover {
        transform: scale(var(--hover-scale));
    }
</style>