PG - Responsiveness : OK !

Playground/css/index.css

@@ -39,8 +39,16 @@ body {
     background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==");
 }
 .wrapper #jsEditor {
+    padding-top:10px;
     height: 100%;
 }
+
+.wrapper #jsEditor.light {
+    background-color: white;
+}
+.wrapper #jsEditor.dark {
+    background-color: #1e1e1e;
+}
 .wrapper #canvasZone {
     height: 100%;
 }
@@ -71,35 +79,38 @@ body {
     -ms-user-select: none;
     user-select: none;
     position: relative;
+    z-index:5;
+    line-height: 40px;
 }
 .navbar.dark {
     background-color: #333;
+    box-shadow: 0 3px 10px #000;
 }
 .navbar.light {
     background-color: #efefef;
+    box-shadow: 0 3px 10px #999;
 }
 .navbar .title {
     height: 40px;
     padding-left: 10px;
-    line-height: 40px;
     color: #15A4FA;
     display: inline-block;
 }
 .navbar .version {
     height: 40px;
-    line-height: 40px;
     display: inline-block;
     color: #7283a0;
     margin-right: 20px;
 }
 .navbar .category {
+    height: 40px;
     margin: 0 15px 0 15px;
     display: inline-block;
 }
 .navbar .category.right {
     position: absolute;
     right: 0;
-    top: 8px;
+    top: 0;
 }
 .navbar .button {
     display: inline-block;
@@ -420,8 +431,33 @@ body {
     width: 350px;
 }
 
-/*@media (max-width: 800px) {
+@media (max-width: 1600px) {
+    .desktopOnly {
+        display: none !important;
+    }
+}
+@media (max-width: 1375px) {
     .desktopOnly {
         display: none !important;
     }
-}*/
+    .desktopTabletOnly {
+        display: none !important;
+    }
+}
+@media (max-width: 975px) {
+    .title {
+        display : none !important;
+    }
+    .version {
+        display : none !important;
+    }
+}
+
+@media (max-width: 850px) {    
+    #jsEditor {
+        width : 0px !important;
+    }
+    #canvasZone {
+        width : 100% !important;
+    }
+}

Playground/index.html

@@ -78,7 +78,7 @@
         </div>
 
 
-        <div class="category">
+        <div class="category desktopOnly">
             <div class="button select"><span id="currentFontSize">Font: 14</span>
                 <div class="toDisplay">
                     <div class="option" onclick="setFontSize(12);">12</div>
@@ -95,8 +95,8 @@
                     <div class="option" id="lightTheme">Light</div>
                 </div>
             </div>
-
-
+        </div>
+        <div class="category desktopTabletOnly">
             <div class="button select">Settings
                 <div class="toDisplay">
                     <div class="option" id='safemodeToggle'>Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
@@ -111,8 +111,9 @@
         </div>
 
 
+
         <div class="category right">
-            <div class="button select"><span id="currentVersion">Version: Latest</span>
+            <div class="button select desktopTabletOnly"><span id="currentVersion">Version: Latest</span>
                 <div class="toDisplay">
                     <div class="option" onclick="setVersion('latest');">Latest</div>
                     <div class="option" onclick="setVersion('2.5');">2.5</div>

Playground/js/index.js

@@ -4,6 +4,7 @@
 
     var elementToTheme = [
         '.wrapper .gutter',
+        '.wrapper #jsEditor',
         '.navbar',
         '.navbar .select .toDisplay .option',
         '.navbar .select .toDisplayBig',