write styles for code in .less

package.json

@@ -18,7 +18,7 @@
   "scripts": {
     "lint": "jshint --config .jshintrc --exclude-path .jshintignore .",
     "test": "node TestSelenium.js",
-    "style": "lessc ./customize.dist/src/less/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css && lessc ./www/drive/file.less > ./www/drive/file.css && lessc ./www/settings/main.less > ./www/settings/main.css && lessc ./www/slide/slide.less > ./www/slide/slide.css && lessc ./www/whiteboard/whiteboard.less > ./www/whiteboard/whiteboard.css && lessc ./www/poll/poll.less > ./www/poll/poll.css && lessc ./www/file/file.less > ./www/file/file.css",
+    "style": "lessc ./customize.dist/src/less/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css && lessc ./www/drive/file.less > ./www/drive/file.css && lessc ./www/settings/main.less > ./www/settings/main.css && lessc ./www/slide/slide.less > ./www/slide/slide.css && lessc ./www/whiteboard/whiteboard.less > ./www/whiteboard/whiteboard.css && lessc ./www/poll/poll.less > ./www/poll/poll.css && lessc ./www/file/file.less > ./www/file/file.css && lessc ./www/code/code.less > ./www/code/code.css",
     "template": "cd customize.dist/src && node build.js"
   }
 }

www/code/code.css

@@ -0,0 +1,73 @@
+html,
+body {
+  height: 100%;
+  width: 100%;
+  padding: 0px;
+  margin: 0px;
+  overflow: hidden;
+  box-sizing: border-box;
+  position: relative;
+}
+body {
+  display: flex;
+  flex-flow: column;
+  max-height: 100%;
+  min-height: auto;
+}
+.CodeMirror {
+  display: inline-block;
+  height: 100%;
+  width: 50%;
+  min-width: 20%;
+  max-width: 80%;
+  resize: horizontal;
+}
+.CodeMirror.fullPage {
+  min-width: 100%;
+  max-width: 100%;
+  resize: none;
+}
+.CodeMirror-focused .cm-matchhighlight {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
+  background-position: bottom;
+  background-repeat: repeat-x;
+}
+#editorContainer {
+  flex: 1;
+  display: flex;
+  flex-flow: row;
+  height: 100%;
+  overflow: hidden;
+}
+#previewContainer {
+  flex: 1;
+  padding: 5px 20px;
+  overflow: auto;
+  display: inline-block;
+  height: 100%;
+  border-left: 1px solid black;
+  box-sizing: border-box;
+  font-family: Calibri, Ubuntu, sans-serif;
+  word-wrap: break-word;
+}
+#preview {
+  max-width: 40vw;
+  margin: auto;
+}
+#preview table {
+  border-collapse: collapse;
+}
+#preview table tr th {
+  border: 3px solid black;
+  padding: 15px;
+}
+@media (max-width: 720px) {
+  .CodeMirror {
+    flex: 1;
+    max-width: 100%;
+    resize: none;
+  }
+  #previewContainer {
+    display: none !important;
+  }
+}

www/code/code.less

@@ -0,0 +1,81 @@
+@import "../../customize.dist/src/less/variables.less";
+@import "../../customize.dist/src/less/mixins.less";
+
+html, body{
+    height: 100%;
+    width: 100%;
+    padding: 0px;
+    margin: 0px;
+    overflow: hidden;
+    box-sizing: border-box;
+    position: relative;
+}
+body {
+    display: flex;
+    flex-flow: column;
+    max-height: 100%;
+    min-height: auto;
+}
+.CodeMirror {
+    display: inline-block;
+    height: 100%;
+    width: 50%;
+    min-width: 20%;
+    max-width: 80%;
+    resize: horizontal;
+}
+.CodeMirror.fullPage {
+    min-width: 100%;
+    max-width: 100%;
+    resize: none;
+}
+.CodeMirror-focused .cm-matchhighlight {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
+    background-position: bottom;
+    background-repeat: repeat-x;
+}
+#editorContainer {
+    flex: 1;
+    display: flex;
+    flex-flow: row;
+    height: 100%;
+    overflow: hidden;
+}
+#previewContainer {
+    flex: 1;
+    padding: 5px 20px;
+    overflow: auto;
+    display: inline-block;
+    height: 100%;
+    border-left: 1px solid black;
+    box-sizing: border-box;
+    font-family: Calibri,Ubuntu,sans-serif;
+    word-wrap: break-word;
+}
+
+#preview {
+    max-width: 40vw;
+    margin: auto;
+
+    table {
+        border-collapse: collapse;
+        tr {
+            th {
+                border: 3px solid black;
+                padding: 15px;
+            }
+        }
+    }
+}
+
+@media (max-width: 720px) {
+    .CodeMirror {
+        flex: 1;
+        max-width: 100%;
+        resize: none;
+    }
+    #previewContainer {
+        display: none !important;
+    }
+}
+

www/code/inner.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="/bower_components/codemirror/lib/codemirror.css">
     <link rel="stylesheet" href="/bower_components/codemirror/addon/dialog/dialog.css">
     <link rel="stylesheet" href="/bower_components/codemirror/addon/fold/foldgutter.css" />
+    <link rel="stylesheet" href="/code/code.css" />
     <script src="/bower_components/codemirror/mode/javascript/javascript.js"></script>
     <script src="/bower_components/codemirror/addon/mode/loadmode.js"></script>
     <script src="/bower_components/codemirror/mode/meta.js"></script>
@@ -31,70 +32,6 @@
     <script src="/bower_components/codemirror/addon/fold/markdown-fold.js"></script>
     <script src="/bower_components/codemirror/addon/fold/comment-fold.js"></script>
     <script src="/bower_components/codemirror/addon/display/placeholder.js"></script>
-    <style>
-        html, body{
-            height: 100%;
-            width: 100%;
-            padding: 0px;
-            margin: 0px;
-            overflow: hidden;
-            box-sizing: border-box;
-            position: relative;
-        }
-        body {
-            display: flex;
-            flex-flow: column;
-            max-height: 100%;
-            min-height: auto;
-        }
-        .CodeMirror {
-            display: inline-block;
-            height: 100%;
-            width: 50%;
-            min-width: 20%;
-            max-width: 80%;
-            resize: horizontal;
-        }
-        .CodeMirror.fullPage {
-            min-width: 100%;
-            max-width: 100%;
-            resize: none;
-        }
-        .CodeMirror-focused .cm-matchhighlight {
-            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
-            background-position: bottom;
-            background-repeat: repeat-x;
-        }
-        #editorContainer {
-            flex: 1;
-            display: flex;
-            flex-flow: row;
-            height: 100%;
-            overflow: hidden;
-        }
-        #previewContainer {
-            flex: 1;
-            padding: 5px 20px;
-            overflow: auto;
-            display: inline-block;
-            height: 100%;
-            border-left: 1px solid black;
-            box-sizing: border-box;
-            font-family: Calibri,Ubuntu,sans-serif;
-            word-wrap: break-word;
-        }
-        #preview {
-            max-width: 40vw;
-            margin: auto;
-        }
-        #preview table tr td, #preview table tr th {
-            border: 1px solid black;
-            padding: 15px;
-        }
-        #preview table tr th {
-            border: 3px solid black;
-        }
-    </style>
 </head>
 <body>
   <div id="cme_toolbox" class="toolbar-container"></div>