Skip to content

Commit b200e84

Browse files
life2harshlife2harsh
committed
Stabilize mobile UI layout
1 parent 291b95f commit b200e84

6 files changed

Lines changed: 188 additions & 64 deletions

File tree

‎css/crt.css‎

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -257,6 +257,50 @@
257257
opacity: 1;
258258
}
259259

260+
@media (max-width: 767px) {
261+
.crt-monitor {
262+
width: 100vw;
263+
height: var(--app-height, 100dvh);
264+
max-height: none;
265+
border-radius: 16px;
266+
box-shadow:
267+
inset 0 0 16px rgba(0, 0, 0, 0.55),
268+
0 0 0 2px #0d0d1a,
269+
0 0 0 4px #2a2a42,
270+
0 0 0 6px #1a1a2e,
271+
0 0 24px rgba(0, 0, 0, 0.75);
272+
}
273+
274+
.crt-monitor::before {
275+
inset: -1px;
276+
border-radius: 18px;
277+
}
278+
279+
.crt-screen {
280+
inset: 4px;
281+
border-radius: 12px;
282+
transform: none;
283+
filter: none;
284+
box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.45);
285+
}
286+
287+
.crt-screen::before,
288+
.crt-screen::after,
289+
.crt-chromatic,
290+
.crt-phosphor,
291+
.crt-noise {
292+
display: none;
293+
}
294+
295+
.crt-scanlines {
296+
opacity: 0.32;
297+
}
298+
299+
.crt-vignette {
300+
background: radial-gradient(ellipse 78% 72% at 50% 50%, transparent 56%, rgba(0, 0, 0, 0.32) 100%);
301+
}
302+
}
303+
260304
/* ---- BOOT OVERLAY ----
261305
* Covers the screen during the CRT power-on sequence.
262306
* JS toggles phase classes to step through the boot.
@@ -622,4 +666,4 @@ body.crt-ready .global-theme-bg {
622666
opacity: 1;
623667
visibility: visible;
624668
transition: opacity 220ms ease, visibility 0s linear 0s;
625-
}
669+
}

‎css/cutscene.css‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,28 @@
4848
transition: .5s ease;
4949
}
5050

51+
@media (max-width: 767px) {
52+
.press-space {
53+
left: 50%;
54+
bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
55+
top: auto;
56+
width: min(92vw, 360px);
57+
margin: 0;
58+
transform: translateX(-50%);
59+
padding: 0.9rem 1rem;
60+
text-align: center;
61+
font-size: 14px;
62+
line-height: 1.45;
63+
border-radius: 12px;
64+
background-color: rgba(18, 72, 108, 0.78);
65+
}
66+
}
67+
5168
@keyframes slideIn {
5269
0% {
5370
transform: translateX(-100%);
5471
}
5572
100% {
5673
transform: translateX(0%);
5774
}
58-
}
75+
}

‎css/responsive.css‎

Lines changed: 61 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -128,53 +128,49 @@
128128
============================================================ */
129129
@media (max-width: 767px) {
130130
.crt-monitor {
131-
width: 98vw;
132-
height: 92vh;
131+
width: 100vw;
132+
height: var(--app-height, 100dvh);
133133
max-width: none;
134134
max-height: none;
135-
border-radius: 18px / 16px;
136-
box-shadow:
137-
inset 0 0 20px rgba(0, 0, 0, 0.6),
138-
0 0 0 3px #0d0d1a,
139-
0 0 0 5px #2a2a42,
140-
0 0 0 7px #1a1a2e,
141-
0 0 30px rgba(0, 0, 0, 0.9);
135+
border-radius: 16px;
142136
}
143137

144138
.crt-screen {
145-
inset: 6px;
146-
border-radius: 14px / 12px;
147-
transform: perspective(900px) scale(1.01);
139+
inset: 4px;
140+
border-radius: 12px;
148141
}
149142

150143
/* ---- MENU SCREEN PADDING ---- */
151144
.menu-screen {
152-
padding: 8px 6px;
145+
padding: 10px 8px calc(env(safe-area-inset-bottom, 0px) + 14px);
153146
justify-content: flex-start;
147+
overflow-y: auto;
148+
overflow-x: hidden;
149+
-webkit-overflow-scrolling: touch;
154150
}
155151

156152
/* ---- COMPACT HUD ---- */
157153
.arcade-hud {
158-
width: 94%;
154+
width: 100%;
159155
flex-wrap: wrap;
160156
justify-content: center;
161-
gap: 5px;
162-
margin-bottom: 6px;
163-
padding-bottom: 5px;
157+
gap: 6px;
158+
margin-bottom: 8px;
159+
padding-bottom: 6px;
164160
}
165161

166162
.hud-item {
167-
font-size: 6px;
168-
padding: 2px 5px;
169-
gap: 3px;
163+
font-size: 7px;
164+
padding: 4px 7px;
165+
gap: 4px;
170166
}
171167

172168
.hud-value {
173-
font-size: 7px;
169+
font-size: 8px;
174170
}
175171

176172
.hud-label {
177-
font-size: 5px;
173+
font-size: 6px;
178174
}
179175

180176
.hud-lives {
@@ -198,29 +194,29 @@
198194

199195
/* ---- DASHBOARD LAYOUT ---- */
200196
.arcade-dashboard {
201-
width: 94%;
197+
width: 100%;
202198
flex-direction: column;
203-
gap: 8px;
204-
flex: 1;
205-
min-height: 0;
206-
margin-bottom: 4px;
199+
gap: 10px;
200+
flex: 0 0 auto;
201+
min-height: auto;
202+
margin-bottom: 8px;
207203
}
208204

209205
/* ---- GRID ---- */
210206
.arcade-grid {
211-
--grid-col-gap: 5px;
212-
--grid-row-gap: 5px;
207+
--grid-col-gap: 6px;
208+
--grid-row-gap: 6px;
213209
gap: var(--grid-row-gap) var(--grid-col-gap);
214210
flex: 0 0 auto;
215211
width: 100%;
216212
justify-content: center;
217-
align-content: center;
213+
align-content: flex-start;
218214
}
219215

220216
.grid-node {
221217
flex: 0 0 calc((100% - (var(--grid-col-gap) * 4)) / 5);
222218
max-width: calc((100% - (var(--grid-col-gap) * 4)) / 5);
223-
padding: 4px 3px;
219+
padding: 6px 4px;
224220
border-width: 1px;
225221
border-radius: 4px;
226222
}
@@ -230,14 +226,14 @@
230226
}
231227

232228
.grid-node-icon {
233-
width: 22px;
234-
height: 22px;
235-
margin-bottom: 3px;
229+
width: 24px;
230+
height: 24px;
231+
margin-bottom: 4px;
236232
}
237233

238234
.grid-node-label {
239-
font-size: 5.2px;
240-
line-height: 1.25;
235+
font-size: 6px;
236+
line-height: 1.35;
241237
letter-spacing: 0.2px;
242238
}
243239

@@ -253,11 +249,11 @@
253249
/* ---- DETAILS PANEL ---- */
254250
.arcade-details-panel {
255251
flex: 1 1 auto;
256-
min-height: 260px;
252+
min-height: 280px;
257253
max-height: none;
258-
padding: 8px;
254+
padding: 10px;
259255
border-width: 2px;
260-
overflow: hidden;
256+
overflow: visible;
261257
}
262258

263259
.details-header-border {
@@ -266,7 +262,7 @@
266262
}
267263

268264
.details-header {
269-
font-size: 7px;
265+
font-size: 8px;
270266
}
271267

272268
.details-showcase {
@@ -286,7 +282,7 @@
286282
}
287283

288284
.details-title {
289-
font-size: 10px;
285+
font-size: 11px;
290286
line-height: 1.25;
291287
}
292288

@@ -297,39 +293,44 @@
297293
}
298294

299295
.stat-row {
300-
font-size: 6px;
296+
font-size: 7px;
301297
}
302298

303299
.details-info-box {
304-
font-size: 7px;
305-
line-height: 1.55;
300+
font-size: 8px;
301+
line-height: 1.7;
306302
max-height: none;
307-
min-height: 0;
303+
min-height: 120px;
308304
flex: 1;
309305
overflow-y: auto;
310306
margin-bottom: 8px;
311307
padding-right: 6px;
312308
}
313309

314310
.details-action-btn {
315-
padding: 3px;
316-
font-size: 6.5px;
311+
padding: 8px 10px;
312+
font-size: 7px;
313+
line-height: 1.5;
317314
}
318315

319316
/* ---- PROMPT ---- */
320317
.menu-select-prompt {
321-
font-size: 5.5px;
322-
letter-spacing: 1px;
318+
font-size: 7px;
319+
letter-spacing: 0.6px;
320+
text-align: center;
321+
width: 100%;
322+
line-height: 1.5;
323+
margin-top: auto;
323324
}
324325

325326
/* ---- SFX BUTTON ---- */
326327
.sfx-toggle {
327-
right: 8px;
328-
bottom: 8px;
329-
font-size: 6px;
330-
padding: 5px 8px;
328+
right: 10px;
329+
bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
330+
font-size: 8px;
331+
padding: 8px 10px;
331332
z-index: 10000;
332-
opacity: 0.72;
333+
opacity: 0.9;
333334
}
334335

335336
.sfx-toggle:hover {
@@ -342,13 +343,13 @@
342343
============================================================ */
343344
@media (max-width: 400px) {
344345
.grid-node-icon {
345-
width: 20px;
346-
height: 20px;
346+
width: 22px;
347+
height: 22px;
347348
}
348349

349350
.grid-node-label {
350-
font-size: 4.8px;
351-
line-height: 1.2;
351+
font-size: 5.6px;
352+
line-height: 1.3;
352353
}
353354

354355
.grid-node[data-id="battleships"] .grid-node-icon {
@@ -361,12 +362,12 @@
361362
}
362363

363364
.details-info-box {
364-
font-size: 6.5px;
365+
font-size: 7.5px;
365366
max-height: none;
366367
}
367368

368369
.arcade-details-panel {
369-
min-height: 250px;
370+
min-height: 260px;
370371
}
371372
}
372373

‎css/start.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,48 @@
208208
100% { opacity: 0; transform: translateY(-100%) translateX(var(--p-dx, 20px)); }
209209
}
210210

211+
@media (max-width: 767px) {
212+
.logo-placeholder {
213+
top: 34%;
214+
width: 92%;
215+
}
216+
217+
.logo-image {
218+
width: min(92vw, 760px);
219+
max-width: 100%;
220+
filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.35))
221+
drop-shadow(0 0 42px rgba(255, 140, 0, 0.18));
222+
}
223+
224+
.start-tagline {
225+
bottom: 19%;
226+
font-size: clamp(7px, 2.6vw, 10px);
227+
letter-spacing: 2px;
228+
text-align: center;
229+
width: 92%;
230+
white-space: normal;
231+
line-height: 1.6;
232+
}
233+
234+
.press-start-text {
235+
bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
236+
width: 92%;
237+
max-width: 340px;
238+
text-align: center;
239+
white-space: normal;
240+
line-height: 1.7;
241+
padding: 12px 16px;
242+
font-size: clamp(11px, 3.5vw, 15px);
243+
letter-spacing: 2px;
244+
}
245+
246+
.floating-mascot {
247+
right: 4%;
248+
bottom: 24%;
249+
width: clamp(52px, 16vw, 88px);
250+
}
251+
}
252+
211253
/* ---- TREES (background silhouettes) ---- */
212254
.start-trees {
213255
position: absolute;

0 commit comments

Comments
 (0)