Firq/firq-dev-website
Firq/firq-dev-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 119 Packages Wiki Activity Actions

redesign progress

Browse source
This commit is contained in:
Firq 2023-03-04 13:48:57 +01:00
parent c98c43100e
commit a5521b479e
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
4 changed files with 119 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/hero.astro Normal file
View file

@ -0,0 +1,20 @@
---
---
<div>
Firq FGO Site
</div>
<style>
div {
display: flex;
width: 100%;
height: 10em;
background-color: grey;
text-align: center;
align-items: center;
justify-content: center;
}
</style>

83
src/components/navbar.astro Normal file
View file

@ -0,0 +1,83 @@
---
export interface Props {
currentPage: string;
}
const {currentPage } = Astro.props;
---
<header>
<a href="">
<img src="link_192.png" alt="">
</a>
<ul role="navigation">
<li><a href="">
<i class="iconoir-home-alt"></i>
Home
</a></li>
<li><a href="">
<i class="iconoir-book-stack"></i>
Servants
</a></li>
<li><a href="">
<i class="iconoir-database-script"></i>
Blog
</a></li>
</ul>
</header>
<style>
header {
background-color: #1e1e1e;
display: flex;
height: 64px;
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;
}
ul {
align-items: center;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
flex-direction: row;
height: 64px;
width: 100%;
list-style-type: none;
row-gap: 0.5em;
column-gap: 0.5ch;
margin-block-start: 0px;
margin-block-end: 0px;
line-height: 1.5em;
}
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;
}
</style>

2
src/layouts/Layout.astro
View file

@ -22,6 +22,7 @@ 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>
<slot />
@ -36,5 +37,6 @@ const description: string = "A reference for all esports Servants, CEs and alrea
}
body {
background: #3e3e3e;
margin: 0px;
}
</style>

14
src/pages/experiment.astro Normal file
View file

@ -0,0 +1,14 @@
---
import Layout from '../layouts/Layout.astro';
import Navbar from '../components/navbar.astro';
import Hero from '../components/hero.astro';
---
<Layout title="Expreimenting">
<Navbar currentPage="Home"/>
<Hero/>
</Layout>
<style>
</style>