From 20e79c01d8b95f33ddcf6280dff6f88fff4c6f5a Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 11 Apr 2025 15:21:45 +0200
Subject: [PATCH] feat: :lipstick: dynamically scale character choice page
 title fonts

---
 src/index.webc | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/index.webc b/src/index.webc
index 33b63f5..8fd479b 100644
--- a/src/index.webc
+++ b/src/index.webc
@@ -8,9 +8,10 @@
 </script>
 
 <main>
-  <h1>Welcome!</h1>
-
-  <p>Select your character:</p>
+  <header>
+    <h1>Welcome!</h1>
+    <p>Select your character:</p>
+  </header>
 
   <div class="characters">
     <card webc:for="char of characters" :href="`/${char}/`" webc:nokeep>
@@ -33,6 +34,20 @@
     padding: 1em;
   }
 
+  header {
+    text-align: center;
+
+    & h1 {
+      font-size: clamp(3.5em, 5vw, 7em);
+      margin-block: clamp(0.25em, 1.75vw, 0.375em);
+    }
+
+    & p {
+      font-size: clamp(1.25em, 1.5vw, 2.25em);
+      margin-block: clamp(0.25em, 10vw, 1em);
+    }
+  }
+
   .characters {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(17.5em, 1fr));