Improve typography

connor-baer · Sep 28, 2024 · f2d0ea4 · f2d0ea4
1 parent de85a35
commit f2d0ea4
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git 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
@@ -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);
 }