From c5dbf1d04a0f9c0b89be0afa1e87db1e8736b6f8 Mon Sep 17 00:00:00 2001 From: captainill Date: Mon, 11 Apr 2016 13:02:15 -0500 Subject: [PATCH] annoucnement bnr --- website/.bundle/config | 3 +- website/Gemfile.lock | 3 - .../assets/stylesheets/_announcement-bnr.scss | 141 ++++++++++++++++++ .../assets/stylesheets/application.scss | 1 + website/source/layouts/_announcement-bnr.erb | 18 +++ website/source/layouts/_header.erb | 1 + website/source/layouts/_meta.erb | 2 +- .../source/layouts/svg/_svg-enterprise.erb | 41 +++++ 8 files changed, 204 insertions(+), 6 deletions(-) create mode 100755 website/source/assets/stylesheets/_announcement-bnr.scss create mode 100644 website/source/layouts/_announcement-bnr.erb create mode 100644 website/source/layouts/svg/_svg-enterprise.erb diff --git a/website/.bundle/config b/website/.bundle/config index df11c7518e..2fbf0ffd71 100644 --- a/website/.bundle/config +++ b/website/.bundle/config @@ -1,2 +1 @@ ---- -BUNDLE_DISABLE_SHARED_GEMS: '1' +--- {} diff --git a/website/Gemfile.lock b/website/Gemfile.lock index f6cb5aa726..b80006599e 100644 --- a/website/Gemfile.lock +++ b/website/Gemfile.lock @@ -187,6 +187,3 @@ PLATFORMS DEPENDENCIES middleman-hashicorp! - -BUNDLED WITH - 1.11.2 diff --git a/website/source/assets/stylesheets/_announcement-bnr.scss b/website/source/assets/stylesheets/_announcement-bnr.scss new file mode 100755 index 0000000000..7520d828b8 --- /dev/null +++ b/website/source/assets/stylesheets/_announcement-bnr.scss @@ -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; + } + } +} diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss index 3776f90566..27dd855846 100755 --- a/website/source/assets/stylesheets/application.scss +++ b/website/source/assets/stylesheets/application.scss @@ -22,6 +22,7 @@ @import 'hashicorp-shared/_hashicorp-sidebar'; // Components +@import '_announcement-bnr'; @import '_header'; @import '_footer'; @import '_jumbotron'; diff --git a/website/source/layouts/_announcement-bnr.erb b/website/source/layouts/_announcement-bnr.erb new file mode 100644 index 0000000000..4773605a68 --- /dev/null +++ b/website/source/layouts/_announcement-bnr.erb @@ -0,0 +1,18 @@ +
+
+
+
+

+ Announcing + + Collaborative Infrastructure Automation + + Find out more + +

+
+
+
+
diff --git a/website/source/layouts/_header.erb b/website/source/layouts/_header.erb index f6a3533533..8d98f7095d 100644 --- a/website/source/layouts/_header.erb +++ b/website/source/layouts/_header.erb @@ -1,4 +1,5 @@
"> + <%= partial "layouts/announcement-bnr" %>
diff --git a/website/source/layouts/_meta.erb b/website/source/layouts/_meta.erb index 98554fc644..0672f8de60 100644 --- a/website/source/layouts/_meta.erb +++ b/website/source/layouts/_meta.erb @@ -18,4 +18,4 @@ <%= yield_content :head %> - " 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}" %>"> + " 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"> diff --git a/website/source/layouts/svg/_svg-enterprise.erb b/website/source/layouts/svg/_svg-enterprise.erb new file mode 100644 index 0000000000..9816a27caf --- /dev/null +++ b/website/source/layouts/svg/_svg-enterprise.erb @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +