Chieri/Firmament
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): Add hero image and navbar

Browse Source
This commit is contained in:
Linnea Gräf
2024-11-17 03:02:24 +01:00
parent d268521054
commit a1b2a399ef
10 changed files with 636 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/components/Base.astro
View File

@@ -1,12 +0,0 @@
---
import Head, {type Props as HeadProps} from "./Head.astro";
type Props = {} & HeadProps;
---
<html>
<Head {...Astro.props}></Head>
<body>
</body>
</html>

12
web/src/components/Head.astro
View File

@@ -1,12 +0,0 @@
---
export type Props = {
title: string
}
---
<head lang="en">
<meta charset="utf-8"/>
<link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
<meta name="viewport" content="width=device-width"/>
<meta name="generator" content={Astro.generator}/>
<title>{Astro.props.title}</title>
</head>

19
web/src/components/Hero.astro
View File

@@ -0,0 +1,19 @@
---
import {type ImageMetadata} from "astro";
import {Picture} from "astro:assets";
export type Props = {
image: ImageMetadata,
alt: string
}
---
<div class="relative text-white overflow-hidden h-80">
<div class="inset-0 absolute pointer-events-none">
<Picture src={Astro.props.image} alt={Astro.props.alt}
class="object-cover object-center w-full h-full"></Picture>
<div class="absolute inset-0 bg-black opacity-30"></div>
</div>
<div class="relative z-10 flex flex-col justify-center items-center h-full text-center">
<slot/>
</div>
</div>

26
web/src/components/NavBar.astro Normal file
View File

@@ -0,0 +1,26 @@
---
export type Props = {
navStyle?: 'transparent' | 'full'
}
const navbar = Astro.props.navStyle ?? 'full';
---
<nav
class={`max-w-screen-xl bg-gray-800 flex flex-wrap items-center justify-between mx-auto px-2 py-1 leading-tight ${navbar == 'transparent' ? 'bg-opacity-50 backdrop-blur-lg absolute z-10 w-full top-0' : ''}`}>
<a href="/" class="flex items-center space-x-3">
<!--<img src=""/> TODO: add logo -->
<span class="self-center font-semibold whitespace-nowrap">Firmament</span>
</a>
<div class="block w-auto">
<ul class="font-medium flex-row mt-0 flex border-0">
<li>
<a class="px-1"
href="https://github.com/nea89o/Firmament/blob/master/docs/Texture%20Pack%20Format.md">Docs</a>
</li>
<li>
<a class="px-1" href="/texture-packs">Texture Packs</a>
</li>
</ul>
</div>
</nav>