splash scales to fill any screen via vmin

1 files changed, 12 insertions, 4 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;