From 46c5065d60f4716e6ab24af9e161942fc68f3533 Mon Sep 17 00:00:00 2001
From: Thomas <thomas@thomaswilson.xyz>
Date: Sun, 17 Mar 2024 22:01:32 +0000
Subject: [PATCH] finalise redesign

---
 src/lib/components/Navbar.svelte           | 158 ++++++++++++---------
 src/lib/components/moon.svg                |   1 +
 src/lib/components/sun.svg                 |   1 +
 src/routes/+layout.svelte                  |  68 ++++++---
 src/routes/blog/[slug]/+page.svelte        |   5 +-
 src/routes/games/PreviousGameScores.svelte |   7 -
 src/routes/home/HomepageHeader.svelte      |  21 +--
 src/stores/colourSchemeStore.ts            |   4 +-
 src/styles/thomaswilson.css                |  11 +-
 9 files changed, 169 insertions(+), 107 deletions(-)
 create mode 100644 src/lib/components/moon.svg
 create mode 100644 src/lib/components/sun.svg

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index e593d16..c4d132b 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -1,82 +1,108 @@
 <script lang="ts">
-	import { colourSchemeStore, lightColourScheme, darkColourScheme } from "../../stores/colourSchemeStore";
+  import { tweened } from 'svelte/motion'
+  import { expoOut } from 'svelte/easing'
+  import {
+    colourSchemeStore,
+    lightColourScheme,
+    darkColourScheme,
+  } from "../../stores/colourSchemeStore.ts";
+  import sunSvg from "./sun.svg";
+  import moonSvg from "./moon.svg";
 
-	function onColourSchemeChange() {
-		if ($colourSchemeStore.name === 'dark') {
-			colourSchemeStore.set(lightColourScheme)
-		} else {
-			colourSchemeStore.set(darkColourScheme)
-		}
-	}
+  function onColourSchemeChange() {
+    const newColourScheme =
+      $colourSchemeStore.name === "dark" ? lightColourScheme : darkColourScheme;
+    localStorage.setItem("colourScheme", newColourScheme.name);
+    colourSchemeStore.set(newColourScheme);
+	iconMovement.set($iconMovement + 360);
+  }
 
+  const iconMovement = tweened(0, {
+	duration: 300,
+	easing: expoOut
+  });
 </script>
-<nav>
-	<div class="left">
-		<a href="/" class="home">Thomas Wilson</a>
-	</div>
 
-	<div class="right">
-		<button class="colour-theme-toggle" on:click={onColourSchemeChange}>Toggle Colour Scheme</button>	
-		<a href="/blog" class="blog">/blog</a>
-	</div>
+<nav>
+  <div class="left">
+    <a href="/" class="home">Thomas Wilson</a>
+  </div>
+
+  <div class="right">
+    <button class="colour-theme-toggle" on:click={onColourSchemeChange}>
+      <img
+        class="icon"
+        src={$colourSchemeStore.name === "light" ? sunSvg : moonSvg}
+        alt="Light mode"
+        width="24"
+        height="24"
+        style="transform: rotate({$iconMovement}deg)"
+		
+      />
+    </button>
+    <a href="/blog" class="blog">/blog</a>
+  </div>
 </nav>
 
 <style>
-	nav {
-		display: flex;
-		flex-flow: row;
-		max-width: 100vw;
-		overflow: hidden;
-		min-height: var(--navbar-height);
-		font-family: var(--font-family-mono);
-	}
+  nav {
+    display: flex;
+    flex-flow: row;
+    max-width: 100vw;
+    overflow: hidden;
+    min-height: var(--navbar-height);
+    font-family: var(--font-family-mono);
+  }
 
-	.left {
-		flex: 1;
-		flex-grow: 0;
-		text-align: left;
-		padding: var(--spacing-base);
-		
-	}
+  .left {
+    flex: 1;
+    flex-grow: 0;
+    text-align: left;
+    padding: var(--spacing-base);
+  }
 
-	.home {
-		color: var(--brand-orange);
-		font-family: inherit;
-		text-decoration: none;
-		font-weight: 300;
-		display: flex;
-		width: fit-content;
-		white-space: nowrap;
-		transition: 0.3s;
-	}
+  .home {
+    color: var(--brand-orange);
+    font-family: inherit;
+    text-decoration: none;
+    font-weight: 300;
+    display: flex;
+    width: fit-content;
+    white-space: nowrap;
+    transition: 0.3s;
+  }
 
-	.home:hover {
-		transform: rotate(11deg);
-	}
+  .home:hover {
+    transform: rotate(11deg);
+  }
 
-	.right {
-		display: flex;
-		flex: 1;
-		text-align: right;
-		gap: 1rem;
-		align-items: center;
-		justify-content: flex-end;
-		padding: var(--spacing-base);
-	}
+  .right {
+    display: flex;
+    flex: 1;
+    text-align: right;
+    gap: 1rem;
+    align-items: center;
+    justify-content: flex-end;
+    padding: var(--spacing-base);
+  }
 
-	.colour-theme-toggle {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
+  .colour-theme-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-	.blog {
-		font-size: 1.1rem;
-		padding: 0;
-		margin: 0;
-	}
+  svg path {
+	fill: var(--colour-scheme-text);
+  }
 
-	.blog:visited {
-		color: var(--colour-scheme-text);
-	}
+  .blog {
+    font-size: 1.1rem;
+    padding: 0;
+    margin: 0;
+  }
+
+  .blog:visited {
+    color: var(--colour-scheme-text);
+  }
 </style>
diff --git a/src/lib/components/moon.svg b/src/lib/components/moon.svg
new file mode 100644
index 0000000..068201c
--- /dev/null
+++ b/src/lib/components/moon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M3 11.5066C3 16.7497 7.25034 21 12.4934 21C16.2209 21 19.4466 18.8518 21 15.7259C12.4934 15.7259 8.27411 11.5066 8.27411 3C5.14821 4.55344 3 7.77915 3 11.5066Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
\ No newline at end of file
diff --git a/src/lib/components/sun.svg b/src/lib/components/sun.svg
new file mode 100644
index 0000000..851461a
--- /dev/null
+++ b/src/lib/components/sun.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="red"><path d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M22 12L23 12" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 2V1" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 23V22" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 20L19 19" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 4L19 5" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 20L5 19" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 4L5 5" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M1 12L2 12" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e185261..1fde908 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,31 +1,59 @@
 <script lang="ts">
   import "../styles/thomaswilson.css";
-  import { colourSchemeStore } from "../stores/colourSchemeStore.ts";
+  import {
+    colourSchemeStore,
+    colourSchemes,
+    darkColourScheme,
+    lightColourScheme,
+  } from "../stores/colourSchemeStore.ts";
   import { browser } from "$app/environment";
+  import { onMount } from "svelte";
+
+  onMount(() => {
+    const prefersDarkmode: boolean = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    ).matches;
+
+    const colourSchemeName: string | null =
+      localStorage.getItem("colourScheme");
+    const colourScheme = colourSchemes?.[colourSchemeName];
+
+    console.log({ 
+      colourSchemeName, 
+      colourScheme, 
+      prefersDarkmode 
+    })
+    
+    if (colourScheme) {
+      colourSchemeStore.set(colourScheme);
+    } else if (prefersDarkmode) {
+      colourSchemeStore.set(darkColourScheme);
+    } else {
+      colourSchemeStore.set(lightColourScheme);
+    }
+  });
 
   colourSchemeStore.subscribe((value) => {
-    if (browser) {
-      document.documentElement.style.setProperty(
-        "--colour-scheme-background",
-        value.background
-      );
+    if (!browser) return;
+    document.documentElement.style.setProperty(
+      "--colour-scheme-background",
+      value.background
+    );
 
-      document.documentElement.style.setProperty(
-        "--colour-scheme-text",
-        value.text
-      );
+    document.documentElement.style.setProperty(
+      "--colour-scheme-text",
+      value.text
+    );
 
-      document.documentElement.style.setProperty(
-        "--colour-scheme-background-accent",
-        value.backgroundAccent
-      );
+    document.documentElement.style.setProperty(
+      "--colour-scheme-background-accent",
+      value.backgroundAccent
+    );
 
-      document.documentElement.style.setProperty(
-        "--colour-scheme-text-accent",
-        value.textAccent
-      );
-
-    }
+    document.documentElement.style.setProperty(
+      "--colour-scheme-text-accent",
+      value.textAccent
+    );
   });
 </script>
 
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index 60261c0..ed5602a 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -77,7 +77,6 @@
     line-height: 160%;
     font-size: var(--font-size);
     font-weight: 400;
-    margin-bottom: 1.5rem;
     letter-spacing: 0.5px;
   }
 
@@ -93,8 +92,10 @@
     flex-grow: 1;
 
     @media screen and (max-width: 700px) {
-      --font-size: 1.1rem;
+      --font-size: 1rem;
       padding: 12px;
+      letter-spacing: normal;
+      line-height: 110%;
     }
 
     @media screen and (min-width: 700px) {
diff --git a/src/routes/games/PreviousGameScores.svelte b/src/routes/games/PreviousGameScores.svelte
index c929201..694e588 100644
--- a/src/routes/games/PreviousGameScores.svelte
+++ b/src/routes/games/PreviousGameScores.svelte
@@ -36,11 +36,4 @@
 		grid-template-columns: 100%;
 		width: 100%;
 	}
-
-	.toggle-button {
-		width: 100%;
-		color: white;
-		background: var(--brand-purple);
-		border: none;
-	}
 </style>
diff --git a/src/routes/home/HomepageHeader.svelte b/src/routes/home/HomepageHeader.svelte
index 2091ca8..64d6b18 100644
--- a/src/routes/home/HomepageHeader.svelte
+++ b/src/routes/home/HomepageHeader.svelte
@@ -13,17 +13,16 @@
 <section class="homepage-header">
   <h1 class="title">(Thomas) Wilson</h1>
   <p class="body">
-    I love the craft of well-built things: mostly software (~8 years), but also
-    clothes (~2 years).
+    I love the craft of making well-built things, especially software and
+    clothes. My embarrassing but earnest goal is to:
   </p>
+  <blockquote class="mission-statement">
+    make things stronger which don&apos;t rely on exploitation, excessive waste, or
+    dishonesty; and to try and build a kinder, fairer world even when it's hard.
+  </blockquote>
   <p class="body">
-    I work against systems which rely on exploitation, excessive waste, and
-    dishonesty. I'm trying to build a kinder and fairer world, and I find that
-    hard sometimes.
-  </p>
-  <p class="body">
-    I try to think and be curious, that's why I keep a <a href="/blog">weblog</a
-    >. And (equally embarrassing to say) probably what got me through a
+    I try to think and be curious, which is why I keep a <a href="/blog">weblog</a
+    > and, equally worth mentioning, what got me through a
     <a
       class="thesis"
       target="_blank"
@@ -68,7 +67,8 @@
   a,
   ol,
   li,
-  p {
+  p,
+  blockquote {
     color: var(--text-color);
     font-family: inherit;
     width: 100%;
@@ -78,6 +78,7 @@
   .title {
     font-weight: 400;
     font-family: inherit;
+    padding-bottom: 1.85rem;
   }
 
   .body {
diff --git a/src/stores/colourSchemeStore.ts b/src/stores/colourSchemeStore.ts
index 29ca0a7..ca6397c 100644
--- a/src/stores/colourSchemeStore.ts
+++ b/src/stores/colourSchemeStore.ts
@@ -1,4 +1,5 @@
 import { writable } from "svelte/store";
+import { browser } from '$app/environment'
 
 type ColourSchemeName = 'light' | 'dark';
 
@@ -31,5 +32,6 @@ export const colourSchemes: Record<ColourSchemeName, ColourScheme> = {
     dark: darkColourScheme
 };
 
-export const colourSchemeStore = writable<ColourScheme>(darkColourScheme);
+export const colourSchemeStore = writable<ColourScheme>(lightColourScheme);
+
 
diff --git a/src/styles/thomaswilson.css b/src/styles/thomaswilson.css
index 11344aa..c38c9f2 100644
--- a/src/styles/thomaswilson.css
+++ b/src/styles/thomaswilson.css
@@ -114,7 +114,8 @@ h6 {
 
 p,
 li,
-a {
+a, 
+blockquote {
     font-size: var(--font-size);
     line-height: var(--line-height-lg);
     font-family: var(--font-family-mono);
@@ -123,6 +124,14 @@ a {
     padding: 8px 0;
 }
 
+blockquote {
+    border-style: solid;
+    padding: 0.25rem 0 0.5rem 1rem;
+    border-width: 0px;
+    border-left: 4px solid var(--brand-orange);
+    opacity: 0.85;
+}
+
 ul,
 ol {
     padding-left: var(--spacing-base);