Major redesign and rewrite

src/components/cards/favouriteCard.astro

@@ -0,0 +1,94 @@
+---
+import { Image } from 'astro:assets'
+import type { GlobImage } from '../../types/generic'
+import { plsLoadImage } from '../../utils/tools'
+
+export interface Props {
+  name: string
+  origin: string
+  imageFile: string
+  link: string
+}
+
+const { link, imageFile, origin, name } = Astro.props
+const imagePath = `/src/assets/favourites/${imageFile}`
+const images = import.meta.glob<GlobImage>(
+  '/src/assets/favourites/*.{png,webp}'
+)
+const loadedImage = plsLoadImage(images, imagePath)
+---
+
+<a
+  href={link}
+  target="_blank"
+  rel="noopener noreferrer"
+  aria-label=`${name} - new window`
+>
+  <div class="heading">{name}</div>
+  <Image src={loadedImage} alt={name} />
+  <h2 class="subtext">
+    {origin}
+  </h2>
+</a>
+
+<style>
+  .heading {
+    display: flex;
+    height: 4rem;
+    font-size: 24px;
+    color: white;
+    max-width: 200px;
+    padding-bottom: 0.3rem;
+    font-weight: bold;
+    margin: 0px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  a {
+    border-radius: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    background-color: var(--c-darkergray);
+    border-color: var(--c-darkgray);
+    padding: 0em 0.75em;
+    width: 40%;
+    height: auto;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    transition: transform var(--speed) var(--ease);
+    text-decoration: none;
+
+    &:hover {
+      transform: scale(var(--hover-scale));
+    }
+
+    img {
+      padding: 0px 0.25em;
+      width: 90%;
+      height: auto;
+    }
+  }
+
+  @media (min-width: 512px) {
+    a {
+      padding: 10px 10px;
+      width: auto;
+      height: auto;
+      img {
+        padding: 0px 1.5em;
+        width: 200px;
+      }
+    }
+  }
+
+  .subtext {
+    color: white;
+    font-size: 16px;
+    font-weight: 600;
+    margin: 5;
+    line-height: 20px;
+  }
+</style>