website: announcement banner for vault enterprise

website/Gemfile.lock

@@ -188,6 +188,3 @@ PLATFORMS
 
 DEPENDENCIES
   middleman-hashicorp!
-
-BUNDLED WITH
-   1.10.6

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

@@ -0,0 +1,63 @@
+//
+// announcement bnr
+// --------------------------------------------------
+
+#announcement-bnr {
+  height: 40px;
+  flex-shrink: 0;
+  background-color: $black;
+
+  a,p{
+    font-size: 14px;
+    color: $white;
+    line-height: 40px;
+    margin-bottom: 0;
+  }
+
+  .link-blue{
+    margin-left: 5px;
+    color: $blue;
+    font-weight: 600;
+  }
+
+  .enterprise-logo{
+    position: relative;
+    top: 4px;
+
+    &:hover{
+      svg{
+        rect{
+          fill: $blue;
+          @include transition(all .1s ease-in);
+        }
+      }
+    }
+
+    svg{
+      width: 128px;
+      fill: $white;
+      margin-right: 4px;
+      margin-left: 1px;
+
+      rect{
+        @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;
+    }
+  }
+}

website/source/assets/stylesheets/_global.scss

@@ -92,3 +92,15 @@ pre {
 .center {
     text-align: center;
 }
+
+.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 $blue;
+  border-left: 1px solid $blue;
+  @include transition(all .1s ease-in);
+}

website/source/assets/stylesheets/application.scss

@@ -19,6 +19,7 @@
 @import 'hashicorp-shared/_hashicorp-sidebar';
 
 // Components
+@import '_announcement-bnr';
 @import '_header';
 @import '_footer';
 @import '_jumbotron';

website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss

@@ -67,13 +67,19 @@
         margin-right: 10px;
       }
 
+      &.github{
+        a{
+          margin-right: 0;  
+        }
+      }
+
       > a {
         padding-left: 12px !important;
         svg{
           position: absolute;
-          left: -12px;
+          left: -8px;
           top: 50%;
-          margin-top: -7px;
+          margin-top: -8px;
           width: 14px;
           height: 14px;
         }
@@ -82,7 +88,7 @@
   }
 
   .main-links{
-    margin-right: $nav-margin-right * 2;
+    margin-right: $nav-margin-right;
   }
 
   .main-links,

website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss

@@ -15,7 +15,7 @@ $header-height: 74px;
 $header-mobile-height: 60px;
 $by-hashicorp-width: 74px;
 $by-hashicorp-height: 16px;
-$nav-margin-right: 12px;
+$nav-margin-right: 8px;
 
 // Mixins
 @mixin hashi-a-style-core{

website/source/layouts/_announcement-bnr.erb

@@ -0,0 +1,18 @@
+<div id="announcement-bnr">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-offset-1 col-md-10 col-xs-12">
+        <p>
+          Announcing
+          <a class="enterprise-logo" href="https://www.hashicorp.com/vault.html?utm_source=oss&utm_medium=top-banner&utm_campaign=vault">
+            <%= partial "layouts/svg/svg-enterprise" %>
+          </a>
+          <span class="tagline">Secure Infrastructure Automation.</span>
+          <a class="link-blue" href="https://www.hashicorp.com/vault.html?utm_source=oss&utm_medium=top-banner&utm_campaign=vault">
+            Find out more <span class="hcaret"></span>
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

website/source/layouts/_header.erb

@@ -28,6 +28,7 @@
               <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>
+              <li class="li-under"><a href="https://www.hashicorp.com/vault.html?utm_source=oss&utm_medium=header-nav&utm_campaign=vault">Enterprise</a></li>
             </ul>
           </nav>
         </div>

website/source/layouts/_sidebar.erb

@@ -15,6 +15,7 @@
         <li class="first"><a href="/intro/index.html">Intro</a></li>
         <li class=""><a href="/docs/index.html">Docs</a></li>
         <li class=""><a href="/community.html">Community</a></li>
+        <li class=""><a href="https://www.hashicorp.com/vault.html?utm_source=oss&utm_medium=header-nav&utm_campaign=vault">Enterprise</a></li>
     </ul>
     <div class="divider"></div>
     <!-- Sidebar navigation 2-->

website/source/layouts/layout.erb

@@ -1,4 +1,5 @@
 <%= partial "layouts/meta" %>
+<%= partial "layouts/announcement-bnr" %>
 <%= partial "layouts/header" %>
 <%= partial "layouts/sidebar" %>
 

website/source/layouts/svg/_svg-enterprise.erb

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 116.9 16" xml:space="preserve" enable-background="new 0 0 116.9 16">
+  <defs/>
+  <g>
+    <g>
+      <rect x="92.1" y="14.5" class="st0" width="23.2" height="1"/>
+    </g>
+    <g>
+      <rect x="21.9" y="14.5" class="st0" width="63.2" height="1"/>
+    </g>
+    <g>
+      <path class="st0" d="M27.8 2.6h1.8l-2.8 9.3h-2.6l-2.8-9.3h1.8l2.3 7.8L27.8 2.6z"/>
+      <path class="st0" d="M35.3 11.9h-1.4l-0.1-0.5c-0.6 0.4-1.3 0.6-2 0.6 -1.2 0-1.8-0.9-1.8-2 0-1.4 0.6-1.9 2-1.9h1.6V7.4c0-0.8-0.2-1-1.3-1 -0.6 0-1.3 0.1-1.9 0.2l-0.2-1.3c0.6-0.2 1.6-0.3 2.3-0.3 2.1 0 2.8 0.8 2.8 2.5V11.9zM33.6 9.3h-1.3c-0.6 0-0.7 0.2-0.7 0.7 0 0.5 0.2 0.7 0.7 0.7 0.5 0 1-0.2 1.3-0.4V9.3z"/>
+      <path class="st0" d="M38.8 5.1v4.8c0 0.4 0.2 0.5 0.5 0.5 0.4 0 1.2-0.3 1.8-0.6V5.1h1.7v6.8h-1.3l-0.2-0.6c-0.9 0.4-1.9 0.7-2.7 0.7 -1.1 0-1.5-0.8-1.5-2V5.1H38.8z"/>
+      <path class="st0" d="M44.8 11.9V2.3L46.5 2v9.8H44.8z"/>
+      <path class="st0" d="M52.1 11.8C51.7 11.9 51 12 50.6 12c-1.2 0-1.9-0.6-1.9-1.8V6.4h-1V5.1h1V3.4l1.7-0.2v1.9h1.8L52 6.4h-1.6V10c0 0.4 0.2 0.6 0.6 0.6 0.3 0 0.6-0.1 0.9-0.1L52.1 11.8z"/>
+      <path class="st0" d="M56.5 2.6H62v1.1h-4.3v2.9h4v1.1h-4v3.2h4.3v1.1h-5.5V2.6z"/>
+      <path class="st0" d="M68.2 11.9V6.7c0-0.4-0.2-0.6-0.7-0.6 -0.5 0-1.6 0.3-2.3 0.7v5.2H64V5.1h1l0.1 0.6c0.8-0.4 1.9-0.7 2.7-0.7 1.1 0 1.5 0.7 1.5 1.7v5.2H68.2z"/>
+      <path class="st0" d="M75.1 11.8c-0.4 0.2-0.9 0.3-1.4 0.3 -1.1 0-1.7-0.4-1.7-1.6V6h-1.2v-1h1.2V3.4l1.2-0.2v1.8H75l-0.1 1h-1.8v4.2c0 0.5 0.1 0.8 0.7 0.8 0.3 0 0.7-0.1 1.1-0.2L75.1 11.8z"/>
+      <path class="st0" d="M79.1 11c0.7 0 1.4-0.1 2.2-0.3l0.2 0.9C80.8 11.9 79.9 12 79 12c-2 0-2.7-1-2.7-2.5v-2c0-1.4 0.6-2.5 2.7-2.5 2 0 2.6 1.2 2.6 2.6v1.4h-4.1v0.6C77.5 10.6 77.8 11 79.1 11zM77.5 8h2.9V7.4c0-1-0.3-1.5-1.4-1.5 -1.1 0-1.5 0.5-1.5 1.5V8z"/>
+      <path class="st0" d="M86.5 6c-0.6 0.3-1.4 0.8-1.9 1.2v4.7h-1.2V5.1h1l0.1 1c0.5-0.4 1.2-0.8 1.9-1.1L86.5 6z"/>
+      <path class="st0" d="M93 9.8c0 1.4-0.6 2.2-2.2 2.2 -0.6 0-1.4-0.1-1.9-0.2v2.8l-1.2 0.2V5.1h1l0.1 0.6c0.6-0.4 1.4-0.8 2.3-0.8 1.3 0 2 0.7 2 2.1V9.8zM88.9 10.8c0.6 0.1 1.4 0.2 1.9 0.2 0.8 0 1.1-0.4 1.1-1.2V7c0-0.7-0.2-1.1-1.1-1.1 -0.7 0-1.4 0.4-1.9 0.8V10.8z"/>
+      <path class="st0" d="M98.2 6c-0.6 0.3-1.4 0.8-1.9 1.2v4.7H95V5.1h1l0.1 1c0.5-0.4 1.2-0.8 1.9-1.1L98.2 6z"/>
+      <path class="st0" d="M99.3 4V2.3h1.2V4H99.3zM99.3 11.9V5.1h1.2v6.8H99.3z"/>
+      <path class="st0" d="M104.7 12c-0.7 0-1.6-0.2-2.2-0.4l0.2-0.9c0.6 0.2 1.4 0.3 1.9 0.3 1.1 0 1.3-0.2 1.3-0.9s-0.1-0.8-1.4-1.1c-1.7-0.4-1.8-0.8-1.8-2.2 0-1.3 0.6-1.8 2.4-1.8 0.7 0 1.4 0.1 1.9 0.2l-0.1 1c-0.6-0.1-1.3-0.2-1.9-0.2 -1 0-1.1 0.2-1.1 0.9 0 0.8 0 0.9 1.2 1.2 2 0.5 2.1 0.7 2.1 2.1C107 11.4 106.6 12 104.7 12z"/>
+      <path class="st0" d="M111.4 11c0.7 0 1.4-0.1 2.2-0.3l0.2 0.9c-0.6 0.2-1.6 0.4-2.4 0.4 -2 0-2.7-1-2.7-2.5v-2c0-1.4 0.6-2.5 2.7-2.5 2 0 2.6 1.2 2.6 2.6v1.4h-4.1v0.6C109.7 10.6 110 11 111.4 11zM109.7 8h2.9V7.4c0-1-0.3-1.5-1.4-1.5 -1.1 0-1.5 0.5-1.5 1.5V8z"/>
+      <path class="st0" d="M115.7 10.3h1.2v1.6h-1.2V10.3z"/>
+    </g>
+    <g>
+      <defs>
+        <path id="SVGID_1_" d="M8.4 9.4c0.4 0 0.7-0.3 0.7-0.7 0-0.4-0.3-0.7-0.7-0.7C8 7.9 7.7 8.3 7.7 8.6 7.7 9 8 9.4 8.4 9.4zM6.2 7.5C6.6 7.5 7 7.1 7 6.7 7 6.3 6.6 6 6.2 6S5.5 6.3 5.5 6.7C5.5 7.1 5.9 7.5 6.2 7.5zM8.4 7.5c0.4 0 0.7-0.3 0.7-0.7C9.1 6.3 8.7 6 8.4 6 8 6 7.7 6.3 7.7 6.7 7.7 7.1 8 7.5 8.4 7.5zM10.5 7.5c0.4 0 0.7-0.3 0.7-0.7 0-0.4-0.3-0.7-0.7-0.7 -0.4 0-0.7 0.3-0.7 0.7C9.8 7.1 10.1 7.5 10.5 7.5zM6.2 5.5C6.6 5.5 7 5.2 7 4.8c0-0.4-0.3-0.7-0.7-0.7S5.5 4.4 5.5 4.8C5.5 5.2 5.9 5.5 6.2 5.5zM8.4 5.5c0.4 0 0.7-0.3 0.7-0.7 0-0.4-0.3-0.7-0.7-0.7C8 4.1 7.7 4.4 7.7 4.8 7.7 5.2 8 5.5 8.4 5.5zM10.5 5.5c0.4 0 0.7-0.3 0.7-0.7 0-0.4-0.3-0.7-0.7-0.7 -0.4 0-0.7 0.3-0.7 0.7C9.8 5.2 10.1 5.5 10.5 5.5zM8.4 3.6c0.4 0 0.7-0.3 0.7-0.7 0-0.4-0.3-0.7-0.7-0.7C8 2.2 7.7 2.5 7.7 2.9 7.7 3.3 8 3.6 8.4 3.6zM10.5 3.6c0.4 0 0.7-0.3 0.7-0.7 0-0.4-0.3-0.7-0.7-0.7 -0.4 0-0.7 0.3-0.7 0.7C9.8 3.3 10.1 3.6 10.5 3.6zM6.2 3.6C6.6 3.6 7 3.3 7 2.9c0-0.4-0.3-0.7-0.7-0.7S5.5 2.5 5.5 2.9C5.5 3.3 5.9 3.6 6.2 3.6zM8.2 16L0 0h16.3L8.2 16z"/>
+      </defs>
+      <use xlink:href="#SVGID_1_" style="clip-rule:evenodd;fill-rule:evenodd;fill:#FFF;overflow:visible"/>
+      <clipPath id="SVGID_2_">
+        <use xlink:href="#SVGID_1_" overflow="visible"/>
+      </clipPath>
+    </g>
+  </g>
+</svg>