diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss index dde70d7d66..dea4e2abcd 100755 --- a/website/source/assets/stylesheets/_header.scss +++ b/website/source/assets/stylesheets/_header.scss @@ -1,6 +1,45 @@ #header { background: $header-background-color; + // Kind of gnarly override for bootstrap's nav toggle behavior + @media (max-width: 991px) { + .navbar-header { + float: none; + } + .navbar-left, + .navbar-right { + float: none !important; + } + .navbar-toggle { + display: block; + } + .navbar-collapse { + border-top: 1px solid transparent; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); + } + .navbar-fixed-top { + top: 0; + border-width: 0 0 1px; + } + .navbar-collapse.collapse { + display: none !important; + } + .navbar-nav { + float: none !important; + margin-top: 7.5px; + } + .navbar-nav > li { + float: none; + } + .navbar-nav > li > a { + padding-top: 10px; + padding-bottom: 10px; + } + .collapse.in { + display: block !important; + } + } + .navbar-toggle { height: $header-height; margin: 0; @@ -28,7 +67,9 @@ transition: opacity 0.15s ease-in-out; @extend svg.logo.white; - &:hover, &:focus, &:active { + &:hover, + &:focus, + &:active { opacity: 0.6; outline: 0; text-decoration: none; @@ -39,40 +80,97 @@ ul.nav { li { - a { - color: $header-link-color; - font-size: $header-font-size; - font-family: $font-family-open-sans; - font-weight: $font-weight-bold; - height: $header-height; - line-height: $header-height; - padding: 0 10px; - margin: 0; - text-decoration: none; + color: $consul-black; + font-size: $header-font-size; + font-family: $font-family-open-sans; + font-weight: $font-weight-bold; + height: $header-height; + margin: 0; + text-decoration: none; - &:hover, &:focus, &:active { - background-color: transparent; - color: $header-link-color-hover; - outline: 0; + &:hover, + &:focus, + &:active { + background-color: transparent; + color: $header-link-color-hover; + outline: 0; - svg { - fill: $header-link-color-hover; - } + svg { + fill: $header-link-color-hover; } + } + + span { + display: block; + padding: 15px; + line-height: 20px; svg { fill: $header-link-color; position: relative; - top: 2px; - width: 14px; - height: 14px; - margin-right: 3px; + top: -2px; + width: 9px; + height: 5px; + margin-left: 7px; + } + } + + svg { + fill: $header-link-color; + position: relative; + top: 2px; + width: 14px; + height: 14px; + margin-right: 3px; + } + + &:hover { + cursor: pointer; + + & > ul { + visibility: visible; + opacity: 1; + display: block; + transition: all 0.5s ease; + } + } + + ul { + visibility: hidden; + opacity: 0; + transition: all 0.5s ease; + min-width: 22rem; + box-shadow: 0px 4px 12px -2px rgba(63, 68, 85, 0.5); + border-radius: 3px; + padding: 2rem; + position: absolute; + height: 160px; + z-index: 1; + background-color: white; + margin-left: -15px; + + &:hover { + visibility: visible; + opacity: 1; + } + + li { + clear: both; + width: 100%; + display: block; + padding: 1rem; + position: relative; + height: 44px; + + a { + text-decoration: none; + } } } } } .buttons { - margin-top: 2px; + margin-top: 20px; } } diff --git a/website/source/assets/stylesheets/_variables.scss b/website/source/assets/stylesheets/_variables.scss index e90216f95a..efdd309a54 100755 --- a/website/source/assets/stylesheets/_variables.scss +++ b/website/source/assets/stylesheets/_variables.scss @@ -1,27 +1,28 @@ // Colors -$white: #FFFFFF; +$white: #ffffff; $black: #000000; $gray-darker: #555555; +$consul-black: #252937; -$consul-red: #C62A71; -$consul-red-dark: #8C1C59; -$packer-blue: #1DAEFF; -$packer-blue-dark: #1D94DD; -$terraform-purple: #5C4EE5; -$terraform-purple-dark: #4040B2; -$vagrant-blue: #1563FF; -$vagrant-blue-dark: #104EB2; +$consul-red: #c62a71; +$consul-red-dark: #8c1c59; +$packer-blue: #1daeff; +$packer-blue-dark: #1d94dd; +$terraform-purple: #5c4ee5; +$terraform-purple-dark: #4040b2; +$vagrant-blue: #1563ff; +$vagrant-blue-dark: #104eb2; $vault-black: #000000; -$vault-blue: #00ABE0; -$vault-gray: #919FA8; +$vault-blue: #00abe0; +$vault-gray: #919fa8; // Typography -$font-family-klavika: 'klavika-web', Helvetica, sans-serif; +$font-family-klavika: 'klavika-web', Helvetica, sans-serif; $font-family-open-sans: 'Open Sans', sans-serif; $font-family-monospace: 'Fira Mono', monospace; -$font-size: 15px; -$font-weight-reg: 400; -$font-weight-bold: 600; +$font-size: 15px; +$font-weight-reg: 400; +$font-weight-bold: 600; // Body $body-font-color: $gray-darker; @@ -45,8 +46,8 @@ $sidebar-font-weight: $font-weight-reg; $header-background-color: $consul-red; $header-font-size: $font-size - 2; $header-height: 92px; -$header-link-color: rgba($white, 0.85); -$header-link-color-hover: $white; +$header-link-color: rgba($black, 0.85); +$header-link-color-hover: $black; $header-font-family: $font-family-klavika; // Footer @@ -56,7 +57,7 @@ $footer-link-color-hover: $black; // Button $button-background: $white; -$button-font-color: #7b8A8E; +$button-font-color: #7b8a8e; $button-font-family: $font-family-klavika; $button-font-size: $font-size; $button-font-weight: $font-weight-bold; diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss index ce7ff246ef..4b8ff18201 100644 --- a/website/source/assets/stylesheets/application.scss +++ b/website/source/assets/stylesheets/application.scss @@ -30,10 +30,10 @@ @import '_logos'; // Pages -@import "_community"; -@import "_docs"; -@import "_downloads"; +@import '_community'; +@import '_docs'; +@import '_downloads'; // @import "_home"; // Consul Connect -@import 'consul-connect/_index'; \ No newline at end of file +@import 'consul-connect/_index'; diff --git a/website/source/layouts/_sidebar.erb b/website/source/layouts/_sidebar.erb index cccf893d36..4613291f3c 100644 --- a/website/source/layouts/_sidebar.erb +++ b/website/source/layouts/_sidebar.erb @@ -8,6 +8,9 @@