Update header
Updates header to remove hamburger on desktop, set 100px margin, and adds 100px margin to body.reviewable/pr1951/r1
Eric Baum
parent
4477df5242
commit
08a199d6d1
|
|
@ -20,8 +20,16 @@
|
|||
<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">
|
||||
<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/hellonode/" 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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
18
js/script.js
18
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');
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue