feat(web): Move over some docs

web/src/components/NavBar.astro

@@ -1,4 +1,5 @@
 ---
+import NavLink from "./NavLink.astro";
 export type Props = {
 	navStyle?: 'transparent' | 'full'
 }
@@ -7,20 +8,19 @@ 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' : ''}`}>
+	class={`bg-gray-800 flex flex-wrap items-center justify-between mx-auto px-2 py-2 leading-tight w-full ${navbar == 'transparent' ? 'bg-opacity-50 backdrop-blur-lg absolute z-10 top-0' : 'border-b-white border-b'}`}>
 	<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>
+			<NavLink link="/docs/texture-pack-format">
+				Docs
+			</NavLink>
+			<NavLink link="/texture-packs">
+				Texture Packs
+			</NavLink>
 		</ul>
 	</div>
 </nav>

web/src/components/NavLink.astro

@@ -0,0 +1,11 @@
+---
+type Props = {
+	link: string
+};
+---
+
+<li class="px-0.5">
+	<a class="px-1 text-blue-500 hover:text-blue-400 transition ease-in-out duration-300" href={Astro.props.link}>
+		<slot></slot>
+	</a>
+</li>

web/src/layouts/Content.astro

@@ -0,0 +1,63 @@
+---
+---
+
+<div class="w-3/5 mx-auto px-2 firm-content my-5">
+	<slot></slot>
+</div>
+<style is:global>
+	.firm-content {
+		min-width: 70%;
+		width: 60em;
+		max-width: 100%;
+		line-height: 1.4;
+	}
+
+	.firm-content * {
+		margin-bottom: 1em;
+	}
+
+	.firm-content pre {
+		padding: 0.3em;
+	}
+
+	.firm-content h1 {
+		font-size: 2em;
+		line-height: 1.8;
+		font-weight: bold;
+	}
+
+	.firm-content h2 {
+		font-size: 1.7em;
+		line-height: 1.8;
+		font-weight: bold;
+	}
+
+	.firm-content h3 {
+		font-size: 1.4em;
+		line-height: 1.3;
+		font-weight: bold;
+	}
+
+	.firm-content th {
+		border-bottom: 1px solid aliceblue;
+	}
+
+	.firm-content tr:nth-child(2n) {
+		background: #383b3c;
+	}
+
+	.firm-content h4 {
+		font-size: 1.2em;
+		line-height: 1.3;
+		font-weight: bold;
+	}
+
+	.firm-content a {
+		color: rgb(59 130 246);
+		transition: 300ms ease-in-out;
+	}
+
+	.firm-content a:hover {
+		color: rgb(96 165 250);
+	}
+</style>

web/src/pages/docs/texture-pack-format.astro

@@ -0,0 +1,15 @@
+---
+import Base from "../../layouts/Base.astro";
+import NavBar from "../../components/NavBar.astro";
+import Content from "../../layouts/Content.astro";
+import MarkDown from './texture-pack-format.md';
+---
+
+<Base title="Firmament Texture Packs">
+	<NavBar></NavBar>
+	<Content>
+		<MarkDown/>
+	</Content>
+</Base>
+
+

web/src/pages/index.astro

@@ -3,6 +3,7 @@ import Hero from "../components/Hero.astro"
 import Base from "../layouts/Base.astro";
 import Image from "../panorama.png";
 import NavBar from "../components/NavBar.astro";
+import Content from "../layouts/Content.astro";
 ---
 
 <Base title="Firmament">
@@ -12,4 +13,8 @@ import NavBar from "../components/NavBar.astro";
 		<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>
+	<Content>
+		Firmament is a 1.21 Minecraft mod for Hypixel SkyBlock. It has a variety of features such as an item list,
+		mining features.
+	</Content>
 </Base>

web/src/pages/texture-packs.astro

@@ -0,0 +1,10 @@
+---
+import Base from "../layouts/Base.astro";
+import NavBar from "../components/NavBar.astro";
+import Content from "../layouts/Content.astro";
+---
+
+<Base title="Firmament Texture Packs">
+	<NavBar></NavBar>
+
+</Base>