Implementing Blog

src/components/blogCard.astro

@@ -0,0 +1,68 @@
+---
+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 class="contact do-hover">
+        <h2>{title}</h2>
+        <h3>{date}</h3>
+        <p>{description}</p>
+    </article>
+</a>
+
+<style>
+    a {
+        text-decoration: none;
+    }
+    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-wrap: wrap;
+        flex-direction: row;
+        align-items: baseline;
+        align-content: flex-start;
+        justify-content: center;
+        background-color: var(--c-darkergray);
+        padding: 10px;
+        text-align: center;
+        transition: transform var(--speed) var(--ease);
+        height: auto;
+        width: 172px;
+    }
+    a:hover {
+        transform: scale(var(--hover-scale));
+    }
+</style>