Major redesign and rewrite

src/components/cards/taCard.astro

@@ -0,0 +1,199 @@
+---
+import { Image } from 'astro:assets'
+import type { GlobImage } from '../../types/generic'
+import { plsLoadImage } from '../../utils/tools'
+
+export interface Props {
+  date: string
+  title: string
+  link: string
+  targetImageFile: string
+  user?: string
+  servantImageFile?: string
+  turns?: string
+}
+
+const { turns, targetImageFile, user, date, servantImageFile, link, title } =
+  Astro.props
+
+const options_date: Intl.DateTimeFormatOptions = {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+}
+
+const targetImagePath = `/src/assets/ta_icons/${targetImageFile}`
+const servantImagePath = `/src/assets/ta_icons/ta_servants/${servantImageFile}`
+
+const formatted_date = new Date(date).toLocaleDateString('de-DE', options_date)
+const target_images = import.meta.glob<GlobImage>(
+  '/src/assets/ta_icons/*.{png,webp}'
+)
+const servant_images = import.meta.glob<GlobImage>(
+  '/src/assets/ta_icons/ta_servants/*.{png,webp}'
+)
+
+const loadedServantImage = plsLoadImage(servant_images, servantImagePath)
+const loadedTargetImage = plsLoadImage(target_images, targetImagePath)
+
+let hasuser = ''
+if (user !== undefined) {
+  hasuser = 'hasuser'
+}
+---
+
+<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
+  <article>
+    <Image src={loadedTargetImage} alt={title} class="icon" />
+    <div class="title">
+      <h2>{title}</h2>
+    </div>
+    <p>
+      <span class={hasuser}>
+        By {user}<br /> •
+      </span>
+      {formatted_date}
+    </p>
+    <div class="expand-on-hover">
+      <Image src={loadedServantImage} alt="" />
+      <h2>{turns}</h2>
+    </div>
+  </article>
+</a>
+
+<style>
+  div {
+    display: none;
+  }
+
+  span {
+    display: none;
+  }
+
+  .hasuser {
+    display: flex;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  article {
+    background-color: var(--c-darkergray);
+    border-color: var(--c-darkgray);
+    padding: 10px;
+    text-align: center;
+    transition: transform var(--speed) var(--ease);
+    height: auto;
+    width: auto;
+    max-width: 8rem;
+    border-radius: 1.25rem;
+    padding-bottom: 1.5rem;
+    --size-value: 7rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+
+  article:hover {
+    transform: scale(var(--hover-scale));
+  }
+
+  article > .icon {
+    border-radius: 1.25rem;
+    width: var(--size-value);
+    height: var(--size-value);
+    margin: 0.5rem;
+  }
+
+  article:hover .title {
+    display: flex;
+    position: absolute;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-color: var(--c-darkgray);
+    height: calc(var(--size-value) + 0.1rem);
+    width: calc(var(--size-value) + 0.1rem);
+    opacity: 90%;
+    border-radius: 1.25rem;
+    top: 1.1em;
+  }
+
+  article:hover .title h2 {
+    margin: 0;
+    display: inline-flex;
+    font-weight: bold;
+    color: white;
+    font-size: 18px;
+    line-height: 150%;
+    padding: 0.5rem;
+  }
+
+  article .title h2 {
+    display: none;
+  }
+
+  article .title {
+    display: none;
+  }
+
+  .icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  p {
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    line-height: 100%;
+    text-decoration: none;
+    color: white;
+    font-size: 1rem;
+    font-weight: bold;
+    padding-top: 0.5rem;
+    margin: 0.5rem 0px;
+    flex-wrap: wrap;
+    flex-direction: column;
+  }
+
+  .expand-on-hover {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-evenly;
+    background-color: var(--c-duskgray);
+    z-index: 99;
+    transform: scaleY(0);
+    transform-origin: top;
+    position: absolute;
+    top: 90%;
+    left: 0px;
+    right: 0px;
+    color: white;
+    border-radius: 0px 0px 1.25rem 1.25rem;
+  }
+
+  .expand-on-hover img {
+    width: 3rem;
+    height: 3rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    border-radius: 0.5rem;
+  }
+
+  .expand-on-hover h2 {
+    margin: 0.5rem;
+  }
+
+  article:hover .expand-on-hover {
+    transform: scaleY(1);
+    transition: transform 200ms ease-in-out;
+    background-color: var(--c-duskgray);
+  }
+</style>