wohoo cool new stuff (json generation, better layouts, more to come)
This commit is contained in:
parent
24efaf1b2c
commit
7c4aefe5fc
GPG key ID:
4DE1059A4666E89F
6 changed files with 204 additions and 48 deletions
102
src/components/ceCard.astro
Normal file
102
src/components/ceCard.astro
Normal file
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
46
src/layouts/baseSection.astro
Normal file
46
src/layouts/baseSection.astro
Normal file
|
|
@ -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>
|
||||
|
|
@ -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.">
|
||||
<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 title="Firq TA on Astro">
|
||||
<BaseSection title="Servant Offering">
|
||||
{servantdata.map((item) => (<ServantCard {...item}/>))}
|
||||
</BaseSection>
|
||||
<BaseSection title="CE Offering">
|
||||
{cedata.map((item) => (<CeCard {...item}/>))}
|
||||
</BaseSection>
|
||||
</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>
|
||||
|
|
|
|||
12
static/cedata.json
Normal file
12
static/cedata.json
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
[
|
||||
{
|
||||
"name": "The Merciless One",
|
||||
"link": "merciless_one",
|
||||
"mlb": "true"
|
||||
},
|
||||
{
|
||||
"name": "Vessel of the Saint",
|
||||
"link": "vessel",
|
||||
"mlb": "false"
|
||||
}
|
||||
]
|
||||
29
static/servantdata.json
Normal file
29
static/servantdata.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
Loading…
Reference in a new issue