Integrate advanced search form with existing UI.

Add:
    static/js/index.js
        -Add a `jQuery` callback to `fadeIn()` and `fadeOut()` the
        advanced-search form.

    templates/index.html, static/sass/index.sass
        -Add advanced-search form toggling button markup and styling.

static/js/index.js

@@ -1,8 +1,22 @@
 /*
- * @file Manages all library initialization, query entry, server
- *  querying, and results diplay for `index.html`.
+ * @file Manages all library initialization, jQuery callbacks, query entry
+ *      callbacks, server querying, and results diplay for `index.html`.
  */
 
+var advancedSearchDiv = $("div#advanced-search");
+var advancedSearchButton = $("button#advanced-search");
+advancedSearchDiv.hide();
+advancedSearchButton.click(function(){
+    if(!advancedSearchDiv.hasClass("visible")){
+        advancedSearchDiv.fadeIn(500);
+        advancedSearchDiv.addClass("visible");
+    }
+    else {
+        advancedSearchDiv.fadeOut(300);
+        advancedSearchDiv.removeClass("visible");
+    }
+});
+
 $(function() {
     $("#date-last-modified").datepicker();
     $("#date-created").datepicker();

static/sass/_variables.sass

@@ -5,3 +5,6 @@
 $baseColor1: #A31F34
 $baseColor2: #8A8B8C
 $baseColor3: #C2C0BF
+
+$lightBlue: #4D90FE
+$blue: #3177EB

static/sass/index.sass

@@ -6,7 +6,7 @@
 @import variables
 
 .ui-datepicker
-    font-size: 0.7em
+    font-size: 70%
 
 .twitter-typeahead
     width: 100%
@@ -52,7 +52,7 @@ div#search-field
     width: 34%
 
     #title
-        font-size: 4em
+        font-size: 400%
         padding-bottom: 0.5em
         text-align: center
 
@@ -68,14 +68,32 @@ div#search-field
 
     form#search-bar
 
-        input[type="text"]
+        input[type="text"], button
+            @extend .t3
             @include vendor(box-sizing, border-box)
 
-            border: 1px solid $baseColor1
-            font-size: 1.1em
+            border: 1px solid $baseColor2
+            font-size: 110%
             margin-bottom: 0px
             padding: 6px
-            width: 100%
+            width: 80%
+
+            &:hover
+                border-color: $baseColor1
+
+        button
+            background-color: $lightBlue
+            border: 1px solid $baseColor2
+            color: white
+            display: inline
+            white-space: nowrap
+            overflow: hidden
+            width: 20%
+
+            &.clicked, &:hover
+                @extend .t3
+
+                background-color: $blue
 
         div#advanced-search
             background-color: white
@@ -83,9 +101,7 @@ div#search-field
             margin: 0px
             overflow: auto
             padding: 0px
-
-            &.visible
-                padding-bottom: 30px
+            display: none
 
             >div
                 @include vendor(box-sizing, border-box)
@@ -107,13 +123,13 @@ div#search-field
 
                         label
                             display: block
-                            font-size: 1.1em
+                            font-size: 110%
 
                 input[type="text"]
                     @extend .t2
 
                     border-color: $baseColor3
-                    font-size: 1em
+                    font-size: 100%
                     padding: 4px
                     width: 100%
 

templates/index.html

@@ -18,7 +18,7 @@
 = endblock
 
 = block body
-  <div id="search-field" class="partly-visible">
+  <div id="search-field">
     <div id="title">
       <span id="title-bit">bit</span
       ><span id="title-angle">&laquo;</span
@@ -26,7 +26,9 @@
     </div>
 
     <form id="search-bar">
-      <input type="text" name="query">
+      <input type="text" name="query"
+      ><button id="advanced-search">Advanced search</button>
+
       <div id="advanced-search">
         <!-- Tags are closed on the following line to remove whitespace between divs. -->
         <div id="col1">