Improve readability of demos

1 files changed, 35 insertions, 18 deletions

diff --git a/css/toolchain.scss b/css/toolchain.scss
index 13ed29e..5c8eb2e 100644
--- a/css/toolchain.scss
+++ b/css/toolchain.scss
@@ -5,30 +5,47 @@
     height: 400px;
     margin-bottom: 10px;
     border: 1px solid #666;
+    width: 100%;
 }
 
-.calculator-wrapper {
-    border-bottom: 1px solid #888;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    z-index: 99999;
-
-    .calculator {
-        background: url('http://try.knightos.org/static/skin.png') no-repeat;
-        background-size: 500px;
-        width: 500px;
-        height: 330px;
-        margin: 0 auto;
+.demo {
+    position: relative;
+
+    .editor {
+        width: 60%;
         position: relative;
+        z-index: 9999;
+        background: white;
+    }
+
+    .calculator-wrapper {
+        position: absolute;
+        right: 0;
+        top: 0;
 
-        canvas {
-            position: absolute;
-            left: 100px;
-            top: 105px;
-            width: 300px;
+        .calculator {
+            background: url('http://try.knightos.org/static/skin.png') no-repeat;
+            background-size: 400px;
+            width: 400px;
+            height: 266px;
+            margin: 0 auto;
+            position: relative;
+            left: 40px;
+
+            canvas {
+                position: absolute;
+                left: 75px;
+                top: 80px;
+                width: 250px;
+            }
         }
     }
+
+    textarea {
+        width: 308px;
+        float: right;
+        margin-top: 8px;
+    }
 }
 
 .run-button {