overnight loop item (c): mobile polish — kill 320-720px horizontal overflow (min-width:0, wrap long email, responsive logo, overflow-x guard)

ba4101767e9c34bebf083d96e01f12560c3fa5ba · 2026-06-29 18:06:13 -0700 · Steve

Files touched

M public/styles.css

Diff

commit ba4101767e9c34bebf083d96e01f12560c3fa5ba
Author: Steve <steve@designerwallcoverings.com>
Date:   Mon Jun 29 18:06:13 2026 -0700

    overnight loop item (c): mobile polish — kill 320-720px horizontal overflow (min-width:0, wrap long email, responsive logo, overflow-x guard)
---
 public/styles.css | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/public/styles.css b/public/styles.css
index bd2a8b7..54d2119 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -10,6 +10,7 @@
 }
 * { margin: 0; padding: 0; box-sizing: border-box; }
 html { scroll-behavior: smooth; }
+body { overflow-x: hidden; }   /* brutalist negative-margins safety guard */
 body {
   background: var(--paper);
   color: var(--ink);
@@ -29,10 +30,11 @@ a { color: inherit; }
   border-bottom: var(--bord);
 }
 .logo {
-  font-size: 28px; letter-spacing: -1px; text-transform: uppercase;
-  background: var(--ink); color: var(--paper); padding: 6px 12px;
+  font-size: clamp(18px, 5.5vw, 28px); letter-spacing: -1px; text-transform: uppercase;
+  background: var(--ink); color: var(--paper); padding: 6px 12px; white-space: nowrap;
   text-decoration: none;
 }
+.topbar { gap: 10px; }
 .logo:hover { background: var(--accent2); color: var(--ink); }
 .hamburger {
   width: 54px; height: 46px; background: var(--accent); border: var(--bord);
@@ -100,10 +102,13 @@ section { padding: 70px 24px; border-bottom: var(--bord); }
 
 /* contact */
 .contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
-@media (max-width: 720px) { .contact-wrap { grid-template-columns: 1fr; } }
-.contact-info, .contact-form { border: var(--bord); padding: 28px; margin: -2.5px 0 0 -2.5px; }
+.contact-info, .contact-form { border: var(--bord); padding: 28px; margin: -2.5px 0 0 -2.5px; min-width: 0; }
+@media (max-width: 720px) {
+  .contact-wrap { grid-template-columns: 1fr; }
+  .contact-info, .contact-form { margin-left: 0; }   /* no negative pull when stacked */
+}
 .contact-info dt { font-family: "SF Mono", monospace; color: var(--accent2); text-transform: uppercase; font-size: 13px; letter-spacing: 1px; margin-top: 16px; }
-.contact-info dd { font-size: 20px; }
+.contact-info dd { font-size: 20px; overflow-wrap: anywhere; word-break: break-word; }
 .contact-form label { display: block; font-family: "SF Mono", monospace; font-size: 13px; text-transform: uppercase; margin: 14px 0 4px; }
 .contact-form input, .contact-form textarea {
   width: 100%; border: var(--bord); padding: 12px; font-family: inherit; font-weight: 700; font-size: 16px; background: #fff; }

← 9085abc loop ledger: item (b) done + deployed · back to Robet Site · loop ledger: item (c) done + deployed 5d4d51b →