adds styling for header + downloaded fonts

src/app.css

@@ -0,0 +1,9 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+}

src/app.scss

@@ -1,8 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  background-color: $background;
-}

src/routes/+layout.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-	import '../app.scss';
+	import '../app.css';
+	import Header from './Header.svelte';
 </script>
 
-<svelte:head>
-	<title>Library Manager</title>
-</svelte:head>
-
+<Header />
 <slot />
+
+<style>
+	@import '../variables.css';
+</style>

src/routes/+page.svelte

@@ -1,4 +0,0 @@
-<h1>Welcome to SvelteKit</h1>
-<p>
-	Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
-</p>

src/routes/Header.svelte

@@ -0,0 +1,61 @@
+<nav>
+	<div class="title">Library Manager</div>
+	<div class="items">
+		<div></div>
+		<!--  TODO: Switch icon between nf-md-view_list and nf-md-view_grid -->
+		<div>󰕰</div>
+		<div></div>
+	</div>
+</nav>
+
+<style>
+	nav {
+		height: 80px;
+		background-color: var(--dark-gray);
+		display: flex;
+		align-items: center;
+
+		& div {
+			height: 100%;
+			width: 50%;
+
+			padding: 0 20px;
+
+			display: flex;
+			align-items: center;
+
+			user-select: none;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+
+			&:hover {
+				cursor: default;
+			}
+
+			&.title {
+				font-size: 40px;
+				font-weight: bold;
+				font-family: 'Oswald', sans-serif;
+			}
+
+			&.items {
+				font-family: 'NFSymbols', monospace;
+				font-size: 20px;
+
+				justify-content: flex-end;
+
+				& div {
+					width: auto;
+
+					display: flex;
+					justify-content: center;
+					align-items: center;
+
+					&:last-child {
+						padding-right: 0;
+					}
+				}
+			}
+		}
+	}
+</style>

src/variables.css

@@ -0,0 +1,34 @@
+:global(:root) {
+  --background: #282828;
+  --dark-red: #cc241d;
+  --dark-green: #98971a;
+  --dark-yellow: #d79921;
+  --dark-blue: #458588;
+  --dark-purple: #b16286;
+  --dark-aqua: #689d6a;
+  --dark-gray: #928374;
+
+  --foreground: #ebdbb2;
+  --light-red: #fb4934;
+  --light-green: #b8bb26;
+  --light-yellow: #fabd2f;
+  --light-blue: #83a598;
+  --light-purple: #d3869b;
+  --light-aqua: #8ec07c;
+  --light-gray: #a89984;
+
+  --screen-sm-min: 576px;
+  --screen-md-min: 768px;
+  --screen-lg-min: 992px;
+  --screen-xl-min: 1200px;
+}
+
+@font-face {
+  font-family: 'Oswald';
+  src: url('/fonts/Oswald/Oswald-VariableFont_wght.ttf');
+}
+
+@font-face {
+  font-family: 'NFSymbols';
+  src: url('/fonts/NFSymbols/SymbolsNerdFontMono-Regular.ttf');
+}

src/variables.scss

@@ -1,52 +0,0 @@
-// Gruvbox colors.
-$background: #282828;
-$dark-red: #cc241d;
-$dark-green: #98971a;
-$dark-yellow: #d79921;
-$dark-blue: #458588;
-$dark-purple: #b16286;
-$dark-aqua: #689d6a;
-$dark-gray: #928374;
-
-$foreground: #ebdbb2;
-$light-red: #fb4934;
-$light-green: #b8bb26;
-$light-yellow: #fabd2f;
-$light-blue: #83a598;
-$light-purple: #d3869b;
-$light-aqua: #8ec07c;
-$light-gray: #a89984;
-
-// Screen size definitions.
-$screen-sm-min: 576px; // Small tablets and large smartphones (landscape).
-$screen-md-min: 768px; // Small tablets (portrait).
-$screen-lg-min: 992px; // Tablets and small desktops.
-$screen-xl-min: 1200px; // Large tablets and desktops.
-
-// Small devices
-@mixin sm {
-  @media (min-width: #{$screen-sm-min}) {
-    @content;
-  }
-}
-
-// Medium devices
-@mixin md {
-  @media (min-width: #{$screen-md-min}) {
-    @content;
-  }
-}
-
-// Large devices
-@mixin lg {
-  @media (min-width: #{$screen-lg-min}) {
-    @content;
-  }
-}
-
-// Extra-large devices
-@mixin xl {
-  @media (min-width: #{$screen-xl-min}) {
-    @content;
-  }
-}