Add prototype about page.

Add:
        templates/index.html, static/(sass/about.sass, js/about.js, img/about/)
                -Add first iteration of the about page, with basic parallax
                scrolling and filler text.

static/js/about.js

@@ -0,0 +1,17 @@
+var lastVertPos = $(window).scrollTop();
+
+function parallax(){
+    var currVertPos = $(window).scrollTop();
+    var delta = currVertPos - lastVertPos;
+    $(".bg").each(function(){
+        $(this).css("top", parseFloat($(this).css("top")) - delta * 1.35 + "px");
+    });
+    $(".bg#img-1").each(function(){
+        console.log($(this).css("top"));
+    });
+    lastVertPos = currVertPos;
+}
+
+$(window).scroll(function(e){
+    parallax();
+});

static/sass/about.sass

@@ -0,0 +1,37 @@
+body
+    // background-color: red
+
+.bg
+    $img-height: 600px
+
+    position: fixed
+    width: 100%
+    left: 0
+    z-index: -1
+
+    &#img-1
+        background: url("../img/about/bg1.png") no-repeat
+        background-size: cover
+        height: $img-height
+        top: 0px
+
+    &#img-2
+        background: url("../img/about/bg2.png") no-repeat
+        height: $img-height + 200
+        top: $img-height
+
+    &#img-3
+        background: url("../img/about/bg3.png") no-repeat
+        background-size: cover
+        height: $img-height + 100
+        top: 2 * $img-height + 200
+
+div.section
+    background-color: white
+    color: black
+    height: 250px
+    font-family: arial
+    margin-bottom: 35px
+    margin-top: 365px
+    line-height: 20px
+    font-size: 16px

templates/about.html

@@ -1,11 +1,45 @@
-= extends "layout.html"
+<!DOCTYPE html>
+<!-- Global layout template, to be inherited by other project HTML files. -->
 
-= block title
-  About
-= endblock
+<html>
+  <head>
+    <title>
+      bitshift &laquo;
+      = filter lower
+        = block title
+        = endblock
+      = endfilter
+    </title>
 
-= block body
-  <div>
-    About us, son.
-  </div>
-= endblock
+    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
+    <meta name="description" content="bitshift is a source code search engine."/>
+    <meta name="keywords" content="source code language search engine"/>
+    <meta name="author" content="Benjamin Attal Ben Kurtovic Severyn Kozak"/>
+
+    {{ assets.tag("lib/jquery.min.js") }}
+    {{ assets.tag("main.css") }}
+    {{ assets.tag("about.css") }}
+    {{ assets.tag("about.js") }}
+
+    = block head
+    = endblock
+  </head>
+  <body>
+    <div id="img-1" class="bg"></div>
+    <div id="img-2" class="bg"></div>
+    <div id="img-3" class="bg"></div>
+
+    <div id="top" class="section">
+      <h1>Section one</h1>
+      Having done this, our code is complete. If you test the file you’ll see it working. To change the speed, we need to change the fraction in the function; smaller fractions reduce the speed and higher fractions increase it. You can see the final result of this code in this pen I created.
+    </div>
+    <div class="section">
+      <h1>Section two</h1>
+      Having done this, our code is complete. If you test the file you’ll see it working. To change the speed, we need to change the fraction in the function; smaller fractions reduce the speed and higher fractions increase it. You can see the final result of this code in this pen I created.
+    </div>
+    <div class="section">
+      <h1>Section three</h1>
+      Having done this, our code is complete. If you test the file you’ll see it working. To change the speed, we need to change the fraction in the function; smaller fractions reduce the speed and higher fractions increase it. You can see the final result of this code in this pen I created.
+    </div>
+  </body>
+</html>

templates/index.html

@@ -108,6 +108,7 @@
       <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>
+      <li><span class="hotkey">?</span> <span class="seperator">:</span> toggle help</li>
     </ul>
   </div>
 = endblock