From 328dae525355a57a530e602a0eadd6d7eabd5cb9 Mon Sep 17 00:00:00 2001 From: multipleof4 Date: Fri, 27 Mar 2026 17:39:30 -0700 Subject: [PATCH] Fix: mobile viewport + spacing + overflow Co-authored-by: gpt-5.3-codex --- index.html | 108 +++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 75 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index 47a21d0..a4ec435 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + Zero Width Unicode Standard @@ -11,36 +11,55 @@ box-sizing: border-box; -webkit-tap-highlight-color: transparent; } - body, html { + + html, body { margin: 0; padding: 0; width: 100%; - height: 100%; - overflow: hidden; + min-height: 100%; background-color: #ffffff; color: #000000; font-family: 'Inter', sans-serif; + } + + body { + -webkit-text-size-adjust: 100%; + } + + .page { + min-height: 100vh; + min-height: 100svh; + min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; + overflow-x: hidden; + overflow-y: auto; + padding: + max(16px, env(safe-area-inset-top)) + 16px + max(20px, env(safe-area-inset-bottom)); } + h1 { - font-size: 2.5rem; + font-size: clamp(2rem, 8vw, 2.6rem); font-weight: 900; line-height: 1.1; - margin: 0 0 2.5rem 0; - padding: 0 1.5rem; + margin: 0 0 2.2rem 0; + padding: 0 1rem; max-width: 600px; } + .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; - width: 340px; - margin-bottom: 2.5rem; + width: min(100%, 340px); + margin-bottom: 2.2rem; } + .grid a { display: inline-flex; align-items: center; @@ -51,41 +70,52 @@ font-size: 0.95rem; padding: 0.85rem 1rem; border-radius: 9999px; - transition: transform 0.1s ease, opacity 0.15s ease; + transition: transform 0.1s ease, opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease; white-space: nowrap; } + .grid a:active { transform: scale(0.95); } + .grid a img { width: 20px; height: 20px; + object-fit: contain; + flex: 0 0 20px; } + .filled { color: #ffffff; background-color: #000000; } + .filled.rust { background-color: #ce412b; } + .filled .logo-invert { filter: invert(1); } + .outlined { color: #000000; background-color: transparent; border: 2px solid #000000; } + .outlined:hover { background-color: #000000; color: #ffffff; } + .divider { grid-column: 1 / -1; height: 1px; background: #e0e0e0; margin: 0.25rem 0; } + .playground { display: flex; flex-direction: column; @@ -94,15 +124,19 @@ font-size: 0.95rem; color: #666; } + .playground img { width: 36px; height: 36px; margin-bottom: 0.6rem; border-radius: 8px; + display: block; } + .playground p { margin: 0; } + .playground a { color: #000000; font-weight: 700; @@ -110,39 +144,47 @@ text-underline-offset: 4px; } + /* Keep desktop centered, but on phones move content upward naturally */ + @media (max-width: 768px) { + .page { + justify-content: flex-start; + padding-top: max(48px, env(safe-area-inset-top)); + } + } + @media (max-width: 380px) { h1 { font-size: 2rem; } - .grid { width: 290px; } + .grid { width: min(100%, 290px); } .grid a { font-size: 0.8rem; padding: 0.7rem 0.6rem; } } +
+

Zero Width Unicode Standard

-

Zero Width Unicode Standard

+
+ + npm npm + + + Cargo crates.io + -
- - npm npm - - - Cargo crates.io - +
-
- - - Firefox Firefox Add-on - - - Chrome Chrome Extension - -
- -
- inØsight logo -

playground: inzerosight.pages.dev

-
+ + Firefox Firefox Add-on + + + Chrome Chrome Extension + +
+
+ inØsight logo +

playground: inzerosight.pages.dev

+
+