Merge pull request #2414 from hashicorp/website-add-meganav

Website: Add Mega Nav

website/Gemfile

@@ -1,3 +1,3 @@
 source "https://rubygems.org"
 
-gem "middleman-hashicorp", "0.3.12"
+gem "middleman-hashicorp", "0.3.13"

website/Gemfile.lock

@@ -77,7 +77,7 @@ GEM
       rack (>= 1.4.5, < 2.0)
       thor (>= 0.15.2, < 2.0)
       tilt (~> 1.4.1, < 2.0)
-    middleman-hashicorp (0.3.12)
+    middleman-hashicorp (0.3.13)
       bootstrap-sass (~> 3.3)
       builder (~> 3.2)
       middleman (~> 3.4)
@@ -151,7 +151,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  middleman-hashicorp (= 0.3.12)
+  middleman-hashicorp (= 0.3.13)
 
 BUNDLED WITH
    1.14.6

website/Makefile

@@ -1,4 +1,4 @@
-VERSION?="0.3.12"
+VERSION?="0.3.13"
 
 website:
 	@echo "==> Starting website in Docker..."

website/config.rb

@@ -18,7 +18,7 @@ helpers do
     end
 
      "Nomad by HashiCorp"
-   end
+  end
 
   # Get the description for the page
   #
@@ -58,8 +58,6 @@ helpers do
       classes << "layout-#{page.data.layout}"
     end
 
-    classes << "-displaying-bnr"
-
     return classes.join(" ")
   end
 end

website/packer.json

@@ -8,7 +8,7 @@
   "builders": [
     {
       "type": "docker",
-      "image": "hashicorp/middleman-hashicorp:0.3.12",
+      "image": "hashicorp/middleman-hashicorp:0.3.13",
       "discard": "true",
       "run_command": ["-d", "-i", "-t", "{{ .Image }}", "/bin/sh"]
     }

website/source/assets/javascripts/application.js

@@ -10,3 +10,6 @@
 //= require app/_Sidebar
 //= require app/_CubeDraw
 //= require app/_Init
+
+// assets/javascripts/application.js
+//= require hashicorp/mega-nav

website/source/assets/stylesheets/_announcement-bnr.scss

@@ -1,137 +0,0 @@
-//
-// announcement bnr
-// --------------------------------------------------
-
-$enterprise-bnr-nomad-color: $green;
-$enterprise-color-dark-white: #A9B1B5;
-
-body{
-  // when _announcment-bnr.erb is being used in layout we need to push down content to accommodate
-  // add this class to body
-  &.-displaying-bnr{
-    #header{
-      > .container{
-        padding-top: 8px;
-        padding-bottom: 32px;
-        -webkit-transform: translateY(32px);
-            -ms-transform: translateY(32px);
-                transform: translateY(32px);
-      }
-    }
-
-    #jumbotron {
-      .container{
-        .jumbo-logo-wrap{
-          margin-top: 160px;
-        }
-      }
-    }
-
-    &.page-sub{
-      #header{
-        > .container{
-          padding-bottom: 32px;
-        }
-      }
-    }
-  }
-}
-
-
-#announcement-bnr {
-  height: 40px;
-  flex-shrink: 0;
-  background-color: #000;
-
-  &.-absolute{
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    z-index: 9999;
-  }
-
-  a,p{
-    font-size: 14px;
-    color: $enterprise-color-dark-white;
-    font-family: $header-font-family;
-    font-size: 13px;
-    line-height: 40px;
-    margin-bottom: 0;
-  }
-
-  .link-highlight{
-    display: inline-block;
-    margin-left: 3px;
-    color: lighten($enterprise-bnr-nomad-color, 10%);
-    font-weight: 400;
-  }
-
-  .enterprise-logo{
-    position: relative;
-    top: 4px;
-
-    &:hover{
-      text-decoration: none;
-
-      svg{
-        rect{
-          fill: $enterprise-color-dark-white;
-        }
-      }
-    }
-
-    svg{
-      width: 140px;
-      fill: $white;
-      margin-right: 4px;
-      margin-left: 3px;
-
-      rect{
-        @include transition(all .1s ease-in);
-      }
-    }
-  }
-}
-
-.hcaret{
-  display: inline-block;
-  -moz-transform: translate(0, -1px) rotate(135deg);
-  -webkit-transform: translate(0, -1px) rotate(135deg);
-  transform: translate(0, -1px) rotate(135deg);
-  width: 7px;
-  height: 7px;
-  border-top: 1px solid lighten($enterprise-bnr-nomad-color, 10%);
-  border-left: 1px solid lighten($enterprise-bnr-nomad-color, 10%);
-  @include transition(all .1s ease-in);
-}
-
-@media (max-width: 768px) {
-  #announcement-bnr {
-    .tagline{
-      display: none;
-    }
-  }
-}
-
-@media (max-width: 320px) {
-  #announcement-bnr {
-    a,p{
-      font-size: 12px;
-    }
-
-    .link-highlight{
-      display: inline-block;
-      margin-left: 1px;
-    }
-
-    .enterprise-logo svg{
-      width: 128px;
-      margin-left: 2px;
-    }
-
-    .hcaret{
-      display: none;
-    }
-  }
-}

website/source/assets/stylesheets/application.scss

@@ -3,6 +3,9 @@
 
 @import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Ubuntu+Mono");
 
+// Mega Nav
+@import 'hashicorp/mega-nav';
+
 // Core variables and mixins
 @import '_variables';
 @import '_mixins';
@@ -25,7 +28,6 @@
 @import '_buttons';
 @import '_sidebar';
 @import '_syntax';
-@import '_announcement-bnr';
 
 // Pages
 @import '_home';

website/source/layouts/_header.erb

@@ -1,12 +1,10 @@
 <div id="header" class="<%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>">
-  <%= partial "layouts/announcement-bnr" %>
   <div class="container">
     <div class="row">
       <div class="col-xs-12">
         <div class="navbar-header">
           <div class="navbar-brand">
             <a class="logo" href="/">Nomad</a>
-            <a class="by" href="https://www.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">
             <span class="sr-only">Toggle navigation</span>

website/source/layouts/layout.erb

@@ -1,4 +1,5 @@
 <%= partial "layouts/meta" %>
+<%= mega_nav :nomad %>
 <%= partial "layouts/header" %>
 <%= partial "layouts/sidebar" %>