From dd9ce4277849df925eedc66613cf6226b0bee9c5 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kspearrin@imobile3.com>
Date: Sun, 9 Oct 2016 00:02:48 -0400
Subject: [PATCH] brand styling

---
 _layouts/category.html |  2 +-
 _layouts/default.html  | 11 ++++--
 css/styles.scss        | 78 ++++++++++++++++++++++++++++++++++++------
 index.html             |  4 +--
 4 files changed, 80 insertions(+), 15 deletions(-)

diff --git a/_layouts/category.html b/_layouts/category.html
index 5d6bc6d5..a9b36081 100644
--- a/_layouts/category.html
+++ b/_layouts/category.html
@@ -3,7 +3,7 @@ layout: default
 ---
 
 <div class="container">
-    <h1>{{page.title}}</h1>
+    <h3>{{page.title}}</h3>
     <ol>
         {% for article in site.articles %}
         {% if article.category == page.title %}
diff --git a/_layouts/default.html b/_layouts/default.html
index e797b2fd..598488d8 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -35,7 +35,13 @@
             <div class="collapse navbar-collapse" id="navbar-collapse">
                 <ul class="nav navbar-nav navbar-right">
                     <li>
-                        <a href="/"><i class="fa fa-home fa-fw"></i> Home</a>
+                        <a href="/"><i class="fa fa-support fa-fw"></i> Help Center</a>
+                    </li>
+                    <li>
+                        <a href="https://bitwarden.com/contact/"><i class="fa fa-envelope fa-fw"></i> Contact Us</a>
+                    </li>
+                    <li>
+                        <a href="https://bitwarden.com"><i class="fa fa-share fa-flip-horizontal fa-fw"></i> Return to bitwarden.com</a>
                     </li>
                 </ul>
             </div>
@@ -45,7 +51,8 @@
     {{content}}
 
     <footer class="text-center">
-        &copy; Copyright  2015 - {{'now' | date: "%Y"}}, 8bit Solutions LLC
+        &copy; Copyright  2015 - {{'now' | date: "%Y"}}<br />
+        8bit Solutions LLC
     </footer>
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
diff --git a/css/styles.scss b/css/styles.scss
index d116c001..7400402f 100644
--- a/css/styles.scss
+++ b/css/styles.scss
@@ -1,26 +1,84 @@
 ---
 ---
 
+$brand-primary: #3c8dbc;
+$brand-danger: #dd4b39;
+$brand-success: #00a65a;
+$brand-info: #555555;
+$brand-warning: #f39c12;
+$brand-primary-accent: #286090;
+$brand-secondary: #2c3e50;
+$brand-dark-accent: #222d32;
+
+$font-size-base: 15px;
+$font-family-sans-serif: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$headings-font-family: "Open Sans", sans-serif;
+$text-color: $brand-secondary;
+$gray-lighter: lighten(#000, 93.5%);
+
 html {
-  position: relative;
-  min-height: 100%;
+    position: relative;
+    min-height: 100%;
 }
 
 body {
-  margin-bottom: 60px;
-  padding-top: 51px;
+    margin-bottom: 60px;
+    padding-top: 51px;
+    font-family: $font-family-sans-serif;
+    font-size: 15px;
+}
+
+h1, h2, h3, h4, h5 {
+    font-family: $headings-font-family;
+    margin-top: 0;
+}
+
+h1 {
+    font-size: 30px;
+}
+
+h2 {
+    font-size: 25px;
+}
+
+h3 {
+    font-size: 20px;
+}
+
+a {
+    color: $brand-primary;
+}
+
+.navbar-inverse {
+    background-color: $brand-dark-accent;
+    color: white;
+
+    .navbar-brand {
+        font-family: $headings-font-family;
+
+        .navbar-nav > li > a {
+            color: white;
+        }
+    }
+
+    .navbar-brand, .navbar-nav > li > a {
+        color: white;
+    }
 }
 
 .search-header {
-    background: lightblue;
+    background-color: $brand-primary;
     padding: 50px 0;
     margin-bottom: 20px;
+    color: white;
 }
 
 footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 60px;
-  background-color: lightgray;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 60px;
+    background-color: $brand-dark-accent;
+    color: white;
+    padding: 8px 0;
 }
diff --git a/index.html b/index.html
index 76b8c6b0..33587cbb 100644
--- a/index.html
+++ b/index.html
@@ -7,9 +7,9 @@ title: Help, FAQ, and Support
     <div class="container">
         <form action="/search/" method="get">
             <div class="input-group">
-                <input type="search" class="form-control" placeholder="Type your problem here..." name="q">
+                <input type="search" class="form-control input-lg" placeholder="Type your problem here..." name="q">
                 <span class="input-group-btn">
-                    <button class="btn btn-default" type="submit">Search</button>
+                    <button class="btn btn-lg btn-default" type="submit">Search</button>
                 </span>
             </div>
         </form>