annoucnement bnr

This commit is contained in:
captainill 2016-04-11 13:02:15 -05:00
parent e9a918f83d
commit c5dbf1d04a
8 changed files with 204 additions and 6 deletions

View File

@ -1,2 +1 @@
--- --- {}
BUNDLE_DISABLE_SHARED_GEMS: '1'

View File

@ -187,6 +187,3 @@ PLATFORMS
DEPENDENCIES DEPENDENCIES
middleman-hashicorp! middleman-hashicorp!
BUNDLED WITH
1.11.2

View File

@ -0,0 +1,141 @@
//
// announcement bnr
// --------------------------------------------------
$enterprise-bnr-font-weight: 300;
$enterprise-bnr-consul-color: #B52A55;
$enterprise-color-dark-white: #A9B1B5;
body{
// when _announcment-bnr.erb (ie. Consul Enterprise Announcment) is being used in layout we need to push down content to accomodate
// add this class to body
&.-displaying-bnr{
#header{
> .container{
padding-top: 8px;
-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-weight: $enterprise-bnr-font-weight;
font-size: 13px;
line-height: 40px;
margin-bottom: 0;
}
.link-highlight{
display: inline-block;
margin-left: 3px;
color: lighten($purple, 10%);
font-weight: 400;
-webkit-transform: translateY(1px);
-ms-transform: translateY(1px);
transform: translateY(1px);
}
.enterprise-logo{
position: relative;
top: 4px;
&:hover{
text-decoration: none;
svg{
rect{
fill: $enterprise-color-dark-white;
}
}
}
svg{
width: 156px;
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($purple, 10%);
border-left: 1px solid lighten($purple, 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;
}
}
}

View File

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

View File

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

View File

@ -1,4 +1,5 @@
<div id="header" class="navigation white <%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>"> <div id="header" class="navigation white <%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>">
<%= partial "layouts/announcement-bnr" %>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs-12"> <div class="col-xs-12">

View File

@ -18,4 +18,4 @@
<%= yield_content :head %> <%= yield_content :head %>
</head> </head>
<body id="page-<%= current_page.data.page_title ? "#{current_page.data.page_title}" : "home" %>" 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}" %>"> <body id="page-<%= current_page.data.page_title ? "#{current_page.data.page_title}" : "home" %>" 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}" %> -displaying-bnr">

View File

@ -0,0 +1,41 @@
<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="-135 298.8 142 16.2" xml:space="preserve" enable-background="new -135 298.8 142 16.2">
<style type="text/css">
.st0{fill:#fff;}
</style>
<g>
<path d="M-113.8 303.1h-2.6v-1.6h7v1.6h-2.6v7.8h-1.8V303.1z"/>
<path d="M-106.5 309.6c0.7 0 1.3-0.1 2.1-0.3l0.3 1.3c-0.8 0.3-1.7 0.4-2.5 0.4 -2.1 0-2.9-1-2.9-2.6v-1.8c0-1.4 0.6-2.7 2.8-2.7s2.7 1.3 2.7 2.7v1.5h-3.8v0.4C-107.8 309.3-107.5 309.6-106.5 309.6zM-107.8 306.8h2.2v-0.3c0-0.6-0.2-1.1-1-1.1 -0.8 0-1.1 0.4-1.1 1.1V306.8z"/>
<path d="M-99 305.5c-0.7 0.3-1.2 0.6-1.8 1v4.4h-1.7v-6.8h1.4l0.1 0.8c0.4-0.3 1.2-0.7 1.8-0.9L-99 305.5z"/>
<path d="M-94.3 305.5c-0.7 0.3-1.2 0.6-1.8 1v4.4h-1.7v-6.8h1.4l0.1 0.8c0.4-0.3 1.2-0.7 1.8-0.9L-94.3 305.5z"/>
<path d="M-88.1 310.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.6v-0.7c0-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.5V310.9zM-89.9 308.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.4V308.3z"/>
<path d="M-82.4 302.5c-0.3-0.1-0.7-0.1-1-0.1 -0.7 0-0.8 0.3-0.8 0.8v0.9h1.7l-0.1 1.4h-1.6v5.5h-1.7v-5.5H-87v-1.4h1.1v-1c0-1.4 0.7-2.1 2.2-2.1 0.5 0 1 0.1 1.5 0.2L-82.4 302.5z"/>
<path d="M-78.7 311c-2.3 0-3-1.3-3-2.7v-1.7c0-1.4 0.6-2.7 3-2.7 2.3 0 3 1.3 3 2.7v1.7C-75.7 309.7-76.4 311-78.7 311zM-78.7 305.4c-0.9 0-1.3 0.4-1.3 1.2v1.8c0 0.8 0.4 1.2 1.3 1.2 0.9 0 1.3-0.4 1.3-1.2v-1.8C-77.4 305.8-77.8 305.4-78.7 305.4z"/>
<path d="M-70.6 305.5c-0.7 0.3-1.2 0.6-1.8 1v4.4h-1.7v-6.8h1.4l0.1 0.8c0.4-0.3 1.2-0.7 1.8-0.9L-70.6 305.5z"/>
<path d="M-65.4 310.9v-4.8c0-0.4-0.2-0.5-0.5-0.5 -0.4 0-1.2 0.3-1.8 0.6v4.7h-1.7v-6.8h1.3l0.2 0.6c0.9-0.4 1.9-0.7 2.7-0.7 0.7 0 1.1 0.3 1.3 0.7 0.8-0.4 1.9-0.7 2.7-0.7 1.1 0 1.5 0.8 1.5 2v4.9h-1.7v-4.8c0-0.4-0.2-0.5-0.5-0.5 -0.4 0-1.2 0.3-1.8 0.6v4.7H-65.4z"/>
<path d="M-54.6 301.6h5.5v1.1h-4.3v2.9h4v1.1h-4v3.2h4.3v1.1h-5.5V301.6z"/>
<path d="M-43 310.9v-5.2c0-0.4-0.2-0.6-0.7-0.6 -0.5 0-1.6 0.3-2.3 0.7v5.2h-1.2v-6.8h1l0.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.2H-43z"/>
<path d="M-36.1 310.8c-0.4 0.2-0.9 0.3-1.4 0.3 -1.1 0-1.7-0.4-1.7-1.6V305h-1.2v-1h1.2v-1.7l1.2-0.2v1.8h1.9l-0.1 1H-38v4.2c0 0.5 0.1 0.8 0.7 0.8 0.3 0 0.7-0.1 1.1-0.2L-36.1 310.8z"/>
<path d="M-32 310c0.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.6C-33.7 309.6-33.4 310-32 310zM-33.7 306.9h2.9v-0.6c0-1-0.3-1.5-1.4-1.5 -1.1 0-1.5 0.5-1.5 1.5V306.9z"/>
<path d="M-24.6 305c-0.6 0.3-1.4 0.8-1.9 1.2v4.7h-1.2v-6.8h1l0.1 1c0.5-0.4 1.2-0.8 1.9-1.1L-24.6 305z"/>
<path d="M-18.1 308.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.2v-9.8h1l0.1 0.6c0.6-0.4 1.4-0.8 2.3-0.8 1.3 0 2 0.7 2 2.1V308.8zM-22.3 309.8c0.6 0.1 1.4 0.2 1.9 0.2 0.8 0 1.1-0.4 1.1-1.2V306c0-0.7-0.2-1.1-1.1-1.1 -0.7 0-1.4 0.4-1.9 0.8V309.8z"/>
<path d="M-13 305c-0.6 0.3-1.4 0.8-1.9 1.2v4.7h-1.2v-6.8h1l0.1 1c0.5-0.4 1.2-0.8 1.9-1.1L-13 305z"/>
<path d="M-11.8 303v-1.7h1.2v1.7H-11.8zM-11.8 310.9v-6.8h1.2v6.8H-11.8z"/>
<path d="M-6.5 311c-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.1C-4.1 310.4-4.6 311-6.5 311z"/>
<path d="M0.2 310c0.7 0 1.4-0.1 2.2-0.3l0.2 0.9C1.9 310.9 1 311 0.1 311c-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.6C-1.4 309.6-1.1 310 0.2 310zM-1.4 306.9h2.9v-0.6c0-1-0.3-1.5-1.4-1.5 -1.1 0-1.5 0.5-1.5 1.5V306.9z"/>
<path d="M4.6 309.3h1.2v1.6H4.6V309.3z"/>
</g>
<g>
<g>
<rect x="-19.2" y="313.6" width="23.2" height="1"/>
<rect x="-116.4" y="313.6" width="90.2" height="1"/>
</g>
</g>
<g id="XMLID_8_">
<polygon id="XMLID_21_" class="st0" points="-130 301.6 -125.7 304.1 -125.7 309 -130 306.5 "/>
<polygon id="XMLID_20_" class="st0" points="-125 304.1 -120.7 301.6 -120.7 306.5 -125 309 "/>
<polygon id="XMLID_19_" class="st0" points="-135 298.8 -130.8 301.3 -130.8 306.1 -135 303.7 "/>
<polygon id="XMLID_18_" class="st0" points="-130 307.5 -125.7 309.9 -125.7 309.9 -125.7 314.8 -130 312.3 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.3 KiB