From 7bf00418f55e7594184ecbe4b311a4f1b16fe75d Mon Sep 17 00:00:00 2001
From: JT <jt@ofitsownkind.com>
Date: Wed, 23 Jul 2014 01:34:26 -0700
Subject: [PATCH] refactor footer css

---
 website/source/layouts/_footer.erb      |  2 +-
 website/source/stylesheets/_footer.less | 27 +++++++++++++++++++------
 website/source/stylesheets/main.css     | 24 ++++++++++++++++++++--
 3 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/website/source/layouts/_footer.erb b/website/source/layouts/_footer.erb
index 32ae55303..4ca57b1b1 100644
--- a/website/source/layouts/_footer.erb
+++ b/website/source/layouts/_footer.erb
@@ -11,7 +11,7 @@
 		</div>
 		<div class="footer-hashi os">
 			<span>&copy; 2014. A <a href="http://www.hashicorp.com">HashiCorp</a> Project.</span>
-			<a class="hashi-logo" href="http://www.hashicorp.com"><img src="/images/footer-hashicorp-logo.png"></a>
+			<a class="hashi-logo" href="http://www.hashicorp.com"><i class="hashi-logo"></i></a>
 		</div>
 	</div>
 </div>
diff --git a/website/source/stylesheets/_footer.less b/website/source/stylesheets/_footer.less
index 736abf8ba..98a1a7b71 100644
--- a/website/source/stylesheets/_footer.less
+++ b/website/source/stylesheets/_footer.less
@@ -84,8 +84,8 @@
 
     .footer-hashi{
         float: right;
+        padding-top: 8px;
         letter-spacing: 2px;
-        margin-bottom: 30px;
 
         a{
             color: black;
@@ -95,18 +95,33 @@
         span{
             margin-right: 10px;
         }
-        
-        img{
+
+        .hashi-logo{
             display: inline-block;
-            width: 37px;
-            height: 40px;
+            vertical-align: middle;
+            i{
+                display: inline-block;
+                width: 37px;
+                height: 40px;   
+                background: url(../images/footer-hashicorp-logo.png) 0 0 no-repeat;
+                .img-retina("../images/footer-hashicorp-logo.png", "../images/footer-hashicorp-logo@2x.png", 37px, 40px);                     
+            }            
         }
     }
 }
 
+.page-sub{
+    #footer-wrap{
+        padding: 0;
+    }
+
+    #footer{
+        background-color: @black;
+        transform: none;
+    }
+}
 
 @media (max-width: 768px) {
-
     #footer{
         .footer-hashi {
             span{
diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css
index 65f2840a0..53deaabf5 100644
--- a/website/source/stylesheets/main.css
+++ b/website/source/stylesheets/main.css
@@ -405,8 +405,8 @@ body.page-sub #header .main-links.navbar-nav li + li::before {
 }
 #footer .footer-hashi {
   float: right;
+  padding-top: 8px;
   letter-spacing: 2px;
-  margin-bottom: 30px;
 }
 #footer .footer-hashi a {
   color: black;
@@ -415,10 +415,30 @@ body.page-sub #header .main-links.navbar-nav li + li::before {
 #footer .footer-hashi span {
   margin-right: 10px;
 }
-#footer .footer-hashi img {
+#footer .footer-hashi .hashi-logo {
+  display: inline-block;
+  vertical-align: middle;
+}
+#footer .footer-hashi .hashi-logo i {
   display: inline-block;
   width: 37px;
   height: 40px;
+  background: url(../images/footer-hashicorp-logo.png) 0 0 no-repeat;
+  background-image: url("../images/footer-hashicorp-logo.png");
+  background-size: 37px 40px;
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  #footer .footer-hashi .hashi-logo i {
+    background-image: url("../images/footer-hashicorp-logo@2x.png");
+    background-size: 37px 40px;
+  }
+}
+.page-sub #footer-wrap {
+  padding: 0;
+}
+.page-sub #footer {
+  background-color: #000000;
+  transform: none;
 }
 @media (max-width: 768px) {
   #footer .footer-hashi span {