Merge branch 'redesign' into 'main'

Redesign of Page

See merge request Firq/fgosite!1

src/components/Card.astro

@@ -1,62 +0,0 @@
----
-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/favouriteCard.astro

@@ -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>

src/components/hero.astro

@@ -0,0 +1,22 @@
+---
+
+---
+
+<div>
+This is still a work in progress and continuously expanded. Feel free to look around.
+</div>
+
+
+<style>
+    div {
+        display: flex;
+        width: 100%;
+        height: 10em;
+        background-color: #2e2e2e;
+        text-align: center;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-size: 1.5em;
+    }
+</style>

src/components/navbar.astro

@@ -0,0 +1,115 @@
+---
+---
+
+<header>
+    <a href="/" rel="noopener noreferrer" aria-label="Home">
+        <img src="link_192.png" alt="">
+    </a>
+    <ul class="desktop">
+        <slot />
+    </ul>
+    <button class="mobile">
+        <ul>
+            <slot />
+        </ul>
+        <div class="placeholder"></div>
+        <i class="iconoir-menu"></i>
+    </button>
+</header>
+
+<style>
+    header {
+        background-color: #1e1e1e;
+        display: flex;
+        height: auto;
+        width: 100%;
+        align-items: center;
+        line-height: 1.5em;
+    }
+    header > a {
+        padding-left: 16px;
+        display: block;
+        height: 48px;
+        width: 48px;
+    }
+    a > img {
+        height: 100%;
+        width: 100%;
+        object-fit: contain;
+    }
+    .desktop {
+        align-items: center;
+        justify-content: space-around;
+        display: none;
+        flex-wrap: wrap;
+        flex-direction: row;
+        height: 64px;
+        width: 100%;
+        list-style-type: none;
+        row-gap: 0.5em;
+        column-gap: 0.5ch;
+        margin: 0px;
+        line-height: 1.5em;
+    }
+    .mobile > ul {
+        background-color: #1e1e1e;
+        align-items: center;
+        flex-wrap: wrap;
+        flex-direction: column;
+        display: flex;
+        width: 100%;
+        list-style-type: none;
+        line-height: 3em;
+    }
+
+    .placeholder {
+        display: flex;
+        width: 100%;
+    }
+
+    .mobile {
+        display:flex;
+        background-color: #1e1e1e;
+        border: 0px;
+        width: 100%;
+        height: 64px;
+    }
+
+    .mobile > i {
+        color: white;
+        font-weight: bold;
+        font-size: 2em;
+        align-self: center;
+        padding-right: 1em;
+    }
+
+    .mobile > ul {
+        display: none;
+        padding: 0px;
+    }
+
+    .mobile:focus-within > ul{
+        display: flex;
+    }
+
+    .mobile:focus-within > .placeholder{
+        display: none;
+    }
+
+    .mobile:focus-within {
+        height: 256px;
+    }
+
+    @media (min-width: 1120px) {
+        .mobile {
+            display:none;
+        }
+        .desktop {
+            display: flex;
+        }
+
+        header {
+            height: 64px;
+        }
+    }
+</style>

src/components/navbarEntry.astro

@@ -0,0 +1,50 @@
+---
+export interface Props {
+	currentPage?: string;
+    link: string;
+    text: string;
+    icon: string;
+}
+
+const {icon, text, link, currentPage } = Astro.props;
+
+let currPage = "";
+
+if (currentPage === link.replace(new RegExp('/', 'g'), "")) {
+    currPage = "current"
+} else if (currentPage === "home" && link === "/") {
+    currPage = "current"
+}
+---
+
+<li>
+    <a href={link} rel="noopener noreferrer" aria-label={text} class={currPage}>
+        <i class={icon}></i>
+        {text}
+    </a>
+</li>
+
+<style>
+    li {
+        align-items: center;
+        justify-content: center;
+        text-align: left;
+        display: flex;
+        width: 200px;
+    }
+    li > a {
+        color: white;
+        text-decoration: none;
+        justify-content: center;
+        align-items: center;
+        font-size: 1.4em;
+        height: 100%;
+        font-weight: bold;
+    }
+    li > a:hover{
+        color: #551a8b;
+    }
+    .current {
+        color: #b86cffed;
+    }
+</style>

src/components/navbuttonsTitle.astro

@@ -0,0 +1,31 @@
+---
+
+---
+
+<div>
+    <button>Servant Offering</button>
+    <button>TA Achievements</button>
+    <button>About</button>
+</div>
+
+
+<style>
+    div {
+        display: flex;
+        margin: 1em 0%;
+    }
+    button {
+        padding: 1em 1em;
+        margin: 0em 0.5em;
+        background-color: rgb(218, 66, 218);
+        border-radius: 0%;
+        border-width: 0;
+        text-align: center;
+        font-size: large;
+        color: black;
+        width: 10em;
+    }
+    button:active {
+        background-color: blueviolet;
+    }
+</style>

src/components/servantCard.astro

@@ -60,12 +60,16 @@ if(bond10 === "false") {
     }
 
     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);
     }

src/layouts/Layout.astro

@@ -1,9 +1,14 @@
 ---
+import Navbar from '../components/navbar.astro';
+import NavbarEntry from '../components/navbarEntry.astro';
+import navdata from '../../static/_navdata.json'
+
 export interface Props {
 	title: string;
+	currentpage: string;
 }
 
-const { title } = Astro.props;
+const { currentpage, title } = Astro.props;
 const description: string = "A reference for all esports Servants, CEs and already completed TAs that Firq can provide. Contact information available as well.";
 ---
 
@@ -22,8 +27,12 @@ const description: string = "A reference for all esports Servants, CEs and alrea
     	<meta property="og:type" content="website" />
     	<meta property="og:locale" content="en_US" />
 		<title>{title}</title>
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css">
 	</head>
 	<body>
+		<Navbar>
+			{navdata.map((item) => (<NavbarEntry currentPage={currentpage} {...item}/>))}
+		</Navbar>
 		<slot />
 	</body>
 </html>
@@ -36,5 +45,6 @@ const description: string = "A reference for all esports Servants, CEs and alrea
 	}
 	body {
 		background: #3e3e3e;
+		margin: 0px;
 	}
 </style>

src/layouts/basicSection.astro

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

src/layouts/customFooter.astro

@@ -31,7 +31,8 @@
 
 <style>
     footer {
-        color: white
+        color: white;
+        bottom:0;
     }
     footer > div > a {
         color: white

src/layouts/hometitle.astro

@@ -0,0 +1,31 @@
+---
+
+---
+
+<div class="wrap">
+    <div>
+        <span>FIRQ FGO SITE</span>
+        <slot />
+    </div>
+</div>
+
+<style>
+    .wrap {
+        display: block;
+    }
+    .wrap > div {
+        display: flex;
+        padding: 15% 20%;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+    }
+    span {
+        display: inline-block;
+        padding: 0.1em;
+        font-weight: bold;
+        color: white;
+        font-size: 5em;
+        background-color: #1e1e1e;
+    }
+</style>

src/pages/about.astro

@@ -0,0 +1,25 @@
+---
+import Layout from '../layouts/Layout.astro';
+import BasicSection from '../layouts/basicSection.astro';
+
+import Navbar from '../components/navbar.astro';
+import NavbarEntry from '../components/navbarEntry.astro';
+import navdata from '../../static/_navdata.json'
+
+import ContactSection from '../layouts/contactSection.astro';
+import ContactCard from '../components/contactCard.astro';
+import contactdata from '../../static/_contactdata.json'
+---
+
+<Layout title="About - Firq FGO Site" currentpage="about">
+    <BasicSection title="About">
+        This is a small sideproject that I'm creating. It uses Astro for developing and Gitlab for providing the site.
+    </BasicSection>
+    <ContactSection title="Contact me">
+		{contactdata.map((item) => (<ContactCard {...item}/>))}
+	</ContactSection>
+    
+</Layout>
+
+<style>
+</style>

src/pages/blog.astro

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

src/pages/index.astro

@@ -1,36 +1,17 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import Hero from '../components/hero.astro';
 import BaseSection from '../layouts/baseSection.astro';
-import TaSection from '../layouts/taSection.astro';
+import FavouriteCard from '../components/favouriteCard.astro';
-import ContactSection from '../layouts/contactSection.astro';
+import favouritesdata from '../../static/_favouritesdata.json'
-import CustomFooter from '../layouts/customFooter.astro';
-
-import ServantCard from '../components/servantCard.astro';
-import CeCard from '../components/ceCard.astro';
-import TaCard from '../components/taCard.astro';
-import ContactCard from '../components/contactCard.astro';
-
-import servantdata from '../../static/_servantdata.json'
-import cedata from '../../static/_cedata.json'
-import tadata from '../../static/_tadata.json'
-import contactdata from '../../static/_contactdata.json'
 
 ---
 
-<Layout title="Firq TA on Astro">
+<Layout title="Home - Firq FGO Site" currentpage="home">
-	<BaseSection title="Servant Offering">
+    <Hero/>
-		{servantdata.map((item) => (<ServantCard {...item}/>))}
+    <BaseSection title="Favourites">
+        {favouritesdata.map((item) => (<FavouriteCard {...item}/>))}
     </BaseSection>
-	<BaseSection title="CE Offering">
-		{cedata.map((item) => (<CeCard {...item}/>))}
-	</BaseSection>
-	<TaSection title="Completed TAs">
-		{tadata.map((item) => (<TaCard {...item}/>))}
-	</TaSection>
-	<ContactSection title="Contact me">
-		{contactdata.map((item) => (<ContactCard {...item}/>))}
-	</ContactSection>
-	<CustomFooter />
 </Layout>
 
 <style>

src/pages/index.astro.old

@@ -0,0 +1,17 @@
+---
+import Layout from '../layouts/Layout.astro';
+
+---
+
+<Layout title="Firq FGO Site">
+    <Navbar/>
+    <Title/>
+    <Divider/>
+    <HomeLayout>
+        <AboutMe/>
+        <Favourites/>
+    </HomeLayout>
+</Layout>
+
+<style>
+</style>

src/pages/servants.astro

@@ -0,0 +1,25 @@
+---
+import Layout from '../layouts/Layout.astro';
+import BaseSection from '../layouts/baseSection.astro';
+import CustomFooter from '../layouts/customFooter.astro';
+
+import ServantCard from '../components/servantCard.astro';
+import servantdata from '../../static/_servantdata.json'
+
+import CeCard from '../components/ceCard.astro';
+import cedata from '../../static/_cedata.json'
+
+---
+
+<Layout title="Servants - Firq FGO Site" currentpage="servants">
+	<BaseSection title="Servant Offering">
+		{servantdata.map((item) => (<ServantCard {...item}/>))}
+	</BaseSection>
+	<BaseSection title="CE Offering">
+		{cedata.map((item) => (<CeCard {...item}/>))}
+	</BaseSection>
+	<CustomFooter />
+</Layout>
+
+<style>
+</style>

src/pages/ta-collection.astro

@@ -0,0 +1,19 @@
+---
+import Layout from '../layouts/Layout.astro';
+import CustomFooter from '../layouts/customFooter.astro';
+
+import TaSection from '../layouts/taSection.astro';
+import TaCard from '../components/taCard.astro';
+import tadata from '../../static/_tadata.json'
+
+---
+
+<Layout title="TA Collection - Firq FGO Site" currentpage="ta-collection">
+    <TaSection title="Completed TAs">
+		{tadata.map((item) => (<TaCard {...item}/>))}
+	</TaSection>
+    <CustomFooter />
+</Layout>
+
+<style>
+</style>

static/_favouritesdata.json

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

static/_navdata.json

@@ -0,0 +1,27 @@
+[
+	{
+        "link": "/",
+        "text": "Home",
+        "icon": "iconoir-home-alt"
+	},
+    {
+        "link": "/servants",
+        "text": "Servants",
+        "icon": "iconoir-database-script"
+	},
+    {
+        "link": "/ta-collection",
+        "text": "TA Collection",
+        "icon": "iconoir-db"
+	},
+    {
+        "link": "/blog",
+        "text": "Blog",
+        "icon": "iconoir-bookmark-book"
+	},
+    {
+        "link": "/about",
+        "text": "About",
+        "icon": "iconoir-mail"
+	}
+]

static/_tadata.json

@@ -28,5 +28,50 @@
 		"title": "MHXX 2T (No DMG CE)",
 		"link": "https://www.youtube.com/watch?v=lz6iBZvoDuw",
 		"image": "mhxx"
+	},
+	{
+		"title": "Taira 3T (Lostbelt 5.5)",
+		"link": "https://www.youtube.com/watch?v=YtRvahqFA0Y",
+		"image": "taira"
+	},
+	{
+		"title": "Douman 3T (Lostbelt 5.5)",
+		"link": "https://www.youtube.com/watch?v=6cstr3vTd8Y",
+		"image": "douman"
+	},
+	{
+		"title": "Christmas 2021 Rerun CQ 5T",
+		"link": "https://www.youtube.com/watch?v=cpqhx9dUgTU",
+		"image": "santagale"
+	},
+	{
+		"title": "Summer 4 Rerun CQ 3T",
+		"link": "https://www.youtube.com/watch?v=u72o7PDBtks",
+		"image": "fuuma"
+	},
+	{
+		"title": "Fate/Requiem CQ 3T",
+		"link": "https://www.youtube.com/watch?v=k7vGC4kpEFg",
+		"image": "erice"
+	},
+	{
+		"title": "Kirschtaria 3T (Lostbelt 5)",
+		"link": "https://www.youtube.com/watch?v=k7vGC4kpEFg",
+		"image": "kirschtaria"
+	},
+	{
+		"title": "Aeaean Spring Breeze CQ 3T",
+		"link": "https://www.youtube.com/watch?v=uo3jI9xuVwI",
+		"image": "odysseus"
+	},
+	{
+		"title": "Valentines 2022 CQ 4T",
+		"link": "https://www.youtube.com/watch?v=MOCMXZ17FkU",
+		"image": "sei"
+	},
+	{
+		"title": "Amazoness 2021 CQ 3T",
+		"link": "https://www.youtube.com/watch?v=MU_Hw2KKYRU",
+		"image": "penth"
 	}
 ]