update index+css

call/static/call/index.css

@@ -1,12 +1,25 @@
-body, html { background: #fff; text-align: center; }
-* { box-sizing: border-box; font-family: monospace; font-size: 14px; }
-h1 { font-size: 28px; margin: 0 0 10px 0; padding: 0; }
+body, html {
+  background: #fff;
+  text-align: center;
+}
+body {
+  margin: 5%;
+}
+* {
+  box-sizing: border-box;
+  font-family: monospace;
+  font-size: 14px;
+}
+h1 {
+  font-size: 28px;
+  margin: 0 0 10px 0;
+  padding: 0; 
+}
 #root {
-  width: 460px;
+  max-width: 512px;
   /* white-space: nowrap; */
   margin: 0 auto;
 }
-
 canvas {
     image-rendering: optimizeSpeed;
     image-rendering: -moz-crisp-edges;
@@ -25,14 +38,56 @@ canvas {
   padding: 8px;
   display: none;
 }
-label { display: block; }
-label > input { width: 240px; }
-label > span { display: inline-block; vertical-align: middle; width: 55px;  }
-input[type=range]{ vertical-align: middle; }
 
-#inputs { display: inline-block; vertical-align: top; text-align: left; margin-top: 1em;}
 
-.btn, button { background: #fff; text-align: center; min-width: 144px; display: inline-block; padding: 16px 32px; border: 1px solid black; color: black; text-decoration: none; font-size: 1em; margin: 0 0 10px 0; }
+#inputs {
+  /* display: flex; */
+  /* display: inline-block; */
+  /* vertical-align: top; */
+  /* text-align: left; */
+  margin-top: 1em;
+}
+
+#inputs label {
+  display: flex;
+}
+#inputs label span {
+  width: 55px;
+  flex: 0 0 auto;
+}
+#inputs label input {
+  flex: 1 1 auto;
+}
+
+/* label {
+  display: block;
+}
+label > input {
+  width: 240px;
+}
+label > span { 
+  display: inline-block;
+  vertical-align: middle;
+  width: 55px; 
+}
+input[type=range]{
+  vertical-align: middle;
+} */
+
+
+
+.btn, button {
+  background: #fff;
+  text-align: center;
+  min-width: 144px;
+  display: inline-block;
+  padding: 16px 32px;
+  border: 1px solid black;
+  color: black;
+  text-decoration: none;
+  font-size: 1em;
+  margin: 0 0 10px 0;
+}
 .btn:hover, button:hover { background: #eee }
 .btn:active, button:active{ background: #ccc }
 
@@ -43,7 +98,10 @@ input[type=range]{ vertical-align: middle; }
 
 .rootloading { display: none }
 
-div.colormode { max-width: 240px; white-space: nowrap }
+div.colormode {
+  max-width: 240px;
+  white-space: nowrap;
+}
 
 #caption {
   font-family: monospace;

call/templates/call/index.html

@@ -40,8 +40,10 @@
     </div>
 
   </div>
+  <div id="buttons2">
+    <button id="guestbook" onclick="window.open('{% url 'guestbook' %}', 'extern')">visit guestbook</button>    
+  </div>
 
-  <br />
   <canvas id=outc></canvas>
   <canvas id=outc_gbs_s></canvas>
   <canvas id=outc_gbs_a></canvas>
@@ -64,10 +66,6 @@
     <img id="img_mouth" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAACQCAYAAAD3Cm4hAAAAAXNSR0IArs4c6QAAAgpJREFUeJzt3V1u4yAUBlAYdRGZlY6XQFZadsE8uG5cj5zJjwPBPkeq5MhSrwP3JR+EhAAAAAAAAAAAAEA9wzCUYRhKi7q1a/ICGggAAAAAoAst4txWEXIrv1o/wCv10EAf67diSen8fR1CiU8+201SSnGsV69mSzt+g3HRhTUnc6q9/wYCAAAAYAM55zJFqznn6pFu7ZpvJn4NwBgLX65r139c5w0UFwO+fP1qz9brv4E613sDAQAAAHAoreJcawEhhLZx7jZRbucN9A4T0Ot6wH0NtPINmRJPp99h3N8+v65hqte7w68HLBdkatc+/AQAAABAHw6/sXX0b5pYS6sdzVvZZLwugzCfiE2e74baWwz+ThqoRaq3Rc3+G2gnem0gAAAAAA6oVbAkzAohjJl6/dWpeYz8/P969wb6z5bzFsewzx/+ubrTJJ5Op6rPn/NnuLXuzs+377uBAAAAANi5azHw66PpWOZ/h91l/HNLd8099pe1gEcHv7cGWo1Llw9bJ1Pf5idoc85leeRNzp8V3sNlLSCEEG455ufKzZa/x/u8Xhqoq0G9T98NBAAAAPt09eP5MAwlhBBSSpU+xscyDH9C3ZptrRzeHcs0+CFME9FfLj8dX1+vYiz31lw9PT2l8/er8bpemDWv/Zh+GmhlAnrXTwN9rN8qMaVz9f31tQeLl2p1YBNwm7/ZKeezNBbnmQAAAABJRU5ErkJggg==" alt="">
   </div>
 
-  <div id="buttons2">
-    <button id="guestbook" onclick="window.open('{% url 'guestbook' %}', 'extern')">visit guestbook</button>    
-  </div>
-
   <div id="colofon">
     <p>
       The heart of this webpage is the <a href="https://0x72.itch.io/2bitcharactergenerator" target="extern">2bitcharactergenerator</a>, by <a href="https://0x72.itch.io/" target="extern">0x72</a>,