fix colours and add current page highlight on nav

src/lib/ContactForm.svelte

@@ -104,7 +104,7 @@
 		border-radius: 10px;
 		border: none;
 		padding: 0.5rem;
-		font-family: "Comfortaa", sans-serif;
+		font-family: var(--font-primary);
 		outline: none;
 	}
 
@@ -120,7 +120,7 @@
 	}
 
 	.button:not(select):hover {
-		background-color: var(--accent-tertiary);
+		background-color: var(--accent);
 		text-decoration: none;
 		transition: all 0.5s;
 		color: var(--secondary);

src/lib/Footer.svelte

@@ -61,7 +61,7 @@
 
 	img {
 		width: 270px;
-		background: var(--accent-primary);
+		background: var(--accent);
 		padding: 0.5rem;
 		border-radius: 10px;
 	}

src/lib/Hero.svelte

@@ -20,7 +20,6 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		font-family: var(--font-header);
 	}
 
 	.hero > * {
@@ -31,12 +30,12 @@
 
 	p {
 		font-size: 30px;
-		color: #b6b6b6;
+		color: var(--text);
 	}
 
 	h1 {
 		font-size: 50px;
 		font-weight: 800;
-		color: var(--accent-primary);
+		color: var(--accent);
 	}
 </style>

src/lib/Nav.svelte

@@ -1,8 +1,24 @@
-<script>
+<script lang="ts">
 	import IconBars from "~icons/fa6-solid/bars";
 	import IconMatrix from "~icons/simple-icons/matrix";
 	import IconGitHub from "~icons/simple-icons/github";
 	import ThemeToggle from "./ThemeToggle.svelte";
+	import { page } from "$app/stores";
+
+	$: currentPage = $page.url.pathname;
+
+	const menus = [
+		{name: "Instances", url: "https://instances.projectsegfau.lt/"},
+		{name: "Minecraft", url: "/minecraft"},
+		{name: "Donate", url: "/donate"},
+		{name: "FAQ", url: "/faq"},
+		{name: "Contact us", url: "/contact"},
+		{name: "Our team", url: "/team"},
+		{name: "Timeline", url: "/timeline"},
+		{name: "Blog", url: "https://blog.projectsegfau.lt/"},
+		{name: "Legal", url: "/legal"},
+		{name: "Status", url: "https://status.projectsegfau.lt/"},
+	]
 </script>
 
 <nav>
@@ -19,16 +35,9 @@
 	</label>
 
 	<div class="links">
-		<a href="https://instances.projectsegfau.lt/">Instances</a>
-		<a href="/minecraft">Minecraft</a>
-		<a href="/donate">Donate</a>
-		<a href="/faq">FAQ</a>
-		<a href="/contact">Contact us</a>
-		<a href="/team">Our team</a>
-		<a href="/timeline">Timeline</a>
-		<a href="https://blog.projectsegfau.lt/">Blog</a>
-		<a href="/legal">Legal</a>
-		<a href="https://status.projectsegfau.lt/">Status</a>
+		{#each menus as { url, name }}
+			<a sveltekit:prefetch class:active={url !== "/" ? currentPage.match(url) : url === currentPage} href={url}>{name}</a>
+		{/each}
 		<a href="https://matrix.to/#/#project-segfault:projectsegfau.lt/">
 			<IconMatrix />
 		</a>
@@ -60,6 +69,10 @@
 		transition: opacity 0.25s;
 	}
 
+	a.active {
+		color: var(--accent);
+	}
+
 	a.brand:hover {
 		opacity: 0.6;
 	}
@@ -83,7 +96,7 @@
 
 	.links > *:hover {
 		text-decoration: none;
-		color: var(--accent-primary);
+		color: var(--accent);
 	}
 
 	img {

src/lib/app.css

@@ -1,15 +1,3 @@
-@font-face {
-	font-family: Comfortaa;
-	src: url("/Comfortaa.ttf");
-	font-display: swap;
-}
-
-@font-face {
-	font-family: Inter;
-	src: url("/Inter.ttf");
-	font-display: swap;
-}
-
 @font-face {
 	font-family: Raleway;
 	src: url("/Raleway.ttf");
@@ -17,8 +5,7 @@
 }
 
 html {
-	--accent-primary: #b59bd8;
-	--accent-secondary: #b59bd8;
+	--accent: #b59bd8;
 	--accent-translucent: #b59bd898;
 	--font-primary: Raleway;
 	--font-header: Raleway;
@@ -34,10 +21,11 @@ html.dark {
 
 html.light {
 	--primary: #dddddd;
-	--secondary: #bbbbbb;
+	--secondary: #f9f3f3;
 	--tertiary: #939393;
-	--text: #1f1f1f;
-	--grey: #292929;
+	--text: #444444;
+	--grey: #444444;
+	--accent: #8c68bb;
 }
 
 body {
@@ -50,6 +38,7 @@ body {
 	position: relative;
 	min-height: 100vh;
 	line-height: 1.625;
+	transition: all .25s;
 }
 
 ::selection {
@@ -62,7 +51,7 @@ main {
 
 a {
 	text-decoration: underline;
-	color: var(--accent-primary);
+	color: var(--accent);
 	text-underline-offset: 5px;
 	transition: filter 0.25s;
 }

src/routes/index.svelte

@@ -112,7 +112,7 @@
 
 	.buttons a {
 		text-decoration: none;
-		background-color: var(--accent-primary);
+		background-color: var(--accent);
 		padding: 8px 1em 8px 1em;
 		color: var(--primary);
 		border-radius: 10px;
@@ -133,7 +133,7 @@
 	}
 
 	.announcement {
-		color: var(--primary);
+		color: #252525 !important;
 		padding: 2rem 1rem;
 		border-radius: 10px;
 		width: fit-content;
@@ -142,7 +142,7 @@
 	}
 
 	.announcement a {
-		color: var(--primary);
+		color: #252525;
 	}
 
 	.announcement .general {

src/routes/projects.svelte

@@ -93,7 +93,7 @@
 	}
 
 	.web:hover {
-		background-color: var(--accent-tertiary);
+		background-color: var(--accent);
 		color: var(--secondary) !important;
 	}
 

src/routes/team.svelte

@@ -75,7 +75,7 @@
 	}
 
 	.team-inner {
-		background-color: #252525;
+		background-color: var(--secondary);
 		border-radius: 10px;
 		padding: 1rem;
 		width: 30em;
@@ -104,7 +104,7 @@
 	}
 
 	.matrixcolored {
-		background-color: #fff;
+		background-color: var(--tertiary);
 		font-size: 20px;
 		height: 23px;
 	}
@@ -138,7 +138,7 @@
 	}
 
 	.web:hover {
-		background-color: var(--accent-tertiary);
+		background-color: var(--accent);
 		color: var(--secondary) !important;
 	}
 

src/routes/timeline.svelte

@@ -224,6 +224,6 @@
 	}
 
 	span {
-		color: var(--accent-primary);
+		color: var(--accent);
 	}
 </style>