Merge pull request #1951 from Nanopy/UC-design-patch

UC design patch

_includes/head-header.html

@@ -18,9 +18,17 @@
 <div id="cellophane" onclick="kub.toggleMenu()"></div>
 <header>
 	<a href="/" class="logo"></a>
+	
 	<div class="nav-buttons" data-auto-burger="primary">
-		<a href="/docs/" class="button" id="viewDocs" data-auto-burger-exclude>View Documentation</a>
+		<ul class="global-nav">
-		<a href="/docs/hellonode/" class="button" id="tryKubernetes" data-auto-burger-exclude>Try Kubernetes</a>
+			<li><a href="/docs/">Documentation</a></li>
+			<li><a href="http://blog.kubernetes.io/">Blog</a></li>
+			<li><a href="/partners/">Partners</a></li>
+			<li><a href="/community/">Community</a></li>
+			<li><a href="/case-studies/">Case Studies</a></li>
+		</ul>
+		<!-- <a href="/docs/" class="button" id="viewDocs" data-auto-burger-exclude>View Documentation</a> -->
+		<a href="/docs/tutorials/kubernetes-basics/" class="button" id="tryKubernetes" data-auto-burger-exclude>Try Kubernetes</a>
 		<button id="hamburger" onclick="kub.toggleMenu()" data-auto-burger-exclude><div></div></button>
 	</div>
 

_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: 400
+			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

_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
@@ -89,6 +98,11 @@ $video-section-height: 550px
 		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
 			main
@@ -276,7 +290,7 @@ $video-section-height: 550px
 			text-align: left
 
 			h1
-				padding: 20px
+				padding: 20px 100px
 
 		#tryKubernetes
 			width: auto

images/search-icon.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="575.996px" height="576px" viewBox="512 32 575.996 576" enable-background="new 512 32 575.996 576" xml:space="preserve">
+<path fill="#3371E3" d="M1076.525,541.14L960.947,425.562c70.432-96.992,61.952-233.465-25.498-320.915
+	C887.015,56.218,823.533,32,760.051,32c-63.481,0-126.963,24.218-175.398,72.653c-96.87,96.871-96.87,253.926,0,350.796
+	c48.436,48.436,111.917,72.653,175.398,72.653c51.13,0,102.24-15.737,145.511-47.155l115.577,115.577
+	c7.643,7.648,17.671,11.476,27.693,11.476s20.051-3.827,27.693-11.476C1091.82,581.235,1091.82,556.436,1076.525,541.14z
+	 M623.424,416.679c-75.334-75.335-75.334-197.92,0-273.255c36.493-36.493,85.018-56.595,136.627-56.595
+	c51.61,0,100.135,20.096,136.628,56.595c75.334,75.334,75.334,197.92,0,273.255c-36.493,36.492-85.018,56.595-136.628,56.595
+	C708.441,473.273,659.923,453.171,623.424,416.679z"/>
+</svg>

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');
+	}
+});