Add text to about page; fix copyright year.

Add:
        templates/about.html, static/sass/about.sass
                -Add text to the about page, and the necessary styling for it.

        app.py, templates/layout.html
                -Add an automated copyright year loader.

app.py

@@ -2,10 +2,10 @@
 Module to contain all the project's Flask server plumbing.
 """
 
-from json import dumps
+import datetime
 
+from json import dumps
 from flask import Flask, make_response, render_template, request
-
 from bitshift import assets
 from bitshift.database import Database
 from bitshift.languages import LANGS
@@ -13,6 +13,7 @@ from bitshift.query import parse_query, QueryParseException
 
 app = Flask(__name__)
 app.config.from_object("bitshift.config")
+app.jinja_env.globals.update(year=datetime.datetime.now().year)
 
 app_env = app.jinja_env
 app_env.line_statement_prefix = "="

static/sass/about.sass

@@ -1,3 +1,4 @@
+@import mixins
 @import variables
 
 .bg
@@ -12,7 +13,7 @@
         background: url(../img/about/bg1.png) no-repeat
         background-size: cover
         height: 400px
-        top: -200px
+        top: -210px
 
     &#img-2
         background: url(../img/about/bg2.png) no-repeat
@@ -26,6 +27,12 @@
         height: $img-height + 250
         top: 1600px
 
+    &#img-4
+        background: url(../img/about/bg4.png) no-repeat
+        background-size: cover
+        height: $img-height + 300
+        top: 5450px
+
 div.section
     background-color: white
     border: 1px solid $baseColor2
@@ -39,12 +46,40 @@ div.section
         margin-top: 0px
 
     div.centered
+        font-size: 110%
+        line-height: 150%
         margin-left: auto
         margin-right: auto
         width: 50%
 
+        &#how
+            b
+                font-family: monospace
+                font-size: 110%
+
+            ul
+                list-style: none
+
+                span
+                    color: $baseColor1
+                    font-weight: bold
+
         h1
             color: $baseColor1
 
             span
                 color: $baseColor2
+
+        a
+            color: #727070
+            font-style: italic
+            text-decoration: none
+
+            &:hover
+                @extend .t3
+
+                color: #575757
+
+        span#title
+            color: $baseColor1
+            font-weight: bold

templates/about.html

@@ -12,28 +12,44 @@
 = endblock
 
 = block after_body
-  <div id="img-1" class="bg" speed="-1.25"></div>
+    <div id="img-1" class="bg" speed="-1.25"></div>
   <div id="img-2" class="bg" speed="1.8"></div>
   <div id="img-3" class="bg" speed="1.6"></div>
+  <div id="img-4" class="bg" speed="3.8"></div>
 
   <div id="top" class="section">
     <div class="centered">
-      <h1><span>&raquo;</span> What?</h1>
-      Lorizzle dolor sit fo shizzle my nizzle, consectetuer adipiscing gizzle. Nullizzle sapizzle velizzle, dizzle dang, the bizzle dang, doggy own yo', dawg. Pellentesque egizzle tortizzle. Fo shizzle mah nizzle fo rizzle, mah home g-dizzle eros. Away hizzle dolizzle dapibus izzle tempizzle tempizzle. Maurizzle pellentesque nibh et turpis. Sure ass fo shizzle. Pellentesque eleifend rhoncus nisi. In rizzle i saw beyonces tizzles and my pizzle went crizzle break it down dictumst. Donec dapibizzle. Curabitizzle tellus sizzle, pretizzle gizzle, mattizzle , we gonna chung vitae, nunc. Sure suscipizzle. Integizzle owned velit check out this yo mamma.
+      <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>
 
   <div class="section">
-    <div class="centered">
-      <h1><span>&raquo;</span> How?</h1>
-      Curabitizzle et dizzle that's the shizzle nisi fo mollizzle. Fo shizzle potenti. Morbi odio. Crackalackin neque. Izzle ma nizzle. You son of a bizzle mauris rizzle, ma nizzle, feugiat doggy amizzle, phat in, pede. Pellentesque fo shizzle mah nizzle fo rizzle, mah home g-dizzle. Vestibulizzle shut the shizzle up mi, volutpat in, yo mamma sizzle, adipiscing sempizzle, velizzle. Crizzle hizzle ipsizzle. Gangster volutpizzle felis vizzle fo shizzle. Shizzlin dizzle for sure justo in fo shizzle sodales fizzle. Own yo' venenatis my shizz check out this i'm in the shizzle. Nunc funky fresh. Suspendisse venenatis fo shizzle boom shackalack. Curabitur fo shizzle ante. Nunc shut the shizzle up, fo shizzle eu ass hendrerizzle, dawg felizzle elementizzle sizzle, fizzle aliquizzle magna felis luctus pede. Nam a pot. Class fo shizzle taciti shizzle my nizzle crocodizzle ad litora for sure bizzle conubia fizzle, dang inceptos shit. Aliquam interdizzle, nizzle nizzle elementizzle nonummy, da bomb fo shizzle stuff leo, shizzlin dizzle semper shiznit arcu crazy sem.
+    <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 on 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
+      parser 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>
-      Praesent gangster fo shizzle sizzle maurizzle posuere funky fresh. Aliquam lacinia viverra fo shizzle my nizzle. Crizzle crazy dawg leo sodales shizzlin dizzle. Fo shizzle mah nizzle fo rizzle, mah home g-dizzle crackalackin, crunk vitae boofron convallizzle, nulla ligula shizzlin dizzle metizzle, gangsta venenatis augue dui izzle arcu. Shut the shizzle up gravida lacizzle izzle bling bling. Vivamus arcu magna, cool ghetto, faucibizzle mah nizzle, placerat izzle, maurizzle. Sizzle vehicula laorizzle my shizz. Bow wow wow erizzle dizzle, hendrerizzle pizzle, condimentizzle ac, shiz away, arcu. Morbi aliquizzle placerat nulla. Maecenas uhuh ... yih! funky fresh mammasay mammasa mamma oo sa da bomb. Fusce metus sizzle, egestas eu, get down get down quizzle, elementum eget, we gonna chung. Shizznit dawg nunc a for sure shizzle my nizzle crocodizzle go to hizzle. Fusce sagittizzle, nulla eget sollicitudin mollis, lacizzle quam tellivizzle erizzle, vitae vehicula boofron we gonna chung vitae arcu. Phat vehicula gangster. Shiz sizzle mi. Pizzle eu turpis. Vestibulum a magna. Away fizzle erat, tellivizzle funky fresh, tempizzle fo shizzle, facilisizzle in, pede. For sure tellizzle. Black nisi erizzle, crazy mammasay mammasa mamma oo sa amizzle, ultricies izzle, dope nizzle, augue.
+      <h1><span>&raquo;</span> Who</h1>
+      Who who? <b>Us who.</b> <span style="font-size:70%;">More stuffs to come (photos and bios).</span>
     </div>
   </div>
 = endblock

templates/layout.html

@@ -41,7 +41,7 @@
         <a href="/about">about</a>
         <a href="/developers">developers</a>
         <p>
-          &copy; 2012-2013 bitshift. <span>All Rights Reserved.</span>
+          &copy; {{ year }} bitshift
         </p>
       </div>
     </div>