Switch to Astro

Signed-off-by: Louis Hollingworth <louis@hollingworth.ch>

src/components/LinkCard.astro

@@ -0,0 +1,58 @@
+---
+export interface Props {
+	title: string;
+	to: string;
+}
+
+const { to, title } = Astro.props;
+
+const isExternal = to.startsWith('http');
+---
+{ isExternal == true ? (
+	<a href={to} target="_blank" rel="noopener noreferrer" class="card">
+		<p>{title} →</p>
+	</a>
+) : (
+	<a href={to} class="card">
+		<p>{title} →</p>
+	</a>
+)
+}
+<style lang="scss">
+@use '../assets/styles/colours';
+.card {
+	margin: 1rem;
+	padding: 1.5rem;
+	text-align: left;
+	color: inherit;
+	text-decoration: none;
+	border: 2px solid #000;
+	border-radius: 20px;
+	transition: color 0.15s ease, border-color 0.15s ease;
+}
+.card p {
+	margin: 0;
+	font-size: 1.25rem;
+	line-height: 1.5;
+}
+
+.card:link,
+.card:visited {
+	color: #000;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+	color: colours.$accent-colour-light !important;
+	border-color: colours.$accent-colour-light;
+}
+
+@media (max-width: 600px) {
+	.card {
+		margin: 0.5rem;
+		padding: 1.25rem;
+		width: 9rem;
+	}
+}
+</style>