From 2fed90035dbea8f1069006097f6b9e172184170c Mon Sep 17 00:00:00 2001
From: Tyler <26290074+tylersayshi@users.noreply.github.com>
Date: Sat, 22 Aug 2026 00:53:04 -0700
Subject: [PATCH] fix mobile x-overflow, dialog focus ring, and css cache
 header

---
 _headers   |  4 +++-
 index.html |  3 ++-
 style.css  | 16 ++++++++++++----
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/_headers b/_headers
index 54cad86..b75a3cb 100644
--- a/_headers
+++ b/_headers
@@ -1,4 +1,6 @@
-/*.css
+/style.css
   Cache-Control: public, max-age=0, must-revalidate
 /index.html
   Cache-Control: public, max-age=0, must-revalidate
+/
+  Cache-Control: public, max-age=0, must-revalidate
diff --git a/index.html b/index.html
index 0ed8290..e29c64a 100644
--- a/index.html
+++ b/index.html
@@ -125,7 +125,7 @@
         <span class="label">chalky.town</span>
       </a>
     </div>
-    <dialog id="email-dialog" aria-label="email address">
+    <dialog id="email-dialog" aria-label="email address" tabindex="-1">
       <button type="button" class="dialog-close" id="email-close" title="close" aria-label="close">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
           <path d="M6 6l12 12M18 6L6 18" />
@@ -164,6 +164,7 @@
       addressEl.textContent = address;
       resetCopied();
       dialog.showModal();
+      dialog.focus();
     });
 
     document.addEventListener("keydown", (event) => {
diff --git a/style.css b/style.css
index 3d32df3..7bf6b3a 100644
--- a/style.css
+++ b/style.css
@@ -91,15 +91,19 @@ body .shadow {
 }
 
 svg.logo {
- height: 60vh;
- width: 60vh;
- margin-bottom: -15vh;
- margin-top: -10vh;
+ --logo-size: min(60vh, 90vw);
+ height: var(--logo-size);
+ width: var(--logo-size);
+ max-width: 100%;
+ /* the drawing has blank space above and below; pull neighbours into it */
+ margin-top: calc(var(--logo-size) * -0.17);
+ margin-bottom: calc(var(--logo-size) * -0.25);
 }
 
 html {
  height: 100%;
  width: 100%;
+ overflow-x: clip;
 }
 
 body {
@@ -295,6 +299,10 @@ dialog#email-dialog {
  transform: rotate(-1.5deg);
 }
 
+dialog#email-dialog:focus {
+ outline: none;
+}
+
 dialog#email-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
-- 
2.51.2