New Files

src/components/Card.astro

@@ -0,0 +1,62 @@
+---
+export interface Props {
+	title: string;
+	body: string;
+	href: string;
+}
+
+const { href, title, body } = Astro.props;
+---
+
+<li class="link-card">
+	<a href={href}>
+		<h2>
+			{title}
+			<span>&rarr;</span>
+		</h2>
+		<p>
+			{body}
+		</p>
+	</a>
+</li>
+<style>
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 0.15rem;
+		background-color: white;
+		background-image: var(--accent-gradient);
+		background-size: 400%;
+		border-radius: 0.5rem;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+	}
+
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: 1rem 1.3rem;
+		border-radius: 0.35rem;
+		color: #111;
+		background-color: white;
+		opacity: 0.8;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.25rem;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	p {
+		margin-top: 0.5rem;
+		margin-bottom: 0;
+		color: #444;
+	}
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+	}
+	.link-card:is(:hover, :focus-within) h2 {
+		color: rgb(var(--accent));
+	}
+</style>

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>

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

src/layouts/Layout.astro

@@ -0,0 +1,32 @@
+---
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/ico" href="/favicon.ico" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
+<style is:global>
+	:root {
+    	--hover-scale: 1.05;
+    	--speed: 50%;
+    	--ease: 50%;
+    	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+	}
+	body {
+		background: #3e3e3e;
+	}
+</style>

src/pages/index.astro

@@ -0,0 +1,44 @@
+---
+import Layout from '../layouts/Layout.astro';
+import ServantCard from '../components/servantCard.astro';
+---
+
+<Layout title="Firq TA on Astro.">
+	<main>
+		<div class="servant-section">
+			<h1 class="section-title">Servant offering</h1>
+			<div class="servants-container container">
+				<ServantCard 
+					name="Skadi" 
+					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>