diff options
| author | Linnea Gräf <nea@nea.moe> | 2024-11-17 03:02:24 +0100 |
|---|---|---|
| committer | Linnea Gräf <nea@nea.moe> | 2024-11-17 04:27:36 +0100 |
| commit | a1b2a399efd9ff1c8b3b0dfd71b59c7de28728ea (patch) | |
| tree | 5ab36193b22554346d26d5aca8198ca4402fd5b8 /web/src/components | |
| parent | d26852105463a51d5b71eb70fdaba787f0914030 (diff) | |
| download | Firmament-a1b2a399efd9ff1c8b3b0dfd71b59c7de28728ea.tar.gz Firmament-a1b2a399efd9ff1c8b3b0dfd71b59c7de28728ea.tar.bz2 Firmament-a1b2a399efd9ff1c8b3b0dfd71b59c7de28728ea.zip | |
feat(web): Add hero image and navbar
Diffstat (limited to 'web/src/components')
| -rw-r--r-- | web/src/components/Base.astro | 12 | ||||
| -rw-r--r-- | web/src/components/Head.astro | 12 | ||||
| -rw-r--r-- | web/src/components/Hero.astro | 19 | ||||
| -rw-r--r-- | web/src/components/NavBar.astro | 26 |
4 files changed, 45 insertions, 24 deletions
diff --git a/web/src/components/Base.astro b/web/src/components/Base.astro deleted file mode 100644 index 73ce48c..0000000 --- a/web/src/components/Base.astro +++ /dev/null @@ -1,12 +0,0 @@ ---- -import Head, {type Props as HeadProps} from "./Head.astro"; - -type Props = {} & HeadProps; ---- - -<html> -<Head {...Astro.props}></Head> -<body> - -</body> -</html> diff --git a/web/src/components/Head.astro b/web/src/components/Head.astro deleted file mode 100644 index 2732105..0000000 --- a/web/src/components/Head.astro +++ /dev/null @@ -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> diff --git a/web/src/components/Hero.astro b/web/src/components/Hero.astro index e69de29..94c7e34 100644 --- a/web/src/components/Hero.astro +++ b/web/src/components/Hero.astro @@ -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> diff --git a/web/src/components/NavBar.astro b/web/src/components/NavBar.astro new file mode 100644 index 0000000..5cecbb4 --- /dev/null +++ b/web/src/components/NavBar.astro @@ -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> |