footer responsive

website/source/layouts/_footer.erb

@@ -1,21 +1,25 @@
 <div id="footer-wrap">
 	<div id="footer">
-	<div class="container">
-		<div class="footer-links">
-			<ul class="footer-links nav navbar-nav rls-sb">
-				<li class="li-under"><a href="/intro/index.html">Intro</a></li>
-				<li class="active li-under"><a href="/docs/index.html">Docs</a></li>
-                <li class="li-under"><a href="/community.html">Community</a></li>
-				<li class="li-under"><a href="http://demo.terraform.io/">Demo</a></li>
-			</ul>
-		</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"><i class="hashi-logo"></i></a>
+		<div class="container">
+			<div class="row">
+				<div class="footer-links col-sm-7 col-xs-12">
+					<ul class="footer-links nav navbar-nav">
+						<li class="li-under"><a href="/intro/index.html">Intro</a></li>
+						<li class="active li-under"><a href="/docs/index.html">Docs</a></li>
+		                <li class="li-under"><a href="/community.html">Community</a></li>
+						<li class="li-under"><a href="http://demo.terraform.io/">Demo</a></li>
+					</ul>
+				</div>
+				<div class="footer-hashi col-sm-5 col-xs-12">
+					<div class="pull-right">
+						<span>&copy; 2014. A <a href="http://www.hashicorp.com">HashiCorp</a> Project.</span>
+						<a class="hashi-logo" href="http://www.hashicorp.com"><i class="hashi-logo"></i></a>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>
-</div>
 
 <script src="/javascripts/lib/jquery-2.0.3.min.js"></script>
 <script src="/javascripts/lib/bootstrap.min.js"></script>

website/source/stylesheets/_footer.less

@@ -27,8 +27,6 @@ body.page-home{
 
 
     .footer-links{
-        float: none;
-        display: inline-block;
         margin-bottom: 20px;
 
         .li-under a:hover::after,
@@ -91,7 +89,7 @@ body.page-home{
 
     .footer-hashi{
         float: right;
-        padding-top: 8px;
+        padding-top: 5px;
         letter-spacing: 2px;
 
         a{
@@ -111,8 +109,8 @@ body.page-home{
                 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);                     
-            }            
+                .img-retina("../images/footer-hashicorp-logo.png", "../images/footer-hashicorp-logo@2x.png", 37px, 40px);              
+            }
         }
     }
 }
@@ -148,27 +146,55 @@ body.page-home{
     }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 992px) {
     #footer{
         .footer-hashi {
+            padding-top: 14px;
             span{
-                margin-right: 0;
+                margin-right: 6px;
             }
-
             .hashi-logo{
-                display: block;
-                margin-top: 15px;
-                margin-bottom: 20px;
+                i{
+                    width: 20px;
+                    height: 22px;
+                    background-size: 20px 22px;              
+                }                
+            }
+        }
+    }
+}
+
+@media (max-width: 768px) {
+    #footer{
+        padding: 100px 0 40px;
+        text-align: center;
+
+        .footer-links{
+            float: none;
+            display: inline-block;
+        }
+
+        .footer-hashi {
+            float: none;
+            display: inline-block;
+
+            .pull-right{
+                float: none !important;
             }
         }
+    }
+}
 
-        .buttons.navbar-nav{
-            margin-left: 0;
+@media (max-width: 320px) {
+    #footer{
+        text-align: center;
 
-            li.first {
-                margin-right: 0 !important;
+        .footer-links{
+            .li-under{
+                float: none !important;
             }
         }
     }
 }
 
+

website/source/stylesheets/main.css

@@ -387,8 +387,6 @@ body.page-home #footer {
   color: black;
 }
 #footer .footer-links {
-  float: none;
-  display: inline-block;
   margin-bottom: 20px;
 }
 #footer .footer-links .li-under a:hover::after,
@@ -447,7 +445,7 @@ body.page-home #footer {
 }
 #footer .footer-hashi {
   float: right;
-  padding-top: 8px;
+  padding-top: 5px;
   letter-spacing: 2px;
 }
 #footer .footer-hashi a {
@@ -503,20 +501,42 @@ body.page-home #footer {
     background-size: 37px 40px;
   }
 }
-@media (max-width: 768px) {
+@media (max-width: 992px) {
+  #footer .footer-hashi {
+    padding-top: 14px;
+  }
   #footer .footer-hashi span {
-    margin-right: 0;
+    margin-right: 6px;
   }
-  #footer .footer-hashi .hashi-logo {
-    display: block;
-    margin-top: 15px;
-    margin-bottom: 20px;
+  #footer .footer-hashi .hashi-logo i {
+    width: 20px;
+    height: 22px;
+    background-size: 20px 22px;
   }
-  #footer .buttons.navbar-nav {
-    margin-left: 0;
+}
+@media (max-width: 768px) {
+  #footer {
+    padding: 100px 0 40px;
+    text-align: center;
+  }
+  #footer .footer-links {
+    float: none;
+    display: inline-block;
+  }
+  #footer .footer-hashi {
+    float: none;
+    display: inline-block;
+  }
+  #footer .footer-hashi .pull-right {
+    float: none !important;
+  }
+}
+@media (max-width: 320px) {
+  #footer {
+    text-align: center;
   }
-  #footer .buttons.navbar-nav li.first {
-    margin-right: 0 !important;
+  #footer .footer-links .li-under {
+    float: none !important;
   }
 }
 #jumbotron-mask {