many, many mobile fixes

Introducing: _code-styles.sass
Introducing: TOC mobile flyout
pull/79/head
scotty 2016-03-08 17:18:23 -08:00
parent a83ed638d3
commit c4a5d0ab93
10 changed files with 486 additions and 333 deletions

View File

@ -7,13 +7,20 @@
<a href="/community/">Community</a>
</nav>
<div class="social">
<a href="https://twitter.com/kubernetesio" class="twitter"><span>twitter</span></a>
<a href="https://github.com/kubernetes/kubernetes" class="github"><span>Github</span></a>
<a href="http://slack.k8s.io/" class="slack"><span>Slack</span></a>
<a href="http://stackoverflow.com/questions/tagged/kubernetes" class="stack-overflow"><span>Stack Overflow</span></a>
<a href="https://groups.google.com/forum/#!forum/google-containers" class="mailing-list"><span>Mailing List</span></a>
<a href="https://calendar.google.com/calendar/embed?src=nt2tcnbtbied3l6gi2h29slvc0%40group.calendar.google.com" class="calendar"><span>Events Calendar</span></a>
<label for="wishField">I wish this page <input type="text" id="wishField" name="wishField" placeholder="enter your wish"></label>
<div>
<a href="https://twitter.com/kubernetesio" class="twitter"><span>twitter</span></a>
<a href="https://github.com/kubernetes/kubernetes" class="github"><span>Github</span></a>
<a href="http://slack.k8s.io/" class="slack"><span>Slack</span></a>
</div>
<div>
<a href="http://stackoverflow.com/questions/tagged/kubernetes" class="stack-overflow"><span>Stack Overflow</span></a>
<a href="https://groups.google.com/forum/#!forum/google-containers" class="mailing-list"><span>Mailing List</span></a>
<a href="https://calendar.google.com/calendar/embed?src=nt2tcnbtbied3l6gi2h29slvc0%40group.calendar.google.com" class="calendar"><span>Events Calendar</span></a>
</div>
<div>
<span>I wish this page</span>
<input type="text" id="wishField" name="wishField" placeholder="enter your wish">
</div>
</div>
<div id="miceType" class="center">&copy; {{ 'now' | date: "%Y" }} Kubernetes</div>
</main>

View File

@ -28,7 +28,7 @@
</div>
<div class="nav-box">
<h3><a href="/docs/">Documentation</a></h3>
<p>Learn how to use Kubernetes with the use of walkthroughs, samples, and reference documentation. You can even <a href="/editdocs/">help contribute to the docs</a>!</p>
<p>Learn how to use Kubernetes with the use of walkthroughs, samples, and reference documentation. You can even <a href="/editdocs/" data-auto-burger-exclude>help contribute to the docs</a>!</p>
</div>
<div class="nav-box">
<h3><a href="/community/">Community</a></h3>

View File

@ -27,6 +27,7 @@
<div class="pi-accordion">
{% assign tree = site.data[foundTOC].toc %}{% include tree.html %}
</div> <!-- /pi-accordion -->
<button class="push-menu-close-button" onclick="kub.toggleToc()"></button>
</div> <!-- /docsToc -->
<div id="docsContent">
<p><a href="/editdocs#{{ page.path }}" id="editPageButton">Edit This Page</a></p>
@ -35,19 +36,20 @@
<p><a href=""><img src="https://kubernetes-site.appspot.com/UA-36037335-10/GitHub/{{ page.path }}?pixel" alt="Analytics" /></a>
<div id="pd_rating_holder_8345992"></div>
<script type="text/javascript">
PDRTJS_settings_8345992 = {
"id" : "8345992",
"unique_id" : "{{page.url}}",
"title" : "{{title}}",
"permalink" : "http://kubernetes.github.io{{page.url}}"
};
(function(d,c,j){if(!document.getElementById(j)){var pd=d.createElement(c),s;pd.id=j;pd.src=('https:'==document.location.protocol)?'https://polldaddy.com/js/rating/rating.js':'http://i0.poll.fm/js/rating/rating.js';s=document.getElementsByTagName(c)[0];s.parentNode.insertBefore(pd,s);}}(document,'script','pd-rating-js'));
PDRTJS_settings_8345992 = {
"id" : "8345992",
"unique_id" : "{{page.url}}",
"title" : "{{title}}",
"permalink" : "http://kubernetes.github.io{{page.url}}"
};
(function(d,c,j){if(!document.getElementById(j)){var pd=d.createElement(c),s;pd.id=j;pd.src=('https:'==document.location.protocol)?'https://polldaddy.com/js/rating/rating.js':'http://i0.poll.fm/js/rating/rating.js';s=document.getElementsByTagName(c)[0];s.parentNode.insertBefore(pd,s);}}(document,'script','pd-rating-js'));
</script>
</div>
</section>
{% include footer.html %}
<button class="flyout-button" onclick="kub.toggleToc()"></button>
<style>
.cse .gsc-control-cse, .gsc-control-cse {

View File

@ -28,7 +28,7 @@ $main-max-width: 100%
$header-height: 80px
$logo-width: 120px
$logo-width: 180px
$nav-buttons-margin-left: 30px
@ -53,7 +53,6 @@ $quickstart-button-padding: 0 50px
$vendor-strip-height: 88px
$vendor-strip-font-size: 16px
// video
$video-section-height: 200px
@ -104,14 +103,51 @@ header
box-shadow: 0 0 0 transparent
overflow: hidden
transition: 0.3s
text-align: center
.logo
position: relative
float: left
display: block
width: 180px
height: 88px
top: 0
left: 0
transform: none
background-image: url(../images/nav_logo.svg)
background-size: contain
background-position: center center
background-repeat: no-repeat
#docs
.flyout-button
position: fixed
top: 20px
left: 20px
width: 50px
height: 50px
background-image: url(../images/toc_icon.png)
background-position: center center
background-repeat: no-repeat
background-size: auto
border-radius: 50%
transition: 0.3s
z-index: 99999
.logo
@include pureCenter
display: block
width: 45px
height: 44px
background-image: url(../images/favicon.png)
&.flip-nav .flyout-button
background-image: url(../images/toc_icon_grey.png)
.nav-buttons
float: right
@ -231,9 +267,6 @@ header
header
box-shadow: 0 1px 2px $medium-grey
.logo
background-image: url(../images/nav_logo2.svg)
#viewDocs
border-color: $dark-grey
color: $dark-grey
@ -286,29 +319,63 @@ footer
color: white
text-decoration: none
.social
position: relative
text-align: center
margin: 20px 0
a, label
margin: 20px 0
div
text-align: center
margin-bottom: 20px
a
vertical-align: middle
div:last-child
margin: 30px 0
span
display: block
margin-bottom: 8px
input
text-align: center
//.social
// position: relative
// text-align: center
//
// a, label
// margin: 20px 0
//
// a
// vertical-align: middle
//
// a.line-break
// display: block
//
//
// label
// //float: right
// display: inline-block
// width: 100%
// height: 50px
// line-height: 50px
// font-weight: 100
// white-space: nowrap
//
// input
// margin-left: 8px
// width: 300px
// max-width: 60%
//
//
//.social
// a
// float: left
// margin-right: 10px
//
// a:nth-child(4)
// clear: left
label
//float: right
display: inline-block
width: 100%
height: 50px
line-height: 50px
font-weight: 100
white-space: nowrap
input
margin-left: 8px
width: 300px
max-width: 60%
#search, #wishField
@ -434,6 +501,7 @@ section
height: 30px
line-height: 30px
font-size: 16px
vertical-align: top
#encyclopedia
@ -445,10 +513,17 @@ section
height: 100%
#docsToc
position: absolute
left: -400px
width: 350px
padding: 0 20px 0 0
position: fixed
background-color: white
top: 0
left: 0
width: 0
height: 100vh
overflow: hidden
padding: 50px 0
z-index: 999999
transition: 0.3s
.yah
& > .title
@ -458,6 +533,15 @@ section
margin-left: -21px
color: $blue
.open-toc
body
overflow: hidden
#docsToc
padding: 50px 20px
width: 400px
max-width: 100vw
overflow-y: auto
.pi-accordion
margin-left: -20px
@ -553,29 +637,6 @@ section
line-height: 60px
background-color: #444
.push-menu-close-button
position: absolute
top: 0
right: 0
width: 50px
height: 50px
&:before, &:after
content: ""
position: absolute
top: calc(50% - 1px)
left: 25%
width: 50%
height: 2px
background-color: black
&:before
transform: rotate(45deg)
&:after
transform: rotate(-45deg)
ul
margin-top: 25px
@ -613,6 +674,29 @@ section
color: lighten(#222222, 20%)
.push-menu-close-button
position: absolute
top: 0
right: 0
width: 50px
height: 50px
&:before, &:after
content: ""
position: absolute
top: calc(50% - 1px)
left: 25%
width: 50%
height: 2px
background-color: black
&:before
transform: rotate(45deg)
&:after
transform: rotate(-45deg)
#docsContent
position: relative
@ -833,205 +917,6 @@ html.search #docsContent
/* Default gh-pages-blog css from https://github.com/thedereck/gh-pages-blog/blob/master/css/syntax.css */
.highlight br
display: none
.highlight
background: #ffffff
.highlight .c
color: #999988
font-style: italic
.highlight .err
color: #a61717
background-color: #e3d2d2
.highlight .k
font-weight: bold
.highlight .o
font-weight: bold
.highlight .cm
color: #999988
font-style: italic
.highlight .cp
color: #999999
font-weight: bold
.highlight .c1
color: #999988
font-style: italic
.highlight .cs
color: #999999
font-weight: bold
font-style: italic
.highlight .gd
color: #000000
background-color: #ffdddd
.highlight .gd .x
color: #000000
background-color: #ffaaaa
.highlight .ge
font-style: italic
.highlight .gr
color: #aa0000
.highlight .gh
color: #999999
.highlight .gi
color: #000000
background-color: #ddffdd
.highlight .gi .x
color: #000000
background-color: #aaffaa
.highlight .go
color: #888888
.highlight .gp
color: #555555
.highlight .gs
font-weight: bold
.highlight .gu
color: #aaaaaa
.highlight .gt
color: #aa0000
.highlight .kc
font-weight: bold
.highlight .kd
font-weight: bold
.highlight .kp
font-weight: bold
.highlight .kr
font-weight: bold
.highlight .kt
color: #445588
font-weight: bold
.highlight .m
color: #009999
.highlight .s
color: #d14
.highlight .na
color: #008080
.highlight .nb
color: #0086B3
.highlight .nc
color: #445588
font-weight: bold
.highlight .no
color: #008080
.highlight .ni
color: #800080
.highlight .ne
color: #990000
font-weight: bold
.highlight .nf
color: #990000
font-weight: bold
.highlight .nn
color: #555555
.highlight .nt
color: #000080
.highlight .nv
color: #008080
.highlight .ow
font-weight: bold
.highlight .w
color: #bbbbbb
.highlight .mf
color: #009999
.highlight .mh
color: #009999
.highlight .mi
color: #009999
.highlight .mo
color: #009999
.highlight .sb
color: #d14
.highlight .sc
color: #d14
.highlight .sd
color: #d14
.highlight .s2
color: #d14
.highlight .se
color: #d14
.highlight .sh
color: #d14
.highlight .si
color: #d14
.highlight .sx
color: #d14
.highlight .sr
color: #009926
.highlight .s1
color: #d14
.highlight .ss
color: #990073
.highlight .bp
color: #999999
.highlight .vc
color: #008080
.highlight .vg
color: #008080
.highlight .vi
color: #008080
.highlight .il
color: #009999
@ -1053,24 +938,20 @@ $feature-box-div-margin-bottom: 40px
// Home-specific
#home
section
min-width: 320px
&.flip-nav, &.open-nav
.logo
background-image: url(../images/nav_logo2.svg)
#hero
margin-bottom: 0
padding-bottom: 1px
section, header, footer
main
min-width: 320px
padding: 0 10px
margin-bottom: 30px
#home #hero
margin-bottom: 0
padding-bottom: 1px
main
padding: 0 10px
margin-bottom: 30px
#vendorStrip
display: none
#vendorStrip
display: none
// OCEAN NODES
@ -1213,7 +1094,7 @@ $feature-box-div-margin-bottom: 40px
#features
padding-top: 140px
background-color: $light-grey
background-image: url(../../images/wheel.png)
background-image: url(../images/wheel.png)
background-position: center 60px
background-repeat: no-repeat
background-size: auto
@ -1278,16 +1159,16 @@ $feature-box-div-margin-bottom: 40px
background-repeat: no-repeat
div:nth-child(1)
background-image: url(../../images/twitter_icon.png)
background-image: url(../images/twitter_icon.png)
div:nth-child(2)
background-image: url(../../images/github_icon.png)
background-image: url(../images/github_icon.png)
div:nth-child(3)
background-image: url(../../images/slack_icon.png)
background-image: url(../images/slack_icon.png)
div:nth-child(4)
background-image: url(../../images/stackoverflow_icon.png)
background-image: url(../images/stackoverflow_icon.png)
div + div
margin-top: 20px

199
_sass/_code-styles.sass Normal file
View File

@ -0,0 +1,199 @@
/* Default gh-pages-blog css from https://github.com/thedereck/gh-pages-blog/blob/master/css/syntax.css */
.highlight br
display: none
.highlight
background: #ffffff
.highlight .c
color: #999988
font-style: italic
.highlight .err
color: #a61717
background-color: #e3d2d2
.highlight .k
font-weight: bold
.highlight .o
font-weight: bold
.highlight .cm
color: #999988
font-style: italic
.highlight .cp
color: #999999
font-weight: bold
.highlight .c1
color: #999988
font-style: italic
.highlight .cs
color: #999999
font-weight: bold
font-style: italic
.highlight .gd
color: #000000
background-color: #ffdddd
.highlight .gd .x
color: #000000
background-color: #ffaaaa
.highlight .ge
font-style: italic
.highlight .gr
color: #aa0000
.highlight .gh
color: #999999
.highlight .gi
color: #000000
background-color: #ddffdd
.highlight .gi .x
color: #000000
background-color: #aaffaa
.highlight .go
color: #888888
.highlight .gp
color: #555555
.highlight .gs
font-weight: bold
.highlight .gu
color: #aaaaaa
.highlight .gt
color: #aa0000
.highlight .kc
font-weight: bold
.highlight .kd
font-weight: bold
.highlight .kp
font-weight: bold
.highlight .kr
font-weight: bold
.highlight .kt
color: #445588
font-weight: bold
.highlight .m
color: #009999
.highlight .s
color: #d14
.highlight .na
color: #008080
.highlight .nb
color: #0086B3
.highlight .nc
color: #445588
font-weight: bold
.highlight .no
color: #008080
.highlight .ni
color: #800080
.highlight .ne
color: #990000
font-weight: bold
.highlight .nf
color: #990000
font-weight: bold
.highlight .nn
color: #555555
.highlight .nt
color: #000080
.highlight .nv
color: #008080
.highlight .ow
font-weight: bold
.highlight .w
color: #bbbbbb
.highlight .mf
color: #009999
.highlight .mh
color: #009999
.highlight .mi
color: #009999
.highlight .mo
color: #009999
.highlight .sb
color: #d14
.highlight .sc
color: #d14
.highlight .sd
color: #d14
.highlight .s2
color: #d14
.highlight .se
color: #d14
.highlight .sh
color: #d14
.highlight .si
color: #d14
.highlight .sx
color: #d14
.highlight .sr
color: #009926
.highlight .s1
color: #d14
.highlight .ss
color: #990073
.highlight .bp
color: #999999
.highlight .vc
color: #008080
.highlight .vg
color: #008080
.highlight .vi
color: #008080
.highlight .il
color: #009999

View File

@ -10,20 +10,6 @@ $video-section-height: 550px
#searchBox
float: right
//#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
@ -32,6 +18,9 @@ $video-section-height: 550px
#docs
#hero
h1, h5
text-align: left
#vendorStrip
ul
float: left
@ -40,11 +29,39 @@ $video-section-height: 550px
float: right
width: 30%
#search
vertical-align: middle
.flyout-button
display: none
.logo
position: relative
float: left
display: block
width: 180px
height: 88px
top: 0
left: 0
transform: none
background-image: url(../images/nav_logo.svg)
&.flip-nav, &.open-nav
.logo
background-image: url(../images/nav_logo2.svg)
#docsToc
position: relative
float: left
padding: 0 20px
left: 0
width: 350px
z-index: auto
.push-menu-close-button
display: none
#docsContent
width: calc(100% - 400px)
@ -72,7 +89,7 @@ $video-section-height: 550px
#video
height: $video-section-height
position: relative
background-image: url(../../images/kub_video_thm.jpg)
background-image: url(../images/kub_video_thm.jpg)
background-position: center center
background-size: cover
@ -105,38 +122,47 @@ $video-section-height: 550px
padding: 20px 0
nav
overflow: hidden
margin-bottom: 20px
a
//width: 100%
text-align: center
display: inline-block
margin: 10px 0
width: 25%
float: left
font-size: 24px
font-weight: 300
color: white
text-decoration: none
.social
position: relative
margin: 20px 0
padding: 0 30px
max-width: 1200px
a
div
float: left
a + a
margin-left: 10px
label
div:last-child
float: right
width: auto
display: inline-block
height: 50px
line-height: 50px
font-weight: 100
white-space: nowrap
input
margin-left: 8px
max-width: none
//.social
// position: relative
// margin: 20px 0
//
// a
// float: left
//
// a + a
// margin-left: 10px
//
// label
// float: right
// width: auto
// display: inline-block
// height: 50px
// line-height: 50px
// font-weight: 100
// white-space: nowrap
//
// input
// margin-left: 8px
// max-width: none
#search, #wishField

View File

@ -22,7 +22,7 @@ p
font-size: $p-font-size
line-height: $p-line-height
section, header, footer, #vendorStrip
section, header, #vendorStrip
padding-left: $full-width-paddingX
padding-right: $full-width-paddingX
@ -33,10 +33,6 @@ section, header, footer, #vendorStrip
header
height: $header-height
.logo
width: $logo-width
height: $header-height
.nav-buttons
height: $header-height
line-height: $header-height

View File

@ -68,10 +68,6 @@ $feature-box-div-width: 45%
@media screen and (min-width: 750px)
@import "size"
#docs #hero
h1, h5
text-align: left
#home
#viewDocs, #tryKubernetes
display: inline-block
@ -194,8 +190,26 @@ $feature-box-div-width: 45%
// FOOTER
footer
nav
white-space: nowrap
text-align: center
a
width: 25%
font-size: 22px
width: auto
padding: 0 20px
.social
text-align: center
div
display: inline-block
div:last-child
display: block
margin: 0
span
display: inline-block
margin-right: 10px
input
text-align: left

View File

@ -3,6 +3,7 @@
@import "../_sass/reset"
@import "../_sass/skin"
@import "../_sass/code-styles"
// media queries
@import "../_sass/base"

File diff suppressed because one or more lines are too long