searchbox/vendorStrip responsive fixes

pull/78/head
scotty 2016-03-08 00:31:56 -08:00
parent c6c27c214a
commit a0db2a0922
5 changed files with 91 additions and 78 deletions

View File

@ -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><!--
<div class="dropdown">
<div class="readout"></div>
<a href="/v1.1/">Version 1.1</a>
<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)">
</ul>
<div id="searchBox">
<input type="text" id="search" placeholder="Search" onkeydown="if (event.keyCode==13) window.location.replace('/docs/search/?q=' + this.value)">
</div>
</div>
</section>

View File

@ -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
position: relative
width: 100%
min-width: 250px
padding: 0 10px
margin: 0
height: 30px
line-height: 30px
border: 0
background-color: $dark-grey
font-size: 16px
clear: both
#docs
#vendorStrip
line-height: 44px
ul
float: none
#searchBox
float: none
display: block
width: 80%
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
max-height: 24px
vertical-align: middle
margin: 0 30px
#vendorStrip
display: none
// OCEAN NODES

View File

@ -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
margin-left: 60px
#search
display: inline-block
position: relative
#searchBox
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

View File

@ -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

View File

@ -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>-->
<div>
<img src="images/logos/viacom_logo.png">
<img src="images/logos/soundcloud_logo.png">
<img src="images/logos/redhat_logo.png">
<img src="images/logos/wepay_logo.png">
<img src="images/logos/verizon_logo.png">
</div>
<img src="images/logos/viacom_logo.png">
<img src="images/logos/soundcloud_logo.png">
<img src="images/logos/redhat_logo.png">
<img src="images/logos/wepay_logo.png">
<img src="images/logos/verizon_logo.png">
</div>
</section>