From 88f86c6255dcae4922d250b471b440f31a15315b Mon Sep 17 00:00:00 2001
From: captainill <jonthomas0@gmail.com>
Date: Mon, 9 Nov 2015 15:34:32 -0800
Subject: [PATCH] refactor styles to be more atomic for header/footer usage

---
 .../source/assets/stylesheets/_footer.scss    | 130 ++-----
 .../source/assets/stylesheets/_header.scss    |  24 +-
 .../hashicorp-shared/_hashicorp-header.scss   | 333 +++++++++++-------
 .../hashicorp-shared/_project-utility.scss    |   2 +-
 website/source/layouts/_footer.erb            |  50 +--
 website/source/layouts/_header.erb            |  12 +-
 6 files changed, 275 insertions(+), 276 deletions(-)

diff --git a/website/source/assets/stylesheets/_footer.scss b/website/source/assets/stylesheets/_footer.scss
index 95341b9cd..358239629 100644
--- a/website/source/assets/stylesheets/_footer.scss
+++ b/website/source/assets/stylesheets/_footer.scss
@@ -1,140 +1,58 @@
 #footer{
   padding: 64px 0;
-  // @include consul-gradient-bg();
   background-color: $black;
 
-  .footer-links{
-    li{
-      &.edit{
-        a{
-          text-transform: uppercase;
-          letter-spacing: 1px;
-          font-size: 11px;
-          font-weight: 400;
-        }
-      }
-      a{
-        @include hashi-a-style();
-        @include project-a-style();
-        @include project-footer-a-style();
-      }
-    }
+  .hashicorp-project{
+    margin-top: 24px;
   }
 
   .pull-right{
     padding-right: 15px;
   }
-
-  .footer-hashi{
-    font-size: 14px;
-    color: $black;
-
-    a{
-      color: $black;
-      font-weight: 600;
-    }
-
-    span{
-      margin-right: 4px;
-    }
-
-    .hashicorp-project{
-      display: inline-block;
-      height: 30px;
-      line-height: 30px;
-      text-decoration: none;
-
-      &.white{
-        color: white;
-        svg{
-          path,
-          polygon{
-            fill: white;
-          }
-          line{
-            stroke: white;
-          }
-        }
-      }
-
-      &:hover{
-        svg{
-          &.svg-by{
-            line{
-              stroke: $purple;
-            }
-          }
-        }
-      }
-
-      span{
-        font-family: $header-font-family;
-        font-weight: 500;
-      }
-
-      span,
-      svg{
-        display: inline-block;
-      }
-
-      svg{
-        &.svg-by{
-          width: $by-hashicorp-width;
-          height: $by-hashicorp-height;
-          margin-bottom: -4px;
-          margin-left: -3px;
-        }
-
-        &.svg-logo{
-          width: 30px;
-          height: 30px;
-          margin-bottom: -10px;
-          margin-left: -1px;
-        }
-
-        path,
-        line{
-          fill: $black;
-          @include transition(all 300ms ease-in);
-
-          &:hover{
-            @include transition(all 300ms ease-in);
-          }
-        }
-      }
-    }
-  }
 }
 
 @media (max-width: 768px) {
   #footer{
     text-align: center;
 
-    .footer-links{
-      float: none;
-      display: inline-block;
-      margin-bottom: 36px;
-    }
-
     .footer-hashi {
-      float: none;
-      display: inline-block;
+      float: none !important;
+      display: block;
 
       .pull-right{
         float: none !important;
         padding-right: 0;
       }
     }
+
+    ul{
+      float: none;
+      display: inline-block;
+      margin-bottom: 36px;
+    }
   }
 }
 
 @media (max-width: 414px) {
   #footer{
-    .footer-links{
+    ul{
+      display: block;
       li{
         display: block;
         float: none;
       }
+
+      &.external-links{
+        li{
+          svg{
+            position: relative;
+            left: 0;
+            top: 2px;
+            margin-top: 0;
+            margin-right: 4px;
+          }
+        }
+      }
     }
   }
 }
diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss
index 6c36e571f..232849d7a 100755
--- a/website/source/assets/stylesheets/_header.scss
+++ b/website/source/assets/stylesheets/_header.scss
@@ -33,8 +33,7 @@ body.page-sub{
       }
     }
 
-    .by{
-      color: $black;
+    .by-hashicorp{
       &:hover{
         svg{
           line{
@@ -47,27 +46,6 @@ body.page-sub{
 
   .buttons{
     margin-top: 2px; //baseline everything
-
-    ul.navbar-nav{
-      li {
-        // &:hover{
-        //     svg path{
-        //         fill: $purple;
-        //     }
-        // }
-
-        svg path{
-          fill: $white;
-        }
-      }
-    }
-  }
-
-  .main-links,
-  .external-links {
-    li > a {
-      @include project-a-style();
-    }
   }
 }
 
diff --git a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss
index 43c1f3259..28e3c9806 100755
--- a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss
+++ b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss
@@ -4,33 +4,21 @@
 // - Edits should not be made here
 // --------------------------------------------------
 
-#header {
+#header{
   position: relative;
+  margin-bottom: 0;
+}
+
+.navigation {
   color: black;
   text-rendering: optimizeLegibility;
-  margin-bottom: 0;
   transition: all 1s ease;
 
   &.white{
-    color: white;
     .navbar-brand {
       .logo {
         color: white;
       }
-
-      .by{
-        color: white;
-        font-weight: 300;
-        svg{
-          path,
-          polygon{
-            fill: white;
-          }
-          line{
-            stroke: white;
-          }
-        }
-      }
     }
 
     .main-links,
@@ -41,108 +29,25 @@
         }
       }
     }
-
-    .nav > li > a:hover, .nav > li > a:focus {
-      color: white;
-    }
-
-    .navbar-header{
-      .navbar-toggle{
-        .icon-bar{
-          border: 1px solid white;
-        }
-      }
-    }
   }
 
-  .navbar-header{
-    .navbar-toggle{
-      height: $header-height;
-      margin: 0;
-      border-radius: 0;
-      .icon-bar{
-        border: 1px solid $black;
-        border-radius: 0;
-      }
-    }
-  }
-
-  .navbar-brand {
-    display: block;
+  .navbar-toggle{
     height: $header-height;
-    padding: 0;
-    margin: 0 10px 0 0 ;
-
-    .logo{
-      display: inline-block;
-      height: $header-height;
-      vertical-align:top;
-      padding: 0;
-      line-height: $header-height;
-      padding-left: $project-logo-width + $project-logo-pad-left;
-      background-position: 0 center;
-      @include transition(all 300ms ease-in);
-
-      &:hover{
-        @include transition(all 300ms ease-in);
-        text-decoration: none;
-      }
-    }
-
-    .by{
-      display: inline-block;
-      vertical-align:top;
-      height: $header-height;
-      margin-left: 3px;
-      padding-top: 2px;
-      color: black;
-      line-height: $header-height;
-      font-family: $header-font-family;
-      font-weight: 600;
-      font-size: 0;
-      text-decoration: none;
-
-      .svg-wrap{
-        font-size: 13px;
-      }
-
-      svg{
-        &.svg-by{
-          width: $by-hashicorp-width;
-          height: $by-hashicorp-height;
-          margin-bottom: -4px;
-          margin-left: 4px;
-        }
-
-        &.svg-logo{
-          width: 16px;
-          height: 16px;
-          margin-bottom: -3px;
-          margin-left: 4px;
-        }
-
-        path,
-        polygon{
-          fill: black;
-          @include transition(all 300ms ease-in);
-
-          &:hover{
-            @include transition(all 300ms ease-in);
-          }
-        }
-        line{
-          stroke: black;
-          @include transition(all 300ms ease-in);
-
-          &:hover{
-            @include transition(all 300ms ease-in);
-          }
-        }
-      }
+    margin: 0;
+    border-radius: 0;
+    .icon-bar{
+      border: 1px solid $black;
+      border-radius: 0;
     }
   }
 
   .external-links {
+    &.white{
+      svg path{
+        fill: $white;
+      }
+    }
+
     li {
       position: relative;
 
@@ -180,36 +85,224 @@
 
   .main-links,
   .external-links {
+    &.white{
+      li > a {
+        color: white;
+      }
+    }
     li > a {
       @include hashi-a-style();
       margin: 0 10px;
       padding-top: 1px;
       line-height: $header-height;
+      @include project-a-style();
     }
   }
 
   .nav > li > a:hover, .nav > li > a:focus {
     background-color: transparent;
-    color: $black;
     @include transition( all 300ms ease-in );
   }
 }
 
+.navbar-brand {
+  display: block;
+  height: $header-height;
+  padding: 0;
+  margin: 0 10px 0 0;
+
+  .logo{
+    display: inline-block;
+    height: $header-height;
+    vertical-align:top;
+    padding: 0;
+    line-height: $header-height;
+    padding-left: $project-logo-width + $project-logo-pad-left;
+    background-position: 0 center;
+    @include transition(all 300ms ease-in);
+
+    &:hover{
+      @include transition(all 300ms ease-in);
+      text-decoration: none;
+    }
+  }
+}
+
+.navbar-toggle{
+  &.white{
+    .icon-bar{
+      border: 1px solid white;
+    }
+  }
+}
+
+.by-hashicorp{
+  display: inline-block;
+  vertical-align:top;
+  height: $header-height;
+  margin-left: 3px;
+  padding-top: 2px;
+  color: black;
+  line-height: $header-height;
+  font-family: $header-font-family;
+  font-weight: 600;
+  font-size: 0;
+  text-decoration: none;
+
+  &.white{
+    color: white;
+    font-weight: 300;
+    svg{
+      path,
+      polygon{
+        fill: white;
+      }
+      line{
+        stroke: white;
+      }
+    }
+  }
+
+  &:focus,
+  &:hover{
+    text-decoration: none;
+  }
+
+  .svg-wrap{
+    font-size: 13px;
+  }
+
+  svg{
+    &.svg-by{
+      width: $by-hashicorp-width;
+      height: $by-hashicorp-height;
+      margin-bottom: -4px;
+      margin-left: 4px;
+    }
+
+    &.svg-logo{
+      width: 16px;
+      height: 16px;
+      margin-bottom: -3px;
+      margin-left: 4px;
+    }
+
+    path,
+    polygon{
+      fill: black;
+      @include transition(all 300ms ease-in);
+
+      &:hover{
+        @include transition(all 300ms ease-in);
+      }
+    }
+    line{
+      stroke: black;
+      @include transition(all 300ms ease-in);
+
+      &:hover{
+        @include transition(all 300ms ease-in);
+      }
+    }
+  }
+}
+
+.hashicorp-project{
+  display: inline-block;
+  height: 30px;
+  line-height: 30px;
+  text-decoration: none;
+  font-size: 14px;
+  color: $black;
+  font-weight: 600;
+
+  &.white{
+    color: white;
+    svg{
+      path,
+      polygon{
+        fill: white;
+      }
+      line{
+        stroke: white;
+      }
+    }
+  }
+
+  &:focus{
+    text-decoration: none;
+  }
+
+  &:hover{
+    text-decoration: none;
+    svg{
+      &.svg-by{
+        line{
+          stroke: $purple;
+        }
+      }
+    }
+  }
+
+  span{
+    margin-right: 4px;
+    font-family: $header-font-family;
+    font-weight: 500;
+  }
+
+  span,
+  svg{
+    display: inline-block;
+  }
+
+  svg{
+    &.svg-by{
+      width: $by-hashicorp-width;
+      height: $by-hashicorp-height;
+      margin-bottom: -4px;
+      margin-left: -3px;
+    }
+
+    &.svg-logo{
+      width: 30px;
+      height: 30px;
+      margin-bottom: -10px;
+      margin-left: -1px;
+    }
+
+    path,
+    line{
+      fill: $black;
+      @include transition(all 300ms ease-in);
+
+      &:hover{
+        @include transition(all 300ms ease-in);
+      }
+    }
+  }
+}
+
 @media (max-width: 992px) {
-  #header {
+  .navigation {
     > .container{
       width: 100%;
     }
   }
 }
 
+@media (max-width: 768px) {
+  .navigation {
+    .main-links{
+      margin-right: 0;
+    }
+  }
+}
+
 @media (max-width: 414px) {
   #header {
-    .navbar-header{
-      .navbar-toggle{
-        padding-top: 10px;
-        height: $header-mobile-height;
-      }
+    .navbar-toggle{
+      padding-top: 10px;
+      height: $header-mobile-height;
     }
 
     .navbar-brand {
@@ -219,7 +312,7 @@
         height: $header-mobile-height;
         line-height: $header-mobile-height;
       }
-      .by{
+      .by-hashicorp{
         height: $header-mobile-height;
         line-height: $header-mobile-height;
         padding-top: 0;
diff --git a/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss b/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss
index 6ecd4aba5..6be6895e4 100755
--- a/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss
+++ b/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss
@@ -10,12 +10,12 @@ $project-logo-pad-left: 0px;
 
 // Mixins
 @mixin project-a-style{
-  color: $white;
   font-weight: 300;
   opacity: .75;
 
   &:hover{
     color: $white;
+    opacity: 1;
   }
 }
 
diff --git a/website/source/layouts/_footer.erb b/website/source/layouts/_footer.erb
index 9331ba8d8..72d1d728b 100644
--- a/website/source/layouts/_footer.erb
+++ b/website/source/layouts/_footer.erb
@@ -1,25 +1,35 @@
-<div id="footer">
+<div id="footer" class="navigation">
   <div class="container">
     <div class="row">
-      <div class="col-sm-6 col-xs-12">
-        <ul class="footer-links nav navbar-nav">
-          <li><a href="/intro/index.html">Intro</a></li>
-          <li><a href="/docs/index.html">Docs</a></li>
-          <li><a href="/community.html">Community</a></li>
-  				<li><a href="http://demo.consul.io/">Demo</a></li>
-          <% if current_page.url != '/' %>
-            <li class="edit"><a href="<%= github_url :current_page %>">Edit this page</a></li>
-          <% end %>
-        </ul>
-      </div>
-      <div class="footer-hashi col-sm-6 col-xs-12">
-        <div class="pull-right">
-          <a class="hashicorp-project white" href="https://www.hashicorp.com">
-            <span class="project-text">A </span>
-            <%= partial "layouts/svg/svg-by-hashicorp" %>
-            <span class="project-text">Project</span>
-            <%= partial "layouts/svg/svg-hashicorp-logo" %>
-          </a>
+      <div class="col-xs-12">
+        <div>
+          <ul class="main-links white nav navbar-nav">
+            <li><a href="/intro/index.html">Intro</a></li>
+            <li><a href="/docs/index.html">Docs</a></li>
+            <li><a href="/community.html">Community</a></li>
+    				<li><a href="http://demo.consul.io/">Demo</a></li>
+            <% if current_page.url != '/' %>
+              <li class="edit"><a href="<%= github_url :current_page %>">Edit this page</a></li>
+            <% end %>
+          </ul>
+          <ul class="external-links white nav navbar-nav">
+            <li class="first download">
+              <a href="/downloads.html"><%= partial "layouts/svg/svg-download" %>Download</a>
+            </li>
+            <li class="github">
+              <a href="https://github.com/hashicorp/consul"><%= partial "layouts/svg/svg-github" %>GitHub</a>
+            </li>
+          </ul>
+        </  div>
+        <div class="footer-hashi pull-right">
+          <div class="">
+            <a class="hashicorp-project white" href="https://www.hashicorp.com">
+              <span class="project-text">A </span>
+              <%= partial "layouts/svg/svg-by-hashicorp" %>
+              <span class="project-text">Project</span>
+              <%= partial "layouts/svg/svg-hashicorp-logo" %>
+            </a>
+          </div>
         </div>
       </div>
     </div>
diff --git a/website/source/layouts/_header.erb b/website/source/layouts/_header.erb
index 080473f17..8cb97de22 100644
--- a/website/source/layouts/_header.erb
+++ b/website/source/layouts/_header.erb
@@ -25,16 +25,16 @@
   </head>
 
   <body class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>">
-    <div id="header" class="white <%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>">
+    <div id="header" class="navigation <%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>">
     	<div class="container">
     		<div class="row">
     			<div class="col-xs-12">
     				<div class="navbar-header">
     					<div class="navbar-brand">
     						<a class="logo" href="/"><img src="<%= image_path('wordtype@2x.png') %>" width="96px" height="18px">Consul</a>
-    						<a class="by" href="https://hashicorp.com/"><span class="svg-wrap">by</span><%= partial "layouts/svg/svg-by-hashicorp" %><%= partial "layouts/svg/svg-hashicorp-logo" %>Hashicorp</a>
+    						<a class="by-hashicorp white" href="https://hashicorp.com/"><span class="svg-wrap">by</span><%= partial "layouts/svg/svg-by-hashicorp" %><%= partial "layouts/svg/svg-hashicorp-logo" %>Hashicorp</a>
     					</div>
-    					<button class="navbar-toggle" type="button">
+    					<button class="navbar-toggle white" type="button">
     						<span class="sr-only">Toggle navigation</span>
     						<span class="icon-bar"></span>
     						<span class="icon-bar"></span>
@@ -42,8 +42,8 @@
     					</button>
     				</div>
     				<div class="buttons hidden-xs">
-    					<nav role="navigation">
-    						<ul class="external-links nav navbar-nav navbar-right">
+    					<nav class="navigation-links" role="navigation">
+    						<ul class="external-links white nav navbar-nav navbar-right">
     							<li class="first download">
     								<a href="/downloads.html"><%= partial "layouts/svg/svg-download" %>Download</a>
     							</li>
@@ -51,7 +51,7 @@
     								<a href="https://github.com/hashicorp/consul"><%= partial "layouts/svg/svg-github" %>GitHub</a>
     							</li>
     						</ul>
-    						<ul class="main-links nav navbar-nav navbar-right">
+    						<ul class="main-links white nav navbar-nav navbar-right">
     							<li class="first li-under"><a href="/intro/index.html">Intro</a></li>
     							<li class="li-under"><a href="/docs/index.html">Docs</a></li>
     							<li class="li-under"><a href="/community.html">Community</a></li>