splash scales to fill any screen via vmin

2 files changed, 14 insertions, 6 deletions

diff --git a/public/app.css b/public/app.css
index b6cebb6..603019d 100644
--- a/public/app.css
+++ b/public/app.css
@@ -146,15 +146,23 @@ html, body {
   display: grid;
   place-content: center;
   justify-items: center;
-  gap: 14px;
+  gap: 16px;
   text-align: center;
+  padding: 24px;
   background: var(--bg);
   transition: opacity .4s, visibility .4s;
+  overflow: hidden;
 }
 #splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
-#splash h1 { margin: 0; font-size: clamp(64px, 20vw, 220px); font-weight: 300; letter-spacing: .18em; }
-#splash h1 .dot { color: var(--ring); }
-#splash p { max-width: 34ch; color: var(--muted); margin: 0; font-size: 15px; line-height: 1.6; }
+#splash h1 {
+  margin: 0;
+  font-size: clamp(40px, 14vmin, 200px);
+  font-weight: 300;
+  letter-spacing: .15em;
+  line-height: 1;
+  white-space: nowrap;
+}
+#splash p { max-width: 34ch; color: var(--muted); margin: 0; font-size: clamp(14px, 2.4vmin, 18px); line-height: 1.6; }
 
 #import-state {
   position: fixed;
diff --git a/public/index.html b/public/index.html
index b3e960b..dcd66b4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="color-scheme" content="dark">
   <title>pathways</title>
-  <link rel="stylesheet" href="/app.css?v=63">
+  <link rel="stylesheet" href="/app.css?v=64">
 </head>
 <body>
   <main id="stage">
@@ -34,6 +34,6 @@
     <span id="progress-text"></span>
   </div>
   <div id="toast" role="status" aria-live="polite"></div>
-  <script src="/app.js?v=63"></script>
+  <script src="/app.js?v=64"></script>
 </body>
 </html>