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

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>

9
web/src/components/Base.astro → web/src/layouts/Base.astro
View File

@@ -1,12 +1,13 @@
---
import Head, {type Props as HeadProps} from "./Head.astro";
type Props = {} & HeadProps;
type Props = {
} & HeadProps;
---
<html>
<Head {...Astro.props}></Head>
<body>
<body class="bg-gray-800 text-white">
<slot/>
<footer></footer>
</body>
</html>

0
web/src/components/Head.astro → web/src/layouts/Head.astro
View File

19
web/src/pages/index.astro
View File

@@ -1,10 +1,15 @@
---
import Head from "../components/Head.astro";
import Hero from "../components/Hero.astro"
import Base from "../layouts/Base.astro";
import Image from "../panorama.png";
import NavBar from "../components/NavBar.astro";
---
<html lang="en">
<Head title="Firmament"></Head>
<body>
<h1>Astro</h1>
</body>
</html>
<Base title="Firmament">
<Hero image={Image} alt="A panorama shot of the HyPixel SkyBlock hub">
<h1 class="text-4xl font-bold leading-tight mb-4">Firmament</h1>
<p class="text-lg text-gray-300 mb-8">Hypixel SkyBlock Utility Mod</p>
<a href="https://modrinth.com/mod/firmament" class="bg-amber-300 hover:bg-yellow-400 rounded-full text-black text-lg transition duration-300 hover:scale-110 hover:shadow-lg py-1 px-5">Download now</a>
</Hero>
<NavBar navStyle="transparent"></NavBar>
</Base>

BIN
web/src/panorama.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 MiB