searchbox/vendorStrip responsive fixes

_layouts/docwithnav.html

@@ -15,13 +15,10 @@
 			<li><a href="/docs/reference">REFERENCE</a></li>
 			<li><a href="/docs/samples">SAMPLES</a></li>
 			<li><a href="/docs/troubleshooting/">SUPPORT</a></li>
-		</ul><!--
+		</ul>
-		<div class="dropdown">
+		<div id="searchBox">
-			<div class="readout"></div>
+			<input type="text" id="search" placeholder="Search" onkeydown="if (event.keyCode==13) window.location.replace('/docs/search/?q=' + this.value)">
-			<a href="/v1.1/">Version 1.1</a>
+		</div>
-            <a href="/v1.2/">Version 1.2</a>
-		</div>-->
-		<input type="text" id="search" placeholder="Search" onkeydown="if (event.keyCode==13) window.location.replace('/docs/search/?q=' + this.value)">
 	</div>
 </section>
 

_sass/_base.sass

@@ -50,7 +50,7 @@ $main-nav-left-button-font-size: 18px
 $hero-padding-top: 80px
 $headline-wrapper-margin-bottom: 40px
 $quickstart-button-padding: 0 50px
-$vendor-strip-height: 44px
+$vendor-strip-height: 88px
 $vendor-strip-font-size: 16px
 
 
@@ -119,7 +119,7 @@ header
 	display: none
 
 #viewDocs
-	border: 1px solid white
+	border: 2px solid white
 	background-color: transparent
 	transition: 0.3s
 
@@ -260,16 +260,12 @@ header
 
 // VENDOR STRIP
 #vendorStrip
+	position: relative
 	background-color: transparentize(white, 0.9)
 	font-weight: 100
 	white-space: nowrap
 	text-align: center
 
-	div
-		vertical-align: middle
-		height: 100%
-		display: inline-block
-
 // FOOTER
 footer
 	width: 100%
@@ -393,7 +389,8 @@ section
 	background-color: $dark-grey
 
 	h5
-		margin-bottom: 20px
+		margin: 20px 0
+		line-height: 28px
 
 #vendorStrip
 	position: relative
@@ -412,22 +409,31 @@ section
 		font-size: 0.75em
 		font-weight: bold
 
-	li + li, #search
+	li + li
 		margin-left: 20px
 
-	#search
+
-		display: block
+#docs
-		position: relative
+	#vendorStrip
-		width: 100%
+		line-height: 44px
-		min-width: 250px
+
-		padding: 0 10px
+		ul
-		margin: 0
+			float: none
-		height: 30px
+
-		line-height: 30px
+		#searchBox
-		border: 0
+			float: none
-		background-color: $dark-grey
+			display: block
-		font-size: 16px
+			width: 80%
-		clear: both
+			margin: 0 auto
+			height: 44px
+			line-height: 44px
+
+		#search
+			width: 100%
+			padding: 0 10px
+			height: 30px
+			line-height: 30px
+			font-size: 16px
 
 
 #encyclopedia
@@ -700,7 +706,7 @@ section
 		background-color: transparent
 
 	.includecode, .includecode th, .includecode td
-		padding: 0px !important
+		padding: 0 !important
 
 	.includecode th
 		text-align: right !important
@@ -711,7 +717,7 @@ section
 		background-color: transparent !important
 
 	.includecode pre
-		margin: 0px !important
+		margin: 0 !important
 
 	ul li
 		list-style: disc
@@ -1057,14 +1063,14 @@ $feature-box-div-margin-bottom: 40px
 
 #home #hero
 	margin-bottom: 0
+	padding-bottom: 1px
 
 	main
+		padding: 0 10px
 		margin-bottom: 30px
 
-#vendorStrip img
+	#vendorStrip
-	max-height: 24px
+		display: none
-	vertical-align: middle
-	margin: 0 30px
 
 
 // OCEAN NODES

_sass/_desktop.sass

@@ -1,26 +1,44 @@
 $main-max-width: 1200px
+$vendor-strip-height: 44px
 $video-section-height: 550px
 
 @media screen and (min-width: 1025px)
 	#vendorStrip
-		white-space: nowrap
+		height: $vendor-strip-height
+		line-height: $vendor-strip-height
 
-		li + li, #search
+		#searchBox
-			margin-left: 60px
-
-		#search
-			display: inline-block
-			position: relative
 			float: right
-			width: 24%
-			min-width: 250px
-			padding: 0 10px
-			margin: 8px 30px 0 0
-			height: 30px
-			line-height: 30px
-			border: 1px solid $light-grey
-			font-size: 16px
 
+		//#search
+		//	display: inline-block
+		//	position: relative
+		//	float: right
+		//	width: 24%
+		//	min-width: 250px
+		//	padding: 0 10px
+		//	margin: 8px 30px 0 0
+		//	height: 30px
+		//	line-height: 30px
+		//	border: 1px solid $light-grey
+		//	font-size: 16px
+		//	clear: none
+
+
+	#home
+		#hero
+			#vendorStrip
+				display: block
+
+	#docs
+		#hero
+			#vendorStrip
+				ul
+					float: left
+
+				#searchBox
+					float: right
+					width: 30%
 
 
 	#docsToc

_sass/_tablet.sass

@@ -48,7 +48,6 @@ $main-nav-left-button-font-size: 18px
 $hero-padding-top: 80px
 $headline-wrapper-margin-bottom: 40px
 $quickstart-button-padding: 0 50px
-$vendor-strip-height: 44px
 $vendor-strip-font-size: 16px
 
 //video
@@ -81,6 +80,21 @@ $feature-box-div-width: 45%
 		display: block
 		text-align: center
 
+		img
+			max-height: 24px
+			vertical-align: middle
+			margin: 0 30px
+
+	#docs
+		#vendorStrip
+			ul
+				a
+					font-size: 1em
+					font-weight: normal
+
+				li + li
+					margin-left: 60px
+
 
 	#oceanNodes
 		h3
@@ -126,8 +140,6 @@ $feature-box-div-width: 45%
 
 	#video
 		height: $video-section-height
-
-	#video
 		display: block
 
 		& > .light-text
@@ -187,20 +199,3 @@ $feature-box-div-width: 45%
 			a
 				width: 25%
 				font-size: 22px
-
-	//
-	//	.social
-	//		position: relative
-	//		margin: 80px 0 60px
-	//
-	//		label
-	//			float: right
-	//			display: inline-block
-	//			height: 50px
-	//			line-height: 50px
-	//			font-weight: 100
-	//			white-space: nowrap
-	//
-	//			input
-	//				margin-left: 8px
-	//				width: 300px

index.html

@@ -17,14 +17,11 @@ title: Accelerate Your Delivery
 		<a href="/docs/hellonode/" id="quickstartButton" class="button">Try Our Hello World</a>
 	</main>
 	<div id="vendorStrip" class="light-text">
-		<!--<div>Join the growing community already using Kubernetes</div>-->
+		<img src="images/logos/viacom_logo.png">
-		<div>
+		<img src="images/logos/soundcloud_logo.png">
-			<img src="images/logos/viacom_logo.png">
+		<img src="images/logos/redhat_logo.png">
-			<img src="images/logos/soundcloud_logo.png">
+		<img src="images/logos/wepay_logo.png">
-			<img src="images/logos/redhat_logo.png">
+		<img src="images/logos/verizon_logo.png">
-			<img src="images/logos/wepay_logo.png">
-			<img src="images/logos/verizon_logo.png">
-		</div>
 	</div>
 </section>