feat(web): Add hero image and navbar
This commit is contained in:
Linnea Gräf
@@ -1,7 +1,9 @@
|
|||||||
// @ts-check
|
// @ts-check
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
||||||
|
import tailwind from '@astrojs/tailwind';
|
||||||
|
|
||||||
// https://astro.build/config
|
// https://astro.build/config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
|
integrations: [tailwind()]
|
||||||
});
|
});
|
||||||
@@ -10,8 +10,10 @@
|
|||||||
"astro": "astro"
|
"astro": "astro"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"astro": "^4.16.13",
|
|
||||||
"@astrojs/check": "^0.9.4",
|
"@astrojs/check": "^0.9.4",
|
||||||
|
"@astrojs/tailwind": "^5.1.2",
|
||||||
|
"astro": "^4.16.13",
|
||||||
|
"tailwindcss": "^3.4.15",
|
||||||
"typescript": "^5.6.3"
|
"typescript": "^5.6.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
559
web/pnpm-lock.yaml
generated
559
web/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -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
26
web/src/components/NavBar.astro
Normal 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>
|
||||||
@@ -1,12 +1,13 @@
|
|||||||
---
|
---
|
||||||
import Head, {type Props as HeadProps} from "./Head.astro";
|
import Head, {type Props as HeadProps} from "./Head.astro";
|
||||||
|
type Props = {
|
||||||
type Props = {} & HeadProps;
|
} & HeadProps;
|
||||||
---
|
---
|
||||||
|
|
||||||
<html>
|
<html>
|
||||||
<Head {...Astro.props}></Head>
|
<Head {...Astro.props}></Head>
|
||||||
<body>
|
<body class="bg-gray-800 text-white">
|
||||||
|
<slot/>
|
||||||
|
<footer></footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -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">
|
<Base title="Firmament">
|
||||||
<Head title="Firmament"></Head>
|
<Hero image={Image} alt="A panorama shot of the HyPixel SkyBlock hub">
|
||||||
<body>
|
<h1 class="text-4xl font-bold leading-tight mb-4">Firmament</h1>
|
||||||
<h1>Astro</h1>
|
<p class="text-lg text-gray-300 mb-8">Hypixel SkyBlock Utility Mod</p>
|
||||||
</body>
|
<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>
|
||||||
</html>
|
</Hero>
|
||||||
|
<NavBar navStyle="transparent"></NavBar>
|
||||||
|
</Base>
|
||||||
|
|||||||
BIN
web/src/panorama.png
Normal file
BIN
web/src/panorama.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
8
web/tailwind.config.mjs
Normal file
8
web/tailwind.config.mjs
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user