Restructure and extra stuff

src/components/links/linkCard.astro

@@ -0,0 +1,47 @@
+---
+import type { ImageMetadata } from 'astro'
+
+
+export interface Props {
+  text: string
+  icon: ImageMetadata
+  link: string
+}
+
+const { text, icon, link } = Astro.props
+const icon_src_url = `url("${icon.src}")`
+
+---
+
+<a href={link} target="_blank" rel="noopener noreferrer">
+  <div class="icon"></div>
+  <span class="visually-hidden">{text}</span>
+</a>
+
+<style define:vars={{ icon_src_url }}>
+  a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    background-color: var(--c-primary-background);
+    border-radius: .35rem;
+    border: 2px solid var(--c-primary-text);
+  }
+
+  a:hover {
+    border-color: var(--c-accent-1);
+    & .icon {
+      background: var(--c-accent-1);
+    }
+  }
+
+  .icon {
+    mask: var(--icon_src_url) no-repeat center;
+    mask-size: contain;
+    background-color: var(--c-primary-text);
+    height: 65%;
+    width: 65%;
+  }
+</style>