Fixed TA site part

src/components/cards/servantCard.astro

@@ -46,26 +46,6 @@ let loading: "eager" | "lazy" = index <= 3 ? "eager" : "lazy";
 </article>
 
 <style>
-  .heading {
-    display: flex;
-    height: 4rem;
-    width: 100%;
-    align-items: center;
-    justify-content: center;
-    font-size: 24px;
-    color: white;
-    max-width: 200px;
-    padding-bottom: 0.3rem;
-    font-weight: bold;
-  }
-
-  .servants-container {
-    row-gap: 1em;
-    column-gap: 1em;
-    justify-content: center;
-    align-self: center;
-  }
-
   article:hover {
     transform: scale(1);
     border-color: var(--c-darkpurple);

src/components/cards/taCard.astro

@@ -36,118 +36,93 @@ const servant_images = import.meta.glob<GlobImage>(
 const loadedServantImage = plsLoadImage(servant_images, servantImagePath)
 const loadedTargetImage = plsLoadImage(target_images, targetImagePath)
 
-let hasuser = ''
+const hasuser = user !== undefined ? 'display: flex' : 'display: none'
-if (user !== undefined) {
-  hasuser = 'hasuser'
-}
 ---
 
 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
-  <article>
+  <div class="imagecontainer">
-    <Image src={loadedTargetImage} alt={title} class="icon" />
+    <Image src={loadedTargetImage} alt={title} />
     <div class="title">
       <h2>{title}</h2>
     </div>
-    <p>
+  </div>
-      <span class={hasuser}>
+  <p>
-        By {user}<br /> •
+    <span style={hasuser}>By {user}<br />•</span>
-      </span>
+    {formatted_date}
-      {formatted_date}
+  </p>
-    </p>
+  <div class="expand-on-hover">
-    <div class="expand-on-hover">
+    <Image src={loadedServantImage} alt="" />
-      <Image src={loadedServantImage} alt="" />
+    <h2>{turns}</h2>
-      <h2>{turns}</h2>
+  </div>
-    </div>
-  </article>
 </a>
 
 <style>
-  div {
-    display: none;
-  }
-
-  span {
-    display: none;
-  }
-
-  .hasuser {
-    display: flex;
-  }
-
   a {
     text-decoration: none;
-  }
+    display: flex;
-
+    flex-direction: column;
-  article {
+    flex-wrap: wrap;
     background-color: var(--c-darkergray);
     border: 2px var(--c-darkgray) solid;
     padding: 10px;
     text-align: center;
+    width: max(30%, 100px);
     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;
+    z-index: 1;
   }
 
-  article:hover {
+  a:hover {
     transform: scale(1);
     border-color: var(--c-darkpurple);
+    z-index: 10;
   }
 
-  article > .icon {
+  .imagecontainer {
+    display: flex;
+    width: 90%;
+    height: auto;
+    position: relative;
+  }
+  .imagecontainer > img {
+    width: 100%;
+    height: auto;
     border-radius: 1.25rem;
-    width: var(--size-value);
-    height: var(--size-value);
-    margin: 0.5rem;
   }
 
-  article:hover .title {
+  a:hover .title {
     display: flex;
     position: absolute;
     align-items: center;
     justify-content: center;
     text-align: center;
     background-color: var(--c-darkgray);
-    height: var(--size-value);
+    width: 100%;
-    width: var(--size-value);
+    height: 100%;
-    padding: 1px;
     opacity: 90%;
+    box-shadow: 0px 0px 0px 1px var(--c-darkgray);
     border-radius: 1.25rem;
-    top: calc(0.5rem + 9px);
   }
 
-  article:hover .title h2 {
+  a:hover .title h2 {
-    margin: 0;
+    margin: 4px;
     display: inline-flex;
-    font-weight: bold;
+    font-weight: 500;
     color: white;
-    font-size: 18px;
+    font-size: 1rem;
     line-height: 150%;
-    padding: 0.5rem;
   }
 
-  article .title h2 {
+  a .title {
     display: none;
   }
 
-  article .title {
-    display: none;
-  }
-
-  .icon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
   p {
     display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
     text-align: center;
     justify-content: center;
     align-items: center;
@@ -155,11 +130,8 @@ if (user !== undefined) {
     text-decoration: none;
     color: white;
     font-size: 1rem;
-    font-weight: bold;
+    font-weight: 400;
-    padding-top: 0.5rem;
+    margin: 0.5rem 0px 0.25rem 0px;
-    margin: 0.5rem 0px;
-    flex-wrap: wrap;
-    flex-direction: column;
   }
 
   .expand-on-hover {
@@ -176,14 +148,16 @@ if (user !== undefined) {
     transform-origin: top;
     position: absolute;
     top: 90%;
+    padding-top: 0.5rem;
+    margin-top: 0.2rem;
     color: white;
     border-radius: 0px 0px 1.25rem 1.25rem;
     width: 100%;
   }
 
   .expand-on-hover img {
-    width: 3rem;
+    width: 2.5rem;
-    height: 3rem;
+    height: auto;
     margin-bottom: 0.5rem;
     border-radius: 0.5rem;
   }
@@ -192,9 +166,22 @@ if (user !== undefined) {
     margin: 0.5rem;
   }
 
-  article:hover .expand-on-hover {
+  a:hover .expand-on-hover {
     transform: scaleY(1);
     transition: transform 200ms ease-in-out;
     background-color: var(--c-darkergray);
   }
+
+  @media (min-width: 512px) {
+    a {
+      padding: 10px;
+      width: auto;
+      height: auto;
+    }
+
+    a > .imagecontainer {
+      width: 112px;
+      height: 112px;
+    }
+  }
 </style>

src/layouts/taSection.astro

@@ -24,12 +24,13 @@ if (abovetext === undefined) {
 
 <style>
   div > div {
-    row-gap: 1.5em;
+    display: flex;
-    column-gap: 1.5em;
+    position: relative;
+    flex-flow: row wrap;
+    row-gap: 1em;
+    column-gap: 1em;
     justify-content: center;
     align-self: center;
-    display: flex;
-    flex-flow: row wrap;
     padding: 1em;
   }
   h1 {