New Files

src/components/servantCard.astro

@@ -0,0 +1,137 @@
+---
+export interface Props {
+	name: string;
+	level: string;
+    skills: string;
+    np: string;
+    asc: string;
+    ml: string;
+    bond10: string;
+}
+
+const {bond10, ml, asc, np, skills, level, name } = Astro.props;
+
+const servant_img: string = `servant/${name}_${asc}.png`;
+const bondce_img: string = `ce/bond-ce/${name}.png`
+let bondce_css: string = "bond-ce";
+
+if(bond10 === "false") {
+    bondce_css += " unobtained" 
+}
+---
+
+<article>
+    <div class="heading-center">
+        <h1 class="servantname">{name}</h1>
+    </div>
+    <img src={servant_img} alt={name}>
+    <h2 class="subtext">
+        Level {level}<br>
+        {skills}<br>
+        {np}</h2>
+    <div class="expand-on-hover">
+        <img class={bondce_css} src={bondce_img} alt="">
+        <h2 class="subtext">Mana Loading: {ml}</h2>
+    </div>
+</article>
+
+<style>
+    .heading-section {
+        justify-content: center;
+        text-align: center;
+    }
+
+    .heading-center {
+        display: table;
+        width: 100%;
+        height: 4.5rem;
+    }
+
+    .servants-container {
+        row-gap: 1em;
+        column-gap: 1em;
+        justify-content: center;
+        align-self: center;
+    }
+
+    article:hover {
+        transform: scale(var(--hover-scale));
+    }
+
+    article {
+        background-color: rgb(27, 27, 27);
+        border-color: #1e1e1e;
+        padding: 0em 0.75em;
+        width: 40%;
+        height: auto;
+        justify-content: center;
+        text-align: center;
+        transition: transform var(--speed) var(--ease);
+    }
+
+    article>img {
+        width:120px;
+        height:auto;
+    }
+
+    @media(min-width: 512px) {
+        article {
+            padding: 10px 10px;
+            width: auto;
+            height: auto;
+        }
+
+        .servants-container {
+        row-gap: 1.5em;
+        column-gap: 1.5em;
+        }
+
+        article>img {
+        width: 200px;
+        height: auto;
+        }
+    }
+
+    .subtext {
+        color: white;
+        font-size: 16px;
+        font-weight: 600;
+        margin: 5;
+        line-height: 20px;
+    }
+
+    .servantname {
+        font-size: 22px;
+        color: white;
+        max-width: 200px;
+        padding-bottom: 0.3rem;
+        display: table-cell;
+        vertical-align: middle;
+    }
+
+    .expand-on-hover {
+        z-index: 99;
+        transform: scaleY(0);
+        transform-origin: top;
+        position: absolute;
+        top: 95%;
+        left: 0px;
+        right: 0px;
+    }
+
+    article:hover .expand-on-hover {
+        transform: scaleY(1);
+        transition: transform 200ms ease-in-out;
+        background-color: #242424;
+    }
+
+    .bond-ce {
+        padding-top: 0.75rem;
+        height: 3rem;
+        width: auto;
+    }
+
+    .unobtained {
+        filter: grayscale(1)
+    }
+</style>