From 95337b7211a1660958a3c363e653e28e4f0d9c84 Mon Sep 17 00:00:00 2001 From: captainill Date: Thu, 3 Mar 2016 12:23:30 -0800 Subject: [PATCH] add announcement banner for Consul Enterprise launch --- ui/styles/_variables.scss | 2 +- website/Gemfile.lock | 3 - .../assets/stylesheets/_announcement-bnr.scss | 109 ++++++++++++++++++ .../source/assets/stylesheets/_header.scss | 10 ++ .../assets/stylesheets/application.scss | 1 + website/source/layouts/_announcement-bnr.erb | 18 +++ website/source/layouts/_header.erb | 5 +- .../source/layouts/svg/_svg-enterprise.erb | 43 +++++++ 8 files changed, 185 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/ui/styles/_variables.scss b/ui/styles/_variables.scss index 8018d8a48..0f9eb8406 100644 --- a/ui/styles/_variables.scss +++ b/ui/styles/_variables.scss @@ -12,7 +12,7 @@ $red-darker: #b03c44; $tan: #f0f0e5; $consul-gray: #909090; $consul-footer-gray: #d7d4d7; -$purple-dark: #69499a; +$purple-dark: #69499a; $purple: lighten($purple-dark, 20%); $light-purple: #f7f3f9; diff --git a/website/Gemfile.lock b/website/Gemfile.lock index 033f93252..7358619d0 100644 --- a/website/Gemfile.lock +++ b/website/Gemfile.lock @@ -188,6 +188,3 @@ PLATFORMS DEPENDENCIES middleman-hashicorp! - -BUNDLED WITH - 1.10.6 diff --git a/website/source/assets/stylesheets/_announcement-bnr.scss b/website/source/assets/stylesheets/_announcement-bnr.scss new file mode 100755 index 000000000..e667e964f --- /dev/null +++ b/website/source/assets/stylesheets/_announcement-bnr.scss @@ -0,0 +1,109 @@ +// +// announcement bnr +// -------------------------------------------------- + +$enterprise-bnr-font-weight: 300; +$enterprise-bnr-consul-color: #B52A55; +$enterprise-color-dark-white: #A9B1B5; + +#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($enterprise-bnr-consul-color, 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: 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-consul-color, 10%); + border-left: 1px solid lighten($enterprise-bnr-consul-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; + } + } +} diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss index 1f2088e62..faab5718e 100755 --- a/website/source/assets/stylesheets/_header.scss +++ b/website/source/assets/stylesheets/_header.scss @@ -19,6 +19,16 @@ body.page-sub{ } #header { + // when _announcment-bnr.erb (ie. Consul Enterprise Announcment) is being used in layout we need to push down content to accomodate + // add this class + &.-displaying-bnr{ + > .container{ + -webkit-transform: translateY(32px); + -ms-transform: translateY(32px); + transform: translateY(32px); + } + } + .navbar-brand { .logo{ width: $project-logo-width; diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss index 521c81e70..f20d2ee0f 100644 --- a/website/source/assets/stylesheets/application.scss +++ b/website/source/assets/stylesheets/application.scss @@ -24,6 +24,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 000000000..a494afd75 --- /dev/null +++ b/website/source/layouts/_announcement-bnr.erb @@ -0,0 +1,18 @@ +
+
+
+
+

+ Announcing + + Scalable and Resilient Microservice Infrastructure. + + Find out more + +

+
+
+
+
diff --git a/website/source/layouts/_header.erb b/website/source/layouts/_header.erb index 5079c91b4..c86eb676a 100644 --- a/website/source/layouts/_header.erb +++ b/website/source/layouts/_header.erb @@ -25,8 +25,9 @@ "> -
"> -
+
"> + <%= partial "layouts/announcement-bnr" %> +
diff --git a/website/source/layouts/svg/_svg-enterprise.erb b/website/source/layouts/svg/_svg-enterprise.erb new file mode 100644 index 000000000..34997b3f8 --- /dev/null +++ b/website/source/layouts/svg/_svg-enterprise.erb @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +