diff --git a/www/slide/main.js b/www/slide/main.js
index 8c125e1e3..fdd409ce0 100644
--- a/www/slide/main.js
+++ b/www/slide/main.js
@@ -139,18 +139,6 @@ define([
             var $print = $pad.contents().find('#print');
             var slideOptions = {};
 
-            $( window ).resize(function() {
-                // 20vh
-                // 20 * 16 / 9vw
-                if ($(window).width() > 16/9*$(window).height()) {
-                    $content.css('font-size', '20vh');
-                    // $print.css('font-size', '20vh');
-                    return;
-                }
-                $content.css('font-size', (20*9/16)+'vw');
-                // $print.css('font-size', (20*9/16)+'vw');
-            });
-
             Slide.setModal(APP, $modal, $content, $pad, ifrw, slideOptions, initialState);
 
             var setStyleState = function (state) {
@@ -388,6 +376,7 @@ define([
                 if (text) {
                     textColor = text;
                     $modal.css('color', text);
+                    $modal.css('border-color', text);
                     $pad.contents().find('#' + SLIDE_COLOR_ID).css('color', text);
                 }
                 if (back) {
diff --git a/www/slide/slide.css b/www/slide/slide.css
index 5d85e0b16..630ac25ea 100644
--- a/www/slide/slide.css
+++ b/www/slide/slide.css
@@ -79,29 +79,39 @@ body .CodeMirror-focused .cm-matchhighlight {
 .cp #print {
   position: relative;
   display: none;
-  font-size: 11.25vw;
+  font-size: 10.125vw;
   /*.slide-frame:first-child {
         margin-top: ~"calc(((100vh - 56.25vw)/2))";
     }*/
 }
 .cp #print .slide-frame {
   display: block !important;
-  padding: 2.5%;
-  margin-top: 7.228vw;
-  border-top: 1px solid black;
-  border-bottom: 1px solid black;
-  height: 56.25vw;
-  width: 100vw;
+  padding: 0.5em;
+  margin: auto;
+  border: 1px solid black;
+  height: 50.625vw;
+  width: 90vw;
   page-break-after: always;
   position: relative;
   box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
 }
 .cp #print .slide-frame li {
-  min-width: 50vw;
+  min-width: 45vw;
 }
 .cp #print .slide-frame h1 {
   padding-top: 0;
 }
+.cp #print .slide-container {
+  width: 90vw;
+  height: 100vh;
+  margin: 0vh 5vw;
+  display: flex;
+}
+.cp #print .slide-container:last-child {
+  height: calc(100vh - 2px);
+}
 .cp div.modal,
 .cp div#modal {
   /* Navigation buttons */
@@ -162,12 +172,15 @@ body .CodeMirror-focused .cm-matchhighlight {
   font-size: 20vh;
   position: relative;
   height: 100%;
+  overflow: visible;
+  white-space: nowrap;
 }
 .cp div.modal #content .slide-frame,
 .cp div#modal #content .slide-frame {
   display: inline-block;
   box-sizing: border-box;
-  border: 1px solid white;
+  border: 1px solid;
+  white-space: normal;
   vertical-align: middle;
   /* center things as much as possible
 
@@ -176,7 +189,7 @@ body .CodeMirror-focused .cm-matchhighlight {
                 transform: translateY(-50%);
 
             */
-  padding: 2.5%;
+  padding: 0.5em;
   width: 100vw;
   height: 56.25vw;
   max-height: 100vh;
@@ -208,49 +221,13 @@ body .CodeMirror-focused .cm-matchhighlight {
   text-align: left;
   position: relative;
 }
-.cp div#modal #content .slide-frame p,
-.cp #print .slide-frame p,
-.cp div#modal #content .slide-frame li,
-.cp #print .slide-frame li,
-.cp div#modal #content .slide-frame pre,
-.cp #print .slide-frame pre,
-.cp div#modal #content .slide-frame code,
-.cp #print .slide-frame code {
+.cp div#modal #content .slide-frame *,
+.cp #print .slide-frame * {
   font-size: 27.5%;
   line-height: 110%;
 }
-.cp div#modal #content .slide-frame p p,
-.cp #print .slide-frame p p,
-.cp div#modal #content .slide-frame li p,
-.cp #print .slide-frame li p,
-.cp div#modal #content .slide-frame pre p,
-.cp #print .slide-frame pre p,
-.cp div#modal #content .slide-frame code p,
-.cp #print .slide-frame code p,
-.cp div#modal #content .slide-frame p li,
-.cp #print .slide-frame p li,
-.cp div#modal #content .slide-frame li li,
-.cp #print .slide-frame li li,
-.cp div#modal #content .slide-frame pre li,
-.cp #print .slide-frame pre li,
-.cp div#modal #content .slide-frame code li,
-.cp #print .slide-frame code li,
-.cp div#modal #content .slide-frame p pre,
-.cp #print .slide-frame p pre,
-.cp div#modal #content .slide-frame li pre,
-.cp #print .slide-frame li pre,
-.cp div#modal #content .slide-frame pre pre,
-.cp #print .slide-frame pre pre,
-.cp div#modal #content .slide-frame code pre,
-.cp #print .slide-frame code pre,
-.cp div#modal #content .slide-frame p code,
-.cp #print .slide-frame p code,
-.cp div#modal #content .slide-frame li code,
-.cp #print .slide-frame li code,
-.cp div#modal #content .slide-frame pre code,
-.cp #print .slide-frame pre code,
-.cp div#modal #content .slide-frame code code,
-.cp #print .slide-frame code code {
+.cp div#modal #content .slide-frame * *,
+.cp #print .slide-frame * * {
   font-size: 100%;
   line-height: 1em;
 }
@@ -308,6 +285,8 @@ body .CodeMirror-focused .cm-matchhighlight {
 .cp #print .slide-frame h6 {
   color: inherit;
   text-align: center;
+  padding-top: 0;
+  margin-bottom: 0.5em;
 }
 .cp div#modal #content .slide-frame pre > code,
 .cp #print .slide-frame pre > code {
@@ -326,6 +305,7 @@ body .CodeMirror-focused .cm-matchhighlight {
   max-width: 100%;
   display: table;
   margin: 0 auto;
+  padding-left: 0.3em;
 }
 .cp div#modal #content .slide-frame img,
 .cp #print .slide-frame img {
diff --git a/www/slide/slide.js b/www/slide/slide.js
index 442ab31d9..04d7a9968 100644
--- a/www/slide/slide.js
+++ b/www/slide/slide.js
@@ -116,6 +116,18 @@ define([
         slice(root.children).forEach(removeListeners);
     };
 
+    var updateFontSize = Slide.updateFontSize = function() {
+        // 20vh
+        // 20 * 16 / 9vw
+        if ($(window).width() > 16/9*$(window).height()) {
+            $content.css('font-size', '20vh');
+            // $print.css('font-size', '20vh');
+            return;
+        }
+        $content.css('font-size', (20*9/16)+'vw');
+        // $print.css('font-size', (20*9/16)+'vw');
+    };
+
     var fixCSS = function (css) {
         var append = '.cp #print .slide-frame ';
         var append2 = '.cp div#modal #content .slide-frame ';
@@ -156,6 +168,7 @@ define([
         //$content.find('.' + slideClass).hide();
         //$content.find('.' + slideClass + ':eq( ' + i + ' )').show();
         $content.css('margin-left', -(i*100)+'vw');
+        updateFontSize();
         change(Slide.lastIndex, Slide.index);
     };
 
@@ -297,6 +310,52 @@ define([
         });
     };
 
+    $(window).resize(Slide.updateFontSize);
+
+    // Swipe
+    var addSwipeEvents = function () {
+        var touch = {
+            maxTime: 2000,
+            minXDist: 150,
+            maxYDist: 100
+        };
+
+        var resetSwipe = function () {
+            touch.x = 0;
+            touch.y = 0;
+            touch.time = 0;
+        };
+
+        $content.on('touchstart', function (e) {
+            e.preventDefault();
+            resetSwipe();
+            var t = e.originalEvent.changedTouches[0];
+            touch.x = t.pageX;
+            touch.y = t.pageY;
+            touch.time = new Date().getTime();
+        });
+
+        $content.on('touchend', function (e) {
+            e.preventDefault();
+            var t = e.originalEvent.changedTouches[0];
+            var xDist = t.pageX - touch.x;
+            var yDist = t.pageY - touch.y;
+            var time = new Date().getTime() - touch.time;
+            if (time <= touch.maxTime && Math.abs(xDist) >= touch.minXDist && Math.abs(yDist) <= touch.maxYDist) {
+                if (xDist < 0) {
+                    Slide.right();
+                    return;
+                }
+                Slide.left();
+            }
+        });
+
+        $content.on('touchmove', function (e){
+            e.preventDefault();
+        });
+    };
+
+
     Slide.setModal = function (appObj, $m, $c, $p, iframe, opt, ph) {
         $modal = Slide.$modal = $m;
         $content = Slide.$content = $c;
@@ -305,8 +364,8 @@ define([
         placeholder = Slide.placeholder = ph;
         options = Slide.options = opt;
         APP = appObj;
-        console.log(APP);
         addEvent();
+        addSwipeEvents();
     };
 
     return Slide;
diff --git a/www/slide/slide.less b/www/slide/slide.less
index 286235d39..c02302802 100644
--- a/www/slide/slide.less
+++ b/www/slide/slide.less
@@ -80,35 +80,40 @@ body {
 .cp {
 
 /* Slide position (print mode) */
+@ratio:0.9;
 #print {
     position: relative;
     display: none;
-    font-size: 11.25vw;
+    font-size: @ratio*11.25vw;
     .slide-frame {
         display: block !important;
-        // justify-content: center;
-        //align-items: center;
-        // flex-flow: column;
-        padding: 2.5%;
-        // margin-top: ~"calc(((100vh - 56.25vw)/2))";
-        margin-top: 7.228vw;
-        //margin-bottom: 7.228vw;
-        // margin-bottom: ~"calc(((100vh - 56.25vw)/2) - 1px)";
-        border-top: 1px solid black;
-        border-bottom: 1px solid black;
-        height: 56.25vw;
-        width: 100vw;
+        padding: 0.5em;
+        margin: auto;
+        border: 1px solid black;
+        height: @ratio*56.25vw;
+        width: @ratio*100vw;
         page-break-after: always;
         position: relative;
         box-sizing: border-box;
         li {
-            min-width: 50vw;
+            min-width: @ratio*50vw;
         }
         h1 {
             padding-top: 0;
         }
+        align-items: center;
+        justify-content: center;
 
     }
+    .slide-container {
+        width: 90vw;
+        height: 100vh;
+        margin: 0vh 5vw;
+        display: flex;
+        &:last-child {
+            height: ~"calc(100vh - 2px)";
+        }
+    }
     /*.slide-frame:first-child {
         margin-top: ~"calc(((100vh - 56.25vw)/2))";
     }*/
@@ -157,18 +162,18 @@ div.modal, div#modal {
     }
     #content {
         transition: margin-left 1s;
-        font-size: 20vh;
        // position: absolute;
-        // top:0;bottom:0; // vertical center
-        // left:0;right:0; // horizontal center
+        font-size: 20vh;
         position: relative;
         height: 100%;
+        overflow: visible;
+        white-space: nowrap;
         .slide-frame {
             display: inline-block;
             box-sizing: border-box;
-            border: 1px solid white;
+            border: 1px solid;
+            white-space: normal;
 
             vertical-align: middle;
-            // padding: 2.5vw;
 
             /* center things as much as possible
 
@@ -178,7 +183,7 @@ div.modal, div#modal {
 
             */
 
-            padding: 2.5%;
+            padding: 0.5em;
             width: 100vw;
             height: 56.25vw; // height:width ratio = 9/16 = .5625
             max-height: 100vh;
@@ -186,10 +191,6 @@ div.modal, div#modal {
             margin: auto;
         }
         .slide-container {
-            // position: absolute;
-            // top:0;
-            // bottom:0; // vertical center
-            // left:0;right:0; // horizontal center
             display: inline-block;
             height: 100%; width: 100vw;
             text-align: center;
@@ -228,9 +229,9 @@ div.modal, div#modal {
 /* Slide content */
 div#modal #content, #print {
     .slide-frame {
-        p, li, pre, code {
+        * {
             .size(2.75);
-            p, li, pre, code {
+            * {
                 font-size: 100%;
                 line-height: 1em;
             }
@@ -251,6 +252,8 @@ div#modal #content, #print {
         h1, h2, h3, h4, h5, h6 {
             color: inherit;
             text-align: center;
+            padding-top: 0;
+            margin-bottom: 0.5em;
         }
 
         pre > code {
@@ -267,6 +270,7 @@ div#modal #content, #print {
             max-width: 100%;
             display: table;
             margin: 0 auto;
+            padding-left: 0.3em;
         }
         // p, ul, ol { padding-left: 10%; }