theming

src/app.css

@@ -5,9 +5,9 @@
 
 [data-theme='light'] {
     --text-color: #000000;
-    --bg-color: #f4f4f4;
+    --bg-color: #e9e9e9;
-    --hover-bg-color: #e4e4f0;
+    --hover-bg-color: #e0e0e0;
-    --separator-line-color: #e0e0e0;
+    --separator-line-color: #d0d0d0;
     --low-emphasis-text-color: #6b6b6b;
     --primary-color: #1F96F3;
     --dull-primary-color: #51aaf0;
@@ -15,6 +15,7 @@
     --bg-accent-color: #f4f4f4;
     --danger-color: #ff2d2f;
     --hyperlink-color: #3b82f6;
+    --nav-bg-color: #f0f0f0;
 }
 
 [data-theme='dark'] {
@@ -29,6 +30,7 @@
     --bg-accent-color: #202020;
     --danger-color: #ff1d1f;
     --hyperlink-color: #3b82f6;
+    --nav-bg-color: #101011;
 }
 
 body {
@@ -230,6 +232,10 @@ th.left, td.left {
     background-color: var(--elevated-bg-color);
 }
 
+.nav-bg {
+    background-color: var(--nav-bg-color);
+}
+
 .primary-bg-color {
     background-color: var(--primary-color);
 }

src/routes/+layout.svelte

@@ -52,98 +52,100 @@
 />
 
 <div class="flex min-h-screen flex-col">
-	<div class="bottom-border bg-color sticky top-0 z-50 flex h-14 justify-between p-3 align-middle">
+	<nav class="bottom-border nav-bg sticky top-0 z-50 align-middle">
-		<nav class="pt-1">
+		<div class="flex h-14 justify-between p-3">
-			<a class="hover-bg-color mr-1 rounded-md px-2 pb-2 pt-1.5" href="/">
+			<div class="pt-1">
-				<img
+				<a class="hover-bg-color mr-1 rounded-md px-2 pb-2 pt-1.5" href="/">
-					alt="MarinoDev Logo"
+					<img
-					class="inline-block"
+						alt="MarinoDev Logo"
-					height="24"
+						class="inline-block"
-					src="/mdevtriangle.svg"
+						height="24"
-					width="24"
+						src="/mdevtriangle.svg"
-				/>
+						width="24"
-				<!--				<div class="inline-block text-sm">Home</div>-->
+					/>
-			</a>
+					<!--				<div class="inline-block text-sm">Home</div>-->
-			<!--		<a href="/about" class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">About</a>-->
-			{#if largeScreen.current}
-				{#if (userState.perms & PERMISSIONS.VIEW) > 0}
-					<a href="/postings" class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">Postings</a>
-					<a href="/companies" class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">Companies</a>
-				{/if}
-				{#if (userState.perms & (PERMISSIONS.MANAGE_POSTINGS | PERMISSIONS.MANAGE_TAGS | PERMISSIONS.MANAGE_USERS)) > 0}
-					<a
-						href={(userState.perms & PERMISSIONS.MANAGE_POSTINGS) > 0
-							? '/admin/postings'
-							: (userState.perms & PERMISSIONS.MANAGE_USERS) > 0
-								? '/admin/users'
-								: // TODO: Implement tags
-									// : (userState.perms & PERMISSIONS.MANAGE_TAGS) > 0
-									// 	? '/admin/tags'
-									(userState.perms & PERMISSIONS.MANAGE_COMPANIES) > 0
-									? '/admin/companies'
-									: '/admin'}
-						class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">Administration</a
-					>
-				{/if}
-			{/if}
-		</nav>
-		<div>
-			<button
-				class="material-symbols-outlined hover-bg-color rounded-full p-1"
-				onclick={toggleTheme}
-			>
-				{currentTheme === 'light' ? 'light_mode' : 'dark_mode'}
-			</button>
-			{#if largeScreen.current}
-				<a
-					class="hover-bg-color inline-block h-min rounded p-1 pr-2 align-top"
-					href={userState.id !== null ? '/account' : '/signin'}
-				>
-					<span class="material-symbols-outlined inline-block h-min align-top">
-						{userState.id !== null ? 'account_circle' : 'login'}
-					</span>
-					<span class="inline-block h-min align-top text-sm">
-						{userState.id !== null ? 'Account' : 'Sign-in'}
-					</span>
 				</a>
-			{:else}
+				<!--		<a href="/about" class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">About</a>-->
+				{#if largeScreen.current}
+					{#if (userState.perms & PERMISSIONS.VIEW) > 0}
+						<a href="/postings" class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">Postings</a>
+						<a href="/companies" class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">Companies</a>
+					{/if}
+					{#if (userState.perms & (PERMISSIONS.MANAGE_POSTINGS | PERMISSIONS.MANAGE_TAGS | PERMISSIONS.MANAGE_USERS)) > 0}
+						<a
+							href={(userState.perms & PERMISSIONS.MANAGE_POSTINGS) > 0
+								? '/admin/postings'
+								: (userState.perms & PERMISSIONS.MANAGE_USERS) > 0
+									? '/admin/users'
+									: // TODO: Implement tags
+										// : (userState.perms & PERMISSIONS.MANAGE_TAGS) > 0
+										// 	? '/admin/tags'
+										(userState.perms & PERMISSIONS.MANAGE_COMPANIES) > 0
+										? '/admin/companies'
+										: '/admin'}
+							class="hover-bg-color mr-1 rounded px-3 py-2 text-sm">Administration</a
+						>
+					{/if}
+				{/if}
+			</div>
+			<div>
 				<button
 					class="material-symbols-outlined hover-bg-color rounded-full p-1"
-					onclick={toggleMenu}>menu</button
+					onclick={toggleTheme}
+				>
+					{currentTheme === 'light' ? 'light_mode' : 'dark_mode'}
+				</button>
+				{#if largeScreen.current}
+					<a
+						class="hover-bg-color inline-block h-min rounded p-1 pr-2 align-top"
+						href={userState.id !== null ? '/account' : '/signin'}
+					>
+						<span class="material-symbols-outlined inline-block h-min align-top">
+							{userState.id !== null ? 'account_circle' : 'login'}
+						</span>
+						<span class="inline-block h-min align-top text-sm">
+							{userState.id !== null ? 'Account' : 'Sign-in'}
+						</span>
+					</a>
+				{:else}
+					<button
+						class="material-symbols-outlined hover-bg-color rounded-full p-1"
+						onclick={toggleMenu}>menu</button
+					>
+				{/if}
+			</div>
+		</div>
+		<div id="mobile-menu" class="hidden">
+			{#if (userState.perms & PERMISSIONS.VIEW) > 0}
+				<a
+					href="/postings"
+					class="hover-bg-color mr-1 block rounded px-3 py-2 text-sm"
+					onclick={toggleMenu}>Postings</a
+				>
+				<a
+					href="/companies"
+					class="hover-bg-color mr-1 block rounded px-3 py-2 text-sm"
+					onclick={toggleMenu}>Companies</a
+				>
+			{/if}
+			{#if (userState.perms & (PERMISSIONS.MANAGE_POSTINGS | PERMISSIONS.MANAGE_TAGS | PERMISSIONS.MANAGE_USERS)) > 0}
+				<a
+					href={(userState.perms & PERMISSIONS.MANAGE_POSTINGS) > 0
+						? '/admin/postings'
+						: (userState.perms & PERMISSIONS.MANAGE_USERS) > 0
+							? '/admin/users'
+							: // TODO: Implement tags
+								// : (userState.perms & PERMISSIONS.MANAGE_TAGS) > 0
+								// 	? '/admin/tags'
+								(userState.perms & PERMISSIONS.MANAGE_COMPANIES) > 0
+								? '/admin/companies'
+								: '/admin'}
+					class="hover-bg-color mr-1 block rounded px-3 py-2 text-sm"
+					onclick={toggleMenu}>Administration</a
 				>
 			{/if}
 		</div>
-	</div>
+	</nav>
-	<div id="mobile-menu" class="hidden">
-		{#if (userState.perms & PERMISSIONS.VIEW) > 0}
-			<a
-				href="/postings"
-				class="hover-bg-color mr-1 block rounded px-3 py-2 text-sm"
-				onclick={toggleMenu}>Postings</a
-			>
-			<a
-				href="/companies"
-				class="hover-bg-color mr-1 block rounded px-3 py-2 text-sm"
-				onclick={toggleMenu}>Companies</a
-			>
-		{/if}
-		{#if (userState.perms & (PERMISSIONS.MANAGE_POSTINGS | PERMISSIONS.MANAGE_TAGS | PERMISSIONS.MANAGE_USERS)) > 0}
-			<a
-				href={(userState.perms & PERMISSIONS.MANAGE_POSTINGS) > 0
-					? '/admin/postings'
-					: (userState.perms & PERMISSIONS.MANAGE_USERS) > 0
-						? '/admin/users'
-						: // TODO: Implement tags
-							// : (userState.perms & PERMISSIONS.MANAGE_TAGS) > 0
-							// 	? '/admin/tags'
-							(userState.perms & PERMISSIONS.MANAGE_COMPANIES) > 0
-							? '/admin/companies'
-							: '/admin'}
-				class="hover-bg-color mr-1 block rounded px-3 py-2 text-sm"
-				onclick={toggleMenu}>Administration</a
-			>
-		{/if}
-	</div>
 
 	<div class="flex-grow">
 		{@render children()}