Visual changes

- Advanced instances wrap around and are comma-separated
- Body text is darker on dark theme and lighter on light theme
- Added icons next to cryptocurrencies in `/donate`
- Reduced bottom margin on headers so they are closer to body text
- Made the theme toggle look like a button

src/lib/Hero.svelte

@@ -2,7 +2,9 @@
 	<h1 class="text-5xl font-extrabold text-accent my-0 border-b-0 pb-0">
 		Project Segfault
 	</h1>
-	<p class="text-2xl">Open source development and hosted services.</p>
+	<p class="text-2xl text-text">
+		Open source development and hosted services.
+	</p>
 	<div class="flex gap-4 flex-col w-full sm:(flex-row justify-center)">
 		<a
 			href="/instances"

src/lib/Nav/ThemeToggle.svelte

@@ -17,12 +17,19 @@
 
 <button
 	on:click={toggle}
-	class="text-text flex items-center text-sm"
+	class="theme-toggle button text-text flex items-center text-sm"
+	aria-label="Toggle theme"
 >
 	<div
 		class="i-ic:{theme === 'dark'
 			? 'outline-light-mode'
 			: 'outline-dark-mode'} h-4 w-4"
 	/>
-	<span class="ml-2 navPlus1:(hidden)">Toggle theme</span>
+	<span class="navPlus1:(hidden)">Toggle theme</span>
 </button>
+
+<style>
+	.theme-toggle:hover {
+		@apply brightness-70;
+	}
+</style>

src/routes/donate/+page.svelte

@@ -27,7 +27,7 @@
 <a
 	href="https://liberapay.com/ProjectSegfault/donate"
 	class="button !bg-amber !text-black w-fit"
-	><div class="i-simple-icons:liberapay" />
+	><div class="va-icon i-simple-icons:liberapay" />
 	Liberapay</a
 >
 
@@ -46,7 +46,13 @@
 	and <a href="https://electrum-ltc.org">Electrum-LTC</a>.
 </p>
 
-<h4>Monero</h4>
+<p class="text-text font-bold mt-4">
+	<i
+		class="va-icon i-simple-icons:monero inline-block text-[#F60]"
+		aria-hidden="true"
+	/>
+	Monero
+</p>
 
 <CryptoInfo
 	name="Monero"
@@ -54,7 +60,13 @@
 	qr="Monero.png"
 />
 
-<h4>Bitcoin</h4>
+<p class="text-text font-bold mt-4">
+	<i
+		class="va-icon i-simple-icons:bitcoin inline-block text-[#F7931A]"
+		aria-hidden="true"
+	/>
+	Bitcoin
+</p>
 
 <CryptoInfo
 	name="Bitcoin"
@@ -62,10 +74,22 @@
 	qr="Bitcoin.png"
 />
 
-<h4>Litecoin</h4>
+<p class="text-text font-bold mt-4">
+	<i
+		class="va-icon i-simple-icons:litecoin inline-block text-[#A6A9AA]"
+		aria-hidden="true"
+	/>
+	Litecoin
+</p>
 
 <CryptoInfo
 	name="Litecoin"
 	address="ltc1qn3ald586h2ntt0n3zkvwsmju2e5vndgtvvgatj"
 	qr="Litecoin.png"
 />
+
+<style>
+	.va-icon {
+		vertical-align: -0.125em;
+	}
+</style>

src/routes/instances/advanced/+page.svelte

@@ -18,50 +18,56 @@
 	{#each data.instances as category}
 		{#each category.data as instance}
 			<h2>{instance.name}</h2>
-			<div class="flex flex-row gap-2">
+			<ul class="instances flex flex-row flex-wrap gap-2">
 				{#if instance.geo}
-					<a href={instance.geo}>GeoDNS</a>
+					<li><a href={instance.geo}>GeoDNS</a></li>
 				{/if}
 				{#if instance.eu}
-					<a href={instance.eu}>EU</a>
+					<li><a href={instance.eu}>EU</a></li>
 				{/if}
 				{#if instance.us}
-					<a href={instance.us}>US</a>
+					<li><a href={instance.us}>US</a></li>
 				{/if}
 				{#if instance.in}
-					<a href={instance.in}>IN</a>
+					<li><a href={instance.in}>IN</a></li>
 				{/if}
 				{#if instance.bp}
-					<a href={instance.bp}>Backup</a>
+					<li><a href={instance.bp}>Backup</a></li>
 				{/if}
 				{#if instance.short_geo}
-					<a href={instance.short_geo}>GeoDNS (Short URL)</a>
+					<li><a href={instance.short_geo}>GeoDNS (Short URL)</a></li>
 				{/if}
 				{#if instance.short_eu}
-					<a href={instance.short_eu}>EU (Short URL)</a>
+					<li><a href={instance.short_eu}>EU (Short URL)</a></li>
 				{/if}
 				{#if instance.short_us}
-					<a href={instance.short_us}>US (Short URL)</a>
+					<li><a href={instance.short_us}>US (Short URL)</a></li>
 				{/if}
 				{#if instance.short_in}
-					<a href={instance.short_in}>IN (Short URL)</a>
+					<li><a href={instance.short_in}>IN (Short URL)</a></li>
 				{/if}
 				{#if instance.short_bp}
-					<a href={instance.short_bp}>Backup (Short URL)</a>
+					<li><a href={instance.short_bp}>Backup (Short URL)</a></li>
 				{/if}
 				{#if instance.tor}
-					<a href={instance.tor}>Tor</a>
+					<li><a href={instance.tor}>Tor</a></li>
 				{/if}
 				{#if instance.torBp}
-					<a href={instance.torBp}>Tor backup</a>
+					<li><a href={instance.torBp}>Tor backup</a></li>
 				{/if}
 				{#if instance.i2p}
-					<a href={instance.i2p}>I2P</a>
+					<li><a href={instance.i2p}>I2P</a></li>
 				{/if}
 				{#if instance.i2pBp}
-					<a href={instance.i2pBp}>I2P backup</a>
+					<li><a href={instance.i2pBp}>I2P backup</a></li>
 				{/if}
-			</div>
+			</ul>
 		{/each}
 	{/each}
 </div>
+
+<style>
+	.instances li:not(:last-child)::after {
+		content: ",";
+	}
+</style>

src/routes/team/Team.json

@@ -37,7 +37,7 @@
 	},
 	{
 		"name": "py_",
-		"description": "Self-proclaimed front-end dev",
+		"description": "self-proclaimed front-end dev",
 		"position": "Webdev",
 		"website": "https://py.p.psf.lt",
 		"matrix": "https://matrix.to/#/@py_:catgirl.cloud",