Add 'About' page

src/routes/+layout.svelte

@@ -58,7 +58,7 @@
 	   >
 	   		<item.icon
 				size={24}
-				stroke={isActive ? 2.5 : 2}
+				stroke={isActive ? 2 : 1.5}
 				class="nav-icon"
 			/>
 
@@ -68,20 +68,6 @@
 </nav>
 
 <style>
-	:root {
-		/* Brand Colours */
-		--color-brand: #4fd1d1;
-		--color-accent: #3c6f79;
-		--color-title: #ebebeb;
-		--color-bg-light: #404c55;
-		--color-bg-dark: #2b343c;
-		
-		/* Shadows */
-		--color-shadow: hsla(210, 20%, 5%, 0.35);
-		--shadow-std: 0 4px 12px var(--color-shadow);
-		--shadow-up: 0 -4px 12px var(--color-shadow);
-	}
-
 		header {
 		top: 0;
 		height: 80px;
@@ -100,8 +86,9 @@
 	}
 
 	.page-title {
-		font-family: 'URW Gothic' sans-serif;
+		font-family: 'URW Gothic', sans-serif;
 		font-weight: 600;
+		font-style: normal;
 		margin-left: 5px;
 		padding-bottom: 2px;
 		color: var(--color-title);
@@ -138,6 +125,7 @@
 	}
 
 	.nav-item {
+		display: flex;
 		flex: 1;
 		flex-direction: column;
 		align-items: center;
@@ -145,7 +133,7 @@
 		text-decoration: none;
 		position:  relative;
 		height: 100%;
-		color: rgba(255,255,255,0.4);
+		color: var(--color-title);
 		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 	}
 
@@ -165,10 +153,15 @@
 		box-shadow: var(--shadow-std);
 	}
 
+	.nav-item.active .label {
+		font-weight: 600;
+	}
+
 	.label {
-		font-size: 0.65rem;
-		font-weight: 700;
+		font-size: 0.85rem;
+		font-family: 'URW Gothic', sans-serif;
+		font-weight: 400;
 		margin-top: 4px;
-		letter-spacing: 0.2rem;
+		letter-spacing: 0.05rem;
 	}
 </style>