From 1743c9cfd45c3385d55030e7231fc05d7b2a1bf4 Mon Sep 17 00:00:00 2001
From: Thomas <thomas@thomaswilson.xyz>
Date: Sun, 5 Jan 2025 07:42:17 +0000
Subject: [PATCH] design: update homepage design a little

---
 src/routes/+page.svelte               | 13 ++++++--
 src/routes/home/HomepageHeader.svelte | 48 +++++++++++++++++++++------
 src/styles/thomaswilson.css           | 14 ++++++--
 3 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 13b43f2..d8a5360 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,7 +3,6 @@
   import HomepageHeader from "./home/HomepageHeader.svelte";
 
   let { data = { latestBlogPosts: [] } } = $props();
-
 </script>
 
 <svelte:head>
@@ -13,5 +12,13 @@
 <Navbar />
 
 <main class="home">
-    <HomepageHeader latestBlogPosts={data.latestBlogPosts} />
-</main>
\ No newline at end of file
+  <HomepageHeader latestBlogPosts={data.latestBlogPosts} />
+</main>
+
+<style>
+  .home {
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+  }
+</style>
diff --git a/src/routes/home/HomepageHeader.svelte b/src/routes/home/HomepageHeader.svelte
index fbc9a42..e8ffb76 100644
--- a/src/routes/home/HomepageHeader.svelte
+++ b/src/routes/home/HomepageHeader.svelte
@@ -15,14 +15,17 @@
 </script>
 
 <section class="homepage-header">
-  <h1 class="title">(Thomas) Wilson</h1>
-  <p class="body">Hand-maker of things, notably software and clothes.</p>
-  <p class="body">My personal 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>
+  <h1 class="title">Thomas Wilson-Cook</h1>
+  <p class="body strapline">
+    I craft well-meaning things, like software, clothes, photographs, and words.
+  </p>
+  <p class="body strapline">
+    I am trying to 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.
+  </p>
+
+  <hr />
   <p class="body">
     I try to think and be curious, which is why I keep a <a href="/blog"
       >weblog</a
@@ -64,10 +67,12 @@
 
 <style>
   .homepage-header {
-    font-family: monospace;
     display: grid;
-    place-items: center;
     padding: 0 12px;
+    gap: 8px;
+    font-size: var(--font-size-md);
+    font-family: var(--font-family-serif);
+    max-width: 60ch;
   }
 
   a,
@@ -76,14 +81,32 @@
   p {
     color: var(--text-color);
     font-family: inherit;
+    font-size: inherit;
     width: 100%;
     max-width: 60ch;
+    padding-bottom: 8px;
+  }
+
+  .mission-statement {
+    display: flex;
+    padding: 12px 34px;
+    font-family: inherit;
+    font-size: var(--font-size-lg);
+    max-width: 100%;
+    margin-bottom: 24px;
+  }
+
+  hr {
+    border: 0;
+    border-top: 1px solid white;
+    margin: 24px 0;
   }
 
   .title {
     font-weight: 400;
     font-family: inherit;
     padding-bottom: 1.85rem;
+    text-align: center;
   }
 
   .body {
@@ -91,6 +114,11 @@
     line-height: 160%;
   }
 
+  .body.strapline {
+    font-size: var(--font-size-lg);
+    line-height: 140%;
+  }
+
   .latest-blog-posts {
     list-style-position: inside;
   }
diff --git a/src/styles/thomaswilson.css b/src/styles/thomaswilson.css
index 8f35b99..d3518be 100644
--- a/src/styles/thomaswilson.css
+++ b/src/styles/thomaswilson.css
@@ -57,6 +57,16 @@
     --btn-text-decoration: none;
 }
 
+html {
+    font-size: 16px;
+    font-family: var(--font-family-sans);
+    line-height: var(--line-height-md);
+    color: var(--colour-scheme-text);
+    background-color: var(--colour-scheme-background, black);
+    transition: 0.3s ease;
+    transition-property: background-color, color;
+}
+
 body {
     font-family: var(--font-family-sans);
     line-height: var(--line-height-md);
@@ -103,7 +113,7 @@ body {
 
 @container (width < 500px) {
     .thomaswilson-strapline p {
-        font-size: ;
+        font-size:;
     }
 }
 
@@ -139,7 +149,7 @@ blockquote {
     margin: 0;
     color: var(--colour-scheme-text);
     padding: 4px 0;
-    letter-spacing: -1px;
+    letter-spacing: 0px;
 }
 
 blockquote {