avi/signalelsewhere
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Save point: optimize mobile view for vertical display, bump all text sizes and interactive canvas heights

Browse Source
This commit is contained in:
avi
2026-05-17 18:15:58 -05:00
parent ca8df5531d
commit e8aef45cf3
2 changed files with 6848 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
index.html
View File

@@ -975,55 +975,59 @@
text-align: center;
}
/* Mobile view overrides (tuned for large 2.5' x 4' display) */
html[data-view="mobile"] .scene { font-size: 1.6rem; padding: 1.5rem; }
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"] .s5visual { max-width: 100%; }
html[data-view="mobile"] .s4tl { max-width: 100%; margin-bottom: 0.8rem; padding: 0.5rem 0; }
html[data-view="mobile"] .comp-table { font-size: 1.1rem; max-width: 100%; }
/* Mobile view overrides (tuned for large 2.5' x 4' vertical display) */
html[data-view="mobile"] .scene { font-size: 2.2rem; padding: 2rem; }
html[data-view="mobile"] .scene4text { max-width: 90%; }
html[data-view="mobile"] .s4visual, html[data-view="mobile"] .scene5text { max-width: 90%; }
html[data-view="mobile"] .s5visual { max-width: 90%; }
html[data-view="mobile"] .s4tl { max-width: 90%; margin-bottom: 1rem; padding: 0.5rem 0; }
html[data-view="mobile"] .comp-table { font-size: 1.3rem; max-width: 90%; }
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.95rem; }
html[data-view="mobile"] .tl-year::after { width: 8px; height: 8px; bottom: -0.4rem; }
html[data-view="mobile"] .btn-row { gap: 1rem; bottom: 12%; }
html[data-view="mobile"] .btnNext { padding: 1rem 2rem; font-size: 1.3rem; }
html[data-view="mobile"] #scene10e .btnNext { padding: 1rem 2rem; }
html[data-view="mobile"] #scene3Title { font-size: 2.8rem; top: 1.5rem; left: 1.5rem; }
html[data-view="mobile"] #scene3 { padding: 4rem 1.5rem; }
html[data-view="mobile"] #scene3Text { margin-top: 2rem; }
html[data-view="mobile"] #scene3ChoiceRow { flex-direction: column; bottom: 20%; gap: 1rem; }
html[data-view="mobile"] .scene3ChoiceBtn { padding: 1.2rem 2rem; font-size: 1.4rem; }
html[data-view="mobile"] .punch-row { flex-direction: column; gap: 0.8rem; }
html[data-view="mobile"] .punch-card { padding: 1rem; font-size: 1.2rem; }
html[data-view="mobile"] .punch-card .punch-icon { font-size: 2rem; }
html[data-view="mobile"] .scene4sub { padding: 1rem 1rem 8rem; }
html[data-view="mobile"] .tl-year { font-size: 1.1rem; }
html[data-view="mobile"] .tl-year::after { width: 10px; height: 10px; bottom: -0.4rem; }
html[data-view="mobile"] .btn-row { gap: 1.2rem; bottom: 12%; }
html[data-view="mobile"] .btnNext { padding: 1.2rem 2.5rem; font-size: 1.6rem; }
html[data-view="mobile"] #scene10e .btnNext { padding: 1.2rem 2.5rem; }
html[data-view="mobile"] #scene3Title { font-size: 3.5rem; top: 2rem; left: 2rem; }
html[data-view="mobile"] #scene3 { padding: 5rem 2rem; }
html[data-view="mobile"] #scene3Text { margin-top: 2.5rem; }
html[data-view="mobile"] #scene3ChoiceRow { flex-direction: column; bottom: 22%; gap: 1.2rem; }
html[data-view="mobile"] .scene3ChoiceBtn { padding: 1.5rem 2.5rem; font-size: 1.8rem; }
html[data-view="mobile"] .punch-row { flex-direction: column; gap: 1rem; }
html[data-view="mobile"] .punch-card { padding: 1.2rem; font-size: 1.5rem; }
html[data-view="mobile"] .punch-card .punch-icon { font-size: 2.5rem; }
html[data-view="mobile"] .scene4sub { padding: 1rem 2rem 10rem; }
html[data-view="mobile"] #scene4a { padding-top: 0; }
html[data-view="mobile"] .hub-title { font-size: 2.2rem; }
html[data-view="mobile"] .hub-subtitle { font-size: 1.3rem; }
html[data-view="mobile"] .hub-btn { padding: 1rem 2rem; font-size: 1.3rem; }
html[data-view="mobile"] .hub-row { flex-direction: column; gap: 1rem; padding: 1rem 1.5rem; }
html[data-view="mobile"] #sceneRefs h2 { font-size: 1.6rem; }
html[data-view="mobile"] #sceneRefs li { font-size: 1.1rem; }
html[data-view="mobile"] .hub-title { font-size: 2.8rem; }
html[data-view="mobile"] .hub-subtitle { font-size: 1.6rem; }
html[data-view="mobile"] .hub-btn { padding: 1.2rem 2.5rem; font-size: 1.6rem; }
html[data-view="mobile"] .hub-row { flex-direction: column; gap: 1.2rem; padding: 1.2rem 2rem; }
html[data-view="mobile"] #sceneRefs h2 { font-size: 2rem; }
html[data-view="mobile"] #sceneRefs li { font-size: 1.4rem; }
html[data-view="mobile"] #sceneRefs .refs-content { width: 95%; padding: 1.2rem; max-height: 90vh; }
html[data-view="mobile"] .callout-box { font-size: 1.2rem; padding: 1rem 1.2rem; }
html[data-view="mobile"] #foodOverlay .food-box { padding: 2rem; }
html[data-view="mobile"] #foodOverlay .food-title { font-size: 1.6rem; }
html[data-view="mobile"] #foodOverlay .food-btn { font-size: 1.3rem; padding: 1rem 1.5rem; }
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.8rem; }
html[data-view="mobile"] canvas { max-height: 350px; }
html[data-view="mobile"] #scene2Line1 { font-size: 1.6rem; padding: 1.5rem; }
html[data-view="mobile"] #scene2Message2 { font-size: 1.6rem; }
html[data-view="mobile"] #textContainer { font-size: 1.6rem; }
html[data-view="mobile"] .coin-grid { max-width: 20rem; gap: 5px; }
html[data-view="mobile"] .scene5text { font-size: 1.4rem; }
html[data-view="mobile"] .hash-bar { height: 3.5rem; }
html[data-view="mobile"] .callout-box { font-size: 1.5rem; padding: 1.2rem 1.5rem; }
html[data-view="mobile"] #foodOverlay .food-box { padding: 2.5rem; }
html[data-view="mobile"] #foodOverlay .food-title { font-size: 2rem; }
html[data-view="mobile"] #foodOverlay .food-btn { font-size: 1.6rem; padding: 1.2rem 2rem; }
html[data-view="mobile"] #sceneFoodLinks .food-btn { font-size: 1.6rem; padding: 1.2rem 2rem; }
html[data-view="mobile"] #sceneFoodLinks .food-links-title { font-size: 2.4rem; }
html[data-view="mobile"] #meshCanvas,
html[data-view="mobile"] #deskCanvas,
html[data-view="mobile"] #phoneCanvas,
html[data-view="mobile"] #exfilCanvas,
html[data-view="mobile"] #exfilDeskCanvas { max-height: 500px; }
html[data-view="mobile"] #scene2Line1 { font-size: 2rem; padding: 2rem; }
html[data-view="mobile"] #scene2Message2 { font-size: 2rem; }
html[data-view="mobile"] #textContainer { font-size: 2rem; }
html[data-view="mobile"] .coin-grid { max-width: 26rem; gap: 6px; }
html[data-view="mobile"] .scene5text { font-size: 1.8rem; }
html[data-view="mobile"] .hash-bar { height: 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; }
html[data-view="mobile"] #followBtn { bottom: 12%; font-size: 1.6rem; padding: 1.2rem 3.5rem; }
html[data-view="mobile"] #whatIsLabBtn { bottom: 12%; font-size: 1.6rem; padding: 1.2rem 3.5rem; }
html[data-view="mobile"] #s8BtnRow .btnNext { padding: 1.2rem 2.5rem; font-size: 1.6rem; }
html[data-view="mobile"] #s7BtnRow .btnNext { padding: 1.2rem 2.5rem; font-size: 1.6rem; }
</style>
</head>
<body>
@@ -1635,6 +1639,11 @@
// Show view selector overlay on every page load
document.getElementById('viewOverlay').classList.add('visible');
// Matrix rain configuration
const fontSize = window.innerWidth < 480 ? 10 : 14;
let columns;
let drops = [];
// Canvas setup for Matrix rain
const canvas = document.getElementById('matrixCanvas');
const ctx = canvas.getContext('2d');
@@ -1642,14 +1651,17 @@
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (fontSize) {
columns = Math.floor(canvas.width / fontSize);
drops = Array(columns).fill(0).map(() => Math.floor(Math.random() * canvas.height / fontSize));
}
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
// Matrix rain configuration
const fontSize = window.innerWidth < 480 ? 10 : 14;
let columns = Math.floor(canvas.width / fontSize);
let drops = [];
// Force an extra resize after fonts/viewport settle
setTimeout(resizeCanvas, 100);
setTimeout(resizeCanvas, 500);
const chars = '0123456789@#$%^&*()';
const rainDuration = 5000; // 5 seconds
let rainActive = false;