Added favourites, fixed cards, merge this for first deploy

This commit is contained in:
Firq 2023-03-04 21:25:00 +01:00
parent fcf328b377
commit 3eccbb69d3
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
10 changed files with 122 additions and 9 deletions

View file

@ -0,0 +1,90 @@
---
export interface Props {
name: string;
origin: string;
image: string;
}
const {image, origin, name } = Astro.props;
const img: string = `favourites/${image}.png`;
---
<article>
<div class="heading">{name}</div>
<img src={img} alt={name}>
<h2 class="subtext">
{origin}
</h2>
</article>
<style>
.heading {
display: flex;
height: 4rem;
font-size: 22px;
color: white;
max-width: 200px;
padding-bottom: 0.3rem;
font-weight: bold;
margin: 0px;
justify-content: center;
align-items: center;
}
.servants-container {
row-gap: 1em;
column-gap: 1em;
justify-content: center;
align-self: center;
align-content: center;
}
article:hover {
transform: scale(var(--hover-scale));
}
article {
display: flex;
flex-wrap: wrap;
flex-direction: column;
background-color: rgb(27, 27, 27);
border-color: #1e1e1e;
padding: 0em 0.75em;
width: 40%;
height: auto;
justify-content: center;
align-items: center;
text-align: center;
transition: transform var(--speed) var(--ease);
}
article>img {
padding: 0.25em;
width:120px;
height:auto;
}
@media(min-width: 512px) {
article {
padding: 10px 10px;
width: auto;
height: auto;
}
article>img {
padding: 1.5em;
width: 200px;
height: auto;
}
}
.subtext {
color: white;
font-size: 16px;
font-weight: 600;
margin: 5;
line-height: 20px;
}
</style>

View file

@ -3,7 +3,7 @@
--- ---
<div> <div>
Firq FGO Site This is still a work in progress and continuously expanded. Feel free to look around.
</div> </div>
@ -12,9 +12,11 @@
display: flex; display: flex;
width: 100%; width: 100%;
height: 10em; height: 10em;
background-color: grey; background-color: #2e2e2e;
text-align: center; text-align: center;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: white;
font-size: 1.5em;
} }
</style> </style>

View file

@ -48,8 +48,7 @@
list-style-type: none; list-style-type: none;
row-gap: 0.5em; row-gap: 0.5em;
column-gap: 0.5ch; column-gap: 0.5ch;
margin-block-start: 0px; margin: 0px;
margin-block-end: 0px;
line-height: 1.5em; line-height: 1.5em;
} }
.mobile > ul { .mobile > ul {

View file

@ -60,12 +60,16 @@ if(bond10 === "false") {
} }
article { article {
display: flex;
flex-wrap: wrap;
flex-direction: column;
background-color: rgb(27, 27, 27); background-color: rgb(27, 27, 27);
border-color: #1e1e1e; border-color: #1e1e1e;
padding: 0em 0.75em; padding: 0em 0.75em;
width: 40%; width: 40%;
height: auto; height: auto;
justify-content: center; justify-content: center;
align-items: center;
text-align: center; text-align: center;
transition: transform var(--speed) var(--ease); transition: transform var(--speed) var(--ease);
} }

View file

@ -11,7 +11,7 @@ import ContactCard from '../components/contactCard.astro';
import contactdata from '../../static/_contactdata.json' import contactdata from '../../static/_contactdata.json'
--- ---
<Layout title="About" currentpage="about"> <Layout title="About - Firq FGO Site" currentpage="about">
<BasicSection title="About"> <BasicSection title="About">
This is a small sideproject that I'm creating. It uses Astro for developing and Gitlab for providing the site. This is a small sideproject that I'm creating. It uses Astro for developing and Gitlab for providing the site.
</BasicSection> </BasicSection>

View file

@ -4,7 +4,7 @@ import BasicSection from '../layouts/basicSection.astro';
--- ---
<Layout title="Blog" currentpage="blog"> <Layout title="Blog - Firq FGO Site" currentpage="blog">
<BasicSection title="Work in Progress"> <BasicSection title="Work in Progress">
Nothing to see here (yet) Nothing to see here (yet)
</BasicSection> </BasicSection>

View file

@ -1,11 +1,17 @@
--- ---
import Layout from '../layouts/Layout.astro'; import Layout from '../layouts/Layout.astro';
import Hero from '../components/hero.astro'; import Hero from '../components/hero.astro';
import BaseSection from '../layouts/baseSection.astro';
import FavouriteCard from '../components/favouriteCard.astro';
import favouritesdata from '../../static/_favouritesdata.json'
--- ---
<Layout title="Firq FGO Site" currentpage="home"> <Layout title="Home - Firq FGO Site" currentpage="home">
<Hero/> <Hero/>
<BaseSection title="Favourites">
{favouritesdata.map((item) => (<FavouriteCard {...item}/>))}
</BaseSection>
</Layout> </Layout>
<style> <style>

View file

@ -11,7 +11,7 @@ import cedata from '../../static/_cedata.json'
--- ---
<Layout title="Servants" currentpage="servants"> <Layout title="Servants - Firq FGO Site" currentpage="servants">
<BaseSection title="Servant Offering"> <BaseSection title="Servant Offering">
{servantdata.map((item) => (<ServantCard {...item}/>))} {servantdata.map((item) => (<ServantCard {...item}/>))}
</BaseSection> </BaseSection>

View file

@ -8,7 +8,7 @@ import tadata from '../../static/_tadata.json'
--- ---
<Layout title="TA Collection" currentpage="ta-collection"> <Layout title="TA Collection - Firq FGO Site" currentpage="ta-collection">
<TaSection title="Completed TAs"> <TaSection title="Completed TAs">
{tadata.map((item) => (<TaCard {...item}/>))} {tadata.map((item) => (<TaCard {...item}/>))}
</TaSection> </TaSection>

View file

@ -0,0 +1,12 @@
[
{
"name": "Scathach",
"origin": "Fate/Grand Order",
"image": "scathach"
},
{
"name": "Skadi",
"origin": "Fate/Grand Order",
"image": "skadi"
}
]