From 647eaf2a4ca51281c3ae15af7b2c98aa32e1c7d7 Mon Sep 17 00:00:00 2001
From: Severyn Kozak <severyn.kozak@gmail.com>
Date: Wed, 18 Jun 2014 13:05:21 -0400
Subject: [PATCH] Add _logo.sass, add logo to docs page.

Add:
        static/sass/_logo.sass
                -The `bitshift` logo visible on our home-page may likely end up on
                other pages; move all of its styling to a SASS partial.

        templates/docs.html
                -Add `bitshift` logo.
---
 static/sass/_logo.sass | 18 ++++++++++++++++++
 static/sass/docs.sass  |  1 +
 static/sass/index.sass | 22 ++--------------------
 templates/docs.html    |  8 ++++++++
 templates/index.html   | 10 +++++-----
 5 files changed, 34 insertions(+), 25 deletions(-)
 create mode 100644 static/sass/_logo.sass

diff --git a/static/sass/_logo.sass b/static/sass/_logo.sass
new file mode 100644
index 0000000..ea22411
--- /dev/null
+++ b/static/sass/_logo.sass
@@ -0,0 +1,18 @@
+a#logo
+    letter-spacing: 0.3em
+    text-decoration: none
+
+    div#logo
+        font-size: 400%
+        padding-bottom: 0.2em
+        text-align: center
+
+        #logo-bit
+            color: $baseColor1
+
+        #logo-angle
+            color: $baseColor3
+
+        #logo-shift
+            color: $baseColor2
+            font-style: italic
diff --git a/static/sass/docs.sass b/static/sass/docs.sass
index a96cd57..6d23e32 100644
--- a/static/sass/docs.sass
+++ b/static/sass/docs.sass
@@ -1,4 +1,5 @@
 @import variables
+@import logo
 
 h1
     color: $baseColor1
diff --git a/static/sass/index.sass b/static/sass/index.sass
index 2c31167..550a8c6 100644
--- a/static/sass/index.sass
+++ b/static/sass/index.sass
@@ -4,6 +4,7 @@
 
 @import mixins
 @import variables
+@import logo
 
 $minSearchFieldsWidth: 490px
 $codeWidth: 700px
@@ -84,25 +85,6 @@ div#search-field
     top: 0
     width: 40%
 
-    a#title
-        letter-spacing: 0.3em
-        text-decoration: none
-
-        div#title
-            font-size: 400%
-            padding-bottom: 0.2em
-            text-align: center
-
-            #title-bit
-                color: $baseColor1
-
-            #title-angle
-                color: $baseColor3
-
-            #title-shift
-                color: $baseColor2
-                font-style: italic
-
     form#search-bar
         min-width: $minSearchFieldsWidth
 
@@ -143,7 +125,7 @@ div#search-field
         position: absolute
         width: 100%
 
-        #title
+        #logo
             position: absolute
             top: -1%
             left: 1%
diff --git a/templates/docs.html b/templates/docs.html
index 9a319eb..0ac9bc5 100644
--- a/templates/docs.html
+++ b/templates/docs.html
@@ -9,6 +9,14 @@
 = endblock
 
 = block body
+  <a id="logo" href="/">
+    <div id="logo">
+      <span id="logo-bit">bit</span
+      ><span id="logo-angle">&laquo;</span
+      ><span id="logo-shift">shift</span>
+    </div>
+  </a>
+
   <ul>
     <li>
       <h1><span>&raquo;</span> Usage</h1>
diff --git a/templates/index.html b/templates/index.html
index bdac619..62601fe 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -19,11 +19,11 @@
 
 = block body
   <div id="search-field">
-    <a id="title" href="/">
-      <div id="title">
-        <span id="title-bit">bit</span
-        ><span id="title-angle">&laquo;</span
-        ><span id="title-shift">shift</span>
+    <a id="logo" href="/">
+      <div id="logo">
+        <span id="logo-bit">bit</span
+        ><span id="logo-angle">&laquo;</span
+        ><span id="logo-shift">shift</span>
       </div>
     </a>