finalise redesign

src/lib/components/Navbar.svelte

@@ -1,22 +1,45 @@
 <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') {
+    const newColourScheme =
-			colourSchemeStore.set(lightColourScheme)
+      $colourSchemeStore.name === "dark" ? lightColourScheme : darkColourScheme;
-		} else {
+    localStorage.setItem("colourScheme", newColourScheme.name);
-			colourSchemeStore.set(darkColourScheme)
+    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>	
+    <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>
@@ -36,7 +59,6 @@
     flex-grow: 0;
     text-align: left;
     padding: var(--spacing-base);
-		
   }
 
   .home {
@@ -70,6 +92,10 @@
     justify-content: center;
   }
 
+  svg path {
+	fill: var(--colour-scheme-text);
+  }
+
   .blog {
     font-size: 1.1rem;
     padding: 0;

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>

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>

src/routes/+layout.svelte

@@ -1,10 +1,40 @@
 <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) {
+    if (!browser) return;
     document.documentElement.style.setProperty(
       "--colour-scheme-background",
       value.background
@@ -24,8 +54,6 @@
       "--colour-scheme-text-accent",
       value.textAccent
     );
-
-    }
   });
 </script>
 

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) {

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>

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
+    I love the craft of making well-built things, especially software and
-    clothes (~2 years).
+    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
+    I try to think and be curious, which is why I keep a <a href="/blog">weblog</a
-    dishonesty. I'm trying to build a kinder and fairer world, and I find that
+    > and, equally worth mentioning, what got me through a
-    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
     <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 {

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);
+
 

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);