diff --git a/_includes/head-header.html b/_includes/head-header.html index 17a83fa31eb..598f6e80fba 100644 --- a/_includes/head-header.html +++ b/_includes/head-header.html @@ -20,8 +20,16 @@
+
- View Documentation + + Try Kubernetes
diff --git a/_sass/_base.sass b/_sass/_base.sass index 635012a39b2..7ef5103ff8e 100644 --- a/_sass/_base.sass +++ b/_sass/_base.sass @@ -234,6 +234,40 @@ header color: $blue text-decoration: none +// Global Nav - 12/9/2016 Update + +ul.global-nav + display: none + + li + display: inline-block + margin-right: 14px + + a + color: #fff + font-weight: bold + padding: 0 + position: relative + + &.active:after + position: absolute + width: 100% + height: 2px + content: '' + bottom: -4px + left: 0 + background: #fff + + +.flip-nav ul.global-nav li a, +.open-nav ul.global-nav li a, + color: #333 + +.flip-nav ul.global-nav li a.active:after, +.open-nav ul.global-nav li a.active:after, + + background: $blue + // FLIP NAV .flip-nav header @@ -301,6 +335,26 @@ header padding-left: 0 padding-right: 0 margin-bottom: 0 + position: relative + + &.bot-bar:after + display: block + margin-bottom: -20px + height: 8px + width: 100% + background-color: transparentize(white, 0.9) + content: '' + + &.no-sub + + h5 + display: none + + h1 + margin-bottom: 20px + +#home #hero:after + display: none // VENDOR STRIP #vendorStrip @@ -482,6 +536,19 @@ section margin: 0 auto height: 44px line-height: 44px + position: relative + + &:before + position: absolute + width: 15px + height: 15px + content: '' + right: 8px + top: 7px + background-image: url(/images/search-icon.svg) + background-repeat: no-repeat + background-size: 100% 100% + z-index: 1 #search width: 100% @@ -490,6 +557,10 @@ section line-height: 30px font-size: 16px vertical-align: top + background: #fff + border: none + border-radius: 4px + position: relative #encyclopedia diff --git a/_sass/_desktop.sass b/_sass/_desktop.sass index 2e70b23e8ab..27fbc46ae11 100644 --- a/_sass/_desktop.sass +++ b/_sass/_desktop.sass @@ -3,6 +3,15 @@ $vendor-strip-height: 44px $video-section-height: 550px @media screen and (min-width: 1025px) + #hamburger + display: none + + ul.global-nav + display: inline-block + + #docs #vendorStrip #searchBox:before + top: 15px + #vendorStrip height: $vendor-strip-height line-height: $vendor-strip-height @@ -40,7 +49,7 @@ $video-section-height: 550px #searchBox float: right - width: 30% + width: 320px #search vertical-align: middle @@ -65,7 +74,7 @@ $video-section-height: 550px #encyclopedia - padding: 50px 50px 20px 20px + padding: 50px 50px 100px 100px clear: both #docsToc @@ -88,6 +97,11 @@ $video-section-height: 550px section, header, footer main max-width: $main-max-width + + header, #vendorStrip, #encyclopedia, #hero h1, #hero h5, #docs #hero h1, #docs #hero h5, + #community #hero h1, .gridPage #hero h1, #community #hero h5, .gridPage #hero h5 + padding-left: 100px + padding-right: 100px #home section, header, footer @@ -276,7 +290,7 @@ $video-section-height: 550px text-align: left h1 - padding: 20px + padding: 20px 100px #tryKubernetes width: auto diff --git a/images/search-icon.svg b/images/search-icon.svg new file mode 100644 index 00000000000..285f57caffb --- /dev/null +++ b/images/search-icon.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/js/script.js b/js/script.js index 22eff0a1b4c..b944d91175e 100755 --- a/js/script.js +++ b/js/script.js @@ -503,3 +503,21 @@ var pushmenu = (function(){ show: show }; })(); + +$(function() { + + // Make global nav be active based on pathname + if ((location.pathname.split("/")[1]) !== ""){ + $('.global-nav li a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); + } + + // If vendor strip doesn't exist add className + if ( !$('#vendorStrip').length > 0 ) { + $('#hero').addClass('bot-bar'); + } + + // If is not homepage add class to hero section + if (!$('#home').length > 0 ) { + $('#hero').addClass('no-sub'); + } +}); \ No newline at end of file