Styled the navbar; allowed collapsing it to give the user more screen space

assets/coffee/gargoyle.coffee

@@ -0,0 +1,12 @@
+$(document).ready( ->
+
+  $('#nav-toggle').on('click', toggleNav)
+
+)
+
+toggleNav = () ->
+  bodyElem = $('body')
+  if bodyElem.hasClass('collapsed')
+    bodyElem.removeClass('collapsed')
+  else
+    bodyElem.addClass('collapsed')

assets/styles/kraken.scss

@@ -6,6 +6,7 @@ $box-shadow-2: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 body{
   background: lightgrey;
   padding-left: $nav-width;
+  transition: padding-left 230ms ease-in-out;
 }
 
 .card{
@@ -26,9 +27,21 @@ body{
   color: white;
   box-shadow: $box-shadow-1;
   box-sizing: border-box;
+  transition: left 230ms ease-in-out;
 
   h3{
-    text-align: center;
+    padding-left: 15px;
+    text-align: left;
+
+    i{
+      position: absolute;
+      right: 22px;
+      margin-top: 5px;
+      font-size: 3rem;
+      &:hover{
+        cursor: pointer;
+      }
+    }
   }
 
   ul{
@@ -41,6 +54,13 @@ body{
       &:first-child{
         border-top: 1px solid #999;
       }
+
+      i{
+        position: absolute;
+        right: 18px;
+        margin-top: 5px;
+        font-size: 3rem;
+      }
     }
 
     a{
@@ -60,6 +80,13 @@ body{
   }
 }
 
+body.collapsed{
+  padding-left: 64px;
+}
+body.collapsed #main-nav{
+  left: calc($nav-width * -1 + 64px);
+}
+
 #main-actions{
   width: 100%;
   max-width: 100%;