package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "chrysoblog",
-	"version": "0.0.4",
+	"version": "0.0.2",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "chrysoblog",
-			"version": "0.0.4",
+			"version": "0.0.2",
 			"dependencies": {
 				"@fortawesome/fontawesome-free": "^6.6.0",
 				"bits-ui": "^0.21.13",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "chrysoblog",
-	"version": "0.0.4",
+	"version": "0.0.2",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

src/routes/+layout.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import '../app.css';
 	import { page } from '$app/stores';
-	import { name } from '$content/metadata.json';
 	import Footer from "./Footer.svelte";
 	import Navbar from "./Navbar.svelte";
 	import PageTransition from "./PageTransition.svelte";
@@ -12,8 +11,7 @@
 <!-- Homepage has its own navbar with animations -->
 {#if $page.url.pathname != "/"}
 	<div id="layout">
-		<div id="nav">
+		<div id="navbar">
-			<p id="bio-name">{name}</p>
 			<Navbar />
 			<slot name="header" />
 		</div>
@@ -33,12 +31,6 @@
 {/if}
 
 <style>
-	#bio-name {
-		font-family: serif;
-		font-size: 3rem;
-		font-weight: normal;
-		color: var(--name);
-	}
 	#layout {
 		max-width: max(80vw, 100vh);
 		margin-left: auto;
@@ -66,7 +58,7 @@
 		width: min(100vw, max(50vw, 100vh));
 		grid-area: content;
 	}
-	#nav {
+	#navbar {
 		align-self: right;
 		padding-left: 10px;
 		grid-area: nav;

src/routes/+page.svelte

@@ -108,17 +108,18 @@
 
 <style>
 	#background {
+		background-attachment: fixed;
 		background-size: cover;
 		background-repeat: no-repeat;
 		background-position: center center;
 		z-index: -10;
-		position: absolute;
+		position: fixed;
-		min-width: 100vw;
+		min-width: 100%;
-		height: 100vh;
+		min-height: 100%;
 		overscroll-behaviour: none;
 	}
 	#front {
-		height: 100svh;
+		height: 100vh;
 		display: flex;
 		flex-direction: column;
 		overscroll-behavior: none;

src/routes/Navbar.svelte

@@ -1,95 +1,43 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { routes } from "$lib/sitemap.ts"
+	import { name } from '$content/metadata.json';
 	import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
-	import { Rss, Menu } from "lucide-svelte";
+	import { Rss } from "lucide-svelte";
 
 	function isCurrentLink(pathname, route) {
 		return route != "/" && pathname.startsWith(route)
 			 || route == "/post" && pathname.startsWith("/page");
 	}
-
-	import { onMount } from 'svelte';
-
-	let showDropdown = false;
-
-	function onDropdownToggle(event) {
-		showDropdown = !showDropdown;
-	}
-	function onKeyDown(event) {
-		if (event.key == "Escape") {
-			showDropdown = !showDropdown;
-		}
-	}
 </script>
 
-<nav
+<div id="navbar" class="h-5 space-x-4">
-	id="navbar"
+	<p id="bio-name">{name}</p>
-	class="h-5 space-x-4"
+	{#each routes as item}
-	class:dropdown-opened={showDropdown}>
+		<a
-	<div
+			class="nav-link"
-		class="link-container"
+			class:disabled-link={item.disabled}
-		role="button"
+			class:current-link={isCurrentLink($page.url.pathname, item.route)}
-		tabindex={0}
+			href={item.route}>{item.name}</a>
-		on:keydown={onKeyDown}
+	{/each}
-		on:click={() => { showDropdown = false; }}
+	<a class="nav-link icon" href="/rss.xml"><Rss /></a>
-	>
+	<div><ThemeSwitch /></div>
-		{#each routes as item}
+</div>
-			<a
-				class="nav-link"
-				class:disabled-link={item.disabled}
-				class:current-link={isCurrentLink($page.url.pathname, item.route)}
-				on:click={() => { showDropdown = false; }}
-				href={item.route}>
-				{item.name}
-			</a>
-		{/each}
-		<a class="nav-link icon" href="/rss.xml"><Rss /></a>
-		<div><ThemeSwitch /></div>
-	</div>
-	<button
-		id="dropdown-toggle"
-		aria-hidden="true"
-		on:click={onDropdownToggle}>
-		<Menu />
-	</button>
-</nav>
-
-<svelte:window on:keydown={onKeyDown} />
 
 <style>
-	.link-container {
+	#bio-name {
+		font-family: serif;
+		font-size: 3rem;
+		font-weight: normal;
+		color: var(--name);
+	}
+	#navbar {
 		display: flex;
 		flex-direction: column;
 		align-items: flex-end;
-		position: sticky;
+		justify-content: between;
-		top: 0;
 	}
-	#dropdown-toggle {
+	@media (max-width: 700px) {
-		display: none;
-	}
-
-	/* mobile mode */
-	@media (max-width: 768px) {
-		.link-container {
-			position: fixed;
-			top: 0;
-			left: 0;
-			right: 0;
-			height: 100vh;
-			justify-content: center;
-
-			margin: 0;
-			padding-left: 5vw;
-			padding-right: 5vw;
-
-			background: hsl(var(--background) / .8);
-
-			/* Initial hidden state */
-			opacity: 0;
-			transform: translateY(-100%);
-			transition: transform 0.2s, opacity 0.2s;
-		}
 		#navbar {
 			display: inline-block;
 			white-space: pre-wrap;
@@ -97,14 +45,5 @@
 		#navbar .nav-link {
 			display: inline-block;
 		}
-		#dropdown-toggle {
-			display: initial;
-			z-index: 5;
-		}
-		.dropdown-opened > .link-container {
-			opacity: 1;
-			z-index: 1;
-			transform: translateY(0);
-		}
 	}
 </style>