Made homepage more responsive

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;
 }

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) {