Work on #55: add styled bio divs.

Add:
        templates/about.html, static/sass/about.sass
                -Add biography-section HTML structure and styling, containing
                filler images and lorem ipsum; now, it's just a matter of
                substituting in the appropriate content.

        static/img/about.bio(1, 2, 3).jpg
                -Add placeholder bio images.

static/sass/about.sass

@@ -5,6 +5,8 @@
 @import mixins
 @import variables
 
+$centered-section-min-width: 500px
+
 div.bg
     $img-height: 650px
 
@@ -28,22 +30,22 @@ div.bg
         background: url(../img/about/bg3.png) no-repeat
         background-size: cover
         height: $img-height + 250
-        top: 1600px
+        top: 1560px
 
     &#img-4
         background: url(../img/about/bg4.png) no-repeat
         background-size: cover
-        height: $img-height + 300
-        top: 5450px
+        height: $img-height + 400
+        top: 5280px
 
 div.section
     background-color: white
     border: 1px solid $baseColor2
-    height: 300px
     margin-bottom: 200px
     margin-top: 300px
     padding-bottom: 50px
     padding-top: 20px
+    overflow: hidden
 
     &#top
         margin-top: 0px
@@ -53,7 +55,8 @@ div.section
         line-height: 150%
         margin-left: auto
         margin-right: auto
-        width: 50%
+        min-width: 500px
+        width: 65%
 
         &#how
             b
@@ -86,3 +89,35 @@ div.section
         span#title
             color: $baseColor1
             font-weight: bold
+
+div.person
+    font-size: 80%
+    overflow: hidden
+
+    &#top
+        margin-top: 40px
+
+    >div
+        $image-min-width: 100px
+
+        display: inline-block
+        height: 100%
+        margin-bottom: 40px
+        vertical-align: top
+
+        &.photo
+            margin-right: 40px
+            width: $image-min-width
+
+            img
+                display: block
+                height: $image-min-width
+                width: $image-min-width
+
+        &.bio
+            min-width: $centered-section-min-width - $image-min-width - 50px
+            width: 70%
+
+            h1
+                font-size: 130%
+                margin: 0

templates/about.html

@@ -12,10 +12,10 @@
 = endblock
 
 = block after_body
-    <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="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.64"></div> -->
 
   <div id="top" class="section">
     <div class="centered">
@@ -24,10 +24,10 @@
         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.
+        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>
 
@@ -42,14 +42,40 @@
       </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.
+      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>
-      Who who? <b>Us who.</b> <span style="font-size:70%;">More stuffs to come (photos and bios).</span>
+      <div id="top" class="person">
+        <div class="photo">
+          <img src="img/about/bio1.jpg" alt="Severyn Kozak's photo.">
+        </div
+        ><div class="bio">
+          <h1>Benjamin Attal</h1>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor bibendum enim. Proin porttitor tortor eget scelerisque pharetra. Etiam ac arcu congue, ultricies sem a, hendrerit arcu. Duis imperdiet tellus ut arcu tincidunt, ut sagittis enim aliquam. Quisque eget magna a lacus feugiat fringilla. Etiam consequat dictum neque nec ullamcorper. Sed in nunc erat. Donec at metus feugiat, consequat massa in, lacinia purus. Fusce pulvinar iaculis cursus. Curabitur cursus sit amet ligula eleifend sollicitudin.
+        </div>
+      </div>
+      <div class="person">
+        <div class="photo">
+          <img src="img/about/bio2.jpg" alt="Severyn Kozak's photo.">
+        </div
+        ><div class="bio">
+          <h1>Benjamin Kurtovic</h1>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor bibendum enim. Proin porttitor tortor eget scelerisque pharetra. Etiam ac arcu congue, ultricies sem a, hendrerit arcu. Duis imperdiet tellus ut arcu tincidunt, ut sagittis enim aliquam. Quisque eget magna a lacus feugiat fringilla. Etiam consequat dictum neque nec ullamcorper. Sed in nunc erat. Donec at metus feugiat, consequat massa in, lacinia purus. Fusce pulvinar iaculis cursus. Curabitur cursus sit amet ligula eleifend sollicitudin.
+        </div>
+      </div>
+      <div class="person">
+        <div class="photo">
+          <img src="img/about/bio3.jpg" alt="Severyn Kozak's photo.">
+        </div
+        ><div class="bio">
+          <h1>Severyn Kozak</h1>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor bibendum enim. Proin porttitor tortor eget scelerisque pharetra. Etiam ac arcu congue, ultricies sem a, hendrerit arcu. Duis imperdiet tellus ut arcu tincidunt, ut sagittis enim aliquam. Quisque eget magna a lacus feugiat fringilla. Etiam consequat dictum neque nec ullamcorper. Sed in nunc erat. Donec at metus feugiat, consequat massa in, lacinia purus. Fusce pulvinar iaculis cursus. Curabitur cursus sit amet ligula eleifend sollicitudin.
+        </div>
+      </div>
     </div>
   </div>
 = endblock