Merge fix

src/components/servantCard.astro

@@ -1,128 +1,130 @@
 ---
 export interface Props {
-	name: string;
-	level: string;
-    skills: string;
-    np: string;
-    image_servant: string;
-    image_bond: string;
-    ml: string;
-    bond10: string;
+  name: string
+  level: string
+  skills: string
+  np: string
+  image_servant: string
+  image_bond: string
+  ml: string
+  bond10: string
 }
 
-const {bond10, ml, image_bond, image_servant, np, skills, level, name } = Astro.props;
+const { bond10, ml, image_bond, image_servant, np, skills, level, name } =
+  Astro.props
 
-const servant_img: string = `/servant/${image_servant}.webp`;
+const servant_img: string = `/servant/${image_servant}.webp`
 const bondce_img: string = `/ce/bond-ce/${image_bond}.webp`
-let bondce_css: string = "bond-ce";
+let bondce_css: string = 'bond-ce'
 
-if(bond10 === "false") {
-    bondce_css += " unobtained" 
+if (bond10 === 'false') {
+  bondce_css += ' unobtained'
 }
 ---
 
 <article>
-    <div class="heading">{name}</div>
-    <img src={servant_img} alt={name}>
-    <h2 class="subtext">
-        Level {level}<br>
-        {skills}<br>
-        NP {np}</h2>
-    <div class="expand-on-hover">
-        <img class={bondce_css} src={bondce_img} alt="">
-        <h2 class="subtext">Mana Loading: {ml === "Not Unlocked" && <br/>}{ml}</h2>
-    </div>
+  <div class="heading">{name}</div>
+  <img src={servant_img} alt={name} />
+  <h2 class="subtext">
+    Level {level}<br />
+    {skills}<br />
+    NP {np}
+  </h2>
+  <div class="expand-on-hover">
+    <img class={bondce_css} src={bondce_img} alt="" />
+    <h2 class="subtext">Mana Loading: {ml === 'Not Unlocked' && <br />}{ml}</h2>
+  </div>
 </article>
 
 <style>
-    .heading {
-        display: flex;
-        height: 4rem;
-        width: 100%;
-        align-items: center;
-        justify-content: center;
-        font-size: 22px;
-        color: white;
-        max-width: 200px;
-        padding-bottom: 0.3rem;
-        font-weight: bold;
-    }
+  .heading {
+    display: flex;
+    height: 4rem;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    font-size: 22px;
+    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;
-    }
+  .servants-container {
+    row-gap: 1em;
+    column-gap: 1em;
+    justify-content: center;
+    align-self: center;
+  }
 
-    article:hover {
-        transform: scale(var(--hover-scale));
-    }
+  article:hover {
+    transform: scale(var(--hover-scale));
+  }
 
+  article {
+    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);
+  }
+
+  article > img {
+    width: 120px;
+    height: auto;
+  }
+
+  @media (min-width: 512px) {
     article {
-        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);
+      padding: 10px 10px;
+      width: auto;
+      height: auto;
     }
 
-    article>img {
-        width:120px;
-        height:auto;
+    article > img {
+      width: 200px;
+      height: auto;
     }
+  }
 
-    @media(min-width: 512px) {
-        article {
-            padding: 10px 10px;
-            width: auto;
-            height: auto;
-        }
+  .subtext {
+    color: white;
+    font-size: 16px;
+    font-weight: 600;
+    margin: 5;
+    line-height: 20px;
+  }
 
-        article>img {
-        width: 200px;
-        height: auto;
-        }
-    }
+  .expand-on-hover {
+    z-index: 99;
+    transform: scaleY(0);
+    transform-origin: top;
+    position: absolute;
+    top: 95%;
+    left: 0px;
+    right: 0px;
+  }
 
-    .subtext {
-        color: white;
-        font-size: 16px;
-        font-weight: 600;
-        margin: 5;
-        line-height: 20px;
-    }
+  article:hover .expand-on-hover {
+    transform: scaleY(1);
+    transition: transform 200ms ease-in-out;
+    background-color: var(--c-duskgray);
+  }
 
-    .expand-on-hover {
-        z-index: 99;
-        transform: scaleY(0);
-        transform-origin: top;
-        position: absolute;
-        top: 95%;
-        left: 0px;
-        right: 0px;
-    }
+  .bond-ce {
+    padding-top: 0.75rem;
+    height: 3rem;
+    width: auto;
+  }
 
-    article:hover .expand-on-hover {
-        transform: scaleY(1);
-        transition: transform 200ms ease-in-out;
-        background-color: var(--c-duskgray);
-    }
-
-    .bond-ce {
-        padding-top: 0.75rem;
-        height: 3rem;
-        width: auto;
-    }
-
-    .unobtained {
-        filter: grayscale(1)
-    }
-</style>
+  .unobtained {
+    filter: grayscale(1);
+  }
+</style>