Made homepage more responsive

This commit is contained in:
thepaperpilot 2019-10-30 21:23:39 -05:00
parent 4ab3041fd0
commit beeb1be3b3
2 changed files with 48 additions and 4 deletions

View file

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

View file

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