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;

src/layouts/baseSection.astro

@@ -0,0 +1,46 @@
+---
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<div>
+    <h1>{title}</h1>
+    <div>
+        <slot />
+    </div>
+</div>
+
+<style>
+    div {
+    	display: flex;
+    	flex-direction: column;
+    	justify-content: center;
+    	text-align: center;
+	}
+    div > div {
+    	row-gap: 1em;
+    	column-gap: 1em;
+    	justify-content: center;
+    	align-self: center;
+    	display: flex;
+    	flex-flow: row wrap;
+    	padding: 1em;
+		position: relative;
+	}
+    div > h1 {
+        color: white;
+        margin: 0.5rem 0px;
+        padding: 0.25rem 0.75rem;
+        width: max-content;
+        background-color: #1e1e1e;
+    }
+	@media(min-width: 512px) {	
+    	div {
+    		row-gap: 1.5em;
+    		column-gap: 1.5em;
+    	}
+	}
+</style>

src/pages/index.astro

@@ -1,44 +1,21 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import BaseSection from '../layouts/baseSection.astro';
 import ServantCard from '../components/servantCard.astro';
+import CeCard from '../components/ceCard.astro';
+
+import servantdata from '../../static/servantdata.json'
+import cedata from '../../static/cedata.json'
 ---
 
-<Layout title="Firq TA on Astro.">
+<Layout title="Firq TA on Astro">
-	<main>
+	<BaseSection title="Servant Offering">
-		<div class="servant-section">
+		{servantdata.map((item) => (<ServantCard {...item}/>))}
-			<h1 class="section-title">Servant offering</h1>
+	</BaseSection>
-			<div class="servants-container container">
+	<BaseSection title="CE Offering">
-				<ServantCard 
+		{cedata.map((item) => (<CeCard {...item}/>))}
-					name="Skadi" 
+	</BaseSection>
-					level="120" 
-    				skills="10 / 10 / 10"
-    				np="NP4"
-    				asc="03"
-    				ml="10"
-    				bond10="true"
-				/>
-			</div>
-		</div>
-	</main>
 </Layout>
 
 <style>
-	.servants-container {
-    	row-gap: 1em;
-    	column-gap: 1em;
-    	justify-content: center;
-    	align-self: center;
-	}
-	.container {
-    	display: flex;
-    	flex-flow: row wrap;
-    	padding: 1em;
-		position: relative;
-	}
-	.servant-section {
-    	display: flex;
-    	flex-direction: column;
-    	justify-content: center;
-    	text-align: center;
-	}
 </style>

static/cedata.json

@@ -0,0 +1,12 @@
+[
+	{
+		"name": "The Merciless One",
+		"link": "merciless_one",
+		"mlb": "true"
+	},
+	{
+		"name": "Vessel of the Saint",
+		"link": "vessel",
+		"mlb": "false"
+	}
+]

static/servantdata.json

@@ -0,0 +1,29 @@
+[
+	{
+		"name": "Skadi",
+		"level": "120",
+		"np": "4",
+		"skills": "10 / 10 / 10 ",
+		"ml": "10",
+		"asc": "03",
+		"bond10": "true"
+	},
+	{
+		"name": "Skadi",
+		"level": "70",
+		"np": "1",
+		"skills": "10 / 10 / 10 ",
+		"ml": "1",
+		"asc": "01",
+		"bond10": "true"
+	},
+	{
+		"name": "Castoria",
+		"level": "90",
+		"np": "1",
+		"skills": "10 / 10 / 10 ",
+		"ml": "Not Unlocked",
+		"asc": "01",
+		"bond10": "true"
+	}
+]