src/lib/components/ThemeSwitch.svelte

@@ -20,7 +20,10 @@
 	}
 </script>
 
-<button class="nav-link" on:click={toggleTheme} aria-label="Toggle Theme">
+<button
+	id="theme-switch"
+	class="nav-link"
+	on:click={toggleTheme} aria-label="Toggle Theme">
 	{#if $theme === "tokiwa"}
 		<Sun />
 	{:else}
@@ -30,6 +33,7 @@
 
 <style>
 	button {
+		flex-shrink: 0;
 		padding: 0;
 		font-weight: inherit;
 		background: none;

src/routes/+page.svelte

@@ -64,9 +64,11 @@
 </div>
 
 <div id="cover-mobile">
-	<div id="linkbox">
+	<div id="navbar">
+		<div>
 			<p class="text-2xl floater-elem" style="color: #888">{metadata.frontDescription}</p>
-			<div id="navbar" class="h-5 items-center space-x-4 text-sm">
+		</div>
+		<div id="link-container" class="h-5 items-center">
 			<a class="nav-link" href="#bio">Bio</a>
 			{#each routes as item}
 				{#if item.route !== "/"}
@@ -123,8 +125,6 @@
 		background-size: contain;
 		background-position: center center; */
 		z-index: -10;
-		min-width: 100svw;
-		min-height: 100svh;
 		overscroll-behaviour: none;
 	}
 	:global(#cover > svg) {
@@ -139,12 +139,12 @@
 		:global(path) {
 			filter: contrast(50%);
 		}
-		:global(.shadow) {
+		:global(.effect) {
 			visibility: hidden;
 		}
 		&:hover,
 		&:focus {
-			:global(.shadow) {
+			:global(.effect) {
 				visibility: visible;
 			}
 			:global(path) {
@@ -159,39 +159,47 @@
 		display: inline-block;
 	}
 	#cover-mobile {
-		height: 100svh;
 		display: flex;
 		flex-direction: column;
 		overscroll-behavior: none;
 	}
-	#floater {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		margin-top: auto;
-		margin-left: auto;
-		margin-right: auto;
-	}
 	#navbar {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: center;
 		flex-direction: column;
+		margin-top: auto;
+		margin-bottom: auto;
+		div {
+			padding-left: 5%;
+		}
+	}
+	#link-container {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
 	}
 	@media (max-width: 700px) {
 		#cover {
+			height: 0;
+			width: 0;
 			visibility: hidden;
 		}
 		#cover-mobile {
 			visibility: visible;
+			height: 100svh;
 		}
 	}
 	@media (min-width: 701px) {
 		#cover {
+			min-width: 100svw;
+			min-height: 100svh;
 			visibility: visible;
 		}
 		#cover-mobile {
 			visibility: hidden;
+			height: 0;
+			width: 0;
 		}
 	}