Added favourites, fixed cards, merge this for first deploy
This commit is contained in:
parent
fcf328b377
commit
3eccbb69d3
10 changed files with 122 additions and 9 deletions
90
src/components/favouriteCard.astro
Normal file
90
src/components/favouriteCard.astro
Normal 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>
|
|
@ -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>
|
|
@ -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 {
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
12
static/_favouritesdata.json
Normal file
12
static/_favouritesdata.json
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"name": "Scathach",
|
||||||
|
"origin": "Fate/Grand Order",
|
||||||
|
"image": "scathach"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Skadi",
|
||||||
|
"origin": "Fate/Grand Order",
|
||||||
|
"image": "skadi"
|
||||||
|
}
|
||||||
|
]
|
Loading…
Reference in a new issue