summaryrefslogtreecommitdiff
path: root/internal/generator/templates/shared/shared.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/shared/shared.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/shared/shared.css')
-rw-r--r--internal/generator/templates/shared/shared.css9
1 files changed, 9 insertions, 0 deletions
diff --git a/internal/generator/templates/shared/shared.css b/internal/generator/templates/shared/shared.css
index a852156..87e981e 100644
--- a/internal/generator/templates/shared/shared.css
+++ b/internal/generator/templates/shared/shared.css
@@ -13,6 +13,7 @@
.post-modal { background:rgba(0,0,0,0.55) !important; backdrop-filter:blur(6px) !important; }
#post-modal.active { display:flex !important; align-items:center; justify-content:center; }
#post-modal .modal-inner { width:fit-content; max-width:min(100%, 90vw); max-height:calc(100vh - 80px); overflow:auto; margin:0 auto !important; will-change:transform; }
+.modal-close { padding:10px 14px; min-width:44px; min-height:44px; text-align:center; }
/* Content area max-width across all themes */
.overlay { max-width:1200px; margin-left:auto; margin-right:auto; }
/* Pagination: newer + older in a footer bar (below scrollable posts, like the header) */
@@ -164,6 +165,7 @@ body.sno-wild-active #sno-wild-root { opacity:1; }
transform:translateX(-50%);
width:max-content;
max-width:min(92vw, 920px);
+ overflow:hidden;
height:auto;
padding:10px 18px;
border:1px solid var(--sno-wild-accent, rgba(255,255,255,0.8));
@@ -923,3 +925,10 @@ body.sno-vaporwave-on #sno-vaporwave-sunset { opacity:1; }
body[data-sno-theme="matrix"] .post-text img,
body[data-sno-theme="terminal"] .post-text img,
body[data-sno-theme="dos"] .post-text img { animation:sno-matrix-decode 0.8s ease-out both; }
+
+/* Mobile touch-target and padding overrides */
+@media(max-width:640px) {
+ .modal-inner { padding:20px 14px !important; }
+ .transmit-btn { padding-top:11px !important; padding-bottom:11px !important; min-height:44px !important; }
+ .page-nav a { padding-top:10px !important; padding-bottom:10px !important; min-height:44px !important; }
+}