various fixes

src/lib/Card/Link.svelte

@@ -12,7 +12,8 @@
 	.web,
 	.email,
 	.picture,
-	.pgp {
+	.pgp,
+	.link {
 		background-color: var(--alt);
 		color: var(--alt-text);
 		font-size: 20px;

src/lib/Footer.svelte

@@ -37,18 +37,4 @@
 		font-weight: 500;
 		text-align: center;
 	}
-
-	.badge {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-	}
-
-	img {
-		width: 270px;
-		background: var(--accent);
-		padding: 0.5rem;
-		border-radius: 10px;
-	}
 </style>

src/lib/Nav.svelte

@@ -5,7 +5,7 @@
 	$: currentPage = $page.url.pathname;
 
 	const menus = [
-		{ name: "Instances", url: "/instances" },
+		{ name: "Services", url: "/services" },
 		{ name: "Projects", url: "/projects" },
 		{ name: "Minecraft", url: "/minecraft" },
 		{ name: "Donate", url: "/donate" },
@@ -46,12 +46,20 @@
 		<a href="https://github.com/ProjectSegfault/">
 			<div class="i-simple-icons:github" />
 		</a>
-		<div>
+		<div class="theme-toggle">
 			<ThemeToggle />
 		</div>
 	</div>
 </nav>
 
+<noscript>
+	<style>
+		.theme-toggle {
+			display: none !important;
+		}
+	</style>
+</noscript>
+
 <style>
 	nav {
 		background-color: var(--primary);

src/routes/contact.md

@@ -11,9 +11,10 @@ description: Do you want to contact us?
 
 { description }
 
-## Contact Form
-
-<ContactForm />
+<div class="contact-form">
+    <h2>Contact form</h2>
+    <ContactForm />
+</div>
 
 ## Our email
 
@@ -24,3 +25,11 @@ _Please be aware that Microsoft often blocks non-popular emails, if you do conta
 ## People
 
 You can find ways to contact individual team members [on our team page](/team).
+
+<noscript>
+	<style>
+		.contact-form {
+			display: none;
+		}
+	</style>
+</noscript>

src/routes/index.svelte

@@ -25,7 +25,7 @@
 	marginTop="7"
 >
 	<div class="buttons">
-		<LinkButton url="/instances" title="Explore our services" />
+		<LinkButton url="/services" title="Explore our services" />
 		<LinkButton url="/projects" title="Explore our projects" />
 		<LinkButton
 			url="/donate"

src/routes/services.svelte

@@ -1,8 +1,8 @@
 <script>
 	import { CardInner, CardOuter, LinksOuter, Link } from "$lib/Card";
-	import instances from "$lib/Instances.json";
+	import services from "$lib/Services.json";
 
-	let groups = instances.reduce((curr, val) => {
+	let groups = services.reduce((curr, val) => {
 		let group = curr.find((g) => g.category === `${val.category}`);
 		if (group) {
 			group.values.push(val);
@@ -13,7 +13,12 @@
 	}, []);
 </script>
 
-<h1>Our instances</h1>
+<svelte:head>
+	<title>Our services | Project Segfault</title>
+	<meta name="description" content="Our collection of services." />
+</svelte:head>
+
+<h1>Our services</h1>
 <CardOuter>
 	<div class="container">
 		{#each groups as group}
@@ -21,22 +26,26 @@
 				<h2>{group.category}</h2>
 				<div class="items">
 					{#each group.values as item}
-						<a href={item.website}>
 							<CardInner
 								title={item.name}
 								description={item.description}
 								icon={item.icon}
 							>
 								<LinksOuter>
-									<Link url={item.projectWebsite} class="web">
+									<Link url={item.website} class="web">
 										<div class="projectWebsite">
 											<div class="i-fa6-solid:globe" />
+											<span>Instance link</span>
+										</div>
+									</Link>
+									<Link url={item.projectWebsite} class="link">
+										<div class="projectWebsite">
+											<div class="i-fa6-solid:circle-info" />
 											<span>Project website</span>
 										</div>
 									</Link>
 								</LinksOuter>
 							</CardInner>
-						</a>
 					{/each}
 				</div>
 			</div>
@@ -58,11 +67,6 @@
 		gap: 2rem;
 	}
 
-	a {
-		text-decoration: none;
-		color: var(--text);
-	}
-
 	.projectWebsite {
 		display: flex;
 		align-items: center;