lots of unfinished changes

README.md

@@ -1,4 +1,4 @@
-# Project Segfault Website
+# Project Segfault website
 
 Live at [projectsegfau.lt](https://projectsegfau.lt).
 
@@ -10,17 +10,10 @@ Live at [projectsegfau.lt](https://projectsegfau.lt).
 -   Install [pnpm](https://pnpm.io/) (optional, although strongly recommended).
 -   Learn [Svelte](https://svelte.dev).
 
-### Universal
+### Running a dev server.
 
 1. Clone the repository using `git clone https://github.com/ProjectSegfault/website`.
 2. Change directory into the clone using `cd ./website`.
 3. Install dependencies using `pnpm i` (recommended) or `npm i`.
 4. Run the dev server using `pnpm dev` (recommended) or `npm run dev`.
 5. Open a browser on `http://localhost:5173/` and you should see the website running locally!
-
-### NixOS
-
-1. Clone the repository using `git clone https://github.com/ProjectSegfault/website`.
-2. Change directory into the clone using `cd ./website`.
-3. In the same terminal type `nix-shell`.
-4. Open a browser on `http://localhost:5173/` and you should see the website running locally!

shell.nix

@@ -1,13 +0,0 @@
-{ pkgs ? import <nixpkgs> {}
-}:
-pkgs.mkShell {
-    name="dev";
-    buildInputs = [
-        pkgs.nodejs-16_x
-    ];
-    shellHook = ''
-        echo "Installing dependencies using npm, please wait."
-        npm i
-        echo "You can now "run npm run dev" to start a dev server."
-    '';
-}

src/lib/Nav.svelte

@@ -5,13 +5,7 @@
 <nav>
 	<a class="brand" href="/">
 		<img src="/logo.png" alt="Project Segfault logo" />
-		<span
+		<span>Project Segfault</span>
-			style="color: var(--accent-secondary); margin-left: 4px; margin-right: 4px;"
-			>Project</span
-		>
-		<span style="color: var(--accent-primary); margin-right: 8px;"
-			>Segfault</span
-		>
 	</a>
 
 	<input type="checkbox" id="toggle-menu" />
@@ -22,13 +16,13 @@
 	</label>
 
 	<div class="links">
-		<a href="https://instances.projectsegfau.lt/">Instances & Gameservers</a
+		<a href="https://instances.projectsegfau.lt/">Hosted services</a
 		>
 		<a href="/minecraft">Minecraft</a>
 		<a href="/donate">Donate</a>
 		<a href="/faq">FAQ</a>
-		<a href="/contact">Contact</a>
+		<a href="/contact">Contact us</a>
-		<a href="/members">Members</a>
+		<a href="/members">Our team</a>
 		<a href="https://blog.projectsegfau.lt/">Blog</a>
 		<a href="/legal">Legal</a>
 	</div>
@@ -36,9 +30,10 @@
 
 <style>
 	nav {
-		background-color: var(--secondary);
+		background-color: var(--primary);
-		padding: 1rem;
+		border-bottom: 1px solid var(--grey);
 		display: flex;
+		padding: .5rem;
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
@@ -47,6 +42,13 @@
 		display: flex;
 		align-items: center;
 		text-decoration: none;
+		color: var(--text);
+		gap: 8px;
+		transition: opacity .25s;
+	}
+
+	a.brand:hover {
+		opacity: .6;
 	}
 
 	.links {
@@ -55,32 +57,22 @@
 	}
 
 	.links > * {
-		background-color: var(--tertiary);
+		padding: .5rem;
-		border: none;
-		border-radius: 10px;
-		padding: 1rem;
 		cursor: pointer;
 		color: var(--text);
-		font-family: var(--font-primary);
 		text-decoration: none;
+		transition: color .25s;
+		font-size: 13px;
+		font-weight: 500;
 	}
 
 	.links > *:hover {
-		background-color: var(--accent-tertiary);
 		text-decoration: none;
-		transition: all 0.5s;
+		color: var(--accent-primary);
-		color: var(--secondary);
-	}
-
-	.links > *:active {
-		background-color: var(--accent-primary);
-		text-decoration: none;
-		transition: all 0.5s;
-		color: var(--secondary);
 	}
 
 	img {
-		height: 36px;
+		height: 30px;
 		border-radius: 50%;
 	}
 
@@ -97,8 +89,7 @@
 		.links {
 			display: none;
 			width: 100%;
-			background-color: var(--secondary);
+			padding-top: 12px;
-			padding-top: 2rem;
 		}
 
 		nav {
@@ -112,15 +103,17 @@
 		}
 
 		.menu-icon {
-			display: block;
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			z-index: 1;
 			position: absolute;
-			top: 0.45rem;
 			right: 1rem;
-			background-color: var(--tertiary);
+			top: .35rem;
 			border: none;
 			border-radius: 10px;
-			padding: 1rem;
+			height: 30px;
+			width: 30px;
 			cursor: pointer;
 			line-height: 1;
 		}

src/lib/app.css

@@ -14,10 +14,11 @@ html {
 	--primary: #151515;
 	--secondary: #252525;
 	--tertiary: #353535;
-	--accent-primary: #cfce73;
+	--accent-primary: #00d4aa;
-	--accent-secondary: #9c6fd6;
+	--accent-secondary: #00d4aa;
-	--accent-tertiary: #fcc348;
+	--accent-tertiary: #00d4aa;
-	--text: #fff;
+	--text: #ffffffde;
+	--grey: #5454547a;
 	--font-primary: Comfortaa;
 	--font-header: Inter
 

src/routes/contact.md

@@ -1,5 +1,5 @@
 ---
-title: Contact Us
+title: Contact us
 description: Do you want to contact us?
 ---
 
@@ -23,4 +23,4 @@ _Please be aware that Microsoft often blocks non-popular emails, if you do conta
 
 ## People
 
-You can find ways to contact individual members [on our Members page](/members).
+You can find ways to contact individual team members [on our team page](/team).

src/routes/index.svelte

@@ -18,7 +18,7 @@
 <h2>What is this?</h2>
 
 <p>
-    We are 7 teenagers who have a decently powerful server. What do we do with this server? Host game servers and random assortment of privacy respecting tools like Invidious, Nextcloud, Matrix etc.... and maybe some original works. You'll see eventually!
+    We are 7 humans who have a decently powerful server. What do we do with this server? Host game servers and random assortment of privacy respecting tools like Invidious, Nextcloud, Matrix etc.... and maybe some original works. You'll see eventually!
 </p>
 
 <h2>Tell me more! What do you guys host? Where can I contact you? Can you fix my daughter's iPad?</h2>

src/routes/team.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import members from "$lib/Members.json";
+	import members from "$lib/Team.json";
 	import IconDiscord from "~icons/simple-icons/discord";
 	import IconMatrix from "~icons/simple-icons/matrix";
 	import IconGitHub from "~icons/simple-icons/github";
@@ -10,16 +10,16 @@
 </script>
 
 <svelte:head>
-	<title>Members | Project Segfault</title>
+	<title>Our team | Project Segfault</title>
-	<meta name="description" content="Members of Project Segfault." />
+	<meta name="description" content="Team members of Project Segfault." />
 </svelte:head>
 
-<div class="members">
+<div class="team">
-	<h1>Members</h1>
+	<h1>Our team</h1>
-	<p>Our excellent members!</p>
+	<p>Our excellent team members!</p>
-	<div class="member-outer">
+	<div class="team-outer">
 		{#each members as { name, discord, matrix, position, description, github, website, email, picture }}
-			<div class="member-inner">
+			<div class="team-inner">
 				<div class="main">
 					<span>{name} - {position}</span>
 
@@ -63,14 +63,14 @@
 </div>
 
 <style>
-	.member-outer {
+	.team-outer {
 		display: flex;
 		flex-direction: column;
 		gap: 2rem;
 		flex-flow: row wrap;
 	}
 
-	.member-inner {
+	.team-inner {
 		background-color: #252525;
 		border-radius: 10px;
 		padding: 1rem;