Aidan Ranney
0625ced466
* Add Docsy, required packages and config * Apply Docsy integration work to k8s website This encompasses significant changes to the style system, layout files, as well as changes to some of the static assets. To examine this work and the iterations that were performed, the original repository can be found at https://github.com/gearbox-built/kubernetes-hugo.git * Address issues found in review The styling and positioning of the header, footer, some shortcodes and main container elements are improved. A new partial is added for favicons. The sidebars, as well as inner table of contents, have been altered for better positioning and rendering of content. Localization has also been addressed. * Enable announcements The recent Black Lives Matter announcement surfaced issues which have been addressed.
305 lines
5.1 KiB
Sass
305 lines
5.1 KiB
Sass
$main-max-width: 1200px
|
|
$vendor-strip-height: 44px
|
|
$video-section-height: 550px
|
|
|
|
@media screen and (min-width: 1100px)
|
|
#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
|
|
|
|
li
|
|
a.YAH
|
|
&:after
|
|
content: ""
|
|
display: block
|
|
position: absolute
|
|
left: 0
|
|
bottom: 0
|
|
width: 100%
|
|
height: 4px
|
|
background-color: $blue
|
|
|
|
|
|
#searchBox
|
|
float: right
|
|
|
|
|
|
#home
|
|
#hero
|
|
#vendorStrip
|
|
display: block
|
|
|
|
#docs
|
|
#hero
|
|
h1, h5
|
|
text-align: left
|
|
|
|
#vendorStrip
|
|
ul
|
|
float: left
|
|
|
|
#searchBox
|
|
float: right
|
|
width: 250px
|
|
|
|
#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)
|
|
|
|
|
|
#encyclopedia
|
|
padding: 50px 50px 100px 100px
|
|
clear: both
|
|
|
|
#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)
|
|
|
|
#editPageButton
|
|
right: -25px
|
|
|
|
section, header, footer
|
|
.main-section
|
|
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
|
|
|
|
#vendorStrip
|
|
padding-right: 10px
|
|
|
|
#home
|
|
section, header
|
|
.main-section
|
|
max-width: 1000px
|
|
|
|
#oceanNodes
|
|
.main-section
|
|
position: relative
|
|
max-width: 830px
|
|
|
|
&:nth-child(1)
|
|
max-width: 1000px
|
|
padding-right: 475px
|
|
|
|
h3, p
|
|
text-align: left
|
|
|
|
.image-wrapper
|
|
position: absolute
|
|
max-width: 48%
|
|
transform: translateY(-50%)
|
|
|
|
img
|
|
width: 425px
|
|
|
|
//.content
|
|
// width: 50%
|
|
|
|
|
|
#video
|
|
height: $video-section-height
|
|
position: relative
|
|
background-position: center center
|
|
background-size: cover
|
|
|
|
|
|
|
|
#talkToUs
|
|
h4
|
|
br
|
|
display: block
|
|
|
|
#bigSocial
|
|
div
|
|
width: calc(25% - 18px)
|
|
|
|
div + div
|
|
margin-left: 20px
|
|
//
|
|
//div:nth-child(3), div:nth-child(4)
|
|
// margin-top: 0
|
|
|
|
|
|
//#home #bigSocial
|
|
// div
|
|
// width: calc(33% - 15px)
|
|
//
|
|
// div:nth-child(3)
|
|
// margin-top: inherit
|
|
|
|
// FOOTER
|
|
footer
|
|
width: 100%
|
|
background-image: url(../images/texture.png)
|
|
background-color: $dark-grey
|
|
|
|
.main-section
|
|
padding: 20px 0
|
|
|
|
nav
|
|
overflow: hidden
|
|
margin-bottom: 20px
|
|
display: flex
|
|
justify-content: space-between
|
|
|
|
a
|
|
width: auto
|
|
float: left
|
|
font-size: 24px
|
|
font-weight: 300
|
|
white-space: nowrap
|
|
|
|
.social
|
|
padding: 0
|
|
max-width: 1200px
|
|
|
|
div
|
|
float: left
|
|
|
|
div:last-child
|
|
float: right
|
|
|
|
#search, #wishField
|
|
background-color: transparent
|
|
padding: 10px
|
|
font-size: 16px
|
|
font-weight: 100
|
|
color: white
|
|
border: 1px solid white
|
|
transition: 0.3s
|
|
|
|
&:focus
|
|
background-color: $light-grey
|
|
color: $dark-grey
|
|
|
|
.social a
|
|
display: inline-block
|
|
background-image: url(../images/social_sprite.svg)
|
|
background-repeat: no-repeat
|
|
background-size: 350px
|
|
width: 50px
|
|
height: 50px
|
|
border-radius: 5px
|
|
margin-right: 10px
|
|
|
|
&:hover
|
|
background-color: #fff
|
|
|
|
span
|
|
position: absolute
|
|
display: block
|
|
height: 0
|
|
overflow: hidden
|
|
|
|
a.twitter
|
|
background-position: 0 0
|
|
|
|
&:hover
|
|
background-position: 0 100%
|
|
|
|
a.stack-overflow
|
|
background-position: -50px 0
|
|
|
|
&:hover
|
|
background-position: -50px 100%
|
|
|
|
a.slack
|
|
background-position: -100px 0
|
|
|
|
&:hover
|
|
background-position: -100px 100%
|
|
|
|
a.github
|
|
background-position: -150px 0
|
|
|
|
&:hover
|
|
background-position: -150px 100%
|
|
|
|
a.mailing-list
|
|
background-position: -200px 0
|
|
|
|
&:hover
|
|
background-position: -200px 100%
|
|
|
|
a.calendar
|
|
background-position: -250px 0
|
|
|
|
&:hover
|
|
background-position: -250px 100%
|
|
|
|
a.youtube
|
|
background-position: -300px 0
|
|
|
|
&:hover
|
|
background-position: -300px 100%
|
|
|
|
#community, .gridPage
|
|
#hero
|
|
text-align: left
|
|
|
|
h1
|
|
padding: 20px 100px
|
|
|
|
#tryKubernetes
|
|
width: auto
|
|
background-color: $blue
|
|
padding: 0 20px
|
|
|
|
#bigSocial
|
|
div
|
|
width: calc(25% - 18px)
|
|
|
|
|
|
#home #caseStudiesWrapper
|
|
div
|
|
width: 24%
|
|
min-height: 260px
|
|
|
|
@media screen and (min-width: 1300px)
|
|
#vendorStrip
|
|
padding-right: 100px
|
|
|
|
@media screen and (min-width: 456px)
|
|
#vendorStrip
|
|
li + li
|
|
margin-left: 20px
|