Proper update loop for a WebAssembly scene running

1 files changed, 28 insertions, 32 deletions

diff --git a/frontend/index.css b/frontend/index.css
index 010d543..9f23e96 100644
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -1,31 +1,36 @@
+html {
+	width: 100vw;
+	background: #2f3032;
+}
+
 body {
+	background: #2f3032;
+	min-height: calc(100vh - 64px);
+	background: -webkit-radial-gradient(top, #383A56, #303133);
+	background: -moz-radial-gradient(top, #383A56, #303133);
+	background: radial-gradient(to bottom, #383A56, #303133);
     font-size: 16px;
     font-family: "Helvetica", sans-serif;
-    line-height: 1.5rem;
-    width: 100%;
-    height: 100vh;
-    margin: 0rem;
-    padding: 0rem;
+    line-height: 1.75rem;
+	width: 960px;
+	margin: auto;
     overflow-x: auto;
     overflow-y: auto;
-	background-color: #2f3032;
 	color: white;
+	margin-top: 32px;
+	margin-bottom: 32px;
+	border-radius: 8px;
+	border: 1px solid #383A56;
+	padding: 32px;
 }
 
 header {
+	border-bottom: 2px solid #2f3032;
     padding-top: 1rem;
     padding-bottom: 1rem;
     font-size: 20px;
-    margin: auto;
-    width: 1260px;
-    max-width: 1260px;
     text-align: center;
 	border-radius: 0px 0px 3px 3px;
-
-	background: #383A56;
-	background: -webkit-radial-gradient(top, #383A56, #303133, #303133);
-	background: -moz-radial-gradient(top, #383A56, #303133, #303133);
-	background: radial-gradient(to bottom, #383A56, #303133, #303133);
 }
 
 header > h1 {
@@ -37,10 +42,6 @@ header > h1 {
 main {
     display: flex;
     flex-direction: row;
-    width: 1260px;
-    margin: auto;
-    max-width: 1260px;
-    flex: 1 1 100%;
     margin-bottom: 1rem;
     overflow-y: hidden;
 }
@@ -198,7 +199,7 @@ article .opengl_canvas_container {
     width: 100%;
     text-align: center;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: center;
     border-radius: 3px;
 }
@@ -210,7 +211,7 @@ article .opengl_canvas_container .play_button {
     height: 128px;
     position: absolute;
     top: calc(50% - 56px);
-    left: calc(50% - 214px);
+    left: calc(50% - 56px);
     border: 1px solid white;
     color: white;
     background-color: transparent;
@@ -222,7 +223,7 @@ article .opengl_canvas_container .play_button {
 }
 
 .opengl_canvas_container canvas {
-    border-radius: 3px 0px 0px 3px;
+    border-radius: 3px 3px 0px 0px;
     border: 1px solid #b0a565;
 }
 
@@ -256,22 +257,17 @@ article pre {
 }
 
 .opengl_canvas_sidebar {
-    width: 312px;
-    height: 480px;
     border: 1px solid #b0a565;
-    border-left: none;
-
-    display: flex;
-    flex-direction: column;
-    text-align: left;
-    justify-content: space-between;
+	border-radius: 0px 0px 3px 3px;
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
 }
 
 .opengl_canvas_sidebar .opengl_value_tracker {
+	grid-column: 1 span /4;
     font-size: 14px;
-    display: flex;
-    flex-direction: column;
-    text-align: left;
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
 }
 
 .opengl_canvas_sidebar .opengl_value_tracker > li {