From 6fa883da369eafcc38210a172d0bd20a7870d798 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 4 Jan 2024 20:30:21 -0800
Subject: feat(layout): style navigation

---
 src/app.css               | 14 ++++++++++++--
 src/routes/+layout.svelte | 29 +++++++++++++++++++----------
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/app.css b/src/app.css
index 4dca3954..d6e507e5 100644
--- a/src/app.css
+++ b/src/app.css
@@ -14,7 +14,11 @@ details {
 }
 
 summary {
-	font-weight: 550;
+	font-weight: 500;
+}
+
+summary small {
+	font-weight: normal;
 }
 
 ul,
@@ -176,8 +180,14 @@ code {
 	border-radius: 0;
 }
 
-/* remove list dots and stuff */
 ul,
 li::marker {
 	content: unset !important;
 }
+
+.card-centered {
+	margin: 0 auto;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index becb8b58..f1a99fc7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -35,17 +35,20 @@
 <HeadTitle />
 
 <div id="container">
-	<div id="header">
-		<p id={$settings.displayHoverNavigation ? 'hover-header' : ''}>
-			「 <a href="/">Home</a> • <a href="/completed">Completed</a> •
-			<a href="/schedule">Anime Schedule</a> •
-			<a href="/updates">Manga & WN Updates</a> •
-			<a href="/tools">Tools</a> • {#if data.user}
-				<a href={`/user/${currentUserIdentity.name}`}>Profile</a> •
-			{/if} <a href="/settings">Settings</a> 」
+	<div id="header" class="card card-centered">
+		<div id={$settings.displayHoverNavigation ? 'hover-header' : ''}>
+			<a href="/" class="header-item">Home</a><a href="/completed" class="header-item">Completed</a>
+			<a href="/schedule" class="header-item">Anime Schedule</a>
+			<a href="/updates" class="header-item">Manga & WN Updates</a>
+			<a href="/tools" class="header-item">Tools</a>{#if data.user}
+				<a href={`/user/${currentUserIdentity.name}`} class="header-item">Profile</a>
+			{/if} <a href="/settings" class="header-item">Settings</a>
+
+			<span style="opacity: 50%; font-weight: bold;">|</span>
 
 			{#if data.user === undefined}
 				<a
+					class="header-item"
 					href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`}
 					on:click={() => {
 						localStorage.setItem(
@@ -57,15 +60,17 @@
 					Log in with AniList
 				</a>
 			{:else}
-				<a href="/api/authentication/log-out"
+				<a href="/api/authentication/log-out" class="header-item"
 					>Log out<button class="smaller-button button-badge badge-info"
 						>{currentUserIdentity.name}</button
 					></a
 				>
 			{/if}
-		</p>
+		</div>
 	</div>
 
+	<p />
+
 	<slot />
 </div>
 
@@ -123,4 +128,8 @@
 	:global(a:hover) {
 		text-decoration: underline;
 	}
+
+	.header-item {
+		margin: 0 0.625rem;
+	}
 </style>
-- 
cgit v1.2.3