Reformat about.html, embed vimeo demo video.

Add:
        templates/about.html. static/(sass/about.sass, js/about.js)
                -Embed our Vimeo video, and add the Javascript necessary to make
                it fluid-width.

Ref:
        templates/about.html
                -The file's indented formatting was completely mangled in a
                previous commit; reformat.

static/js/about.js

@@ -4,6 +4,10 @@
 
 var lastVertPos = $(window).scrollTop();
 
+/*
+ * Scroll `div#img-[1-4]` at a greater speed than the text, producing a
+ * parallax effect.
+*/
 $(window).scroll(function(e){
     var currVertPos = $(window).scrollTop();
     var delta = currVertPos - lastVertPos;
@@ -13,3 +17,30 @@ $(window).scroll(function(e){
     });
     lastVertPos = currVertPos;
 });
+
+/*
+ * Make the dimensions of the vimeo video fluid.
+*/
+(function adjustVimeoDimensions(){
+    var iframe = $("iframe#vimeo")[0];
+    var videoRatio = (iframe.height / iframe.width) * 100;
+
+    iframe.style.position = "absolute";
+    iframe.style.top = "0";
+    iframe.style.left = "0";
+    iframe.width = "100%";
+    iframe.height = "100%";
+
+    iframe.style.height = "";
+    iframe.style.width = "";
+
+    var wrap = document.createElement("div");
+    wrap.className = "fluid-vids";
+    wrap.style.width = "100%";
+    wrap.style.position = "relative";
+    wrap.style.paddingTop = videoRatio + "%";
+
+    var iframeParent = iframe.parentNode;
+    iframeParent.insertBefore(wrap, iframe);
+    wrap.appendChild(iframe);
+}());

static/sass/about.sass

@@ -25,32 +25,36 @@ div.bg
         background: url(../img/about/bg2.png) no-repeat
         background-size: cover
         height: $img-height + 300
-        top: 450px
+        top: 1150px
 
     &#img-3
         background: url(../img/about/bg3.png) no-repeat
         background-size: cover
         height: $img-height + 300
-        top: 1250px
+        top: 2050px
 
     &#img-4
         background: url(../img/about/bg4.png) no-repeat
         background-size: cover
         height: $img-height + 400
-        top: 2500px
+        top: 3200px
 
 div.section
     background-color: white
     border: 1px solid $baseColor2
     margin-bottom: 200px
     margin-top: 300px
-    padding-bottom: 50px
+    padding-bottom: 80px
     padding-top: 20px
     overflow: hidden
 
     &#top
         margin-top: 0px
 
+        iframe#vimeo
+            border: 1px solid $baseColor3
+            margin-top: 40px
+
     div.centered
         font-size: 110%
         line-height: 150%

templates/about.html

@@ -8,7 +8,6 @@
   {{ assets.tag("lib/jquery.min.js") }}
   {{ assets.tag("main.css") }}
   {{ assets.tag("about.css") }}
-  {{ assets.tag("about.js") }}
 = endblock
 
 = block after_body
@@ -18,70 +17,74 @@
   <div id="img-4" class="bg" speed="1.4"></div>
 
   <div id="top" class="section">
-  <div class="centered">
-  <h1><span>&raquo;</span> What</h1>
-  <span id="title">bitshift</span> is an <a href="https://github.com/earwig/bitshift">open-source</a>
-  online source-code search engine, developed by programmers, for programmers. The engine currently aggregates
-  publicly-available code from two online frameworks &#8211; <a href="https://github.com/">GitHub</a> and <a
-  href="https://bitbucket.org/">Bitbucket</a> &#8211; but has the necessary infrastructure to quickly incorporate
-  others, like <a href="http://stackoverflow.com/">StackOverflow</a> and
-  <a href="https://gitorious.org/">Gitorious</a>.  <span id="title">bitshift</span> supports a robust query
-  language, which allows users to search for specific languages, files, dates of creation and last modifcation,
-  and symbols (function, class, and variable names), amongst other attributes.
-  </div>
+    <div class="centered">
+      <h1><span>&raquo;</span> What</h1>
+      <span id="title">bitshift</span> is an <a href="https://github.com/earwig/bitshift">open-source</a>
+      online source-code search engine, developed by programmers, for programmers. The engine currently aggregates
+      publicly-available code from two online frameworks &#8211; <a href="https://github.com/">GitHub</a> and <a
+        href="https://bitbucket.org/">Bitbucket</a> &#8211; but has the necessary infrastructure to quickly incorporate
+      others, like <a href="http://stackoverflow.com/">StackOverflow</a> and
+      <a href="https://gitorious.org/">Gitorious</a>.  <span id="title">bitshift</span> supports a robust query
+      language, which allows users to search for specific languages, files, dates of creation and last modifcation,
+      and symbols (function, class, and variable names), amongst other attributes.
+
+      Watch our introductory video:
+      <iframe id="vimeo" src="//player.vimeo.com/video/98697078" width="317" height="180" frameborder="0"
+        webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+    </div>
   </div>
 
   <div class="section">
-  <div id="how" class="centered">
-  <h1><span>&raquo;</span> How</h1>
-  <span id="title">bitshift</span> has an extensive back-end, roughly divided into three sections:
-  <ul>
-  <li><span>indexer</span> : finds and downloads code from online frameworks</li>
-  <li><span>parser</span> : parses newly crawled code, identifying its symbols</li>
-  <li><span>database</span> : interprets and compiles user searches into database queries</li>
-  </ul>
-
-  The engine was developed over the span of four months, and is primarily implemented in <b>Python</b>, but has
-  parsers in <b>Ruby</b>, <b>Java</b>, and a number of other languages.
-  </div>
+    <div id="how" class="centered">
+      <h1><span>&raquo;</span> How</h1>
+      <span id="title">bitshift</span> has an extensive back-end, roughly divided into three sections:
+      <ul>
+        <li><span>indexer</span> : finds and downloads code from online frameworks</li>
+        <li><span>parser</span> : parses newly crawled code, identifying its symbols</li>
+        <li><span>database</span> : interprets and compiles user searches into database queries</li>
+      </ul>
+      The engine was developed over the span of four months, and is primarily implemented in <b>Python</b>, but has
+      parsers in <b>Ruby</b>, <b>Java</b>, and a number of other languages.
+    </div>
   </div>
 
   <div class="section">
-  <div class="centered">
-  <h1><span>&raquo;</span> Who</h1>
-  <span id="title">bitshift</span> was developed by three seniors from New York City's Stuyvesant High School.
-
-  <div id="top" class="person">
-  <div class="photo">
-    <a href="https://github.com/breuckelen"><img src="img/about/bio1.jpg" alt="Benjamin Attal's photo."></a>
-  </div
-  ><div class="bio">
-    <a href="https://github.com/breuckelen"><h1>Benjamin Attal</a></h1>
-    Benjamin Attal hacked together <span id="title">bitshift</span>'s parsers and is working on data-visualization
-    for bitshift's statistics page. He is a software developer and entrepreneur who enjoys listening to and playing
-    country music, as well as working with smart people.
-  </div>
-  </div>
-  <div class="person">
-  <div class="photo">
-    <a href="https://github.com/earwig"><img src="img/about/bio2.jpg" alt="Ben Kurtovic's photo."></a>
-  </div
-  ><div class="bio">
-    <h1><a href="https://github.com/earwig">Ben Kurtovic</a></h1>
-    Ben Kurtovic designed <span id="title">bitshift</span>’s database and acts as its server admin. In his free time,
-    he edits Wikipedia and invents new ways of confusing the hell out of people through source code obfuscation.
-  </div>
-  </div>
-  <div class="person">
-  <div class="photo">
-    <a href="https://github.com/sevko"><img src="img/about/bio3.jpg" alt="Severyn Kozak's photo."></a>
-  </div
-  ><div class="bio">
-    <h1><a href="https://github.com/sevko">Severyn Kozak</a></h1>
-    Severyn developed <span id="title">bitshift</span>'s crawlers and its front-end. He loves skiing, mathematics
-    that he doesn't understand, and the art of good software development.
-  </div>
-  </div>
-  </div>
+    <div class="centered">
+      <h1><span>&raquo;</span> Who</h1>
+      <span id="title">bitshift</span> was developed by three seniors from New York City's Stuyvesant High School.
+      <div id="top" class="person">
+        <div class="photo">
+          <a href="https://github.com/breuckelen"><img src="img/about/bio1.jpg" alt="Benjamin Attal's photo."></a>
+        </div>
+        <div class="bio">
+          <h1><a href="https://github.com/breuckelen">Benjamin Attal</a></h1>
+          Benjamin Attal hacked together <span id="title">bitshift</span>'s parsers and is working on
+          data-visualization for bitshift's statistics page. He is a software developer and entrepreneur who enjoys
+          listening to and playing country music, as well as working with smart people.
+        </div>
+      </div>
+      <div class="person">
+        <div class="photo">
+          <a href="https://github.com/earwig"><img src="img/about/bio2.jpg" alt="Benjamin Kurtovic's photo."></a>
+        </div>
+        <div class="bio">
+          <h1><a href="https://github.com/earwig">Benjamin Kurtovic</a></h1> Ben Kurtovic designed <span
+            id="title">bitshift</span>’s database and acts as its server admin. In his free time, he edits Wikipedia
+          and invents new ways of confusing the hell out of people through source code obfuscation.
+        </div>
+      </div>
+      <div class="person">
+        <div class="photo">
+          <a href="https://github.com/sevko"><img src="img/about/bio3.jpg" alt="Severyn Kozak's photo."></a>
+        </div>
+        <div class="bio">
+          <h1><a href="https://github.com/sevko">Severyn Kozak</a></h1>
+          Severyn developed <span id="title">bitshift</span>'s crawlers and its front-end. He loves skiing, mathematics
+          that he doesn't understand, and the art of good software development.
+        </div>
+      </div>
+    </div>
   </div>
+
+  {{ assets.tag("about.js") }}
 = endblock