summaryrefslogtreecommitdiff
path: root/internal/generator/templates/themes/synthwave/theme.css
diff options
context:
space:
mode:
authorPaul Buetow <paul@buetow.org>2026-04-26 15:42:25 +0300
committerPaul Buetow <paul@buetow.org>2026-04-26 15:42:25 +0300
commiteb91aead6f788653bfe9487f3f2934b2c6e96dde (patch)
tree980d44376b15c98eb4e4f0a7b91f06a8dcab3a45 /internal/generator/templates/themes/synthwave/theme.css
parente2e033c301c759798e15e19b97990490d95bbf59 (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/synthwave/theme.css')
-rw-r--r--internal/generator/templates/themes/synthwave/theme.css6
1 files changed, 3 insertions, 3 deletions
diff --git a/internal/generator/templates/themes/synthwave/theme.css b/internal/generator/templates/themes/synthwave/theme.css
index 0195e5f..085ca7f 100644
--- a/internal/generator/templates/themes/synthwave/theme.css
+++ b/internal/generator/templates/themes/synthwave/theme.css
@@ -1,9 +1,9 @@
:root { --pink:#ff2d78; --purple:#bf3fff; --orange:#ff6b2b; --bg:#0d0221; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Russo One','Arial Black',sans-serif; background:var(--bg);
- color:#fff; overflow:hidden; height:100vh; }
+ color:#fff; overflow:hidden; height:100vh; height:100dvh; }
#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:16px 28px; background:rgba(13,2,33,0.82); backdrop-filter:blur(10px);
border-bottom:2px solid var(--pink); display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:14px; }
@@ -52,7 +52,7 @@
box-shadow:0 0 60px rgba(255,45,120,0.35); padding:38px; }
.modal-close { float:right; background:none; border:none; color:var(--orange);
font-family:'Russo One',sans-serif; font-size:0.9rem; cursor:pointer; letter-spacing:2px; }
- @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} }
+ @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:12px 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="synthwave"] .splash-overlay {
background: linear-gradient(180deg, #2a0a3e 0%, var(--bg) 38%, #1a0630 100%);
}