summaryrefslogtreecommitdiff
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
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
-rw-r--r--internal/generator/templates/shared/shared.css9
-rw-r--r--internal/generator/templates/themes/aurora/theme.css6
-rw-r--r--internal/generator/templates/themes/biomech/theme.css6
-rw-r--r--internal/generator/templates/themes/brutalist/theme.css6
-rw-r--r--internal/generator/templates/themes/cathedral/theme.css6
-rw-r--r--internal/generator/templates/themes/cosmos/theme.css6
-rw-r--r--internal/generator/templates/themes/dos/theme.css8
-rw-r--r--internal/generator/templates/themes/matrix/theme.css6
-rw-r--r--internal/generator/templates/themes/neon/theme.css6
-rw-r--r--internal/generator/templates/themes/noir/theme.css6
-rw-r--r--internal/generator/templates/themes/ocean/theme.css6
-rw-r--r--internal/generator/templates/themes/plasma/theme.css6
-rw-r--r--internal/generator/templates/themes/retro/theme.css6
-rw-r--r--internal/generator/templates/themes/retrofuture/theme.css6
-rw-r--r--internal/generator/templates/themes/spaceage/theme.css8
-rw-r--r--internal/generator/templates/themes/surveillance/theme.css6
-rw-r--r--internal/generator/templates/themes/synthwave/theme.css6
-rw-r--r--internal/generator/templates/themes/terminal/theme.css6
-rw-r--r--internal/generator/templates/themes/tropicale/theme.css6
-rw-r--r--internal/generator/templates/themes/volcano/theme.css6
20 files changed, 68 insertions, 59 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; }
+}
diff --git a/internal/generator/templates/themes/aurora/theme.css b/internal/generator/templates/themes/aurora/theme.css
index 325624c..96e4690 100644
--- a/internal/generator/templates/themes/aurora/theme.css
+++ b/internal/generator/templates/themes/aurora/theme.css
@@ -1,9 +1,9 @@
:root { --green:#00ffb3; --teal:#00cfe8; --purple:#c084fc; --navy:#050d1a; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',system-ui,sans-serif; background:var(--navy);
- color:#e0f8f0; overflow:hidden; height:100vh; }
+ color:#e0f8f0; 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(5,13,26,0.78); backdrop-filter:blur(14px);
border-bottom:1px solid rgba(0,255,179,0.25); display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:14px; }
@@ -53,7 +53,7 @@
box-shadow:0 0 60px rgba(0,255,179,0.25); padding:40px; }
.modal-close { float:right; background:none; border:none; color:var(--teal);
font-size:0.9rem; cursor:pointer; letter-spacing:1px; }
- @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} }
+ @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} .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="aurora"] .splash-overlay {
background: radial-gradient(ellipse 120% 80% at 50% 120%, rgba(0,207,232,0.12) 0%, transparent 45%),
radial-gradient(ellipse 90% 60% at 20% 20%, rgba(192,132,252,0.08) 0%, transparent 50%),
diff --git a/internal/generator/templates/themes/biomech/theme.css b/internal/generator/templates/themes/biomech/theme.css
index d43ee0b..6487149 100644
--- a/internal/generator/templates/themes/biomech/theme.css
+++ b/internal/generator/templates/themes/biomech/theme.css
@@ -1,8 +1,8 @@
:root { --bone:#d0c7bb; --flesh:#803f5d; --vein:#f55b7d; --acid:#93ffd8; --steel:#2d3642; --bg:#09070d; }
* { margin:0; padding:0; box-sizing:border-box; }
- body { font-family:'Oxanium',system-ui,sans-serif; background:var(--bg); color:var(--bone); overflow:hidden; height:100vh; }
+ body { font-family:'Oxanium',system-ui,sans-serif; background:var(--bg); color:var(--bone); overflow:hidden; height:100vh; height:100dvh; }
#three-canvas { position:fixed; inset: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 26px; background:rgba(9,7,13,0.84); backdrop-filter:blur(10px); border-bottom:1px solid rgba(147,255,216,0.16); display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:14px; }
.logo-mark { font-size:1.8rem; color:var(--acid); text-shadow:0 0 18px rgba(147,255,216,0.24); }
@@ -36,7 +36,7 @@
.post-modal.active { display:block; }
.modal-inner { max-width:760px; margin:0 auto; background:rgba(11,9,16,0.98); border:1px solid rgba(147,255,216,0.18); padding:34px; box-shadow:0 22px 76px rgba(0,0,0,0.72); }
.modal-close { float:right; background:none; border:none; color:var(--acid); font-family:'IBM Plex Mono',monospace; font-size:0.78rem; cursor:pointer; letter-spacing:0.18em; }
- @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 16px;} .content{padding:14px 16px;} .modal-inner{padding:24px 16px;} }
+ @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 16px;} .content{padding:14px 16px;} .modal-inner{padding:24px 16px;} .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="biomech"] .splash-overlay {
background:
radial-gradient(circle at 50% 22%, rgba(245,91,125,0.14) 0%, transparent 28%),
diff --git a/internal/generator/templates/themes/brutalist/theme.css b/internal/generator/templates/themes/brutalist/theme.css
index 4c8dac5..a6e75a3 100644
--- a/internal/generator/templates/themes/brutalist/theme.css
+++ b/internal/generator/templates/themes/brutalist/theme.css
@@ -1,9 +1,9 @@
:root { --red:#ff2200; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:Impact,'Arial Narrow',Arial,sans-serif;
- background:#000; color:#fff; overflow:hidden; height:100vh; }
+ background:#000; color:#fff; overflow:hidden; height:100vh; height:100dvh; }
#three-canvas { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1; }
- .overlay { height:100vh; display:flex; flex-direction:column; position:relative; z-index:10; }
+ .overlay { height:100vh; height:100dvh; display:flex; flex-direction:column; position:relative; z-index:10; }
header { padding:14px 24px; background:#000; border-bottom:4px solid #fff;
display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:16px; }
@@ -52,7 +52,7 @@
box-shadow:8px 8px 0 var(--red); }
.modal-close { float:right; background:none; border:none; color:var(--red);
font-family:Impact; font-size:1.3rem; cursor:pointer; letter-spacing:2px; }
- @media(max-width:640px) { .nav-hints{display:none;} header{padding:10px 16px;} .logo-mark{font-size:2rem;} }
+ @media(max-width:640px) { .nav-hints{display:none;} header{padding:10px 16px;} .logo-mark{font-size:2rem;} .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="brutalist"] .splash-overlay { background:#000; }
[data-sno-theme="brutalist"] .splash-frame {
border:6px solid #fff; padding:clamp(1.5rem,5vw,2.5rem) clamp(1.25rem,4vw,2rem);
diff --git a/internal/generator/templates/themes/cathedral/theme.css b/internal/generator/templates/themes/cathedral/theme.css
index 5dc6456..c50b4ff 100644
--- a/internal/generator/templates/themes/cathedral/theme.css
+++ b/internal/generator/templates/themes/cathedral/theme.css
@@ -1,13 +1,13 @@
:root { --gold:#e0c47f; --violet:#6f4fae; --ruby:#8e2f49; --glass:#7bc2ff; --stone:#110f16; --chalk:#f0e8d9; }
* { margin:0; padding:0; box-sizing:border-box; }
- body { font-family:'Spectral',serif; background:#0f0d14; color:var(--chalk); overflow:hidden; height:100vh; }
+ body { font-family:'Spectral',serif; background:#0f0d14; color:var(--chalk); overflow:hidden; height:100vh; height:100dvh; }
body::before { content:''; position:fixed; inset:0; z-index:998; pointer-events:none;
background:
radial-gradient(circle at 50% 4%, rgba(224,196,127,0.1) 0%, transparent 24%),
linear-gradient(90deg, rgba(123,194,255,0.05), transparent 18%, transparent 82%, rgba(142,47,73,0.06));
mix-blend-mode:screen; opacity:0.8; }
#three-canvas { position:fixed; inset: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(11,10,16,0.84); backdrop-filter:blur(10px); border-bottom:1px solid rgba(224,196,127,0.18); display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:14px; }
.logo-mark { font-family:'Cinzel',serif; font-size:1.9rem; color:var(--gold); text-shadow:0 0 14px rgba(224,196,127,0.22); }
@@ -49,7 +49,7 @@
.post-modal.active { display:block; }
.modal-inner { max-width:800px; margin:0 auto; background:rgba(15,11,18,0.98); border:1px solid rgba(224,196,127,0.2); padding:38px; box-shadow:0 28px 84px rgba(0,0,0,0.72); }
.modal-close { float:right; background:none; border:none; color:var(--gold); font-family:'Cinzel',serif; font-size:0.8rem; cursor:pointer; letter-spacing:0.14em; }
- @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 16px;} .content{padding:14px 16px;} .modal-inner{padding:24px 16px;} }
+ @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 16px;} .content{padding:14px 16px;} .modal-inner{padding:24px 16px;} .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="cathedral"] .splash-overlay {
background:
radial-gradient(circle at 50% 18%, rgba(224,196,127,0.18) 0%, transparent 30%),
diff --git a/internal/generator/templates/themes/cosmos/theme.css b/internal/generator/templates/themes/cosmos/theme.css
index eff1267..4d67e3e 100644
--- a/internal/generator/templates/themes/cosmos/theme.css
+++ b/internal/generator/templates/themes/cosmos/theme.css
@@ -1,9 +1,9 @@
:root { --gold:#ffd166; --purple:#9b5de5; --blue:#4cc9f0; --bg:#020214; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',system-ui,sans-serif; background:var(--bg);
- color:#d4e8ff; overflow:hidden; height:100vh; }
+ color:#d4e8ff; 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(2,2,20,0.78); backdrop-filter:blur(14px);
border-bottom:1px solid rgba(255,209,102,0.2); display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:14px; }
@@ -53,7 +53,7 @@
box-shadow:0 0 60px rgba(255,209,102,0.25); padding:40px; backdrop-filter:blur(16px); }
.modal-close { float:right; background:none; border:none; color:var(--gold);
font-size:0.9rem; cursor:pointer; letter-spacing:1px; }
- @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} }
+ @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} .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="cosmos"] .splash-overlay { background: radial-gradient(ellipse 100% 80% at 50% 100%, rgba(155,93,229,0.2) 0%, transparent 55%), var(--bg); }
[data-sno-theme="cosmos"] .splash-stars {
position:absolute; inset:0; pointer-events:none; opacity:0.5;
diff --git a/internal/generator/templates/themes/dos/theme.css b/internal/generator/templates/themes/dos/theme.css
index ee06438..4d33a88 100644
--- a/internal/generator/templates/themes/dos/theme.css
+++ b/internal/generator/templates/themes/dos/theme.css
@@ -3,9 +3,9 @@
--dos-red:#ff5555; --dos-bg:#000088; --dos-black:#000000; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'VT323','Courier New',monospace; background:var(--dos-blue);
- color:var(--dos-bwhite); overflow:hidden; height:100vh; font-size:18px; }
+ color:var(--dos-bwhite); overflow:hidden; height:100vh; height:100dvh; font-size:18px; }
#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:8px 20px; background:var(--dos-white); color:var(--dos-blue);
display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:12px; }
@@ -14,7 +14,7 @@
.logo-title .subtitle { font-size:0.85rem; color:var(--dos-blue); margin-top:1px; }
.logo-title .subtitle a { color:var(--dos-blue); text-decoration:underline; }
.logo-title .subtitle a:hover { color:var(--dos-black); }
- .transmit-btn { border:2px solid var(--dos-blue); color:var(--dos-blue); padding:4px 14px;
+ .transmit-btn { border:2px solid var(--dos-blue); color:var(--dos-blue); padding:8px 14px;
text-decoration:none; font-size:1rem; letter-spacing:1px;
transition:all 0.1s; }
.transmit-btn:hover { background:var(--dos-blue); color:var(--dos-bwhite); }
@@ -62,7 +62,7 @@
font-size:1rem; cursor:pointer; padding:2px 8px; }
.modal-close:hover { background:var(--dos-blue); color:var(--dos-bwhite);
border-style:inset; }
- @media(max-width:640px) { .nav-hints{display:none;} header{padding:6px 12px;} .content{padding:8px 12px;} }
+ @media(max-width:640px) { .nav-hints{display:none;} header{padding:6px 12px;} .content{padding:8px 12px;} .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="dos"] .splash-overlay { background:var(--dos-blue); font-family:'VT323','Courier New',monospace; }
[data-sno-theme="dos"] .splash-inner { position:relative; z-index:1; }
[data-sno-theme="dos"] .splash-title {
diff --git a/internal/generator/templates/themes/matrix/theme.css b/internal/generator/templates/themes/matrix/theme.css
index 8254d45..ca68acd 100644
--- a/internal/generator/templates/themes/matrix/theme.css
+++ b/internal/generator/templates/themes/matrix/theme.css
@@ -1,7 +1,7 @@
:root { --g:#00ff41; --g2:#008f11; --g3:#003b00; --bg:#000; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Courier New',Courier,monospace; background:var(--bg); color:var(--g);
- overflow:hidden; height:100vh; }
+ overflow:hidden; height:100vh; height:100dvh; }
/* scanline overlay sits above WebGL */
body::before { content:''; position:fixed; inset:0; z-index:999; pointer-events:none;
background:repeating-linear-gradient(0deg,transparent,transparent 3px,
@@ -9,7 +9,7 @@
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
/* WebGL background canvas */
#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:#000; border-bottom:1px solid var(--g2);
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(0,255,65,0.25); }
.modal-close { float:right; background:none; border:none; color:var(--g2);
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:10px 16px;} }
+ @media(max-width:640px) { .nav-hints{display:none;} header{padding:10px 16px;} .content{padding:10px 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="matrix"] .splash-overlay { background: #000; font-family:'Courier New',monospace; }
[data-sno-theme="matrix"] .splash-rain {
position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:0.35; z-index:1;
diff --git a/internal/generator/templates/themes/neon/theme.css b/internal/generator/templates/themes/neon/theme.css
index 1db90e8..cd57dab 100644
--- a/internal/generator/templates/themes/neon/theme.css
+++ b/internal/generator/templates/themes/neon/theme.css
@@ -1,9 +1,9 @@
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap');
:root { --neon-cyan:#00f5ff; --neon-magenta:#ff00cc; --neon-yellow:#ffe700; }
* { margin:0; padding:0; box-sizing:border-box; }
- body { font-family:'Orbitron',sans-serif; background:#0b001a; color:#e0f8ff; overflow:hidden; height:100vh; }
+ body { font-family:'Orbitron',sans-serif; background:#0b001a; color:#e0f8ff; 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 30px; display:flex; align-items:center; justify-content:space-between;
background:rgba(11,0,26,0.8); backdrop-filter:blur(12px);
border-bottom:2px solid rgba(255,231,0,0.3); }
@@ -68,7 +68,7 @@
.logo-title h1 { font-size:1.6rem; } #sn-logo { width:44px; height:44px; }
.post { padding:22px; margin-bottom:22px; } .content { padding:20px; }
header { padding:14px 20px; } .transmit-btn { padding:9px 16px; font-size:0.8rem; }
- .nav-hints { display:none; } .modal-inner { padding:24px 16px; }
+ .nav-hints { display:none; } .modal-inner { padding:24px 16px; } .modal-close{padding:10px 14px;min-width:44px;min-height:44px;text-align:center}
}
[data-sno-theme="neon"] .splash-overlay {
background: radial-gradient(ellipse 120% 80% at 50% 35%, rgba(0,245,255,0.14) 0%, transparent 55%),
diff --git a/internal/generator/templates/themes/noir/theme.css b/internal/generator/templates/themes/noir/theme.css
index 6fe8cdd..a6d9e07 100644
--- a/internal/generator/templates/themes/noir/theme.css
+++ b/internal/generator/templates/themes/noir/theme.css
@@ -1,6 +1,6 @@
:root { --fog:#0b0b0b; --ink:#d8d1c4; --silver:#a4a09a; --street:#161616; --lamp:#f0ead6; --blood:#a9372b; }
* { margin:0; padding:0; box-sizing:border-box; }
- body { font-family:'IBM Plex Mono','Courier New',monospace; background:#050505; color:var(--ink); overflow:hidden; height:100vh; }
+ body { font-family:'IBM Plex Mono','Courier New',monospace; background:#050505; color:var(--ink); overflow:hidden; height:100vh; height:100dvh; }
body::before { content:''; position:fixed; inset:0; z-index:999; pointer-events:none;
background:
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), transparent 60%),
@@ -12,7 +12,7 @@
radial-gradient(circle at 50% 110%, rgba(255,255,255,0.06) 0%, transparent 35%);
mix-blend-mode:screen; opacity:0.42; }
#three-canvas { position:fixed; inset: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 26px; background:rgba(5,5,5,0.82); backdrop-filter:blur(10px);
border-bottom:1px solid rgba(240,234,214,0.16); display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:14px; }
@@ -55,7 +55,7 @@
.modal-inner { max-width:760px; margin:0 auto; background:rgba(10,10,10,0.98); border:1px solid rgba(240,234,214,0.22);
padding:38px; box-shadow:0 28px 80px rgba(0,0,0,0.72); }
.modal-close { float:right; background:none; border:none; color:var(--lamp); font-family:'IBM Plex Mono',monospace; font-size:0.82rem; cursor:pointer; letter-spacing:0.2em; }
- @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 16px;} .content{padding:14px 16px;} .modal-inner{padding:24px 16px;} }
+ @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 16px;} .content{padding:14px 16px;} .modal-inner{padding:24px 16px;} .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="noir"] .splash-overlay {
background:
radial-gradient(ellipse 40% 65% at 52% 24%, rgba(240,234,214,0.2) 0%, rgba(240,234,214,0.06) 26%, transparent 58%),
diff --git a/internal/generator/templates/themes/ocean/theme.css b/internal/generator/templates/themes/ocean/theme.css
index 4a6e582..d5dd99d 100644
--- a/internal/generator/templates/themes/ocean/theme.css
+++ b/internal/generator/templates/themes/ocean/theme.css
@@ -1,9 +1,9 @@
:root { --teal:#00b4d8; --aqua:#48cae4; --deep:#023e8a; --navy:#03045e; --foam:#caf0f8; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',system-ui,sans-serif; background:var(--navy);
- color:var(--foam); overflow:hidden; height:100vh; }
+ color:var(--foam); 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(3,4,94,0.82); backdrop-filter:blur(12px);
border-bottom:1px solid rgba(0,180,216,0.3); display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:14px; }
@@ -51,7 +51,7 @@
box-shadow:0 0 60px rgba(0,180,216,0.3); padding:40px; }
.modal-close { float:right; background:none; border:none; color:var(--teal);
font-size:0.9rem; cursor:pointer; letter-spacing:1px; }
- @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} }
+ @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} .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="ocean"] .splash-overlay {
background: linear-gradient(180deg, var(--navy) 0%, var(--deep) 45%, #001a3d 100%);
}
diff --git a/internal/generator/templates/themes/plasma/theme.css b/internal/generator/templates/themes/plasma/theme.css
index cc36513..f0a4073 100644
--- a/internal/generator/templates/themes/plasma/theme.css
+++ b/internal/generator/templates/themes/plasma/theme.css
@@ -1,9 +1,9 @@
:root { --cyan:#00f0ff; --magenta:#ff00e0; --yellow:#ffee00; --bg:#050008; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',system-ui,sans-serif; background:var(--bg);
- color:#e8e0ff; overflow:hidden; height:100vh; }
+ color:#e8e0ff; 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(5,0,8,0.8); backdrop-filter:blur(14px);
border-bottom:1px solid rgba(0,240,255,0.2); display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:14px; }
@@ -54,7 +54,7 @@
box-shadow:0 0 60px rgba(255,0,224,0.25); padding:40px; }
.modal-close { float:right; background:none; border:none; color:var(--cyan);
font-size:0.9rem; cursor:pointer; letter-spacing:1px; }
- @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} }
+ @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} .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="plasma"] .splash-overlay { background: var(--bg); overflow:hidden; }
[data-sno-theme="plasma"] .splash-blobs {
position:absolute; width:140%; height:140%; left:-20%; top:-20%; pointer-events:none;
diff --git a/internal/generator/templates/themes/retro/theme.css b/internal/generator/templates/themes/retro/theme.css
index cf0e235..217ea4b 100644
--- a/internal/generator/templates/themes/retro/theme.css
+++ b/internal/generator/templates/themes/retro/theme.css
@@ -1,7 +1,7 @@
:root { --amber:#ffb000; --dim:#7a5200; --bg:#0a0800; --bg2:#050300; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Courier New',Courier,monospace; background:var(--bg); color:var(--amber);
- overflow:hidden; height:100vh; }
+ overflow:hidden; height:100vh; height:100dvh; }
/* Phosphor scanlines overlay — sits above WebGL */
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:amber-flicker 11s infinite; }
/* WebGL background canvas */
#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(--amber);
display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:14px; }
@@ -61,7 +61,7 @@
box-shadow:0 0 40px rgba(255,176,0,0.2); }
.modal-close { float:right; background:none; border:none; color:var(--dim);
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:10px 16px;} }
+ @media(max-width:640px) { .nav-hints{display:none;} header{padding:10px 16px;} .content{padding:10px 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="retro"] .splash-overlay { background: var(--bg); font-family:'Courier New',monospace; }
[data-sno-theme="retro"]::after {
content:''; position:absolute; inset:0; pointer-events:none; opacity:0.35;
diff --git a/internal/generator/templates/themes/retrofuture/theme.css b/internal/generator/templates/themes/retrofuture/theme.css
index 6cc010f..7328391 100644
--- a/internal/generator/templates/themes/retrofuture/theme.css
+++ b/internal/generator/templates/themes/retrofuture/theme.css
@@ -1,9 +1,9 @@
:root { --pink:#ff6b9d; --purple:#00d9c0; --orange:#ff8c42; --bg:#0a0121; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Share Tech Mono',monospace; background:var(--bg);
- color:#f0efe4; overflow:hidden; height:100vh; }
+ color:#f0efe4; 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(10,1,33,0.85); backdrop-filter:blur(12px);
border-bottom:2px solid var(--pink); display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:14px; }
@@ -56,7 +56,7 @@
box-shadow:0 0 60px rgba(255,107,157,0.25); padding:38px; }
.modal-close { float:right; background:none; border:none; color:var(--orange);
font-family:'Orbitron',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="retrofuture"] .splash-overlay {
background: radial-gradient(ellipse at 50% 60%, #1a0840 0%, var(--bg) 55%, #050010 100%);
}
diff --git a/internal/generator/templates/themes/spaceage/theme.css b/internal/generator/templates/themes/spaceage/theme.css
index b659f55..df3f486 100644
--- a/internal/generator/templates/themes/spaceage/theme.css
+++ b/internal/generator/templates/themes/spaceage/theme.css
@@ -1,13 +1,13 @@
:root { --teal:#00e8e8; --dim:#1a4455; --red:#ff3320; --silver:#c8d8e0; --bg:#030a0f; --bg2:#020608; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Space Mono','Courier New',monospace; background:var(--bg); color:var(--silver);
- overflow:hidden; height:100vh; }
+ overflow:hidden; height:100vh; height:100dvh; }
/* Subtle horizontal scanlines — lighter than retro, cleaner space feel */
body::before { content:''; position:fixed; inset:0; z-index:999; pointer-events:none;
background:repeating-linear-gradient(0deg,transparent,transparent 3px,
rgba(0,0,0,0.08) 3px,rgba(0,0,0,0.08) 4px); }
#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:rgba(2,6,8,0.88); backdrop-filter:blur(8px);
border-bottom:2px solid var(--teal);
display:flex; align-items:center; justify-content:space-between; }
@@ -51,7 +51,7 @@
box-shadow:0 0 18px rgba(0,232,232,0.28),inset 3px 0 0 var(--teal) !important; }
.post-header { display:flex; justify-content:space-between; margin-bottom:10px; font-size:0.82rem; }
.post-time { color:var(--dim); font-size:0.75rem; letter-spacing:1px; }
- .post-text { line-height:1.65; font-size:0.86rem; color:var(--silver); }
+ .post-text { line-height:1.65; font-size:0.9rem; color:var(--silver); }
.post-text a { color:var(--teal); text-decoration:underline; }
.post-image { max-width:100%; margin-top:10px; border:1px solid var(--dim);
filter:saturate(0.85) brightness(0.92); }
@@ -64,7 +64,7 @@
box-shadow:0 0 50px rgba(0,232,232,0.18); }
.modal-close { float:right; background:none; border:none; color:var(--dim);
font-family:'Space Mono',monospace; font-size:0.85rem; cursor:pointer; letter-spacing:3px; }
- @media(max-width:640px) { .nav-hints{display:none;} header{padding:10px 16px;} .content{padding:10px 16px;} }
+ @media(max-width:640px) { .nav-hints{display:none;} header{padding:10px 16px;} .content{padding:10px 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} }
/* Splash screen: space age orbital */
[data-sno-theme="spaceage"] .splash-overlay { background:var(--bg); }
[data-sno-theme="spaceage"] .splash-inner { position:relative; z-index:1; }
diff --git a/internal/generator/templates/themes/surveillance/theme.css b/internal/generator/templates/themes/surveillance/theme.css
index cd54913..4a9b33a 100644
--- a/internal/generator/templates/themes/surveillance/theme.css
+++ b/internal/generator/templates/themes/surveillance/theme.css
@@ -1,9 +1,9 @@
:root { --phosphor:#bcffd4; --green:#63f3a8; --grey:#88a197; --alert:#ff4d5c; --bg:#09100d; --panel:#101916; }
* { margin:0; padding:0; box-sizing:border-box; }
- body { font-family:'Share Tech Mono','Courier New',monospace; background:var(--bg); color:var(--phosphor); overflow:hidden; height:100vh; }
+ body { font-family:'Share Tech Mono','Courier New',monospace; background:var(--bg); color:var(--phosphor); overflow:hidden; height:100vh; height:100dvh; }
body::before { content:''; position:fixed; inset:0; z-index:999; pointer-events:none; background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(188,255,212,0.035) 2px, rgba(188,255,212,0.035) 3px); opacity:0.72; }
#three-canvas { position:fixed; inset: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:14px 24px; background:rgba(9,16,13,0.84); backdrop-filter:blur(8px); border-bottom:1px solid rgba(99,243,168,0.18); display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:14px; }
.logo-mark { font-size:1.55rem; color:var(--green); }
@@ -37,7 +37,7 @@
.post-modal.active { display:block; }
.modal-inner { max-width:760px; margin:0 auto; background:rgba(8,14,11,0.98); border:1px solid rgba(99,243,168,0.2); padding:34px; box-shadow:0 20px 72px rgba(0,0,0,0.72); }
.modal-close { float:right; background:none; border:none; color:var(--green); font-family:'Share Tech Mono',monospace; font-size:0.76rem; cursor:pointer; letter-spacing:0.2em; }
- @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 16px;} .content{padding:14px 16px;} .modal-inner{padding:24px 16px;} }
+ @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 16px;} .content{padding:14px 16px;} .modal-inner{padding:24px 16px;} .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="surveillance"] .splash-overlay {
background:
radial-gradient(circle at 50% 22%, rgba(99,243,168,0.12) 0%, transparent 34%),
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%);
}
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);
diff --git a/internal/generator/templates/themes/tropicale/theme.css b/internal/generator/templates/themes/tropicale/theme.css
index cc93504..dc77be9 100644
--- a/internal/generator/templates/themes/tropicale/theme.css
+++ b/internal/generator/templates/themes/tropicale/theme.css
@@ -1,9 +1,9 @@
:root { --sand:#e8c97a; --sky:#38c9d8; --lagoon:#0e7490; --sun:#fbbf24; --coral:#f97316; --dusk:#0a1e2e; --cream:#fef9e7; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',system-ui,sans-serif; background:var(--dusk);
- color:var(--cream); overflow:hidden; height:100vh; }
+ color:var(--cream); 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(10,30,46,0.82); backdrop-filter:blur(12px);
border-bottom:1px solid rgba(56,201,216,0.3); display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:14px; }
@@ -51,7 +51,7 @@
box-shadow:0 0 60px rgba(56,201,216,0.3); padding:40px; }
.modal-close { float:right; background:none; border:none; color:var(--sky);
font-size:0.9rem; cursor:pointer; letter-spacing:1px; }
- @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} }
+ @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} .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} }
/* Splash screen — tropical sunset gradient with radial sun glow */
[data-sno-theme="tropicale"] .splash-overlay {
background:
diff --git a/internal/generator/templates/themes/volcano/theme.css b/internal/generator/templates/themes/volcano/theme.css
index 6bf109a..83c80df 100644
--- a/internal/generator/templates/themes/volcano/theme.css
+++ b/internal/generator/templates/themes/volcano/theme.css
@@ -1,9 +1,9 @@
:root { --lava:#ff4400; --ember:#ff8c00; --hot:#ffcc00; --bg:#0d0802; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',system-ui,sans-serif; background:var(--bg);
- color:#ffe8cc; overflow:hidden; height:100vh; }
+ color:#ffe8cc; 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,8,2,0.82); backdrop-filter:blur(12px);
border-bottom:1px solid rgba(255,68,0,0.3); display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:14px; }
@@ -51,7 +51,7 @@
box-shadow:0 0 60px rgba(255,68,0,0.3); padding:40px; }
.modal-close { float:right; background:none; border:none; color:var(--ember);
font-size:0.9rem; cursor:pointer; letter-spacing:1px; }
- @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} }
+ @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} .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="volcano"] .splash-overlay {
background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255,68,0,0.35) 0%, transparent 50%), var(--bg);
}