diff --git a/css/main.css b/css/main.css index 2280e619a..0562b3c30 100755 --- a/css/main.css +++ b/css/main.css @@ -56,6 +56,7 @@ body { margin: 0; padding: 0; margin-bottom: 10px; + overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { @@ -228,9 +229,15 @@ button.accordion:focus { background-color: #333c4a; } +#intro canvas { + pointer-events: none; +} + #current_chat { display: none; - width: 50%; + width: 95%; + max-width: 900px; + box-sizing: border-box; position: absolute; left: 50%; top: 50%; @@ -272,6 +279,36 @@ button.accordion:focus { padding-top: 150px; } +@media screen and (max-device-width: 480px) { + .head { + padding: 10px; + } + + #current_chat { + font-size: large; + } + + #controls { + font-size: 125%; + } + + #controls .inline { + width: 1rem; + } + + .head h1 { + font-size: 1.5em; + } + + .page-title { + font-size: large; + } + + .sections div { + font-size: medium; + } +} + .card .card-content .card-title { line-height: 48px; } diff --git a/js/home.js b/js/home.js index 6a8e9da0e..001eba614 100644 --- a/js/home.js +++ b/js/home.js @@ -17,9 +17,16 @@ let start = "delay 100;\n" + let stageElement = document.getElementById("intro") function loaded() { - stage.resize(null, stage.innerWidth, stage.innerHeight) + stage.resize() + // I want the puppet (who's height is 567) to be about 33% of the screen size + let puppetScale = stage.screen.clientHeight / 2.5 / 567 / stage.puppetStage.scale.y + stage.project.puppetScale = puppetScale + stage.resize() window.onresize = () => { - stage.resize(null, stage.innerWidth, stage.innerHeight) + stage.resize() + let puppetScale = stage.screen.clientHeight / 2.5 / 567 / stage.puppetStage.scale.y + stage.project.puppetScale = puppetScale + stage.resize() } startCutscene() } @@ -29,7 +36,7 @@ function startCutscene() { let add = cut.actions.add.bind(cut) cut.actions.add = function(callback, name, id, position) { add(callback, name, id, position) - this.stage.resize() + stage.resize(null, Math.floor(stage.screen.clientWidth), Math.floor(stage.screen.clientHeight)) } cut.actions.chat = function(callback, target, chatId) {