whentimeslows/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

many, many mobile fixes

Browse Source 
Introducing: _code-styles.sass
Introducing: TOC mobile flyout
This commit is contained in:
scotty
2016-03-08 17:18:23 -08:00
parent a83ed638d3
commit c4a5d0ab93
10 changed files with 486 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/footer.html
+14 -7
View File
@@ -7,13 +7,20 @@
<a href="/community/">Community</a> <a href="/community/">Community</a>
</nav> </nav>
<div class="social"> <div class="social">
<a href="https://twitter.com/kubernetesio" class="twitter"><span>twitter</span></a> <div>
<a href="https://github.com/kubernetes/kubernetes" class="github"><span>Github</span></a> <a href="https://twitter.com/kubernetesio" class="twitter"><span>twitter</span></a>
<a href="http://slack.k8s.io/" class="slack"><span>Slack</span></a> <a href="https://github.com/kubernetes/kubernetes" class="github"><span>Github</span></a>
<a href="http://stackoverflow.com/questions/tagged/kubernetes" class="stack-overflow"><span>Stack Overflow</span></a> <a href="http://slack.k8s.io/" class="slack"><span>Slack</span></a>
<a href="https://groups.google.com/forum/#!forum/google-containers" class="mailing-list"><span>Mailing List</span></a> </div>
<a href="https://calendar.google.com/calendar/embed?src=nt2tcnbtbied3l6gi2h29slvc0%40group.calendar.google.com" class="calendar"><span>Events Calendar</span></a> <div>
<label for="wishField">I wish this page <input type="text" id="wishField" name="wishField" placeholder="enter your wish"></label> <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>
<div id="miceType" class="center">&copy; {{ 'now' | date: "%Y" }} Kubernetes</div> <div id="miceType" class="center">&copy; {{ 'now' | date: "%Y" }} Kubernetes</div>
</main> </main>
_includes/head-header.html
+1 -1
View File
@@ -28,7 +28,7 @@
</div> </div>
<div class="nav-box"> <div class="nav-box">
<h3><a href="/docs/">Documentation</a></h3> <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>
<div class="nav-box"> <div class="nav-box">
<h3><a href="/community/">Community</a></h3> <h3><a href="/community/">Community</a></h3>
_layouts/docwithnav.html
+9 -7
View File
@@ -27,6 +27,7 @@
<div class="pi-accordion"> <div class="pi-accordion">
{% assign tree = site.data[foundTOC].toc %}{% include tree.html %} {% assign tree = site.data[foundTOC].toc %}{% include tree.html %}
</div> <!-- /pi-accordion --> </div> <!-- /pi-accordion -->
<button class="push-menu-close-button" onclick="kub.toggleToc()"></button>
</div> <!-- /docsToc --> </div> <!-- /docsToc -->
<div id="docsContent"> <div id="docsContent">
<p><a href="/editdocs#{{ page.path }}" id="editPageButton">Edit This Page</a></p> <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> <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> <div id="pd_rating_holder_8345992"></div>
<script type="text/javascript"> <script type="text/javascript">
PDRTJS_settings_8345992 = { PDRTJS_settings_8345992 = {
"id" : "8345992", "id" : "8345992",
"unique_id" : "{{page.url}}", "unique_id" : "{{page.url}}",
"title" : "{{title}}", "title" : "{{title}}",
"permalink" : "http://kubernetes.github.io{{page.url}}" "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')); (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> </script>
</div> </div>
</section> </section>
{% include footer.html %} {% include footer.html %}
<button class="flyout-button" onclick="kub.toggleToc()"></button>
<style> <style>
.cse .gsc-control-cse, .gsc-control-cse { .cse .gsc-control-cse, .gsc-control-cse {
_sass/_base.sass
+150 -269
View File
@@ -28,7 +28,7 @@ $main-max-width: 100%
$header-height: 80px $header-height: 80px
$logo-width: 120px $logo-width: 180px
$nav-buttons-margin-left: 30px $nav-buttons-margin-left: 30px
@@ -53,7 +53,6 @@ $quickstart-button-padding: 0 50px
$vendor-strip-height: 88px $vendor-strip-height: 88px
$vendor-strip-font-size: 16px $vendor-strip-font-size: 16px
// video // video
$video-section-height: 200px $video-section-height: 200px
@@ -104,14 +103,51 @@ header
box-shadow: 0 0 0 transparent box-shadow: 0 0 0 transparent
overflow: hidden overflow: hidden
transition: 0.3s transition: 0.3s
text-align: center
.logo .logo
position: relative
float: left float: left
display: block
width: 180px
height: 88px
top: 0
left: 0
transform: none
background-image: url(../images/nav_logo.svg) background-image: url(../images/nav_logo.svg)
background-size: contain background-size: contain
background-position: center center background-position: center center
background-repeat: no-repeat 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 .nav-buttons
float: right float: right
@@ -231,9 +267,6 @@ header
header header
box-shadow: 0 1px 2px $medium-grey box-shadow: 0 1px 2px $medium-grey
.logo
background-image: url(../images/nav_logo2.svg)
#viewDocs #viewDocs
border-color: $dark-grey border-color: $dark-grey
color: $dark-grey color: $dark-grey
@@ -286,29 +319,63 @@ footer
color: white color: white
text-decoration: none text-decoration: none
.social .social
position: relative margin: 20px 0
text-align: center
a, label div
margin: 20px 0 text-align: center
margin-bottom: 20px
a div:last-child
vertical-align: middle 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 #search, #wishField
@@ -434,6 +501,7 @@ section
height: 30px height: 30px
line-height: 30px line-height: 30px
font-size: 16px font-size: 16px
vertical-align: top
#encyclopedia #encyclopedia
@@ -445,10 +513,17 @@ section
height: 100% height: 100%
#docsToc #docsToc
position: absolute position: fixed
left: -400px background-color: white
width: 350px top: 0
padding: 0 20px 0 0 left: 0
width: 0
height: 100vh
overflow: hidden
padding: 50px 0
z-index: 999999
transition: 0.3s
.yah .yah
& > .title & > .title
@@ -458,6 +533,15 @@ section
margin-left: -21px margin-left: -21px
color: $blue color: $blue
.open-toc
body
overflow: hidden
#docsToc
padding: 50px 20px
width: 400px
max-width: 100vw
overflow-y: auto
.pi-accordion .pi-accordion
margin-left: -20px margin-left: -20px
@@ -553,29 +637,6 @@ section
line-height: 60px line-height: 60px
background-color: #444 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 ul
margin-top: 25px margin-top: 25px
@@ -613,6 +674,29 @@ section
color: lighten(#222222, 20%) 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 #docsContent
position: relative 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-specific
#home #home
section &.flip-nav, &.open-nav
min-width: 320px .logo
background-image: url(../images/nav_logo2.svg)
#hero
margin-bottom: 0
padding-bottom: 1px
section, header, footer
main main
min-width: 320px padding: 0 10px
margin-bottom: 30px
#vendorStrip
#home #hero display: none
margin-bottom: 0
padding-bottom: 1px
main
padding: 0 10px
margin-bottom: 30px
#vendorStrip
display: none
// OCEAN NODES // OCEAN NODES
@@ -1213,7 +1094,7 @@ $feature-box-div-margin-bottom: 40px
#features #features
padding-top: 140px padding-top: 140px
background-color: $light-grey background-color: $light-grey
background-image: url(../../images/wheel.png) background-image: url(../images/wheel.png)
background-position: center 60px background-position: center 60px
background-repeat: no-repeat background-repeat: no-repeat
background-size: auto background-size: auto
@@ -1278,16 +1159,16 @@ $feature-box-div-margin-bottom: 40px
background-repeat: no-repeat background-repeat: no-repeat
div:nth-child(1) div:nth-child(1)
background-image: url(../../images/twitter_icon.png) background-image: url(../images/twitter_icon.png)
div:nth-child(2) div:nth-child(2)
background-image: url(../../images/github_icon.png) background-image: url(../images/github_icon.png)
div:nth-child(3) div:nth-child(3)
background-image: url(../../images/slack_icon.png) background-image: url(../images/slack_icon.png)
div:nth-child(4) div:nth-child(4)
background-image: url(../../images/stackoverflow_icon.png) background-image: url(../images/stackoverflow_icon.png)
div + div div + div
margin-top: 20px margin-top: 20px
_sass/_code-styles.sass
+199
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
_sass/_desktop.sass
+63 -37
View File
@@ -10,20 +10,6 @@ $video-section-height: 550px
#searchBox #searchBox
float: right 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 #home
#hero #hero
@@ -32,6 +18,9 @@ $video-section-height: 550px
#docs #docs
#hero #hero
h1, h5
text-align: left
#vendorStrip #vendorStrip
ul ul
float: left float: left
@@ -40,11 +29,39 @@ $video-section-height: 550px
float: right float: right
width: 30% 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 #docsToc
position: relative position: relative
float: left float: left
padding: 0 20px
left: 0 left: 0
width: 350px
z-index: auto
.push-menu-close-button
display: none
#docsContent #docsContent
width: calc(100% - 400px) width: calc(100% - 400px)
@@ -72,7 +89,7 @@ $video-section-height: 550px
#video #video
height: $video-section-height height: $video-section-height
position: relative position: relative
background-image: url(../../images/kub_video_thm.jpg) background-image: url(../images/kub_video_thm.jpg)
background-position: center center background-position: center center
background-size: cover background-size: cover
@@ -105,38 +122,47 @@ $video-section-height: 550px
padding: 20px 0 padding: 20px 0
nav nav
overflow: hidden
margin-bottom: 20px
a a
//width: 100% width: 25%
text-align: center float: left
display: inline-block
margin: 10px 0
font-size: 24px font-size: 24px
font-weight: 300 font-weight: 300
color: white
text-decoration: none
.social .social
position: relative padding: 0 30px
margin: 20px 0 max-width: 1200px
a div
float: left float: left
a + a div:last-child
margin-left: 10px
label
float: right float: right
width: auto
display: inline-block
height: 50px
line-height: 50px
font-weight: 100
white-space: nowrap
input //.social
margin-left: 8px // position: relative
max-width: none // 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 #search, #wishField
_sass/_size.sass
+1 -5
View File
@@ -22,7 +22,7 @@ p
font-size: $p-font-size font-size: $p-font-size
line-height: $p-line-height line-height: $p-line-height
section, header, footer, #vendorStrip section, header, #vendorStrip
padding-left: $full-width-paddingX padding-left: $full-width-paddingX
padding-right: $full-width-paddingX padding-right: $full-width-paddingX
@@ -33,10 +33,6 @@ section, header, footer, #vendorStrip
header header
height: $header-height height: $header-height
.logo
width: $logo-width
height: $header-height
.nav-buttons .nav-buttons
height: $header-height height: $header-height
line-height: $header-height line-height: $header-height
_sass/_tablet.sass
+20 -6
View File
@@ -68,10 +68,6 @@ $feature-box-div-width: 45%
@media screen and (min-width: 750px) @media screen and (min-width: 750px)
@import "size" @import "size"
#docs #hero
h1, h5
text-align: left
#home #home
#viewDocs, #tryKubernetes #viewDocs, #tryKubernetes
display: inline-block display: inline-block
@@ -194,8 +190,26 @@ $feature-box-div-width: 45%
// FOOTER // FOOTER
footer footer
nav nav
white-space: nowrap text-align: center
a a
width: 25%
font-size: 22px 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
css/styles.sass
+1
View File
@@ -3,6 +3,7 @@
@import "../_sass/reset" @import "../_sass/reset"
@import "../_sass/skin" @import "../_sass/skin"
@import "../_sass/code-styles"
// media queries // media queries
@import "../_sass/base" @import "../_sass/base"
js/script.js
+28 -1
View File
File diff suppressed because one or more lines are too long