Add UnoCSS and start site development I guess

package.json

@@ -15,6 +15,7 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.1.0",
 		"@sveltejs/kit": "^1.21.0",
+		"@unocss/transformer-directives": "^0.53.4",
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
 		"sass": "^1.63.6",
@@ -25,5 +26,9 @@
 		"typescript": "^5.1.6",
 		"vite": "^4.3.9"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@unocss/extractor-svelte": "^0.53.4",
+		"unocss": "^0.53.4"
+	}
 }

src/app.d.ts

@@ -7,7 +7,8 @@ declare global {
 		// interface PageData {}
 		// interface Platform {}
 	}
-	declare const Navbar: typeof import("./components/Navbar.svelte").default
+	declare const Footer: typeof import("$lib/components/Footer.svelte").default
+	declare const Navbar: typeof import("$lib/components/Navbar.svelte").default
 }
 
 export {}

src/global.sass

@@ -0,0 +1,12 @@
+:root, body
+	padding: 0
+	margin: 0
+	background: #100f0e
+	color: white
+	font-family: "SF UI Display", sans-serif
+
+a
+	@apply transition-colors text-orange-500
+	text-decoration: none
+	&:hover
+		@apply text-orange-300

src/lib/components/Footer.svelte

@@ -0,0 +1,25 @@
+<footer class="mt-auto p-5 text-center text-#8c8b8a">
+	<a
+		href="/"
+		class="no-underline pe-1.5 transition-colors
+		text-purple-600 hover:text-purple-500">
+		Revival Archive
+	</a>
+	2023-2023
+	<nav class="text-white mt-5 mb-4">
+		<a href="/about">About</a>
+		|
+		<a href="https://discord.gg/zfC3VH2WBa">Discord</a>
+	</nav>
+</footer>
+
+<style lang="sass">
+	nav
+		color: #8c8b8a
+		a
+			color: white
+			&:hover
+				color: #aaa
+			text-decoration: none
+
+</style>

src/lib/components/Navbar.svelte

@@ -1 +1,21 @@
-<p>test</p>
+<div class="bg-#282726 px-6">
+	<span class="inline-block pt-3 pb-3">
+		<a href="/" class="text-light hover:text-#aaa text-xl font-light mb-5">
+			Revival Archive
+		</a>
+	</span>
+	<span class="inline-block pb-4">
+		<nav class="inline-block ps-4">
+			<a class="navlink" href="/">Home</a>
+			<a class="navlink" href="/about">About</a>
+		</nav>
+	</span>
+</div>
+
+<style lang="sass">
+	.navlink
+		@apply no-underline text-white px-2 me-1 rounded-1 transition
+		font-size: 0.9rem
+		&:hover
+			@apply text-#aaa
+</style>

src/routes/+layout.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
 	import "/src/global.sass"
+	import "uno.css"
 </script>
 
-<Navbar />
+<div class="flex flex-col h-screen">
+	<Navbar />
 
-<p>Sup world</p>
+	<main
+		class="box-border px-5 sm:mx-auto w-full
+		sm:w-140 md:w-180 lg:w-220 xl:w-270 2xl:w-300">
+		<slot />
+	</main>
 
-<slot />
-
-<style lang="sass">
-	p
-		color: red
-</style>
+	<Footer />
+</div>

uno.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig, presetUno } from "unocss"
+import transformerDirectives from "@unocss/transformer-directives"
+
+export default defineConfig({
+	presets: [presetUno()],
+	transformers: [transformerDirectives()],
+})

vite.config.ts

@@ -1,6 +1,13 @@
 import { sveltekit } from "@sveltejs/kit/vite"
 import { defineConfig } from "vite"
+import UnoCSS from "unocss/vite"
+import extractorSvelte from "@unocss/extractor-svelte"
 
 export default defineConfig({
-	plugins: [sveltekit()],
+	plugins: [
+		UnoCSS({
+			extractors: [extractorSvelte()],
+		}),
+		sveltekit(),
+	],
 })