Add hotkey help. Close #47.

Add:
    templates/index.html, static/(sass/index.sass, js/index.js)
        -Add hotkey help div, which fades in whenever the `?` hotkey is pressed.

static/js/index.js

@@ -106,11 +106,24 @@ var searchResultsPage = 1;
         });
     };
 
+    var displayHotkeyHelp = function(){
+        var help = $("div#hotkey-help");
+        console.log("H");
+        if(help.hasClass("hidden"))
+            help.fadeIn(420);
+        else
+            help.fadeOut(420);
+
+        $("div#body").toggleClass("faded");
+        help.toggleClass("hidden");
+    }
+
     var hotkeyActions = {
         "k" : previousResult,
         "j" : nextResult,
         "h" : previousSymbolMatch,
-        "l" : nextSymbolMatch
+        "l" : nextSymbolMatch,
+        "?" : displayHotkeyHelp
     };
 
     $(window).keypress(function(key){

static/sass/index.sass

@@ -22,6 +22,54 @@ $hiddenInfoWidth: 250px
     >li.ui-menu-item a.ui-state-focus
         @include vendor(transition, background-color 0.3s ease-out)
 
+div#body
+    @extend .t3
+
+    &.faded
+        @include opaque(0.8)
+
+div#hotkey-help
+    $width: 40%
+
+    background-color: white
+    border: 1px solid $baseColor3
+    left: 50% - $width / 2
+    min-width: 400px
+    padding: 35px
+    position: fixed
+    top: 30%
+    width: $width
+    z-index: 200
+
+    &.hidden
+        display: none
+
+    div
+        border-bottom: 1px solid $baseColor2
+        color: $baseColor1
+        font-size: 130%
+        padding-bottom: 8px
+        text-align: center
+
+    ul
+        list-style: none
+        margin-left: auto
+        margin-right: auto
+        position: relative
+        width: 300px
+
+        li
+            margin-bottom: 4px
+
+            span.hotkey
+                color: $baseColor1
+                font-family: monospace
+                font-size: 130%
+                font-weight: bold
+
+            span.seperator
+                color: $baseColor2
+
 div#search-field
     @extend .t2
 

templates/index.html

@@ -99,3 +99,15 @@
   {{ assets.tag("index.js") }}
   {{ assets.tag("index.advanced-search-form.js") }}
 = endblock
+
+= block after_body
+  <div id="hotkey-help" class="hidden">
+    <div>Hotkeys</div>
+    <ul>
+      <li><span class="hotkey">k</span> <span class="seperator">:</span> move window up to the previous result</li>
+      <li><span class="hotkey">j</span> <span class="seperator">:</span> move window down to the next result</li>
+      <li><span class="hotkey">h</span> <span class="seperator">:</span> move to the previous symbol match</li>
+      <li><span class="hotkey">l</span> <span class="seperator">:</span> move to the next symbol match</li>
+    </ul>
+  </div>
+= endblock

templates/layout.html

@@ -33,6 +33,9 @@
         </div>
       </div>
 
+      = block after_body
+      = endblock
+
       <div id="footer">
         <a href="/">home</a>
         <a href="/about">about</a>