Save point: add dedicated desktop view CSS with explicit data-view='desktop'
This commit is contained in:
40
index.html
40
index.html
@@ -1029,6 +1029,40 @@ html[data-view="mobile"] #exfilDeskCanvas { max-height: 500px; }
|
||||
html[data-view="mobile"] #whatIsLabBtn { bottom: 8%; 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; }
|
||||
|
||||
/* Desktop view overrides */
|
||||
html[data-view="desktop"] .scene { font-size: 1.4rem; padding: 3rem; }
|
||||
html[data-view="desktop"] .scene4text,
|
||||
html[data-view="desktop"] .scene5text,
|
||||
html[data-view="desktop"] .scene7text,
|
||||
html[data-view="desktop"] .scene8text,
|
||||
html[data-view="desktop"] .s4visual,
|
||||
html[data-view="desktop"] .s5visual,
|
||||
html[data-view="desktop"] .s4tl { max-width: 60rem; }
|
||||
html[data-view="desktop"] .comp-table { font-size: 1rem; max-width: 60rem; }
|
||||
html[data-view="desktop"] .comp-table th,
|
||||
html[data-view="desktop"] .comp-table td { padding: 0.6rem 1rem; }
|
||||
html[data-view="desktop"] .scene4sub { padding: 3rem 3rem 7rem; }
|
||||
html[data-view="desktop"] #scene3 { padding: 4rem 3rem; }
|
||||
html[data-view="desktop"] #scene3Title { font-size: 3.5rem; top: 2.5rem; left: 2.5rem; }
|
||||
html[data-view="desktop"] #scene3Text,
|
||||
html[data-view="desktop"] #textContainer { max-width: 60rem; }
|
||||
html[data-view="desktop"] #textContainer { font-size: 1.6rem; }
|
||||
html[data-view="desktop"] .hub-title { font-size: 2.5rem; }
|
||||
html[data-view="desktop"] .callout-box { font-size: 1.3rem; padding: 1.5rem 2rem; }
|
||||
html[data-view="desktop"] #scene2Line1,
|
||||
html[data-view="desktop"] #scene2Message2 { font-size: 1.4rem; }
|
||||
html[data-view="desktop"] .scene3ChoiceBtn { font-size: 1.1rem; padding: 1.2rem 2.5rem; }
|
||||
html[data-view="desktop"] #meshCanvas,
|
||||
html[data-view="desktop"] #deskCanvas,
|
||||
html[data-view="desktop"] #phoneCanvas,
|
||||
html[data-view="desktop"] #exfilCanvas,
|
||||
html[data-view="desktop"] #exfilDeskCanvas { max-height: 480px; }
|
||||
html[data-view="desktop"] .punch-card { font-size: 0.95rem; padding: 1.2rem; }
|
||||
html[data-view="desktop"] .punch-card .punch-icon { font-size: 1.8rem; }
|
||||
html[data-view="desktop"] .scene3ChoiceBtn:hover,
|
||||
html[data-view="desktop"] .btnNext:hover,
|
||||
html[data-view="desktop"] .hub-btn:hover { box-shadow: 0 0 12px rgba(0,255,0,0.2); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -1613,11 +1647,7 @@ html[data-view="mobile"] #exfilDeskCanvas { max-height: 500px; }
|
||||
let introStarted = false;
|
||||
|
||||
function setView(mode) {
|
||||
if (mode === 'mobile') {
|
||||
document.documentElement.setAttribute('data-view', 'mobile');
|
||||
} else {
|
||||
document.documentElement.removeAttribute('data-view');
|
||||
}
|
||||
document.documentElement.setAttribute('data-view', mode);
|
||||
sessionStorage.setItem('signalView', mode);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user