Add a preview mode to the slide app

www/slide/slide.less

@@ -77,6 +77,46 @@ body {
 }
 
 
+#editorContainer {
+    flex: 1;
+    display: flex;
+    flex-flow: row;
+    height: 100%;
+    overflow: hidden;
+    .CodeMirror {
+        resize: none;
+        width: 100vw;
+    }
+    &.preview {
+        .CodeMirror {
+            //resize: horizontal;
+            width: 50vw;
+        }
+    }
+}
+.preview .cp {
+    flex: 1;
+    overflow: hidden;
+    div#modal {
+        position: relative;
+        top: auto;
+        left: auto;
+        width: auto;
+        display: block;
+        height: 100%;
+        #content {
+            .slide-container {
+                width: 100%;
+            }
+            .slide-frame {
+                width: 50vw;
+                height: 28.125vw; // height:width ratio = 9/16 = .5625
+                max-height: 100vh;
+                max-width: 177.78vh; // 16/9 = 1.778
+            }
+        }
+    }
+}
 .cp {
 
 /* Slide position (print mode) */
@@ -123,6 +163,8 @@ body {
 /* Slide position (present mode) */
 div.modal, div#modal {
     display: none;
+    background-color: black;
+    color: white;
 
     /* Navigation buttons */
     .button {
@@ -155,15 +197,10 @@ div.modal, div#modal {
         top: 0px;
         left: 0px;
         z-index: 100;
-        background-color: black;
-        color: white;
         height: 100vh;
         width: 100%;
     }
     #content {
-        &.transition {
-            transition: margin-left 1s;
-        }
         font-size: 20vh;
         position: relative;
         height: 100%;
@@ -198,6 +235,11 @@ div.modal, div#modal {
             text-align: center;
             vertical-align: top;
         }
+        &.transition {
+            .slide-container {
+                transition: margin-left 1s;
+            }
+        }
     }
 
     box-sizing: border-box;