diff --git a/template/default.twig b/template/default.twig
index b440e825..a6cdf854 100644
--- a/template/default.twig
+++ b/template/default.twig
@@ -37,7 +37,12 @@
             </ul>
         </header>
 
+
+
         <nav>
+            <a href="#" class="toggle show">☰</a>
+            <a href="#" class="toggle close">&times;</a>
+
             <div class="scroll">
             {% for section in menu.sections %}
                 <section>
@@ -79,10 +84,59 @@
                     if (id) {
                         var link = $('<a>');
                         link.attr('href', '#' + id);
-                        console.log(link)
                         $item.wrap(link);
                     }
                 })
+
+                $('a.toggle').on('click', function(e){
+                    e.preventDefault();
+                    console.log('hi');
+                    var body = $('body');
+                    if (body.hasClass('toggled')) {
+                        body.removeClass('toggled');
+                    } else {
+                        body.addClass('toggled');
+                    }
+                })
+
+                var lastScroll = 0;
+                var isUp = false;
+                var win = $(window);
+
+                win.on('scroll', function(){
+                    var scrollTop = win.scrollTop();
+                    var scrollBottom = win.scrollTop() + win.height();
+                    var docHeight = $(document).height();
+
+                    if ( scrollTop < 0 || scrollBottom >= docHeight ){
+                        return;
+                    }
+
+                    if (scrollTop > (lastScroll + 0) && scrollTop >= 0) {
+                        if (!isUp) {
+                            $('a.toggle.show').addClass('hide')
+                        }
+                        isUp = true;
+                        lastScroll = scrollTop;
+                    } else if (scrollTop < (lastScroll - 0)) {
+                        if (isUp) {
+                            $('a.toggle.show').removeClass('hide')
+                        }
+                        isUp = false;
+                        lastScroll = scrollTop;
+                    }
+                });
+
+                // var lastScrollTop = 0;
+                // $(window).scroll(function(event){
+                //    var st = $(this).scrollTop();
+                //    if (st > lastScrollTop){
+                //         $('a.toggle.show').addClass('hide')
+                //    } else {
+                //         $('a.toggle.show').removeClass('hide')
+                //    }
+                //    lastScrollTop = st;
+                // });
             });
         </script>
 
diff --git a/template/styles/.sass-cache/95891ed988818a4951b4f3b2d423eff1f766e167/main.sassc b/template/styles/.sass-cache/95891ed988818a4951b4f3b2d423eff1f766e167/main.sassc
new file mode 100644
index 00000000..3e25ca6b
Binary files /dev/null and b/template/styles/.sass-cache/95891ed988818a4951b4f3b2d423eff1f766e167/main.sassc differ
diff --git a/template/styles/main.css b/template/styles/main.css
index 876ed790..e352ec06 100644
--- a/template/styles/main.css
+++ b/template/styles/main.css
@@ -1,266 +1,303 @@
 html, body {
-	margin: 0;
-	padding: 0;
-	width: 100%;
-	height: 100%;
-
-	font-size: 14px;
-	line-height: 1.5;
-	font-family: -webkit-system-font, sans-serif;
-	min-width: 720px;
-}
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  font-family: -webkit-system-font, sans-serif; }
+  @media screen and (min-width: 720px) {
+    html, body {
+      width: 100%;
+      height: 100%; } }
 
 a {
-	color: #94a9d1;
-	text-decoration: none;
-	border-bottom: 1px dotted;
-}
+  color: #94a9d1;
+  text-decoration: none;
+  border-bottom: 1px dotted; }
 
 a:hover {
-	color: #f6cfcf;
-}
+  color: #f6cfcf; }
 
 h1 {
-	font-size: 42px;
-	font-weight: 200;
-}
+  font-size: 38px;
+  font-weight: 200; }
+  @media screen and (min-width: 720px) {
+    h1 {
+      font-size: 42px; } }
 
 h2 {
-	font-size: 30px;
-	font-weight: 400;
-}
+  font-size: 30px;
+  font-weight: 400; }
 
 h3 {
-	font-size: 24px;
-	font-weight: 400;
-}
+  font-size: 24px;
+  font-weight: 400; }
 
 h1, h2, h3, h4, h5, h6 {
-	color: #333;
-	margin: 0;
-	font-family: 'Quicksand';
-	letter-spacing: -1px;
-}
+  color: #333;
+  margin: 0;
+  font-family: "Quicksand";
+  letter-spacing: -1px; }
 
 :target {
-	background: #ffff99;
-}
+  background: #ffff99; }
 
 a.logo {
-	display: block;
-	position: relative;
-	border-bottom: none;
-	padding-left: 72px;
-	height: 100%;
-}
-
-a.logo h1 {
-	margin: 0;
-	font-size: 36px;
-	line-height: 96px;
-	text-transform: uppercase;
-}
-
-a.logo h1 em {
-	font-style: normal;
-	color: rgba(0, 0, 0, 0.4);
-	text-transform: none;
-}
-
-a.logo img {
-	left: 24px;
-	top: 24px;
-	position: absolute;
-	height: 48px;
-}
+  display: block;
+  position: relative;
+  border-bottom: none;
+  height: 100%;
+  width: 280px;
+  margin: 0 auto;
+  padding-left: 52px; }
+  @media screen and (min-width: 720px) {
+    a.logo {
+      padding-left: 72px;
+      width: 100%; } }
+  a.logo h1 {
+    margin: 0;
+    font-size: 36px;
+    line-height: 96px;
+    text-transform: uppercase; }
+    @media screen and (min-width: 720px) {
+      a.logo h1 {
+        font-size: 36px; } }
+    a.logo h1 em {
+      font-style: normal;
+      color: rgba(0, 0, 0, 0.4);
+      text-transform: none; }
+  a.logo img {
+    left: 6px;
+    top: 24px;
+    position: absolute;
+    height: 48px; }
+    @media screen and (min-width: 720px) {
+      a.logo img {
+        left: 24px;
+        top: 24px;
+        height: 48px; } }
 
 * {
-	box-sizing: border-box;
-}
+  box-sizing: border-box; }
 
 header {
-	min-width: 720px;
-	height: 96px;
-	position: absolute;
-	left: 0;
-	right: 0;
+  overflow: hidden;
+  border-bottom: 3px solid #94a9d1;
+  height: 132px;
+  position: relative; }
+  @media screen and (min-width: 720px) {
+    header {
+      height: 96px;
+      position: absolute;
+      left: 0;
+      right: 0;
+      z-index: 10;
+      background: rgba(255, 255, 255, 0.95); }
+      .safari header {
+        background: rgba(255, 255, 255, 0.5);
+        -webkit-backdrop-filter: blur(10px); } }
+  header ul {
+    position: absolute;
+    margin: 0;
+    padding: 0;
+    bottom: 5px;
+    left: 0;
+    right: 0;
+    text-align: center; }
+    @media screen and (min-width: 720px) {
+      header ul {
+        text-align: right;
+        right: 24px;
+        top: 24px;
+        height: 100%; } }
+    header ul li {
+      display: inline-block;
+      line-height: 48px; }
+      header ul li a {
+        padding: 0 6px;
+        display: block;
+        border-bottom: none; }
 
-	z-index: 10;
-	overflow: hidden;
-
-	background: rgba(255, 255, 255, 0.95);
-	border-bottom: 3px solid #94a9d1;
-}
-
-.safari header {
-	background: rgba(255, 255, 255, 0.5);
-	-webkit-backdrop-filter: blur(10px);
-}
-
-header ul {
-	position: absolute;
-	right: 24px;
-	top: 24px;
-	height: 100%;
-	margin: 0;
-	padding: 0;
-}
-
-header ul li {
-	display: inline-block;
-	line-height: 48px;
-}
-
-header ul li a {
-	padding: 0 6px;
-	display: block;
-	border-bottom: none;
-}
+a.toggle {
+  position: absolute; }
+  @media screen and (min-width: 720px) {
+    a.toggle {
+      display: none; } }
+  a.toggle.close {
+    top: 12px;
+    right: 0;
+    z-index: 20;
+    color: white;
+    font-size: 48px;
+    line-height: 48px;
+    height: 72px;
+    width: 72px;
+    padding: 12px;
+    border-bottom: none;
+    text-align: center; }
+  a.toggle.show {
+    text-align: center;
+    border-bottom: none;
+    background: #94a9d1;
+    color: white;
+    right: -36px;
+    top: 50%;
+    height: 48px;
+    width: 36px;
+    margin-top: -24px;
+    line-height: 48px;
+    border-bottom-right-radius: 5px;
+    border-top-right-radius: 5px;
+    z-index: 15;
+    transition: right 0.25s; }
+    a.toggle.show.hide {
+      right: -12px; }
+    body.toggled a.toggle.show {
+      right: -36px; }
 
 nav {
-	position: absolute;
-	left: 0;
-	top: 0;
-	bottom: 0;
-	width: 216px;
-
-	z-index: 8;
-	padding-top: 96px;
-
-	font-size: 14px;
-	border-right: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-nav a {
-	border-bottom: none;
-	font-weight: 200;
-	font-size: 14px;
-	display: block;
-	color: #777;
-	font-size: 12px;
-	height: 24px;
-}
-
-nav a:hover {
-	color: #94a9d1;
-}
-
-nav .active a {
-	color: #94a9d1;
-	font-weight: 600;
-}
-
-nav h3 {
-	text-transform: uppercase;
-	color: #bbb;
-	font-size: 14px;
-	margin-bottom: 6px;
-	font-weight: 400;
-}
-
-nav ul, nav ul li {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-}
-
-nav ul {
-	margin-bottom: 18px;
-}
+  font-size: 14px;
+  border-right: 1px solid rgba(0, 0, 0, 0.05);
+  width: 100%;
+  position: fixed;
+  left: -100%;
+  transition: left 0.25s;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: block;
+  background: #94a9d1; }
+  nav a {
+    border-bottom: none;
+    color: white;
+    font-size: 16px;
+    line-height: 32px;
+    height: 32px; }
+  nav h3 {
+    text-transform: uppercase;
+    margin-top: 12px;
+    font-size: 18px;
+    color: white;
+    font-weight: 600; }
+  body.toggled nav {
+    left: 0; }
+  @media screen and (min-width: 720px) {
+    nav {
+      background: white;
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 216px;
+      z-index: 8;
+      padding-top: 96px; }
+      nav h3 {
+        color: #bbb;
+        font-size: 14px;
+        margin-bottom: 6px;
+        font-weight: 400; }
+      nav a {
+        border-bottom: none;
+        font-weight: 200;
+        font-size: 14px;
+        display: block;
+        color: #777;
+        font-size: 12px;
+        height: 24px; }
+        nav a:hover {
+          color: #94a9d1; } }
+  nav ul, nav ul li {
+    list-style: none;
+    padding: 0;
+    margin: 0; }
+    nav ul.active a, nav ul li.active a {
+      font-weight: 600; }
+      @media screen and (min-width: 720px) {
+        nav ul.active a, nav ul li.active a {
+          color: #94a9d1; } }
+  nav ul {
+    margin-bottom: 18px; }
 
 div.scroll {
-	padding: 22px;
-	overflow-y: scroll;
-	height: 100%;
-	z-index: 10;
-}
+  padding: 22px;
+  overflow-y: scroll;
+  height: 100%;
+  z-index: 10;
+  -webkit-overflow-scrolling: touch; }
 
 main {
-	color: #555;
-	font-weight: 200;
-	padding: 22px;
-	padding-top: 110px;
-	padding-left: 240px;
-
-	position: absolute;
-	position: relative;
-	z-index: 6;
-
-	top: 0;
-	bottom: 0;
-	right: 0;
-	left: 0;
-
-	overflow-y: scroll;
-	height: 100%;
-	max-width: 1440px;
-}
-
-main a.edit {
-	position: absolute;
-	top: 122px;
-	right: 24px;
-	border-bottom: none;
-}
-
-main h1 {
-	margin-bottom: 12px;
-}
-
-main h2 {
-	margin-top: 24px;
-	margin-bottom: 12px;
-	border-bottom: 1px dotted rgba(0, 0, 0, 0.10);
-}
-
-main h3 {
-	margin-top: 18px;
-}
-
-main p {
-	margin-top: 0;
-	margin-bottom: 12px;
-	line-height: 1.75;
-}
-
-main blockquote {
-	background: rgba(247, 202, 201, 0.2);
-	margin-top: 18px;
-	margin-bottom: 18px;
-	margin-left: 0;
-	padding: 6px;
-	padding-left: 12px;
-	border-left: 5px solid #f6cfcf;
-}
-
-main blockquote p {
-	margin: 0;
-	padding: 0;
-}
+  color: #555;
+  font-weight: 200;
+  width: 100%;
+  padding: 24px; }
+  @media screen and (min-width: 720px) {
+    main {
+      height: 100%;
+      position: absolute;
+      position: relative;
+      z-index: 6;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      padding: 22px;
+      padding-top: 110px;
+      padding-left: 240px;
+      overflow-y: scroll;
+      max-width: 1440px; } }
+  main a.edit {
+    position: absolute;
+    top: 146px;
+    right: 24px;
+    border-bottom: none; }
+    @media screen and (min-width: 720px) {
+      main a.edit {
+        top: 122px; } }
+  main h1 {
+    margin-bottom: 12px; }
+  main h2 {
+    margin-top: 24px;
+    margin-bottom: 12px;
+    border-bottom: 1px dotted rgba(0, 0, 0, 0.1); }
+  main h3 {
+    margin-top: 18px; }
+  main p {
+    margin-top: 0;
+    margin-bottom: 12px;
+    line-height: 1.75; }
+  main blockquote {
+    background: rgba(247, 202, 201, 0.2);
+    margin-top: 18px;
+    margin-bottom: 18px;
+    margin-left: 0;
+    padding: 6px;
+    padding-left: 12px;
+    border-left: 5px solid #f6cfcf; }
+    main blockquote p {
+      margin: 0;
+      padding: 0; }
 
 pre, code {
-	font-size: 12px;
-	font-family: 'Source Code Pro', monospace;
-}
+  font-size: 12px;
+  font-family: "Source Code Pro", monospace; }
 
 p code, li code {
-	background: #fbfbfb;
-	border-radius: 5px;
-	padding: 3px 5px;
-	display: inline-block;
-	color: #92a0b9;
-	box-shadow: 0 1px 0px 0px rgba(0, 0, 0, 0.1);
-}
+  background: #fbfbfb;
+  border-radius: 5px;
+  padding: 3px 5px;
+  display: inline-block;
+  color: #92a0b9;
+  box-shadow: 0 1px 0px 0px rgba(0, 0, 0, 0.1); }
 
 pre {
-	margin-top: 12px;
-	margin-bottom: 15px;
-	padding: 5px;
-	background: #fbfbfb;
-	border-radius: 10px;
-	box-shadow: 0 3px 0px 0px rgba(0, 0, 0, 0.1);
-}
+  margin-top: 12px;
+  margin-bottom: 15px;
+  padding: 5px;
+  background: #fbfbfb;
+  border-radius: 10px;
+  box-shadow: 0 3px 0px 0px rgba(0, 0, 0, 0.1); }
 
 img {
-	max-width: 100%;
-}
+  max-width: 100%; }
+
+/*# sourceMappingURL=main.css.map */
diff --git a/template/styles/main.css.map b/template/styles/main.css.map
new file mode 100644
index 00000000..3b828131
--- /dev/null
+++ b/template/styles/main.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["main.sass"],
+"names": [],
+"file": "main.css"
+}
\ No newline at end of file
diff --git a/template/styles/main.sass b/template/styles/main.sass
new file mode 100644
index 00000000..9dd1b25a
--- /dev/null
+++ b/template/styles/main.sass
@@ -0,0 +1,341 @@
+$tablet: 720px
+$blue: #94a9d1
+
+html, body
+    margin: 0
+    padding: 0
+    font-size: 14px
+    line-height: 1.5
+    font-family: -webkit-system-font, sans-serif
+
+    @media screen and (min-width: $tablet)
+        width: 100%
+        height: 100%
+
+a
+    color: #94a9d1
+    text-decoration: none
+    border-bottom: 1px dotted
+
+a:hover
+    color: #f6cfcf
+
+h1
+    font-size: 38px
+    @media screen and (min-width: $tablet)
+        font-size: 42px
+    font-weight: 200
+
+h2
+    font-size: 30px
+    font-weight: 400
+
+h3
+    font-size: 24px
+    font-weight: 400
+
+h1, h2, h3, h4, h5, h6
+    color: #333
+    margin: 0
+    font-family: 'Quicksand'
+    letter-spacing: -1px
+
+\:target
+    background: #ffff99
+
+a.logo
+    display: block
+    position: relative
+    border-bottom: none
+    height: 100%
+    width: 280px
+    margin: 0 auto
+    padding-left: 52px
+
+    @media screen and (min-width: $tablet)
+        padding-left: 72px
+        width: 100%
+
+    h1
+        margin: 0
+        font-size: 36px
+        line-height: 96px
+        text-transform: uppercase
+
+        @media screen and (min-width: $tablet)
+            font-size: 36px
+
+        em
+            font-style: normal
+            color: rgba(0, 0, 0, 0.4)
+            text-transform: none
+
+    img
+        left: 6px
+        top: 24px
+        position: absolute
+        height: 48px
+
+        @media screen and (min-width: $tablet)
+            left: 24px
+            top: 24px
+            height: 48px
+
+*
+    box-sizing: border-box
+
+header
+    overflow: hidden
+    border-bottom: 3px solid #94a9d1
+    height: 132px
+    position: relative
+
+    @media screen and (min-width: $tablet)
+        height: 96px
+        position: absolute
+        left: 0
+        right: 0
+        z-index: 10
+
+        background: rgba(255, 255, 255, 0.95)
+
+        .safari &
+            background: rgba(255, 255, 255, 0.5)
+            -webkit-backdrop-filter: blur(10px)
+            
+
+
+    ul
+        position: absolute
+        margin: 0
+        padding: 0
+        bottom: 5px
+        left: 0
+        right: 0
+        text-align: center
+
+        @media screen and (min-width: $tablet)
+            text-align: right
+            right: 24px
+            top: 24px
+            height: 100%
+
+        li
+            display: inline-block
+            line-height: 48px
+
+            a
+                padding: 0 6px
+                display: block
+                border-bottom: none
+
+a.toggle
+    @media screen and (min-width: $tablet)
+        display: none
+
+    position: absolute
+
+    &.close
+        top: 12px
+        right: 0
+        z-index: 20
+        color: white
+        font-size: 48px
+        line-height: 48px
+        height: 72px
+        width: 72px
+        padding: 12px
+        border-bottom: none
+        text-align: center
+
+    &.show
+        text-align: center
+        border-bottom: none
+        background: $blue
+        color: white
+        right: -36px
+        top: 50%
+        height: 48px
+        width: 36px
+        margin-top: -24px
+        line-height: 48px
+        border-bottom-right-radius: 5px
+        border-top-right-radius: 5px
+        z-index: 15
+
+        transition: right 0.25s
+
+        &.hide
+            right: -12px
+
+        body.toggled &
+            right: -36px
+
+
+nav
+    font-size: 14px
+    border-right: 1px solid rgba(0, 0, 0, 0.05)
+    width: 100%
+    position: fixed
+    left: -100%
+    transition: left 0.25s
+
+    top: 0
+    right: 0
+    bottom: 0
+    display: block
+    background: $blue
+
+    a
+        border-bottom: none
+        color: white
+        font-size: 16px
+        line-height: 32px
+        height: 32px
+
+    h3
+        text-transform: uppercase
+        margin-top: 12px
+        font-size: 18px
+        color: white
+        font-weight: 600
+
+    body.toggled &
+        left: 0
+
+    @media screen and (min-width: $tablet)
+        background: white
+        display: block
+        position: absolute
+        left: 0
+        top: 0
+        bottom: 0
+        width: 216px
+        z-index: 8
+        padding-top: 96px
+
+        h3
+            color: #bbb
+            font-size: 14px
+            margin-bottom: 6px
+            font-weight: 400
+
+
+        a
+            border-bottom: none
+            font-weight: 200
+            font-size: 14px
+            display: block
+            color: #777
+            font-size: 12px
+            height: 24px
+
+            &:hover
+                color: #94a9d1
+
+
+
+
+
+    ul, ul li
+        list-style: none
+        padding: 0
+        margin: 0
+
+        &.active a
+            @media screen and (min-width: $tablet)
+                color: #94a9d1
+            font-weight: 600
+
+    ul
+        margin-bottom: 18px
+
+div.scroll
+    padding: 22px
+    overflow-y: scroll
+    height: 100%
+    z-index: 10
+    -webkit-overflow-scrolling: touch
+
+main
+    color: #555
+    font-weight: 200
+    width: 100%
+    padding: 24px
+
+    @media screen and (min-width: $tablet)
+        height: 100%
+        position: absolute
+        position: relative
+        z-index: 6
+
+        top: 0
+        bottom: 0
+        right: 0
+        left: 0
+
+        padding: 22px
+        padding-top: 110px
+        padding-left: 240px
+        overflow-y: scroll
+        max-width: 1440px
+
+    a.edit
+        position: absolute
+        top: 146px
+        @media screen and (min-width: $tablet)
+            top: 122px
+        right: 24px
+        border-bottom: none
+
+    h1
+        margin-bottom: 12px
+
+    h2
+        margin-top: 24px
+        margin-bottom: 12px
+        border-bottom: 1px dotted rgba(0, 0, 0, 0.10)
+
+    h3
+        margin-top: 18px
+
+    p
+        margin-top: 0
+        margin-bottom: 12px
+        line-height: 1.75
+
+    blockquote
+        background: rgba(247, 202, 201, 0.2)
+        margin-top: 18px
+        margin-bottom: 18px
+        margin-left: 0
+        padding: 6px
+        padding-left: 12px
+        border-left: 5px solid #f6cfcf
+
+        p
+            margin: 0
+            padding: 0
+
+pre, code
+    font-size: 12px
+    font-family: 'Source Code Pro', monospace
+
+p code, li code
+    background: #fbfbfb
+    border-radius: 5px
+    padding: 3px 5px
+    display: inline-block
+    color: #92a0b9
+    box-shadow: 0 1px 0px 0px rgba(0, 0, 0, 0.1)
+
+pre
+    margin-top: 12px
+    margin-bottom: 15px
+    padding: 5px
+    background: #fbfbfb
+    border-radius: 10px
+    box-shadow: 0 3px 0px 0px rgba(0, 0, 0, 0.1)
+
+img
+    max-width: 100%