From 565c61600fb37ab0a7e89b0dfe523602aa4c3f59 Mon Sep 17 00:00:00 2001 From: avi Date: Sun, 17 May 2026 18:23:01 -0500 Subject: [PATCH] Save point: fix text overlapping and button layout for vertical mobile view --- index.html | 85 +++++++++++++++++++++++++------------------------- www/index.html | 85 +++++++++++++++++++++++++------------------------- 2 files changed, 86 insertions(+), 84 deletions(-) diff --git a/index.html b/index.html index c3f5f8a..700e063 100644 --- a/index.html +++ b/index.html @@ -976,58 +976,59 @@ } /* 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"] .scene { font-size: 1.8rem; padding: 2rem; } + html[data-view="mobile"] .scene4text { max-width: 90%; overflow-wrap: break-word; word-break: break-word; } + html[data-view="mobile"] .s4visual, html[data-view="mobile"] .scene5text { max-width: 90%; overflow-wrap: break-word; word-break: break-word; } 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: 1.1rem; } + html[data-view="mobile"] .comp-table { font-size: 1.2rem; max-width: 90%; } + html[data-view="mobile"] .comp-table th, html[data-view="mobile"] .comp-table td { padding: 0.5rem 0.6rem; } + html[data-view="mobile"] .tl-year { font-size: 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"] .typewriter-line { white-space: normal; } + html[data-view="mobile"] #textContainer { font-size: 1.8rem; overflow-wrap: break-word; word-break: break-word; max-width: 95vw; } + html[data-view="mobile"] .btn-row { gap: 1rem; bottom: 10%; } + html[data-view="mobile"] .btnNext { padding: 1rem 2rem; font-size: 1.4rem; } + html[data-view="mobile"] #scene10e .btnNext { padding: 1rem 2rem; } + html[data-view="mobile"] #scene3Title { font-size: 3rem; top: 1.5rem; left: 1.5rem; } + html[data-view="mobile"] #scene3 { padding: 4rem 1.5rem; } + html[data-view="mobile"] #scene3Text { margin-top: 2rem; word-break: break-word; } + html[data-view="mobile"] #scene3ChoiceRow { flex-direction: column; bottom: 18%; gap: 1rem; } + html[data-view="mobile"] .scene3ChoiceBtn { padding: 1.2rem 2rem; font-size: 1.6rem; } + html[data-view="mobile"] .punch-row { flex-direction: column; gap: 0.8rem; } + html[data-view="mobile"] .punch-card { padding: 1rem; font-size: 1.3rem; } + html[data-view="mobile"] .punch-card .punch-icon { font-size: 2.2rem; } + html[data-view="mobile"] .scene4sub { padding: 1rem 1.5rem 10rem; overflow-wrap: break-word; word-break: break-word; } html[data-view="mobile"] #scene4a { padding-top: 0; } - 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"] .hub-title { font-size: 2.4rem; } + html[data-view="mobile"] .hub-subtitle { font-size: 1.4rem; } + html[data-view="mobile"] .hub-btn { padding: 1rem 2rem; font-size: 1.4rem; } + html[data-view="mobile"] .hub-row { flex-direction: column; gap: 1rem; padding: 1rem 1.5rem; } + html[data-view="mobile"] #sceneRefs h2 { font-size: 1.8rem; } + html[data-view="mobile"] #sceneRefs li { font-size: 1.2rem; } html[data-view="mobile"] #sceneRefs .refs-content { width: 95%; padding: 1.2rem; max-height: 90vh; } - 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"] .callout-box { font-size: 1.3rem; padding: 1rem 1.2rem; } + html[data-view="mobile"] #foodOverlay .food-box { padding: 2rem; } + html[data-view="mobile"] #foodOverlay .food-title { font-size: 1.8rem; } + html[data-view="mobile"] #foodOverlay .food-btn { font-size: 1.4rem; padding: 1rem 1.5rem; } + html[data-view="mobile"] #sceneFoodLinks .food-btn { font-size: 1.4rem; padding: 1rem 1.5rem; } + html[data-view="mobile"] #sceneFoodLinks .food-links-title { font-size: 2rem; } 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.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; } + html[data-view="mobile"] #scene2Line1 { font-size: 1.8rem; padding: 1.5rem; overflow-wrap: break-word; word-break: break-word; } + html[data-view="mobile"] #scene2Message2 { font-size: 1.8rem; } + html[data-view="mobile"] .coin-grid { max-width: 24rem; gap: 5px; } + html[data-view="mobile"] .scene5text { font-size: 1.5rem; } + html[data-view="mobile"] .hash-bar { height: 4rem; } + html[data-view="mobile"] #s7BtnRow { bottom: 10%; } + html[data-view="mobile"] #s8BtnRow { bottom: 10%; } + html[data-view="mobile"] #followBtn { bottom: 10%; font-size: 1.4rem; padding: 1rem 3rem; } + html[data-view="mobile"] #whatIsLabBtn { bottom: 10%; font-size: 1.4rem; padding: 1rem 3rem; } + html[data-view="mobile"] #s8BtnRow .btnNext { padding: 1rem 2rem; font-size: 1.4rem; } + html[data-view="mobile"] #s7BtnRow .btnNext { padding: 1rem 2rem; font-size: 1.4rem; } diff --git a/www/index.html b/www/index.html index c3f5f8a..700e063 100644 --- a/www/index.html +++ b/www/index.html @@ -976,58 +976,59 @@ } /* 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"] .scene { font-size: 1.8rem; padding: 2rem; } + html[data-view="mobile"] .scene4text { max-width: 90%; overflow-wrap: break-word; word-break: break-word; } + html[data-view="mobile"] .s4visual, html[data-view="mobile"] .scene5text { max-width: 90%; overflow-wrap: break-word; word-break: break-word; } 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: 1.1rem; } + html[data-view="mobile"] .comp-table { font-size: 1.2rem; max-width: 90%; } + html[data-view="mobile"] .comp-table th, html[data-view="mobile"] .comp-table td { padding: 0.5rem 0.6rem; } + html[data-view="mobile"] .tl-year { font-size: 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"] .typewriter-line { white-space: normal; } + html[data-view="mobile"] #textContainer { font-size: 1.8rem; overflow-wrap: break-word; word-break: break-word; max-width: 95vw; } + html[data-view="mobile"] .btn-row { gap: 1rem; bottom: 10%; } + html[data-view="mobile"] .btnNext { padding: 1rem 2rem; font-size: 1.4rem; } + html[data-view="mobile"] #scene10e .btnNext { padding: 1rem 2rem; } + html[data-view="mobile"] #scene3Title { font-size: 3rem; top: 1.5rem; left: 1.5rem; } + html[data-view="mobile"] #scene3 { padding: 4rem 1.5rem; } + html[data-view="mobile"] #scene3Text { margin-top: 2rem; word-break: break-word; } + html[data-view="mobile"] #scene3ChoiceRow { flex-direction: column; bottom: 18%; gap: 1rem; } + html[data-view="mobile"] .scene3ChoiceBtn { padding: 1.2rem 2rem; font-size: 1.6rem; } + html[data-view="mobile"] .punch-row { flex-direction: column; gap: 0.8rem; } + html[data-view="mobile"] .punch-card { padding: 1rem; font-size: 1.3rem; } + html[data-view="mobile"] .punch-card .punch-icon { font-size: 2.2rem; } + html[data-view="mobile"] .scene4sub { padding: 1rem 1.5rem 10rem; overflow-wrap: break-word; word-break: break-word; } html[data-view="mobile"] #scene4a { padding-top: 0; } - 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"] .hub-title { font-size: 2.4rem; } + html[data-view="mobile"] .hub-subtitle { font-size: 1.4rem; } + html[data-view="mobile"] .hub-btn { padding: 1rem 2rem; font-size: 1.4rem; } + html[data-view="mobile"] .hub-row { flex-direction: column; gap: 1rem; padding: 1rem 1.5rem; } + html[data-view="mobile"] #sceneRefs h2 { font-size: 1.8rem; } + html[data-view="mobile"] #sceneRefs li { font-size: 1.2rem; } html[data-view="mobile"] #sceneRefs .refs-content { width: 95%; padding: 1.2rem; max-height: 90vh; } - 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"] .callout-box { font-size: 1.3rem; padding: 1rem 1.2rem; } + html[data-view="mobile"] #foodOverlay .food-box { padding: 2rem; } + html[data-view="mobile"] #foodOverlay .food-title { font-size: 1.8rem; } + html[data-view="mobile"] #foodOverlay .food-btn { font-size: 1.4rem; padding: 1rem 1.5rem; } + html[data-view="mobile"] #sceneFoodLinks .food-btn { font-size: 1.4rem; padding: 1rem 1.5rem; } + html[data-view="mobile"] #sceneFoodLinks .food-links-title { font-size: 2rem; } 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.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; } + html[data-view="mobile"] #scene2Line1 { font-size: 1.8rem; padding: 1.5rem; overflow-wrap: break-word; word-break: break-word; } + html[data-view="mobile"] #scene2Message2 { font-size: 1.8rem; } + html[data-view="mobile"] .coin-grid { max-width: 24rem; gap: 5px; } + html[data-view="mobile"] .scene5text { font-size: 1.5rem; } + html[data-view="mobile"] .hash-bar { height: 4rem; } + html[data-view="mobile"] #s7BtnRow { bottom: 10%; } + html[data-view="mobile"] #s8BtnRow { bottom: 10%; } + html[data-view="mobile"] #followBtn { bottom: 10%; font-size: 1.4rem; padding: 1rem 3rem; } + html[data-view="mobile"] #whatIsLabBtn { bottom: 10%; font-size: 1.4rem; padding: 1rem 3rem; } + html[data-view="mobile"] #s8BtnRow .btnNext { padding: 1rem 2rem; font-size: 1.4rem; } + html[data-view="mobile"] #s7BtnRow .btnNext { padding: 1rem 2rem; font-size: 1.4rem; }