diff options
| author | Paul Buetow <paul@buetow.org> | 2026-04-26 15:42:25 +0300 |
|---|---|---|
| committer | Paul Buetow <paul@buetow.org> | 2026-04-26 15:42:25 +0300 |
| commit | eb91aead6f788653bfe9487f3f2934b2c6e96dde (patch) | |
| tree | 980d44376b15c98eb4e4f0a7b91f06a8dcab3a45 /internal/generator/templates/themes/terminal/theme.css | |
| parent | e2e033c301c759798e15e19b97990490d95bbf59 (diff) | |
fix: mobile UX across all 19 themes
Audit found universal mobile issues in every theme + shared CSS:
- body/overlay height:100vh had no 100dvh dynamic-viewport fallback on any theme
- @media(max-width:640px) was too minimal; 3 themes had no .content/.modal-inner reduction
- .modal-close buttons had zero padding → tap target well below 44×44px
- .transmit-btn and .page-nav a vertical height too small on most themes
Fixes applied:
Go/CSS common (shared.css):
- Add .modal-close padding + min 44×44px touch target
- Add overflow:hidden to #sno-wild-banner to prevent wild-mode banner overflow
- Add mobile @media override block with !important for .modal-inner padding,
.transmit-btn, and .page-nav a min-height to guarantee 44px touch targets
All 19 themes:
- Add height:100dvh fallback after height:100vh on body and .overlay
- Expand @media(max-width:640px) with missing .content/.modal-inner padding,
.transmit-btn min-height, and .modal-close touch-target padding where absent
Specific themes:
- DOS: enlarge .transmit-btn base padding from 4px to 8px
- Spaceage: bump .post-text from 0.86rem (~13.8px) to 0.9rem (~14.4px)
- Brutalist / Retrofuture / Synthwave: these previously had no .content or
.modal-inner reduction in their media queries; now filled in
Diffstat (limited to 'internal/generator/templates/themes/terminal/theme.css')
| -rw-r--r-- | internal/generator/templates/themes/terminal/theme.css | 6 |
1 files changed, 3 insertions, 3 deletions
diff --git a/internal/generator/templates/themes/terminal/theme.css b/internal/generator/templates/themes/terminal/theme.css index afd4489..7db2daf 100644 --- a/internal/generator/templates/themes/terminal/theme.css +++ b/internal/generator/templates/themes/terminal/theme.css @@ -1,7 +1,7 @@ :root { --p:#33ff33; --dim:#1a7a1a; --bg:#0a0a0a; --bg2:#050505; } * { margin:0; padding:0; box-sizing:border-box; } body { font-family:'Courier New',Courier,monospace; background:var(--bg); color:var(--p); - overflow:hidden; height:100vh; position:relative; } + overflow:hidden; height:100vh; height:100dvh; position:relative; } /* CRT scanlines sit above the WebGL canvas */ body::before { content:''; position:fixed; inset:0; z-index:999; pointer-events:none; background:repeating-linear-gradient(0deg,transparent,transparent 2px, @@ -11,7 +11,7 @@ body { animation:flicker 9s infinite; } /* WebGL background canvas — fills the viewport behind everything */ #three-canvas { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1; } - .overlay { position:relative; z-index:10; height:100vh; display:flex; flex-direction:column; } + .overlay { position:relative; z-index:10; height:100vh; height:100dvh; display:flex; flex-direction:column; } header { padding:12px 24px; background:var(--bg2); border-bottom:2px solid var(--p); display:flex; align-items:center; justify-content:space-between; } .logo { display:flex; align-items:center; gap:14px; } @@ -58,7 +58,7 @@ box-shadow:0 0 40px rgba(51,255,51,0.25); padding:36px; } .modal-close { float:right; background:none; border:none; color:var(--p); font-family:monospace; font-size:0.9rem; cursor:pointer; letter-spacing:2px; } - @media(max-width:640px) { .nav-hints{display:none;} header{padding:10px 16px;} .content{padding:12px 16px;} } + @media(max-width:640px) { .nav-hints{display:none;} header{padding:10px 16px;} .content{padding:12px 16px;} .modal-inner{padding:20px 14px} .transmit-btn{padding-top:11px;padding-bottom:11px;min-height:44px} .modal-close{padding:10px 14px;min-width:44px;min-height:44px;text-align:center} } [data-sno-theme="terminal"] .splash-overlay { background: var(--bg); font-family:'Courier New',monospace; } [data-sno-theme="terminal"] .splash-prompt { text-align:left; font-size:0.9rem; color:rgba(51,255,51,0.78); margin-bottom:0.5rem; } [data-sno-theme="terminal"] .splash-title { font-size:clamp(1.2rem,4vw,1.65rem); color:var(--p); |
