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>