avi/SignalElsewhereGame
1
0
Fork 0
forked from avi/signalelsewhere
Code Pull Requests Activity

Save point: bump mobile view text size and raise buttons for large-screen display

Browse Source
This commit is contained in:
avi
2026-05-17 16:57:30 -05:00
parent 33d2ad97da
commit 1867dde8cb
1 changed files with 45 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
index.html
View File

@@ -975,49 +975,55 @@
text-align: center; text-align: center;
} }
/* Mobile view overrides */ /* Mobile view overrides (tuned for large 2.5' x 4' display) */
html[data-view="mobile"] .scene { font-size: 0.9rem; padding: 0.5rem; } html[data-view="mobile"] .scene { font-size: 1.6rem; padding: 1.5rem; }
html[data-view="mobile"] .scene4text { max-width: 100%; } html[data-view="mobile"] .scene4text { max-width: 100%; }
html[data-view="mobile"] .s4visual, html[data-view="mobile"] .scene5text { max-width: 100%; } html[data-view="mobile"] .s4visual, html[data-view="mobile"] .scene5text { max-width: 100%; }
html[data-view="mobile"] .s5visual { max-width: 100%; } html[data-view="mobile"] .s5visual { max-width: 100%; }
html[data-view="mobile"] .s4tl { max-width: 100%; margin-bottom: 0.5rem; padding: 0.3rem 0; } html[data-view="mobile"] .s4tl { max-width: 100%; margin-bottom: 0.8rem; padding: 0.5rem 0; }
html[data-view="mobile"] .comp-table { font-size: 0.65rem; max-width: 100%; } html[data-view="mobile"] .comp-table { font-size: 1.1rem; max-width: 100%; }
html[data-view="mobile"] .comp-table th, html[data-view="mobile"] .comp-table td { padding: 0.3rem; } html[data-view="mobile"] .comp-table th, html[data-view="mobile"] .comp-table td { padding: 0.6rem 0.8rem; }
html[data-view="mobile"] .tl-year { font-size: 0.55rem; } html[data-view="mobile"] .tl-year { font-size: 0.95rem; }
html[data-view="mobile"] .tl-year::after { width: 4px; height: 4px; bottom: -0.2rem; } html[data-view="mobile"] .tl-year::after { width: 8px; height: 8px; bottom: -0.4rem; }
html[data-view="mobile"] .btn-row { gap: 0.3rem; bottom: 2%; } html[data-view="mobile"] .btn-row { gap: 1rem; bottom: 12%; }
html[data-view="mobile"] .btnNext { padding: 0.5rem 1rem; font-size: 0.75rem; } html[data-view="mobile"] .btnNext { padding: 1rem 2rem; font-size: 1.3rem; }
html[data-view="mobile"] #scene10e .btnNext { padding: 0.5rem 1rem; } html[data-view="mobile"] #scene10e .btnNext { padding: 1rem 2rem; }
html[data-view="mobile"] #scene3Title { font-size: 1.4rem; top: 0.5rem; left: 0.5rem; } html[data-view="mobile"] #scene3Title { font-size: 2.8rem; top: 1.5rem; left: 1.5rem; }
html[data-view="mobile"] #scene3 { padding: 2.5rem 0.5rem; } html[data-view="mobile"] #scene3 { padding: 4rem 1.5rem; }
html[data-view="mobile"] #scene3Text { margin-top: 1rem; } html[data-view="mobile"] #scene3Text { margin-top: 2rem; }
html[data-view="mobile"] #scene3ChoiceRow { flex-direction: column; bottom: 15%; gap: 0.5rem; } html[data-view="mobile"] #scene3ChoiceRow { flex-direction: column; bottom: 20%; gap: 1rem; }
html[data-view="mobile"] .scene3ChoiceBtn { padding: 0.7rem 1rem; font-size: 0.85rem; } html[data-view="mobile"] .scene3ChoiceBtn { padding: 1.2rem 2rem; font-size: 1.4rem; }
html[data-view="mobile"] .punch-row { flex-direction: column; gap: 0.5rem; } html[data-view="mobile"] .punch-row { flex-direction: column; gap: 0.8rem; }
html[data-view="mobile"] .punch-card { padding: 0.6rem; font-size: 0.75rem; } html[data-view="mobile"] .punch-card { padding: 1rem; font-size: 1.2rem; }
html[data-view="mobile"] .punch-card .punch-icon { font-size: 1.2rem; } html[data-view="mobile"] .punch-card .punch-icon { font-size: 2rem; }
html[data-view="mobile"] .scene4sub { padding: 0.5rem 0.5rem 6rem; } html[data-view="mobile"] .scene4sub { padding: 1rem 1rem 8rem; }
html[data-view="mobile"] #scene4a { padding-top: 0; } html[data-view="mobile"] #scene4a { padding-top: 0; }
html[data-view="mobile"] .hub-title { font-size: 1.3rem; } html[data-view="mobile"] .hub-title { font-size: 2.2rem; }
html[data-view="mobile"] .hub-subtitle { font-size: 0.8rem; } html[data-view="mobile"] .hub-subtitle { font-size: 1.3rem; }
html[data-view="mobile"] .hub-btn { padding: 0.5rem 1rem; font-size: 0.8rem; } html[data-view="mobile"] .hub-btn { padding: 1rem 2rem; font-size: 1.3rem; }
html[data-view="mobile"] .hub-row { flex-direction: column; gap: 0.8rem; padding: 0.5rem 0.8rem; } html[data-view="mobile"] .hub-row { flex-direction: column; gap: 1rem; padding: 1rem 1.5rem; }
html[data-view="mobile"] #sceneRefs h2 { font-size: 1rem; } html[data-view="mobile"] #sceneRefs h2 { font-size: 1.6rem; }
html[data-view="mobile"] #sceneRefs li { font-size: 0.75rem; } html[data-view="mobile"] #sceneRefs li { font-size: 1.1rem; }
html[data-view="mobile"] #sceneRefs .refs-content { width: 95%; padding: 0.8rem; max-height: 90vh; } html[data-view="mobile"] #sceneRefs .refs-content { width: 95%; padding: 1.2rem; max-height: 90vh; }
html[data-view="mobile"] .callout-box { font-size: 0.8rem; padding: 0.6rem 0.8rem; } html[data-view="mobile"] .callout-box { font-size: 1.2rem; padding: 1rem 1.2rem; }
html[data-view="mobile"] #foodOverlay .food-box { padding: 1rem; } html[data-view="mobile"] #foodOverlay .food-box { padding: 2rem; }
html[data-view="mobile"] #foodOverlay .food-title { font-size: 1rem; } html[data-view="mobile"] #foodOverlay .food-title { font-size: 1.6rem; }
html[data-view="mobile"] #foodOverlay .food-btn { font-size: 0.85rem; padding: 0.6rem 1rem; } html[data-view="mobile"] #foodOverlay .food-btn { font-size: 1.3rem; padding: 1rem 1.5rem; }
html[data-view="mobile"] #sceneFoodLinks .food-btn { font-size: 0.85rem; padding: 0.6rem 1rem; } html[data-view="mobile"] #sceneFoodLinks .food-btn { font-size: 1.3rem; padding: 1rem 1.5rem; }
html[data-view="mobile"] #sceneFoodLinks .food-links-title { font-size: 1.1rem; } html[data-view="mobile"] #sceneFoodLinks .food-links-title { font-size: 1.8rem; }
html[data-view="mobile"] canvas { max-height: 200px; } html[data-view="mobile"] canvas { max-height: 350px; }
html[data-view="mobile"] #scene2Line1 { font-size: 1rem; padding: 1rem; } html[data-view="mobile"] #scene2Line1 { font-size: 1.6rem; padding: 1.5rem; }
html[data-view="mobile"] #scene2Message2 { font-size: 1rem; } html[data-view="mobile"] #scene2Message2 { font-size: 1.6rem; }
html[data-view="mobile"] #textContainer { font-size: 1rem; } html[data-view="mobile"] #textContainer { font-size: 1.6rem; }
html[data-view="mobile"] .coin-grid { max-width: 12rem; gap: 3px; } html[data-view="mobile"] .coin-grid { max-width: 20rem; gap: 5px; }
html[data-view="mobile"] .scene5text { font-size: 0.85rem; } html[data-view="mobile"] .scene5text { font-size: 1.4rem; }
html[data-view="mobile"] .hash-bar { height: 2rem; } html[data-view="mobile"] .hash-bar { height: 3.5rem; }
html[data-view="mobile"] #s7BtnRow { bottom: 12%; }
html[data-view="mobile"] #s8BtnRow { bottom: 12%; }
html[data-view="mobile"] #followBtn { bottom: 12%; font-size: 1.3rem; padding: 1rem 3rem; }
html[data-view="mobile"] #whatIsLabBtn { bottom: 12%; font-size: 1.3rem; padding: 1rem 3rem; }
html[data-view="mobile"] #s8BtnRow .btnNext { padding: 1rem 2rem; font-size: 1.3rem; }
html[data-view="mobile"] #s7BtnRow .btnNext { padding: 1rem 2rem; font-size: 1.3rem; }
</style> </style>
</head> </head>
<body> <body>