wohoo cool new stuff (json generation, better layouts, more to come)

src/components/ceCard.astro

@@ -0,0 +1,102 @@
+---
+export interface Props {
+	name: string;
+    link: string;
+	mlb: string;
+}
+
+const {mlb, link, name } = Astro.props;
+
+const ce_img: string = `ce/${link}.png`;
+let mlb_image: string = "";
+
+if(mlb === "false") {
+    mlb_image = "hidemlb";
+}
+---
+
+<article>
+    <div class="heading-center">
+        <h1>{name}</h1>
+    </div>
+    <div>
+        <img class="ce-crop" src={ce_img} alt="A Fragment of 2030">
+    </div>
+    <div class={mlb_image}>
+        <img class="mlb" src="ce/mlb.png" alt="Max-limit broken"/>
+    </div>
+</article>
+
+<style>
+    .hidemlb {
+        display: none;
+    }
+
+    article {
+        background-color: rgb(27, 27, 27);
+        float: left;
+        border-color: #1e1e1e;
+        padding: 20px;
+        padding-top: 5px;
+        width: 7em;
+        height: auto;
+        justify-content: center;
+        text-align: center;
+        transition: transform var(--speed) var(--ease);
+        overflow: hidden;
+        margin: 0px;
+    }
+
+    article:hover {
+        transform: scale(var(--hover-scale));
+    }
+
+    article div {
+        margin: 1em auto;
+    }
+
+    img {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .heading-center {
+        display: table;
+        width: 100%;
+        height: 2.5rem;
+    }
+
+    .heading-center > h1 {
+        font-size: 20px;
+        color: white;
+        max-width: 200px;
+        padding-bottom: 0.3rem;
+        display: table-cell;
+        vertical-align: middle;
+    }
+
+    .ce-crop {
+        width: 6em;
+        height: 6em;
+        object-fit: cover;
+        object-position: 0% 0%;
+    }
+
+    @media (min-width: 512px) {
+        .ce-crop {
+            width: 10em;
+            height: 10em;
+        }
+        article {
+            width: auto;
+        }
+    }
+
+    .mlb {
+        width: 60%;
+        margin-top: 1rem;
+        margin-left: auto;
+        margin-right: auto;
+    }
+</style>

src/components/servantCard.astro

@@ -28,19 +28,14 @@ if(bond10 === "false") {
     <h2 class="subtext">
         Level {level}<br>
         {skills}<br>
-        {np}</h2>
+        NP {np}</h2>
     <div class="expand-on-hover">
         <img class={bondce_css} src={bondce_img} alt="">
-        <h2 class="subtext">Mana Loading: {ml}</h2>
+        <h2 class="subtext">Mana Loading: {ml === "Not Unlocked" && <br>}{ml}</h2>
     </div>
 </article>
 
 <style>
-    .heading-section {
-        justify-content: center;
-        text-align: center;
-    }
-
     .heading-center {
         display: table;
         width: 100%;
@@ -62,7 +57,7 @@ if(bond10 === "false") {
         background-color: rgb(27, 27, 27);
         border-color: #1e1e1e;
         padding: 0em 0.75em;
-        width: 40%;
+        width: auto;
         height: auto;
         justify-content: center;
         text-align: center;
@@ -81,11 +76,6 @@ if(bond10 === "false") {
             height: auto;
         }
 
-        .servants-container {
-        row-gap: 1.5em;
-        column-gap: 1.5em;
-        }
-
         article>img {
         width: 200px;
         height: auto;