From f2d0ea49c4828e6ba9a1e8d3cd1817876e45e040 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Connor=20B=C3=A4r?= <github@connorbaer.com>
Date: Sat, 28 Sep 2024 21:53:30 +0200
Subject: [PATCH] Improve typography

---
 src/components/qwixx/PlayerSheet.svelte | 27 ++++++++++++++++++++++---
 src/layouts/qwixx.css                   |  5 +++++
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/qwixx/PlayerSheet.svelte b/src/components/qwixx/PlayerSheet.svelte
index 0822117..e922ff6 100644
--- a/src/components/qwixx/PlayerSheet.svelte
+++ b/src/components/qwixx/PlayerSheet.svelte
@@ -25,7 +25,10 @@
 </script>
 
 <header>
-  <h1><span aria-hidden>🎲</span> Qwixx</h1>
+  <div class="brand">
+    <a href="/" aria-label="All games" class="logo">🎲</a>
+    <h1>Qwixx™</h1>
+  </div>
   <button on:click={reset} class="button">Reset</button>
 </header>
 
@@ -56,9 +59,27 @@
     margin-bottom: var(--layout-gutter);
   }
 
-  h1 {
+  .brand {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
     font-family: var(--font-family-display);
-    font-size: 2rem;
+    font-size: 2.25rem;
+    line-height: var(--line-height-heading);
+  }
+
+  h1 {
+    font-size: inherit;
+  }
+
+  .logo {
+    text-decoration: none;
+    transition: transform var(--transition-micro);
+  }
+
+  .logo:hover,
+  .logo:focus {
+    transform: scale(1.1);
   }
 
   .numbers {
diff --git a/src/layouts/qwixx.css b/src/layouts/qwixx.css
index 3012785..4dd3fd8 100644
--- a/src/layouts/qwixx.css
+++ b/src/layouts/qwixx.css
@@ -17,4 +17,9 @@ h2 {
   line-height: var(--line-height-heading);
   margin-bottom: 0.5rem;
   text-transform: uppercase;
+  letter-spacing: 0.2px;
+}
+
+.button {
+  font-weight: var(--font-weight-ui-bold);
 }