Merge pull request #24 from swanky-docs/feature/scrollable-side-nav

feat(build): add scroll bar to nav region

css/components/code-md.styl

@@ -3,10 +3,11 @@
 // ...and tweaked a little
 
 .pre
+  position relative
   margin-top: 0
-  margin-bottom: 0
+  margin-bottom 4rem
   word-wrap: normal
-  padding: 16px
+  padding: 20px
   overflow: auto
   line-height: 1.45
   background-color: $alabaster
@@ -37,3 +38,16 @@
   word-wrap: normal
   background-color: transparent
   border: 0
+
+:global
+  .language-type
+    position absolute
+    top 5px
+    right 0
+    color $grey-smoke
+    text-align right
+    font-size 1.25rem
+    padding 5px 10px 0
+    line-height 15px
+    height 15px
+    font-weight 600

css/components/code.styl

@@ -1,7 +1,7 @@
 // Code Preview Window
 .code-snippet
   position relative
-  margin-bottom 25px
+  margin-bottom 4rem
 
 .render-preview
   display: block;

css/components/navigation.styl

@@ -34,7 +34,7 @@
     padding 25px 20px 25px 30px
     border-bottom 1px solid darken($block-background-colour, 5%)
 
-  // Sub navigation
+// Sub navigation
   .li > .ul
     list-style none
     padding 0
@@ -103,3 +103,15 @@
 :global
   a.sw-active
     color: $brand-primary!important
+
+.guide-links
+  margin-bottom 40px
+  padding-bottom 20px
+  border-bottom 1px solid $white-smoke
+
+  .a
+    text-decoration none !important
+    font-weight 600
+
+  .next
+    float right

css/components/sidebar.styl

@@ -5,14 +5,17 @@
 
 .sidebar
   background $block-background-colour
-  height 100%
   position fixed
   z-index 1
+  overflow-x auto
+  -webkit-overflow-scrolling touch
+  -ms-overflow-style none
   width $sidebar-width
   top $header-height-mobile
+  bottom 0
   left -($sidebar-width)
   transition all $duration ease
-  transform: translate3d(0, 0, 0);
+  transform translate3d(0, 0, 0)
 
   @media screen and (min-width: $screen-is-bigger-than-tablet)
     display block
@@ -29,5 +32,5 @@
       box-shadow 2px 0px 6px 0px rgba(0,0,0,0.2)
 
       @media screen and (min-width: $screen-is-bigger-than-tablet)
-        transform: translate3d(0, 0, 0);
+        transform translate3d(0, 0, 0)
         box-shadow none