From a80f3a3cc74d353d48d377ee407a74f4a4f7eb0f Mon Sep 17 00:00:00 2001
From: ChrQR <christian@rannes.com>
Date: Sat, 27 Apr 2024 12:55:00 +0200
Subject: [PATCH] darkmode selector layout and content add

---
 src/lib/ThemeSwitch.svelte      |  4 ++--
 src/routes/+layout.svelte       |  5 +++--
 src/routes/homelab/+page.svelte | 38 +++++++++++++++++++--------------
 3 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/lib/ThemeSwitch.svelte b/src/lib/ThemeSwitch.svelte
index ff07689..4ce1a4e 100644
--- a/src/lib/ThemeSwitch.svelte
+++ b/src/lib/ThemeSwitch.svelte
@@ -34,11 +34,11 @@
     }
 
     #theme-toggle + label {
-        @apply inline-block cursor-pointer h-8 w-8 absolute top-6 right-24 rounded-full duration-300 content-[''];
+        @apply inline-block cursor-pointer h-6 w-6 fixed top-4 right-4 rounded-full duration-300 content-[''];
     }
 
     #theme-toggle:not(:checked) + label {
-        @apply bg-black;
+        @apply bg-yellow-200;
     }
 
     #theme-toggle:checked + label {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d61abfb..a8c0d7c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -47,15 +47,16 @@
             {/if}
         {/each}
     </ul>
-    <hr class="nav-divider max-w-xl h-0.5 border-0 mx-auto my-1 bg-black rounded md:my-1 dark:bg-stone-100"/>
+    <hr class="nav-divider max-w-xl h-0.5 border-0 mx-auto bg-black rounded dark:bg-stone-100"/>
     {#key selected}
         <ul in:blur={{ delay: 250 }} out:blur={{ duration: 250 }} class="text-center h-4 my-1">
             {#each selected.subPages as subPage}
                 <li class="sub-nav-item inline-block  font-jose"><a class="sub-nav-link text-xl p-2"href={(subPage)}>{subPage.replace(/_/g, ' ')}</a></li>   
             {/each}
+
         </ul>
     {/key}
-    <ThemeSwitch class="absolute"/>
+
 </nav>
 <div class="container text-center w-3/4 mx-auto">
     <slot />
diff --git a/src/routes/homelab/+page.svelte b/src/routes/homelab/+page.svelte
index f26da6b..7e3c90c 100644
--- a/src/routes/homelab/+page.svelte
+++ b/src/routes/homelab/+page.svelte
@@ -10,11 +10,11 @@
 	<div class="content text-left">
 		<article>
 			<h2 class="text-xl text-center">What is a homelab?</h2>
-			<p>
+			<img class="rounded mt-4" src={quoteImg} alt="" />
+			<p class="text-sm italic">
 				This question was answered very well by the reddit users webtroter and TreAwayDeuce 6 years
 				ago.
 			</p>
-			<img class="rounded my-4" src={quoteImg} alt="" />
 			<h2 class="text-xl text-center mt-4">Origin and Hardware</h2>
 			<p>
 				My interest in “Homelabbing” arose long before I was familiar with the term Homelab. I have
@@ -60,14 +60,20 @@
 				more space, so I built the new server in a 2U rack case, which also leaves lots of room for
 				storage upgrades. I used consumer grade hardware to keep idle power low:
 			</p>
-			<ul class="list-disc list-inside indent-4">
-				<li>MSI Pro-690-P (Lots of IOMMU groups)</li>
-				<li>Intel i3-12100f (Low power idle)</li>
+			<ul class="list-disc list-inside">
+				<li>MSI Pro-690-P</li>
+				<p class="italic pl-4">Lots of IOMMU groups</p>
+				<li>Intel i3-12100f</li>
+				<p class="italic pl-4">Low power idle</p>
 				<li>32GB Corsair Vengeance DDR4 3200</li>
-				<li>1tb Samsung Evo 970 (Host boot and VM disks)</li>
-				<li>512gb Samsung Evo 970 (NAS cache)</li>
-				<li>2 x 10TB Seagate Ironwolf (RAID1)</li>
-				<li>Geforce 1650ti 4gb (for transcoding)</li>
+				<li>1tb Samsung Evo 970</li>
+				<p class="italic pl-4">Host boot and VM disks</p>
+				<li>512gb Samsung Evo 970</li>
+				<p class="italic pl-4">NAS cache</p>
+				<li>2 x 10TB Seagate Ironwolf</li>
+				<p class="italic pl-4">RAID1</p>
+				<li>Geforce 1650ti 4gb</li>
+				<p class="italic pl-4">for transcoding</p>
 			</ul>
 			<img class="rounded my-4" src={rackImg} alt="" />
 			<p>
@@ -95,19 +101,19 @@
 			<p class="underline">Currently I am hosting the following services:</p>
 			<ul class="list-disc list-inside">
 				<li>Traefik</li>
-				<p class="pl-4">
+				<p class="italic pl-4">
 					Reverse Proxy to direct and secure external traffic to external services. Traefik also
 					handles ssl certificates from letsencrypt, as all of my external an internal domains have
 					ssl encryption.
 				</p>
 				<li>Traefik-bouncer</li>
-				<p class="pl-4">
+				<p class="italic pl-4">
 					Monitors traefik, and bans incoming connection from known threat actors and a set of
 					predefined rules. Also bans for multiple failed login attempts, and monitors logs of all
 					exposed services.
 				</p>
 				<li>Portfolio web page</li>
-				<p class="pl-4">
+				<p class="italic pl-4">
 					This is my portfolio page, which will soon be available at rannes.dev. I'm using
 					svelte/sveltekit. It is
 					currently not exposed to the internet as I am still building it.
@@ -116,14 +122,14 @@
 				<li>Prometheus</li>
 				<li>Grafana</li>
 				<li>Authelia</li>
-				<p class="pl-4">IAM layer with 2FA.</p>
+				<p class="italic pl-4">IAM layer with 2FA.</p>
 				<li>Media Stack</li>
-				<p class="pl-4">Jellyfin, Radarr, Sonarr, Prowlarr, Blazarr, Gluetun, Jellyseerr.</p>
+				<p class="italic pl-4">Jellyfin, Radarr, Sonarr, Prowlarr, Blazarr, Gluetun, Jellyseerr.</p>
 				<li>Syncthing</li>
 				<li>Gitea</li>
-				<p class="pl-4">self-hosted git repository</p>
+				<p class="italic pl-4">self-hosted git repository</p>
 				<li>Gitea Runners</li>
-				<p class="pl-4">Runners for Continuous deployment.</p>
+				<p class="italic pl-4">Runners for Continuous deployment.</p>
 				<li>Kuma Uptime</li>
 				<li>Portainer</li>
 			</ul>