Merge pull request #65 from ProjectSegfault/various-fixes

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/lib/app.css

@@ -16,6 +16,7 @@ html {
 	--grey: #5454547a;
 	--alt: #333;
 	--alt-text: #ddd;
+	color-scheme: dark;
 }
 
 html.light {
@@ -26,6 +27,7 @@ html.light {
 	--grey: #444444;
 	--alt: #ddd;
 	--alt-text: #333;
+	color-scheme: light;
 }
 
 body {

src/routes/contact.md

@@ -5,15 +5,26 @@ description: Do you want to contact us?
 
 <script lang="ts">
     import ContactForm from "$lib/ContactForm.svelte";
+	import Note from "$lib/Form/Note.svelte";
 </script>
 
 # { title }
 
 { description }
 
-## Contact Form
+<div class="contact-form">
+    <h2>Contact form</h2>
+    <ContactForm />
+</div>
 
-<ContactForm />
+<noscript>
+	<Note content="The contact form (and by extension Segfautils) does not work without JavaScript enabled." icon="i-fa6-solid:circle-info" />
+	<style>
+		.contact-form {
+			display: none;
+		}
+	</style>
+</noscript>
 
 ## Our email
 

src/routes/index.svelte

@@ -2,6 +2,7 @@
 	import SvelteSeo from "svelte-seo";
 	import Hero from "$lib/Hero.svelte";
 	import LinkButton from "$lib/LinkButton.svelte";
+	import Note from "$lib/Form/Note.svelte";
 	import dayjs from "dayjs";
 
 	let description: string = "Open source development and hosted services.";
@@ -25,12 +26,14 @@
 	marginTop="7"
 >
 	<div class="buttons">
-		<LinkButton url="/instances" title="Explore our services" />
+		<LinkButton url="/services" title="Explore our services" icon="i-fa6-solid:bell-concierge" />
-		<LinkButton url="/projects" title="Explore our projects" />
+		<LinkButton url="/projects" title="Explore our projects" icon="i-fa6-solid:tractor" />
 		<LinkButton
 			url="/donate"
 			icon="i-fa6-solid:money-bill"
 			title="Donate"
+			bg="#F6C915"
+			color="#151515"
 		/>
 	</div>
 </Hero>
@@ -67,6 +70,17 @@
 	{/await}
 </div>
 
+<noscript>
+	<div class="flex justify-center text-center text-red">
+		<Note content="Announcements do not work without JavaScript enabled." />
+	</div>
+	<style>
+		.announcements {
+			display: none;
+		}
+	</style>
+</noscript>
+
 {#if announcements.severity === "info"}
 	<style>
 		.announcement {

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;