Temporarily remove Hugo Pipes Sass conversion (#10373)
* Add new Sass generation system * Remove resources folder * Add develop Sass command and sourcemaps * Add Hugo version shortcode for use in docs * Add OWNERS file to ./sass folder
This commit is contained in:
Luc Perkins
committed by
k8s-ci-robot
k8s-ci-robot
parent
32014f94b3
commit
4c2b56625c
@@ -24,6 +24,12 @@ production-build: build check-headers-file ## Build the production site and ensu
|
||||
non-production-build: ## Build the non-production site, which adds noindex headers to prevent indexing
|
||||
hugo --enableGitInfo
|
||||
|
||||
sass-build:
|
||||
scripts/sass.sh build
|
||||
|
||||
sass-develop:
|
||||
scripts/sass.sh develop
|
||||
|
||||
serve: ## Boot the development server.
|
||||
hugo server --ignoreCache --disableFastRender
|
||||
|
||||
|
||||
@@ -490,7 +490,7 @@ Slack channel or the
|
||||
If you aren't ready to create a pull request but you want to see what your
|
||||
changes look like, you can use the `hugo` command to stage the changes locally.
|
||||
|
||||
1. Install Hugo version `0.40.3` or later.
|
||||
1. Install Hugo version {{< hugoVersion >}} or later.
|
||||
|
||||
2. In a terminal, go to the root directory of your clone of the Kubernetes
|
||||
docs, and enter this command:
|
||||
|
||||
@@ -1,19 +1,7 @@
|
||||
{{- $mainSass := "sass/styles.sass" }}
|
||||
{{- $caseStudySass := "sass/case_study_styles.sass" }}
|
||||
<link rel="stylesheet" href="/css/base_fonts.css">
|
||||
{{- if .Site.IsServer }}
|
||||
{{- $mainCssOpts := (dict "targetPath" "css/styles.css") }}
|
||||
{{- $mainCss := resources.Get $mainSass | toCSS $mainCssOpts }}
|
||||
<link rel="stylesheet" media="screen" href="{{ $mainCss.RelPermalink }}"><!-- default styles.css on -->
|
||||
{{- else }}
|
||||
{{- $mainCssOpts := (dict "targetPath" "css/styles.css") }}
|
||||
{{- $mainCss := resources.Get $mainSass | toCSS $mainCssOpts | minify | fingerprint }}
|
||||
<link rel="stylesheet" media="screen" href="{{ $mainCss.RelPermalink }}" integrity="{{ $mainCss.Data.Integrity }}"><!-- default styles.css on -->
|
||||
{{- end }}
|
||||
<link rel="stylesheet" href="/css/styles.css">
|
||||
{{- if .Params.case_study_styles }}
|
||||
{{- $caseStudyCssOpts := (dict "targetPath" "css/styles.css") }}
|
||||
{{- $caseStudyCss := resources.Get $caseStudySass | toCSS $caseStudyCssOpts | minify | fingerprint }}
|
||||
<link rel="stylesheet" media="screen" href="{{ $caseStudyCss.Permalink }}" integrity="{{ $caseStudyCss.Data.Integrity }}"><!-- custom case_study_styles on -->
|
||||
<link rel="stylsheet" href="/css/case-study-styles.css">
|
||||
{{- end }}
|
||||
<link rel="stylesheet" href="{{ "css/jquery-ui.min.css" | relURL }}">
|
||||
<link rel="stylesheet" href="{{ "css/sweetalert.min.css" | relURL }}">
|
||||
@@ -26,7 +14,8 @@
|
||||
<link rel="stylesheet" href="{{ "css/gridpage.css" | relURL }}">
|
||||
{{- end }}
|
||||
{{- with .Params.css }}
|
||||
{{- range (split . ",") }}
|
||||
{{- $extraCss := split . "," }}
|
||||
{{- range $extraCss }}
|
||||
{{- $url := trim . " " | relURL }}
|
||||
<link rel="stylesheet" href="{{ $url }}"><!-- custom css added -->
|
||||
{{- end }}
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
{{ getenv "HUGO_VERSION" }}
|
||||
-1
File diff suppressed because one or more lines are too long
-1
@@ -1 +0,0 @@
|
||||
{"Target":"css/styles.min.544877f7aaf1761d19cb1da7afc725c3bbdd062dc307a515caaae3cbfcadafd5.css","MediaType":"text/css","Data":{"Integrity":"sha256-VEh396rxdh0Zyx2nr8clw7vdBi3DB6UVyqrjy/ytr9U="}}
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
{"Target":"css/styles.min.a848f9c131ff992de25c86ec3a2fc944e86d48666bcd5f060f881576a04b3754.css","MediaType":"text/css","Data":{"Integrity":"sha256-qEj5wTH/mS3iXIbsOi/JROhtSGZrzV8GD4gVdqBLN1Q="}}
|
||||
@@ -0,0 +1,8 @@
|
||||
# Allow CSS/SASS updates from blog and case studies owners
|
||||
options:
|
||||
no_parent_owners: false
|
||||
reviewers:
|
||||
- alexcontini
|
||||
approvers:
|
||||
- alexcontini
|
||||
|
||||
+1794
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,99 @@
|
||||
// SASS for Case Studies pages go here:
|
||||
|
||||
hr
|
||||
background-color: #999999
|
||||
|
||||
h2
|
||||
margin-bottom: 15px !important
|
||||
|
||||
.subhead
|
||||
padding-bottom: 2% !important
|
||||
padding-top: 0% !important
|
||||
|
||||
.details
|
||||
margin-left: 1.9%
|
||||
padding-right: 5%
|
||||
font-size: 16px !important
|
||||
padding-bottom: 2% !important
|
||||
|
||||
.section1
|
||||
margin-bottom: 3%
|
||||
.cols
|
||||
width: 80% !important
|
||||
margin-left: 6.8%
|
||||
padding-top: 1.5%
|
||||
.col1
|
||||
width: 52% !important
|
||||
font-weight: 300 !important
|
||||
.col2
|
||||
width: 46% !important
|
||||
|
||||
.banner2text
|
||||
width: 63%
|
||||
padding-top: 10%
|
||||
padding-left: 0% !important
|
||||
float: initial !important
|
||||
text-align: center
|
||||
margin: 0 auto
|
||||
position: relative
|
||||
|
||||
.banner3text, .banner4text, .banner5text
|
||||
width: 63%
|
||||
padding-left: 0% !important
|
||||
float: initial !important
|
||||
text-align: center
|
||||
margin: 0 auto
|
||||
position: relative
|
||||
|
||||
.fullcol
|
||||
float: initial !important
|
||||
|
||||
body footer
|
||||
background-color: #585858 !important
|
||||
|
||||
.section1
|
||||
float: left !important
|
||||
|
||||
.banner1
|
||||
padding-left: 11.9% !important
|
||||
|
||||
.banner2
|
||||
float: initial !important
|
||||
padding-bottom: 2% !important
|
||||
|
||||
footer
|
||||
padding: 0% 7%
|
||||
|
||||
.banner4, .banner3, .banner5
|
||||
float: initial !important
|
||||
|
||||
@media screen and (max-width: 910px)
|
||||
.banner2text
|
||||
width: 47%
|
||||
padding-top: 45%
|
||||
.details
|
||||
margin-left: 0%
|
||||
margin-bottom: 3%
|
||||
.subhead
|
||||
padding-bottom: 0% !important
|
||||
padding-top: 0% !important
|
||||
.banner3
|
||||
width: 100% !important
|
||||
|
||||
@media screen and (max-width: 780px)
|
||||
.section1 .cols
|
||||
width: 100% !important
|
||||
margin-left: 0%
|
||||
padding-top: 5%
|
||||
.col1, .col2
|
||||
width: 100% !important
|
||||
margin-left: 0% !important
|
||||
.fullcol
|
||||
width: 90% !important
|
||||
margin-left: 5% !important
|
||||
.banner1
|
||||
padding-left: 10% !important
|
||||
margin-bottom: 6% !important
|
||||
.banner2text
|
||||
padding-top: 60% !important
|
||||
padding-bottom: 2% !important
|
||||
@@ -0,0 +1,322 @@
|
||||
$main-max-width: 1200px
|
||||
$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
|
||||
|
||||
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
|
||||
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, footer
|
||||
main
|
||||
max-width: 1000px
|
||||
|
||||
#oceanNodes
|
||||
main
|
||||
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
|
||||
max-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
|
||||
padding: 20px 0
|
||||
|
||||
nav
|
||||
overflow: hidden
|
||||
margin-bottom: 20px
|
||||
|
||||
a
|
||||
width: 16.65%
|
||||
float: left
|
||||
font-size: 24px
|
||||
font-weight: 300
|
||||
white-space: nowrap
|
||||
|
||||
.social
|
||||
padding: 0 30px
|
||||
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.png)
|
||||
background-repeat: no-repeat
|
||||
background-size: auto
|
||||
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%
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#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
|
||||
Executable
+61
@@ -0,0 +1,61 @@
|
||||
html, body
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
|
||||
input, button
|
||||
outline: none
|
||||
|
||||
button
|
||||
cursor: pointer
|
||||
|
||||
ul, li
|
||||
list-style: none
|
||||
|
||||
ul
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
|
||||
// CONVENIENCE
|
||||
.clear
|
||||
display: block
|
||||
clear: both
|
||||
|
||||
.light-text
|
||||
color: white
|
||||
|
||||
.right
|
||||
float: right
|
||||
|
||||
.left
|
||||
float: left
|
||||
|
||||
.center
|
||||
text-align: center
|
||||
|
||||
|
||||
//mixins
|
||||
@mixin fullScreen
|
||||
position: fixed
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100vw
|
||||
height: 100vh
|
||||
|
||||
|
||||
@mixin pureCenter($left: 50%, $top: 50%)
|
||||
position: absolute
|
||||
top: $top
|
||||
left: $left
|
||||
transform: translate(-50%, -50%)
|
||||
|
||||
|
||||
@mixin maintain-aspect-ratio ($width-factor: 16, $height-factor: 9, $target-width: 80vw, $target-height: 80vh)
|
||||
width: $target-width
|
||||
height: $target-width * ($height-factor / $width-factor)
|
||||
max-width: $target-height * ($width-factor / $height-factor)
|
||||
max-height: $target-height
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
h1
|
||||
font-size: $h1-font-size
|
||||
line-height: $h1-line-height
|
||||
|
||||
h2
|
||||
font-size: $h2-font-size
|
||||
line-height: $h2-line-height
|
||||
|
||||
h3
|
||||
font-size: $h3-font-size
|
||||
line-height: $h3-line-height
|
||||
|
||||
h4
|
||||
font-size: $h4-font-size
|
||||
line-height: $h4-line-height
|
||||
|
||||
h5
|
||||
font-size: $h5-font-size
|
||||
line-height: $h5-line-height
|
||||
|
||||
p
|
||||
font-size: $p-font-size
|
||||
line-height: $p-line-height
|
||||
|
||||
section, header, #vendorStrip
|
||||
padding-left: $full-width-paddingX
|
||||
padding-right: $full-width-paddingX
|
||||
|
||||
main
|
||||
width: $main-width
|
||||
max-width: $main-max-width
|
||||
|
||||
header
|
||||
height: $header-height
|
||||
|
||||
.nav-buttons
|
||||
height: $header-height
|
||||
line-height: $header-height
|
||||
|
||||
.button + *
|
||||
margin-left: $nav-buttons-margin-left
|
||||
|
||||
#hamburger
|
||||
width: $hamburger-size
|
||||
height: $hamburger-size
|
||||
|
||||
#mainNav
|
||||
padding: $main-nav-padding
|
||||
|
||||
h5
|
||||
margin-bottom: $main-nav-h5-margin-bottom
|
||||
|
||||
h3
|
||||
margin-bottom: $main-nav-h3-margin-bottom
|
||||
|
||||
.nav-box
|
||||
width: $nav-box-width
|
||||
|
||||
.nav-box + .nav-box
|
||||
margin-left: $nav-box-sibling-margin-left
|
||||
|
||||
main + main
|
||||
margin-top: $main-nav-main-sibling-margin-top
|
||||
|
||||
.left .button
|
||||
height: $main-nav-left-button-size
|
||||
line-height: $main-nav-left-button-size
|
||||
font-size: $main-nav-left-button-font-size
|
||||
|
||||
.open-nav, .y-enough
|
||||
#tryKubernetes
|
||||
margin-left: $nav-buttons-margin-left
|
||||
|
||||
#hero
|
||||
padding-top: $hero-padding-top
|
||||
|
||||
#docs
|
||||
#hero
|
||||
h1, h5
|
||||
padding-left: $full-width-paddingX
|
||||
padding-right: $full-width-paddingX
|
||||
|
||||
#vendorStrip
|
||||
height: $vendor-strip-height
|
||||
line-height: $vendor-strip-height
|
||||
font-size: $vendor-strip-font-size
|
||||
Executable
+25
@@ -0,0 +1,25 @@
|
||||
$blue: #3371e3
|
||||
$light-grey: #f7f7f7
|
||||
$dark-grey: #303030
|
||||
$medium-grey: #4c4c4c
|
||||
$white: #ffffff
|
||||
|
||||
$base-font: 'Roboto', sans-serif
|
||||
$mono-font: 'Roboto Mono', monospace
|
||||
|
||||
|
||||
*, .button
|
||||
box-sizing: border-box
|
||||
font-family: $base-font
|
||||
background: none
|
||||
margin: 0
|
||||
border: 0
|
||||
|
||||
body
|
||||
font-family: $base-font
|
||||
|
||||
h1, h2, h5, p
|
||||
font-weight: 300
|
||||
|
||||
h3, h4
|
||||
font-weight: 400
|
||||
@@ -0,0 +1,249 @@
|
||||
// TEXT
|
||||
//$h1-font-size: 60px
|
||||
//$h1-line-height: 80px
|
||||
//
|
||||
//$h2-font-size: 42px
|
||||
//$h2-line-height: 60px
|
||||
//
|
||||
//$h3-font-size: 26px
|
||||
//$h3-line-height: 32px
|
||||
//
|
||||
//$h4-font-size: 26px
|
||||
//$h4-line-height: 40px
|
||||
//
|
||||
//$h5-font-size: 18px
|
||||
//$h5-line-height: 36px
|
||||
//
|
||||
//$p-font-size: 20px
|
||||
//$p-line-height: 28px
|
||||
|
||||
|
||||
// header
|
||||
$full-width-paddingX: 20px
|
||||
|
||||
$main-width: 100%
|
||||
$main-max-width: 100%
|
||||
|
||||
$header-height: 80px
|
||||
|
||||
$logo-width: 180px
|
||||
|
||||
$nav-buttons-margin-left: 30px
|
||||
|
||||
$hamburger-size: 50px
|
||||
|
||||
|
||||
// main nav
|
||||
$main-nav-padding: 140px 0 30px
|
||||
$main-nav-h5-margin-bottom: 1em
|
||||
$main-nav-h3-margin-bottom: 0.6em
|
||||
$nav-box-width: 20%
|
||||
$nav-box-sibling-margin-left: calc(20% / 3)
|
||||
$main-nav-main-sibling-margin-top: 60px
|
||||
$main-nav-left-button-size: 50px
|
||||
$main-nav-left-button-font-size: 18px
|
||||
|
||||
|
||||
// hero
|
||||
$hero-padding-top: 80px
|
||||
$headline-wrapper-margin-bottom: 40px
|
||||
$quickstart-button-padding: 0 50px
|
||||
$vendor-strip-font-size: 16px
|
||||
|
||||
//video
|
||||
$video-section-height: 400px
|
||||
|
||||
//features
|
||||
$features-h3-margin-bottom: 40px
|
||||
$feature-box-margin-bottom: 60px
|
||||
$feature-box-div-margin-bottom: 0
|
||||
$feature-box-div-width: 45%
|
||||
|
||||
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
@media screen and (min-width: 750px)
|
||||
@import "size"
|
||||
|
||||
p
|
||||
font-size: 16px
|
||||
line-height: 24px
|
||||
letter-spacing: 0.1px
|
||||
|
||||
h1
|
||||
font-size: 36px
|
||||
line-height: 44px
|
||||
|
||||
h3
|
||||
font-size: 28px
|
||||
line-height: 36px
|
||||
|
||||
h4
|
||||
font-size: 24px
|
||||
line-height: 40px
|
||||
|
||||
|
||||
|
||||
#home
|
||||
#viewDocs, #tryKubernetes
|
||||
display: inline-block
|
||||
|
||||
#vendorStrip
|
||||
display: block
|
||||
text-align: center
|
||||
|
||||
img
|
||||
max-height: 24px
|
||||
vertical-align: middle
|
||||
margin: 0 30px
|
||||
|
||||
#docs
|
||||
#vendorStrip
|
||||
li
|
||||
a
|
||||
font-size: 1em
|
||||
font-weight: normal
|
||||
|
||||
li + li
|
||||
margin-left: 60px
|
||||
|
||||
|
||||
#oceanNodes
|
||||
h3
|
||||
text-align: left
|
||||
margin-bottom: 18px
|
||||
|
||||
main
|
||||
position: relative
|
||||
clear: both
|
||||
display: table
|
||||
|
||||
.content
|
||||
display: table-cell
|
||||
position: relative
|
||||
vertical-align: middle
|
||||
|
||||
.image-wrapper
|
||||
position: absolute
|
||||
top: 50%
|
||||
max-width: 25%
|
||||
max-height: 100%
|
||||
transform: translateY(-50%)
|
||||
|
||||
&:nth-child(odd)
|
||||
padding-right: 210px
|
||||
|
||||
.image-wrapper
|
||||
right: 0
|
||||
|
||||
&:nth-child(even)
|
||||
padding-left: 210px
|
||||
|
||||
.image-wrapper
|
||||
left: 0
|
||||
|
||||
&:nth-child(1)
|
||||
padding-right: 0
|
||||
|
||||
h3, p
|
||||
text-align: center
|
||||
|
||||
.image-wrapper
|
||||
position: relative
|
||||
display: block
|
||||
float: none
|
||||
max-width: 100%
|
||||
transform: none
|
||||
|
||||
.content
|
||||
display: block
|
||||
|
||||
img
|
||||
width: 100%
|
||||
|
||||
|
||||
#video
|
||||
height: $video-section-height
|
||||
display: block
|
||||
|
||||
& > .light-text
|
||||
display: block
|
||||
|
||||
#mobileShowVideoButton
|
||||
display: none
|
||||
|
||||
#features
|
||||
padding-bottom: 60px
|
||||
|
||||
.feature-box
|
||||
margin-bottom: 30px
|
||||
|
||||
&:last-child
|
||||
margin-bottom: 0
|
||||
|
||||
h3
|
||||
margin-bottom: $features-h3-margin-bottom
|
||||
|
||||
.feature-box
|
||||
& > div
|
||||
width: $feature-box-div-width
|
||||
margin-bottom: $feature-box-div-margin-bottom
|
||||
|
||||
#talkToUs
|
||||
#bigSocial
|
||||
div
|
||||
width: calc(50% - 15px)
|
||||
|
||||
div + div
|
||||
margin-top: 0
|
||||
|
||||
div:nth-child(2)
|
||||
margin-left: 20px
|
||||
|
||||
div:nth-child(3)
|
||||
margin-top: 20px
|
||||
|
||||
div:nth-child(4)
|
||||
margin-top: 20px
|
||||
margin-left: 20px
|
||||
|
||||
a
|
||||
display: inline-block
|
||||
color: $blue
|
||||
font-weight: 400
|
||||
text-decoration: none
|
||||
|
||||
// FOOTER
|
||||
footer
|
||||
nav
|
||||
text-align: center
|
||||
|
||||
a
|
||||
width: 30%
|
||||
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
|
||||
|
||||
|
||||
|
||||
#home #caseStudiesWrapper
|
||||
div
|
||||
width: 48%
|
||||
@@ -0,0 +1,9 @@
|
||||
|
||||
@import "reset"
|
||||
@import "skin"
|
||||
|
||||
// media queries
|
||||
@import "base"
|
||||
@import "case-studies"
|
||||
@import "tablet"
|
||||
@import "desktop"
|
||||
Executable
+7
@@ -0,0 +1,7 @@
|
||||
@import "reset"
|
||||
@import "skin"
|
||||
|
||||
// media queries
|
||||
@import "base"
|
||||
@import "tablet"
|
||||
@import "desktop"
|
||||
Executable
+38
@@ -0,0 +1,38 @@
|
||||
#!/bin/bash
|
||||
|
||||
if [[ $# -eq 0 ]] ; then
|
||||
echo "You must specify a command from the following: build, develop"
|
||||
exit 0
|
||||
fi
|
||||
|
||||
__build() {
|
||||
echo "Building Kubernetes website CSS from Sass sources..."
|
||||
|
||||
for filename in case-study-styles styles; do
|
||||
echo $filename
|
||||
sass \
|
||||
--style=compressed \
|
||||
sass/$filename.sass static/css/$filename.css
|
||||
done
|
||||
|
||||
echo "Done building CSS!"
|
||||
}
|
||||
|
||||
__develop() {
|
||||
echo "Watching Sass sources for changes..."
|
||||
|
||||
sass \
|
||||
--watch \
|
||||
sass/styles.sass:static/css/styles.css \
|
||||
sass/case-study-styles.sass:static/css/case-study-styles.css
|
||||
}
|
||||
|
||||
case $1 in
|
||||
build)
|
||||
__build
|
||||
;;
|
||||
|
||||
develop)
|
||||
__develop
|
||||
;;
|
||||
esac
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,943 +0,0 @@
|
||||
html, body { margin: 0; padding: 0; }
|
||||
|
||||
input, button { outline: none; }
|
||||
|
||||
button { cursor: pointer; }
|
||||
|
||||
ul, li { list-style: none; }
|
||||
|
||||
ul { margin: 0; padding: 0; }
|
||||
|
||||
a { text-decoration: none; }
|
||||
|
||||
.clear { display: block; clear: both; }
|
||||
|
||||
.light-text { color: white; }
|
||||
|
||||
.right { float: right; }
|
||||
|
||||
.left { float: left; }
|
||||
|
||||
.center { text-align: center; }
|
||||
|
||||
*, .button { box-sizing: border-box; font-family: "Roboto", sans-serif; background: none; margin: 0; border: 0; }
|
||||
|
||||
body { font-family: "Roboto", sans-serif; }
|
||||
|
||||
h1, h2, h5, p { font-weight: 300; }
|
||||
|
||||
h3, h4 { font-weight: 400; }
|
||||
|
||||
html, body { margin: 0; padding: 0; }
|
||||
|
||||
input, button { outline: none; }
|
||||
|
||||
button { cursor: pointer; }
|
||||
|
||||
ul, li { list-style: none; }
|
||||
|
||||
ul { margin: 0; padding: 0; }
|
||||
|
||||
a { text-decoration: none; }
|
||||
|
||||
.clear { display: block; clear: both; }
|
||||
|
||||
.light-text { color: white; }
|
||||
|
||||
.right { float: right; }
|
||||
|
||||
.left { float: left; }
|
||||
|
||||
.center { text-align: center; }
|
||||
|
||||
h1 { font-size: 32px; line-height: 40px; }
|
||||
|
||||
h2 { font-size: 28px; line-height: 60px; }
|
||||
|
||||
h3 { font-size: 24px; line-height: 32px; }
|
||||
|
||||
h4 { font-size: 20px; line-height: 40px; }
|
||||
|
||||
h5 { font-size: 16px; line-height: 36px; }
|
||||
|
||||
p { font-size: 14px; line-height: 22px; }
|
||||
|
||||
section, header, #vendorStrip { padding-left: 20px; padding-right: 20px; }
|
||||
|
||||
section main, header main, #vendorStrip main { width: 100%; max-width: 100%; }
|
||||
|
||||
header { height: 80px; }
|
||||
|
||||
.nav-buttons { height: 80px; line-height: 80px; }
|
||||
|
||||
.nav-buttons .button + * { margin-left: 30px; }
|
||||
|
||||
#hamburger { width: 50px; height: 50px; }
|
||||
|
||||
#mainNav { padding: 140px 0 30px; }
|
||||
|
||||
#mainNav h5 { margin-bottom: 1em; }
|
||||
|
||||
#mainNav h3 { margin-bottom: 0.6em; }
|
||||
|
||||
#mainNav .nav-box { width: 20%; }
|
||||
|
||||
#mainNav .nav-box + .nav-box { margin-left: calc(20% / 3); }
|
||||
|
||||
#mainNav main + main { margin-top: 60px; }
|
||||
|
||||
#mainNav .left .button { height: 50px; line-height: 50px; font-size: 18px; }
|
||||
|
||||
.open-nav #tryKubernetes, .y-enough #tryKubernetes { margin-left: 30px; }
|
||||
|
||||
#hero { padding-top: 80px; }
|
||||
|
||||
#docs #hero h1, #docs #hero h5 { padding-left: 20px; padding-right: 20px; }
|
||||
|
||||
#vendorStrip { height: 88px; line-height: 88px; font-size: 16px; }
|
||||
|
||||
body { background-color: white; }
|
||||
|
||||
section { position: relative; background-color: white; }
|
||||
|
||||
section main, header main, footer main { position: relative; margin: auto; }
|
||||
|
||||
p { font-size: 14px; font-weight: 400; }
|
||||
|
||||
.button { display: inline-block; border-radius: 6px; padding: 0 20px; line-height: 40px; color: white; background-color: #3371e3; text-decoration: none; }
|
||||
|
||||
#cellophane { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; }
|
||||
|
||||
header { position: fixed; top: 0; left: 0; width: 100%; z-index: 8888; background-color: transparent; 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; }
|
||||
|
||||
#docs.open-nav .flyout-button { display: none; }
|
||||
|
||||
#docs .logo { position: absolute; top: 40px; left: 50%; transform: translate(-50%, -50%); display: block; width: 45px; height: 44px; background-image: url(/images/favicon.png); }
|
||||
|
||||
#docs.flip-nav .flyout-button { background-image: url(/images/toc_icon_grey.png); }
|
||||
|
||||
.nav-buttons { float: right; }
|
||||
|
||||
#viewDocs, #tryKubernetes { display: none; }
|
||||
|
||||
#viewDocs { border: 2px solid white; background-color: transparent; transition: 0.3s; }
|
||||
|
||||
#viewDocs:hover { background-color: white; color: #303030; }
|
||||
|
||||
#tryKubernetes { width: 0; padding: 0 0; border: 1px solid transparent; background-color: transparent; text-align: center; white-space: nowrap; vertical-align: middle; overflow: hidden; transition: 0.3s; }
|
||||
|
||||
#hamburger { display: inline-block; position: relative; vertical-align: middle; padding: 0; border: 0; background: none; }
|
||||
|
||||
#hamburger div, #hamburger:before, #hamburger:after { position: absolute; left: 15%; width: 70%; height: 2px; background-color: #3371e3; transition: 0.3s; content: ""; }
|
||||
|
||||
#hamburger div { top: calc(50% - 1px); }
|
||||
|
||||
#hamburger:before { top: 24%; }
|
||||
|
||||
#hamburger:after { bottom: 24%; }
|
||||
|
||||
#hamburger:hover div, #hamburger:hover:before, #hamburger:hover:after { background-color: white; }
|
||||
|
||||
#mainNav h5 { color: #3371e3; font-weight: normal; }
|
||||
|
||||
#mainNav main { white-space: nowrap; overflow: hidden; clear: both; }
|
||||
|
||||
#mainNav .nav-box { float: left; white-space: normal; }
|
||||
|
||||
#mainNav h3 a { color: #3371e3; text-decoration: none; }
|
||||
|
||||
ul.global-nav { display: none; }
|
||||
|
||||
ul.global-nav li { display: inline-block; margin-right: 14px; }
|
||||
|
||||
ul.global-nav li a { color: #fff; font-weight: 400; padding: 0; position: relative; }
|
||||
|
||||
ul.global-nav li a.active:after { position: absolute; width: 100%; height: 2px; content: ''; bottom: -4px; left: 0; background: #fff; }
|
||||
|
||||
ul.global-nav li a .ui-icon { filter: brightness(0) invert(1); }
|
||||
|
||||
ul.global-nav li ul { display: none; position: fixed; top: 40px; text-align: left; }
|
||||
|
||||
ul.global-nav li ul li { display: block; height: 28px; }
|
||||
|
||||
ul.global-nav li ul li a { background: #303030; color: #fff; padding: 7px; }
|
||||
|
||||
ul.global-nav li ul li:last-child a { border-radius: 7px; }
|
||||
|
||||
ul.global-nav li:hover ul { display: block; }
|
||||
|
||||
.flip-nav ul.global-nav li a, .open-nav ul.global-nav li a { color: #303030; }
|
||||
|
||||
.flip-nav ul.global-nav li a .ui-icon { filter: brightness(0); }
|
||||
|
||||
.flip-nav ul.global-nav li ul li a { background: #fff; color: #303030; }
|
||||
|
||||
.flip-nav ul.global-nav li a.active:after, .flip-nav ul.global-nav li ul li a.active:after, .open-nav ul.global-nav li a.active:after { background: #3371e3; }
|
||||
|
||||
.flip-nav header { background-color: white; }
|
||||
|
||||
.open-nav body { overflow: hidden; }
|
||||
|
||||
.open-nav #cellophane { display: block; z-index: 9998; }
|
||||
|
||||
.open-nav header { background-color: #e8e8e8; z-index: 9999; }
|
||||
|
||||
.open-nav #hamburger div { opacity: 0; }
|
||||
|
||||
.open-nav #hamburger:before, .open-nav #hamburger:after { left: 12px; transform-origin: 0 1px; }
|
||||
|
||||
.open-nav #hamburger:before { transform: rotate(45deg); }
|
||||
|
||||
.open-nav #hamburger:after { transform: rotate(-45deg); }
|
||||
|
||||
.open-nav #tryKubernetes, .y-enough #tryKubernetes { width: 150px; background-color: #3371e3; border-color: #3371e3; }
|
||||
|
||||
.flip-nav header, .open-nav header { box-shadow: 0 1px 2px #4c4c4c; }
|
||||
|
||||
.flip-nav #viewDocs, .open-nav #viewDocs { border-color: #303030; color: #303030; }
|
||||
|
||||
.flip-nav #viewDocs:hover, .open-nav #viewDocs:hover { border-color: #3371e3; background-color: #3371e3; color: white; }
|
||||
|
||||
.flip-nav #hamburger:hover div, .flip-nav #hamburger:hover:before, .flip-nav #hamburger:hover:after, .open-nav #hamburger:hover div, .open-nav #hamburger:hover:before, .open-nav #hamburger:hover:after { background-color: #303030; }
|
||||
|
||||
#hero { background-image: url(/images/texture.png); background-color: #303030; text-align: center; padding-left: 0; padding-right: 0; margin-bottom: 0; position: relative; }
|
||||
|
||||
#hero.bot-bar:after { display: block; margin-bottom: -20px; height: 8px; width: 100%; background-color: rgba(255, 255, 255, 0.1); content: ''; }
|
||||
|
||||
#hero.no-sub h5 { display: none; }
|
||||
|
||||
#hero.no-sub h1 { margin-bottom: 20px; }
|
||||
|
||||
#home #hero:after { display: none; }
|
||||
|
||||
#vendorStrip { position: relative; background-color: rgba(255, 255, 255, 0.1); font-weight: 100; white-space: nowrap; text-align: center; }
|
||||
|
||||
#vendorStrip li a { color: rgba(255, 255, 255, 0.5); }
|
||||
|
||||
#vendorStrip li a.YAH { color: white; position: relative; }
|
||||
|
||||
footer { width: 100%; background-image: url(/images/texture.png); background-color: #303030; }
|
||||
|
||||
footer main { padding: 20px 0; }
|
||||
|
||||
footer nav a { width: 100%; text-align: center; display: inline-block; margin: 10px 0; font-size: 24px; font-weight: 300; color: white; text-decoration: none; }
|
||||
|
||||
footer .social { margin: 20px 0; }
|
||||
|
||||
footer .social div { text-align: center; margin-bottom: 20px; }
|
||||
|
||||
footer .social div:last-child { margin: 30px 0; }
|
||||
|
||||
footer .social span { display: block; margin-bottom: 8px; }
|
||||
|
||||
footer .social input { text-align: center; }
|
||||
|
||||
#search, #wishField { background-color: transparent; padding: 10px; font-size: 16px; font-weight: 100; color: white; border: 1px solid white; transition: 0.3s; }
|
||||
|
||||
#search:focus, #wishField:focus { background-color: #f7f7f7; color: #303030; }
|
||||
|
||||
.social a { display: inline-block; background-image: url(/images/social_sprite.png); background-repeat: no-repeat; background-size: auto; width: 50px; height: 50px; border-radius: 5px; margin-right: 10px; }
|
||||
|
||||
.social a:hover { background-color: #fff; }
|
||||
|
||||
.social a span { position: absolute; display: block; height: 0; overflow: hidden; }
|
||||
|
||||
.social a.button { background-image: none; width: auto; height: auto; }
|
||||
|
||||
.social a.button:hover { color: #3371e3; }
|
||||
|
||||
a.twitter { background-position: 0 0; }
|
||||
|
||||
a.twitter:hover { background-position: 0 100%; }
|
||||
|
||||
a.stack-overflow { background-position: -50px 0; }
|
||||
|
||||
a.stack-overflow:hover { background-position: -50px 100%; }
|
||||
|
||||
a.slack { background-position: -100px 0; }
|
||||
|
||||
a.slack:hover { background-position: -100px 100%; }
|
||||
|
||||
a.github { background-position: -150px 0; }
|
||||
|
||||
a.github:hover { background-position: -150px 100%; }
|
||||
|
||||
a.mailing-list { background-position: -200px 0; }
|
||||
|
||||
a.mailing-list:hover { background-position: -200px 100%; }
|
||||
|
||||
a.calendar { background-position: -250px 0; }
|
||||
|
||||
a.calendar:hover { background-position: -250px 100%; }
|
||||
|
||||
#viewDocs { display: none; }
|
||||
|
||||
section { background-color: white; }
|
||||
|
||||
#hero { background-color: #303030; }
|
||||
|
||||
#hero h5 { margin: 20px 0; line-height: 28px; }
|
||||
|
||||
#vendorStrip { position: relative; }
|
||||
|
||||
#vendorStrip ul { float: left; }
|
||||
|
||||
#vendorStrip li { display: inline-block; height: 100%; }
|
||||
|
||||
#vendorStrip a { display: block; height: 100%; color: white; font-size: 0.75em; font-weight: bold; }
|
||||
|
||||
#vendorStrip li + li { margin-left: 0; }
|
||||
|
||||
#docs #vendorStrip { line-height: 44px; }
|
||||
|
||||
#docs #vendorStrip ul { float: none; }
|
||||
|
||||
#docs #vendorStrip #searchBox { float: none; display: block; width: 80%; margin: 0 auto; height: 44px; line-height: 44px; position: relative; }
|
||||
|
||||
#docs #vendorStrip #searchBox: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; }
|
||||
|
||||
#docs #vendorStrip #search { width: 100%; padding: 0 10px; height: 30px; line-height: 30px; font-size: 16px; vertical-align: top; background: #fff; border: none; border-radius: 4px; position: relative; }
|
||||
|
||||
#encyclopedia { position: relative; padding: 50px 20px 20px 20px; overflow: hidden; font-size: 14px; }
|
||||
|
||||
#encyclopedia > div { height: 100%; }
|
||||
|
||||
#docsToc { position: fixed; background-color: white; top: 0; left: 0; width: 0; height: 100vh; overflow: hidden; padding: 50px 0; z-index: 999999; transition: 0.3s; }
|
||||
|
||||
#docsToc .yah > .title { background-color: #f7f7f7; border-left: 3px solid #3371e3; padding: 7.5px 10px 7.5px 18px; margin-left: -3px; color: #3371e3; }
|
||||
|
||||
.open-toc body { overflow: hidden; }
|
||||
|
||||
.open-toc #docsToc { padding: 50px 20px; width: 400px; max-width: 100vw; overflow-y: auto; }
|
||||
|
||||
.pi-accordion > .container:first-child > .item:first-child > .title:first-child { padding-left: 0; font-size: 1.5em; font-weight: 700; }
|
||||
|
||||
.pi-accordion > .container:first-child > .item.yah:first-child > .title:first-child { margin-left: -20px !important; }
|
||||
|
||||
.pi-accordion .item { overflow: hidden; }
|
||||
|
||||
.pi-accordion .title { color: #303030; position: relative; padding: 7.5px 10px 7.5px 18px; cursor: pointer; transition: 0.3s; }
|
||||
|
||||
.pi-accordion .title:hover { color: #3371e3; }
|
||||
|
||||
.pi-accordion a.item > .title { color: black; }
|
||||
|
||||
.pi-accordion a.item > .title:hover { color: #3371e3; }
|
||||
|
||||
.pi-accordion div.item > .title:before { content: ""; position: absolute; top: 12px; left: 2px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #3371e3; transform: rotate(0deg); transition: 0.3s; }
|
||||
|
||||
.pi-accordion .wrapper { position: relative; width: 100%; transition: height 0.3s; }
|
||||
|
||||
.pi-accordion .content { padding-left: 20px; opacity: 0; transition: 0.3s; }
|
||||
|
||||
.pi-accordion .item.on > .title:before { transform: rotate(90deg); }
|
||||
|
||||
.pi-accordion .item.on > .wrapper > .content { opacity: 1; }
|
||||
|
||||
dt { margin-bottom: 8px; }
|
||||
|
||||
dd { margin-bottom: 16px; }
|
||||
|
||||
.pi-pushmenu { display: none; position: fixed; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s; }
|
||||
|
||||
.pi-pushmenu.on { opacity: 1; }
|
||||
|
||||
.pi-pushmenu .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); }
|
||||
|
||||
.pi-pushmenu .sled { position: absolute; top: 0; width: 0; height: 100%; background-color: white; overflow: auto; transition: 0.3s; }
|
||||
|
||||
.pi-pushmenu.on .sled { width: 400px; max-width: 100vw; }
|
||||
|
||||
.pi-pushmenu .top-bar { height: 0; line-height: 60px; background-color: #444; }
|
||||
|
||||
.pi-pushmenu ul { margin-top: 25px; }
|
||||
|
||||
.pi-pushmenu li { position: relative; display: block; width: 100%; min-height: 45px; padding: 0 60px 0 20px; border-bottom: 1px solid #cccccc; }
|
||||
|
||||
.pi-pushmenu a { display: inline-block; width: 100%; height: 45px; line-height: 45px; font-family: "Roboto", sans-serif; font-size: 20px; color: #3371e3; }
|
||||
|
||||
.pi-pushmenu .button { background: none; padding: 0; }
|
||||
|
||||
.pi-pushmenu ul ul { padding: 0 20px; }
|
||||
|
||||
.pi-pushmenu ul ul li { min-height: 40px; }
|
||||
|
||||
.pi-pushmenu ul ul a { height: 40px; line-height: 40px; font-size: 18px; color: #555555; }
|
||||
|
||||
.push-menu-close-button { position: absolute; top: 0; right: 0; width: 50px; height: 50px; }
|
||||
|
||||
.push-menu-close-button:before, .push-menu-close-button:after { content: ""; position: absolute; top: calc(50% - 1px); left: 25%; width: 50%; height: 2px; background-color: black; }
|
||||
|
||||
.push-menu-close-button:before { transform: rotate(45deg); }
|
||||
|
||||
.push-menu-close-button:after { transform: rotate(-45deg); }
|
||||
|
||||
#docsContent { position: relative; float: right; width: 100%; }
|
||||
|
||||
#docsContent * + h2, #docsContent * + h3, #docsContent * + h4, #docsContent * + h5, #docsContent * + h6 { margin-top: 30px; }
|
||||
|
||||
#docsContent h1, #docsContent h2, #docsContent h3, #docsContent h4, #docsContent h5, #docsContent h6 { line-height: normal; font-weight: 500; margin-bottom: 30px; padding-bottom: 10px; }
|
||||
|
||||
#docsContent h1:before, #docsContent h2:before, #docsContent h3:before, #docsContent h4:before, #docsContent h5:before, #docsContent h6:before { display: block; content: " "; margin-top: -100px; height: 100px; visibility: hidden; }
|
||||
|
||||
#docsContent h1, #docsContent h2 { border-bottom: 1px solid #cccccc; }
|
||||
|
||||
#docsContent h1 { font-size: 32px; padding-right: 60px; }
|
||||
|
||||
#docsContent h2 { font-size: 28px; }
|
||||
|
||||
#docsContent h3 { font-size: 24px; font-weight: 300; margin-bottom: 5px; }
|
||||
|
||||
#docsContent h4 { font-size: 20px; margin-bottom: 0px; }
|
||||
|
||||
#docsContent h5, #docsContent h6 { font-size: 16px; font-weight: 500; }
|
||||
|
||||
#docsContent p { font-size: 16px; font-weight: 300; line-height: 1.75em; }
|
||||
|
||||
#docsContent p + p { margin-top: 10px; }
|
||||
|
||||
#docsContent code { display: inline-block; box-sizing: border-box; background-color: #f7f7f7; color: #303030; font-family: "Roboto Mono", monospace; vertical-align: baseline; font-size: 14px; font-weight: bold; padding: 2px 4px; }
|
||||
|
||||
#docsContent a code { color: #3371e3; text-decoration: underline; }
|
||||
|
||||
#docsContent pre .pi, #docsContent pre .s { margin: 0; padding: 0; }
|
||||
|
||||
#docsContent .highlight code span, #docsContent code, #docsContent pre code { font-family: "Roboto Mono", monospace; }
|
||||
|
||||
#docsContent code, #docsContent pre code { color: #303030; }
|
||||
|
||||
#docsContent pre code { padding: 0; }
|
||||
|
||||
#docsContent pre { background-color: #f7f7f7; display: block; margin: 20px 0; padding: 15px; position: relative; overflow-x: auto; }
|
||||
|
||||
#docsContent h1 code, #docsContent h2 code, #docsContent h3 code, #docsContent h4 code, #docsContent h5 code, #docsContent h6 code { font-family: inherit; font-size: inherit; background-color: transparent; }
|
||||
|
||||
#docsContent .includecode { table-layout: fixed; }
|
||||
|
||||
#docsContent .includecode, #docsContent .includecode th, #docsContent .includecode td { padding: 0 !important; }
|
||||
|
||||
#docsContent .includecode th { text-align: right !important; padding: 10px !important; }
|
||||
|
||||
#docsContent .includecode th a, #docsContent .includecode th a code { color: white !important; background-color: transparent !important; }
|
||||
|
||||
#docsContent .includecode pre { margin: 0 !important; }
|
||||
|
||||
#docsContent ul li { list-style: disc; }
|
||||
|
||||
#docsContent ol li { list-style: decimal; }
|
||||
|
||||
#docsContent ul, #docsContent ol { margin: 20px 0; padding-left: 30px; font-weight: 300; }
|
||||
|
||||
#docsContent ul ul, #docsContent ol ol, #docsContent ul ol, #docsContent ol ul { margin: 0.75em 0; }
|
||||
|
||||
#docsContent li { margin-bottom: 0.75em; font-size: 16px; line-height: 1.75em; }
|
||||
|
||||
#docsContent table { width: 100%; border: 1px solid #ccc; border-spacing: 0; margin-top: 30px; margin-bottom: 30px; }
|
||||
|
||||
#docsContent thead, #docsContent tr:nth-child(even) { background-color: #f7f7f7; }
|
||||
|
||||
#docsContent thead { background-color: #555; color: white; }
|
||||
|
||||
#docsContent th, #docsContent td { padding: 8px; text-align: left; margin: 0; }
|
||||
|
||||
#docsContent th { font-weight: normal; }
|
||||
|
||||
#docsContent td { font-size: 0.85em; }
|
||||
|
||||
#docsContent #editPageButton { position: absolute; top: -25px; right: 5px; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; white-space: nowrap; text-indent: 50px; overflow: hidden; background: #3371e3 url(/images/icon-pencil.svg) no-repeat; background-position: 12px 10px; background-size: 29px 29px; }
|
||||
|
||||
#docsContent #markdown-toc, #docsContent #TableOfContents { margin-bottom: 20px; }
|
||||
|
||||
#docsContent #markdown-toc ul, #docsContent #markdown-toc li, #docsContent #TableOfContents ul, #docsContent #TableOfContents li { list-style: disc; color: #3371e3; }
|
||||
|
||||
#docsContent #markdown-toc ul, #docsContent #TableOfContents ul { padding: 0 15px; margin: 0; }
|
||||
|
||||
#docsContent #markdown-toc li, #docsContent #TableOfContents li { padding: 0; line-height: 1.5em; margin-bottom: 0; }
|
||||
|
||||
#docsContent #markdown-toc a, #docsContent #TableOfContents a { position: relative; color: #3371e3; font-weight: 700; }
|
||||
|
||||
#docsContent img { max-width: 100%; }
|
||||
|
||||
#docsContent a { text-decoration: underline; }
|
||||
|
||||
#docsContent #TableOfContents > ul > li { list-style: none; }
|
||||
|
||||
#docsContent #TableOfContents ul, #docsContent #TableOfContents li { list-style: disk; }
|
||||
|
||||
.fixed footer { position: fixed; bottom: 0; }
|
||||
|
||||
#miceType { clear: both; font-size: 11px; line-height: 18px; color: #aaa; }
|
||||
|
||||
html.search #docsContent { position: relative; float: none; width: 90%; max-width: 850px; margin: 0 auto; }
|
||||
|
||||
html.search #docsContent #editPageButton { display: none; }
|
||||
|
||||
html.search #docsContent table { border: 0; margin-bottom: 0; }
|
||||
|
||||
html.search #docsContent td { padding: 0; }
|
||||
|
||||
html.search #docsContent h1 { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; padding-left: 8px; }
|
||||
|
||||
#home.flip-nav .logo, #home.open-nav .logo { background-image: url(/images/nav_logo2.svg); }
|
||||
|
||||
#home #hero { margin-bottom: 0; padding-bottom: 1px; }
|
||||
|
||||
#home #hero main { padding: 0 10px; margin-bottom: 30px; }
|
||||
|
||||
#home #hero #vendorStrip { display: none; }
|
||||
|
||||
#oceanNodes { padding-top: 60px; padding-bottom: 60px; }
|
||||
|
||||
#oceanNodes a { color: #3371e3; }
|
||||
|
||||
#oceanNodes main { margin-bottom: 60px; min-height: 160px; }
|
||||
|
||||
#oceanNodes .image-wrapper { max-width: 75%; margin: 0 auto 20px; text-align: center; }
|
||||
|
||||
#oceanNodes .image-wrapper img { width: 100%; max-width: 160px; }
|
||||
|
||||
#oceanNodes main:first-child .image-wrapper { max-width: 100%; }
|
||||
|
||||
#oceanNodes main:first-child .image-wrapper img { max-width: 491px; }
|
||||
|
||||
#oceanNodes h3 { margin-bottom: 30px; }
|
||||
|
||||
#video { height: 200px; }
|
||||
|
||||
#video { width: 100%; position: relative; background-image: url(/images/kub_video_banner_box.jpg); background-position: center center; background-size: cover; }
|
||||
|
||||
#video > .light-text { display: none; position: absolute; top: 50%; left: 75%; width: 525px; padding-right: 80px; transform: translate(-50%, -50%); color: white; }
|
||||
|
||||
#video h2 { font-size: 32px; line-height: 44px; margin-bottom: 20px; }
|
||||
|
||||
#video p { margin-bottom: 20px; }
|
||||
|
||||
#video #desktopKCButton { position: relative; font-size: 18px; background-color: #303030; border-radius: 8px; color: #ffffff; padding: 20px 10px 20px 10px; }
|
||||
|
||||
#video #desktopShowVideoButton { position: relative; font-size: 24px; background-color: white; border-radius: 8px; color: #3371e3; padding: 15px 30px 15px 80px; margin-bottom: 15px; }
|
||||
|
||||
#video #desktopShowVideoButton:before { content: ""; position: absolute; position: absolute; top: 50%; left: 40px; transform: translate(-50%, -50%); width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent #3371e3; }
|
||||
|
||||
#video #mobileShowVideoButton { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 50%; background-color: transparent; border: 5px solid rgba(255, 255, 255, 0.2); overflow: visible; }
|
||||
|
||||
#video #mobileShowVideoButton:after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); left: 40px; content: ""; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 30px; border-color: transparent transparent transparent #ffffff; }
|
||||
|
||||
#videoPlayer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.9); display: none; }
|
||||
|
||||
#videoPlayer iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80vw; height: 45vw; max-width: 142.22222vh; max-height: 80vh; }
|
||||
|
||||
#videoPlayer #closeButton { position: absolute; top: 20px; right: 20px; width: 50px; height: 50px; border: 2px solid transparent; transition: 0.3s; }
|
||||
|
||||
#videoPlayer #closeButton:before, #videoPlayer #closeButton:after { content: ""; position: absolute; top: calc(50% - 1px); left: 10%; width: 80%; height: 2px; background-color: white; }
|
||||
|
||||
#videoPlayer #closeButton:before { transform: rotate(45deg); }
|
||||
|
||||
#videoPlayer #closeButton:after { transform: rotate(-45deg); }
|
||||
|
||||
#videoPlayer #closeButton:hover { border-color: white; }
|
||||
|
||||
#features { padding-top: 140px; background-color: #f7f7f7; background-image: url(/images/wheel.png); background-position: center 60px; background-repeat: no-repeat; background-size: auto; }
|
||||
|
||||
.feature-box { width: 100%; overflow: hidden; clear: both; }
|
||||
|
||||
.feature-box h4 { line-height: normal; margin-bottom: 15px; }
|
||||
|
||||
.feature-box > div:first-child { float: left; }
|
||||
|
||||
.feature-box > div:last-child { float: right; }
|
||||
|
||||
#features h3 { margin-bottom: 20px; }
|
||||
|
||||
#features .feature-box { margin-bottom: 0; }
|
||||
|
||||
#features .feature-box > div { width: 100%; margin-bottom: 40px; }
|
||||
|
||||
#community.open-nav .logo, #community.flip-nav .logo, .gridPage.open-nav .logo, .gridPage.flip-nav .logo { background-image: url(/images/nav_logo2.svg); }
|
||||
|
||||
#community #hero, .gridPage #hero { padding-bottom: 20px; }
|
||||
|
||||
#community #mainContent, .gridPage #mainContent { padding: 20px 0; }
|
||||
|
||||
#community #mainContent main, .gridPage #mainContent main { max-width: none; }
|
||||
|
||||
#community #mainContent a, .gridPage #mainContent a { color: #3371e3; }
|
||||
|
||||
#community #mainContent .content, .gridPage #mainContent .content { margin-bottom: 30px; padding: 30px 0; }
|
||||
|
||||
#community #mainContent .content h1, #community #mainContent .content h2, #community #mainContent .content h3, #community #mainContent .content h4, #community #mainContent .content h5, #community #mainContent .content h6, #community #mainContent .content p, .gridPage #mainContent .content h1, .gridPage #mainContent .content h2, .gridPage #mainContent .content h3, .gridPage #mainContent .content h4, .gridPage #mainContent .content h5, .gridPage #mainContent .content h6, .gridPage #mainContent .content p { line-height: normal; max-width: 1200px; padding: 0 20px; margin: 0 auto 20px; }
|
||||
|
||||
#community #mainContent .content:nth-child(even), .gridPage #mainContent .content:nth-child(even) { background-color: #f7f7f7; }
|
||||
|
||||
#community #mainContent .company-logos, .gridPage #mainContent .company-logos { text-align: center; max-width: 1200px; margin: 0 auto; }
|
||||
|
||||
#community #mainContent .company-logos img, .gridPage #mainContent .company-logos img { width: auto; margin: 10px; background-color: #f7f7f7; }
|
||||
|
||||
#community #mainContent .partner-logos, .gridPage #mainContent .partner-logos { text-align: center; max-width: 1200px; margin: 0 auto; }
|
||||
|
||||
#community #mainContent .partner-logos img, .gridPage #mainContent .partner-logos img { width: auto; margin: 10px; background-color: #ffffff; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.24), 0 0 5px rgba(0, 0, 0, 0.12); }
|
||||
|
||||
#community #mainContent #calendarMeetings, .gridPage #mainContent #calendarMeetings { position: relative; width: 80vw; height: 60vw; max-width: 1200px; max-height: 900px; margin: 20px auto; }
|
||||
|
||||
#community #mainContent #calendarEvents, .gridPage #mainContent #calendarEvents { position: relative; width: 80vw; height: 30vw; max-width: 1200px; max-height: 450px; margin: 20px auto; }
|
||||
|
||||
#community #mainContent iframe, .gridPage #mainContent iframe { position: absolute; border: 0; width: 100%; height: 100%; }
|
||||
|
||||
.ui-icon { display: inline-block !important; }
|
||||
|
||||
#feature-state-dialog-link { text-decoration: none !important; padding: 5px !important; }
|
||||
|
||||
#feature-state-dialog-link a:visited { color: #454545 !important; }
|
||||
|
||||
#feature-state-dialog-link a code { display: inline-block !important; box-sizing: border-box !important; background-color: #f7f7f7 !important; color: #303030 !important; font-family: "Roboto Mono", monospace !important; vertical-align: baseline !important; font-size: 14px !important; font-weight: bold !important; padding: 0px 4px !important; }
|
||||
|
||||
#feature-state-dialog { background: #fff !important; border: 1px solid #ddd !important; padding: 0.5em 1em !important; }
|
||||
|
||||
#feature-state-dialog ul, #feature-state-dialog li { list-style: disc !important; margin: 4px 12px !important; }
|
||||
|
||||
#feature-state-dialog p { margin: 8px 0px !important; }
|
||||
|
||||
#feature-state-dialog code { display: inline-block !important; box-sizing: border-box !important; background-color: #f7f7f7 !important; color: #303030 !important; font-family: "Roboto Mono", monospace !important; vertical-align: baseline !important; font-size: 14px !important; font-weight: bold !important; padding: 0px 4px !important; }
|
||||
|
||||
.ui-dialog { background: #f7f7f7 !important; padding: 0.5em; }
|
||||
|
||||
.ui-dialog-content { position: relative; float: right; width: 100%; }
|
||||
|
||||
.ui-dialog-content * + h2, .ui-dialog-content * + h3, .ui-dialog-content * + h4, .ui-dialog-content * + h5, .ui-dialog-content * + h6 { margin-top: 30px; }
|
||||
|
||||
.ui-dialog-content h1, .ui-dialog-content h2, .ui-dialog-content h3, .ui-dialog-content h4, .ui-dialog-content h5, .ui-dialog-content h6 { line-height: normal; font-weight: 500; margin-bottom: 30px; padding-bottom: 10px; }
|
||||
|
||||
.ui-dialog-content h1:before, .ui-dialog-content h2:before, .ui-dialog-content h3:before, .ui-dialog-content h4:before, .ui-dialog-content h5:before, .ui-dialog-content h6:before { display: block; content: " "; margin-top: -100px; height: 100px; visibility: hidden; }
|
||||
|
||||
.ui-dialog-content h1, .ui-dialog-content h2 { border-bottom: 1px solid #cccccc; }
|
||||
|
||||
.ui-dialog-content h1 { font-size: 32px; padding-right: 60px; }
|
||||
|
||||
.ui-dialog-content h2 { font-size: 28px; }
|
||||
|
||||
.ui-dialog-content h3 { font-size: 24px; font-weight: 300; margin-bottom: 5px; }
|
||||
|
||||
.ui-dialog-content h4 { font-size: 20px; margin-bottom: 0px; }
|
||||
|
||||
.ui-dialog-content h5, .ui-dialog-content h6 { font-size: 16px; font-weight: 500; }
|
||||
|
||||
.ui-dialog-content p { font-size: 16px; font-weight: 300; line-height: 1.75em; }
|
||||
|
||||
.ui-dialog-content p + p { margin-top: 10px; }
|
||||
|
||||
.ui-dialog-content code { display: inline-block; box-sizing: border-box; background-color: #f7f7f7; color: #303030; font-family: "Roboto Mono", monospace; vertical-align: baseline; font-size: 14px; font-weight: bold; padding: 2px 4px; }
|
||||
|
||||
.ui-dialog-content a code { color: #3371e3; text-decoration: underline; }
|
||||
|
||||
.ui-dialog-content pre .pi, .ui-dialog-content pre .s { margin: 0; padding: 0; }
|
||||
|
||||
.ui-dialog-content .highlight code span, .ui-dialog-content code, .ui-dialog-content pre code { font-family: "Roboto Mono", monospace; }
|
||||
|
||||
.ui-dialog-content code, .ui-dialog-content pre code { color: #303030; }
|
||||
|
||||
.ui-dialog-content pre code { padding: 0; }
|
||||
|
||||
.ui-dialog-content pre { background-color: #f7f7f7; display: block; margin: 20px 0; padding: 15px; position: relative; overflow-x: auto; }
|
||||
|
||||
.ui-dialog-content h1 code, .ui-dialog-content h2 code, .ui-dialog-content h3 code, .ui-dialog-content h4 code, .ui-dialog-content h5 code, .ui-dialog-content h6 code { font-family: inherit; font-size: inherit; background-color: transparent; }
|
||||
|
||||
.ui-dialog-content .includecode { table-layout: fixed; }
|
||||
|
||||
.ui-dialog-content .includecode, .ui-dialog-content .includecode th, .ui-dialog-content .includecode td { padding: 0 !important; }
|
||||
|
||||
.ui-dialog-content .includecode th { text-align: right !important; padding: 10px !important; }
|
||||
|
||||
.ui-dialog-content .includecode th a, .ui-dialog-content .includecode th a code { color: white !important; background-color: transparent !important; }
|
||||
|
||||
.ui-dialog-content .includecode pre { margin: 0 !important; }
|
||||
|
||||
.ui-dialog-content ul li { list-style: disc; }
|
||||
|
||||
.ui-dialog-content ol li { list-style: decimal; }
|
||||
|
||||
.ui-dialog-content ul, .ui-dialog-content ol { margin: 20px 0; padding-left: 30px; font-weight: 300; }
|
||||
|
||||
.ui-dialog-content ul ul, .ui-dialog-content ol ol, .ui-dialog-content ul ol, .ui-dialog-content ol ul { margin: 0.75em 0; }
|
||||
|
||||
.ui-dialog-content li { margin-bottom: 0.75em; font-size: 16px; line-height: 1.75em; }
|
||||
|
||||
.ui-dialog-content table { width: 100%; border: 1px solid #ccc; border-spacing: 0; margin-top: 30px; margin-bottom: 30px; }
|
||||
|
||||
.ui-dialog-content thead, .ui-dialog-content tr:nth-child(even) { background-color: #f7f7f7; }
|
||||
|
||||
.ui-dialog-content thead { background-color: #555; color: white; }
|
||||
|
||||
.ui-dialog-content th, .ui-dialog-content td { padding: 8px; text-align: left; margin: 0; }
|
||||
|
||||
.ui-dialog-content th { font-weight: normal; }
|
||||
|
||||
.ui-dialog-content td { font-size: 0.85em; }
|
||||
|
||||
.ui-dialog-content #editPageButton { position: absolute; top: -25px; right: 5px; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; white-space: nowrap; text-indent: 50px; overflow: hidden; background: #3371e3 url(/images/icon-pencil.svg) no-repeat; background-position: 12px 10px; background-size: 29px 29px; }
|
||||
|
||||
.ui-dialog-content #markdown-toc { margin-bottom: 20px; }
|
||||
|
||||
.ui-dialog-content #markdown-toc ul, .ui-dialog-content #markdown-toc li { list-style: disc; color: #3371e3; }
|
||||
|
||||
.ui-dialog-content #markdown-toc ul { padding: 0 15px; margin: 0; }
|
||||
|
||||
.ui-dialog-content #markdown-toc li { padding: 0; line-height: 1.5em; margin-bottom: 0; }
|
||||
|
||||
.ui-dialog-content #markdown-toc a { position: relative; color: #3371e3; font-weight: 700; }
|
||||
|
||||
.ui-dialog-content img { max-width: 100%; }
|
||||
|
||||
.ui-dialog-content a { text-decoration: underline; }
|
||||
|
||||
.ui-dialog-buttonpane { background: #f7f7f7 !important; }
|
||||
|
||||
.ui-widget-header { background: transparent !important; background-color: transparent !important; border: 0px !important; }
|
||||
|
||||
.ui-tabs ul, .ui-tabs ol, .ui-tabs li { padding: 0px !important; list-style: none !important; margin-bottom: 0px !important; margin-left: 4px !important; }
|
||||
|
||||
.ui-tabs-panel ul li { list-style: disc !important; }
|
||||
|
||||
.ui-tabs-panel ol li { list-style: decimal !important; }
|
||||
|
||||
.ui-widget-content { border: 0px !important; }
|
||||
|
||||
.ui-widget-content table { margin: 0px !important; }
|
||||
|
||||
.ui-tabs .ui-tabs-panel { border: 1px solid #ccc !important; }
|
||||
|
||||
.ui-tabs-anchor { text-decoration: none !important; }
|
||||
|
||||
#talkToUs h3, #talkToUs h4 { text-align: center; }
|
||||
|
||||
#talkToUs h3 { margin-bottom: 15px; }
|
||||
|
||||
#talkToUs h4 { line-height: normal; margin-bottom: 50px; }
|
||||
|
||||
#talkToUs h4 br { display: none; }
|
||||
|
||||
#talkToUs #bigSocial { overflow: hidden; }
|
||||
|
||||
#talkToUs #bigSocial div { width: 100%; float: left; padding: 30px; padding-top: 110px; background-position: center top; background-size: auto; background-repeat: no-repeat; }
|
||||
|
||||
#talkToUs #bigSocial div:nth-child(1) { background-image: url(/images/twitter_icon.png); }
|
||||
|
||||
#talkToUs #bigSocial div:nth-child(2) { background-image: url(/images/github_icon.png); }
|
||||
|
||||
#talkToUs #bigSocial div:nth-child(3) { background-image: url(/images/slack_icon.png); }
|
||||
|
||||
#talkToUs #bigSocial div:nth-child(4) { background-image: url(/images/stackoverflow_icon.png); }
|
||||
|
||||
#talkToUs #bigSocial div + div { margin-top: 20px; margin-left: 0; }
|
||||
|
||||
#talkToUs #bigSocial a { display: inline-block; color: #3371e3; font-size: 24px; font-weight: 400; text-decoration: none; margin-bottom: 15px; }
|
||||
|
||||
#talkToUs #bigSocial a, #talkToUs #bigSocial p { text-align: center; width: 100%; }
|
||||
|
||||
#home #talkToUs main { padding: 30px 0; }
|
||||
|
||||
#home #talkToUs h5 { font-size: 20px; }
|
||||
|
||||
#home #caseStudiesWrapper { position: relative; text-align: center; margin-bottom: 30px; }
|
||||
|
||||
#home #caseStudiesWrapper div { position: relative; display: inline-block; vertical-align: top; width: 100%; min-height: 230px; padding: 125px 10px 15px; margin-bottom: 30px; background-position: top center; background-repeat: no-repeat; }
|
||||
|
||||
#home #caseStudiesWrapper div:nth-child(1) { background-image: url(/images/community_logos/slingtv_logo.png); }
|
||||
|
||||
#home #caseStudiesWrapper div:nth-child(2) { background-image: url(/images/community_logos/workiva_logo.png); }
|
||||
|
||||
#home #caseStudiesWrapper div:nth-child(3) { background-image: url(/images/community_logos/pinterest_logo.png); }
|
||||
|
||||
#home #caseStudiesWrapper div:nth-child(4) { background-image: url(/images/community_logos/pearson_logo.png); }
|
||||
|
||||
#home #caseStudiesWrapper p { font-size: 20px; }
|
||||
|
||||
#home #caseStudiesWrapper a { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); color: #3371e3; font-weight: 400; }
|
||||
|
||||
/* Google Search */
|
||||
.cse .gsc-control-cse, .gsc-control-cse { padding: 0; }
|
||||
|
||||
.gsc-control-cse table, .gsc-control-cse-en table { margin: 0px !important; }
|
||||
|
||||
.gsc-above-wrapper-area { border-bottom: 0; }
|
||||
|
||||
hr { background-color: #999999; }
|
||||
|
||||
h2 { margin-bottom: 15px !important; }
|
||||
|
||||
.subhead { padding-bottom: 2% !important; padding-top: 1% !important; }
|
||||
|
||||
.details { margin-left: 1.9%; padding-right: 5%; font-size: 16px !important; padding-bottom: 2% !important; }
|
||||
|
||||
.section1 { margin-bottom: 3%; }
|
||||
|
||||
.section1 .cols { width: 80% !important; margin-left: 6.8%; padding-top: 1.5%; }
|
||||
|
||||
.section1 .cols .col1 { width: 52% !important; font-weight: 300 !important; }
|
||||
|
||||
.section1 .cols .col2 { width: 46% !important; }
|
||||
|
||||
.banner2text { width: 63%; padding-top: 10%; padding-left: 0% !important; float: initial !important; text-align: center; margin: 0 auto; position: relative; }
|
||||
|
||||
.banner3text, .banner4text, .banner5text { width: 63%; padding-left: 0% !important; float: initial !important; text-align: center; margin: 0 auto; position: relative; }
|
||||
|
||||
.fullcol { float: initial !important; }
|
||||
|
||||
body footer { background-color: #585858 !important; }
|
||||
|
||||
.section1 { float: left !important; }
|
||||
|
||||
.banner1 { padding-left: 11.9% !important; }
|
||||
|
||||
.banner2 { float: initial !important; padding-bottom: 2% !important; }
|
||||
|
||||
footer { padding: 0% 7%; }
|
||||
|
||||
.banner4, .banner3, .banner5 { float: initial !important; }
|
||||
|
||||
@media screen and (max-width: 910px) { .banner2text { width: 47%; padding-top: 45%; }
|
||||
.details { margin-left: 0%; margin-bottom: 3%; }
|
||||
.subhead { padding-bottom: 0% !important; padding-top: 0% !important; }
|
||||
.banner3 { width: 100% !important; } }
|
||||
|
||||
@media screen and (max-width: 780px) { .section1 .cols { width: 100% !important; margin-left: 0%; padding-top: 5%; }
|
||||
.section1 .cols .col1, .section1 .cols .col2 { width: 100% !important; margin-left: 0% !important; }
|
||||
.fullcol { width: 90% !important; margin-left: 5% !important; }
|
||||
.banner1 { padding-left: 10% !important; margin-bottom: 6% !important; }
|
||||
.banner2text { padding-top: 60% !important; padding-bottom: 2% !important; } }
|
||||
|
||||
@media screen and (min-width: 750px) { h1 { font-size: 32px; line-height: 40px; }
|
||||
h2 { font-size: 28px; line-height: 60px; }
|
||||
h3 { font-size: 24px; line-height: 32px; }
|
||||
h4 { font-size: 20px; line-height: 40px; }
|
||||
h5 { font-size: 16px; line-height: 36px; }
|
||||
p { font-size: 14px; line-height: 22px; }
|
||||
section, header, #vendorStrip { padding-left: 20px; padding-right: 20px; }
|
||||
section main, header main, #vendorStrip main { width: 100%; max-width: 100%; }
|
||||
header { height: 80px; }
|
||||
.nav-buttons { height: 80px; line-height: 80px; }
|
||||
.nav-buttons .button + * { margin-left: 30px; }
|
||||
#hamburger { width: 50px; height: 50px; }
|
||||
#mainNav { padding: 140px 0 30px; }
|
||||
#mainNav h5 { margin-bottom: 1em; }
|
||||
#mainNav h3 { margin-bottom: 0.6em; }
|
||||
#mainNav .nav-box { width: 20%; }
|
||||
#mainNav .nav-box + .nav-box { margin-left: calc(20% / 3); }
|
||||
#mainNav main + main { margin-top: 60px; }
|
||||
#mainNav .left .button { height: 50px; line-height: 50px; font-size: 18px; }
|
||||
.open-nav #tryKubernetes, .y-enough #tryKubernetes { margin-left: 30px; }
|
||||
#hero { padding-top: 80px; }
|
||||
#docs #hero h1, #docs #hero h5 { padding-left: 20px; padding-right: 20px; }
|
||||
#vendorStrip { height: 88px; line-height: 88px; font-size: 16px; }
|
||||
p { font-size: 16px; line-height: 24px; letter-spacing: 0.1px; }
|
||||
h1 { font-size: 36px; line-height: 44px; }
|
||||
h3 { font-size: 28px; line-height: 36px; }
|
||||
h4 { font-size: 24px; line-height: 40px; }
|
||||
#home #viewDocs, #home #tryKubernetes { display: inline-block; }
|
||||
#vendorStrip { display: block; text-align: center; }
|
||||
#vendorStrip img { max-height: 24px; vertical-align: middle; margin: 0 30px; }
|
||||
#docs #vendorStrip li a { font-size: 1em; font-weight: normal; }
|
||||
#docs #vendorStrip li li + li { margin-left: 60px; }
|
||||
#oceanNodes h3 { text-align: left; margin-bottom: 18px; }
|
||||
#oceanNodes main { position: relative; clear: both; display: table; }
|
||||
#oceanNodes main .content { display: table-cell; position: relative; vertical-align: middle; }
|
||||
#oceanNodes main .image-wrapper { position: absolute; top: 50%; max-width: 25%; max-height: 100%; transform: translateY(-50%); }
|
||||
#oceanNodes main:nth-child(odd) { padding-right: 210px; }
|
||||
#oceanNodes main:nth-child(odd) .image-wrapper { right: 0; }
|
||||
#oceanNodes main:nth-child(even) { padding-left: 210px; }
|
||||
#oceanNodes main:nth-child(even) .image-wrapper { left: 0; }
|
||||
#oceanNodes main:nth-child(1) { padding-right: 0; }
|
||||
#oceanNodes main:nth-child(1) h3, #oceanNodes main:nth-child(1) p { text-align: center; }
|
||||
#oceanNodes main:nth-child(1) .image-wrapper { position: relative; display: block; float: none; max-width: 100%; transform: none; }
|
||||
#oceanNodes main:nth-child(1) .content { display: block; }
|
||||
#oceanNodes main img { width: 100%; }
|
||||
#video { height: 400px; display: block; }
|
||||
#video > .light-text { display: block; }
|
||||
#mobileShowVideoButton { display: none; }
|
||||
#features { padding-bottom: 60px; }
|
||||
#features .feature-box { margin-bottom: 30px; }
|
||||
#features .feature-box:last-child { margin-bottom: 0; }
|
||||
#features h3 { margin-bottom: 40px; }
|
||||
#features .feature-box > div { width: 45%; margin-bottom: 0; }
|
||||
#talkToUs #bigSocial div { width: calc(50% - 15px); }
|
||||
#talkToUs #bigSocial div + div { margin-top: 0; }
|
||||
#talkToUs #bigSocial div:nth-child(2) { margin-left: 20px; }
|
||||
#talkToUs #bigSocial div:nth-child(3) { margin-top: 20px; }
|
||||
#talkToUs #bigSocial div:nth-child(4) { margin-top: 20px; margin-left: 20px; }
|
||||
#talkToUs #bigSocial a { display: inline-block; color: #3371e3; font-weight: 400; text-decoration: none; }
|
||||
footer nav { text-align: center; }
|
||||
footer nav a { width: 30%; padding: 0 20px; }
|
||||
footer .social { text-align: center; }
|
||||
footer .social div { display: inline-block; }
|
||||
footer .social div:last-child { display: block; margin: 0; }
|
||||
footer .social span { display: inline-block; margin-right: 10px; }
|
||||
footer .social input { text-align: left; }
|
||||
#home #caseStudiesWrapper div { width: 48%; } }
|
||||
|
||||
@media screen and (min-width: 1025px) { #hamburger { display: none; }
|
||||
ul.global-nav { display: inline-block; }
|
||||
#docs #vendorStrip #searchBox:before { top: 15px; }
|
||||
#vendorStrip { height: 44px; line-height: 44px; }
|
||||
#vendorStrip li a.YAH:after { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background-color: #3371e3; }
|
||||
#vendorStrip #searchBox { float: right; }
|
||||
#home #hero #vendorStrip { display: block; }
|
||||
#docs #hero h1, #docs #hero h5 { text-align: left; }
|
||||
#docs #hero #vendorStrip ul { float: left; }
|
||||
#docs #hero #vendorStrip #searchBox { float: right; width: 250px; }
|
||||
#docs #hero #vendorStrip #search { vertical-align: middle; }
|
||||
#docs .flyout-button { display: none; }
|
||||
#docs .logo { position: relative; float: left; display: block; width: 180px; height: 88px; top: 0; left: 0; transform: none; background-image: url(../images/nav_logo.svg); }
|
||||
#docs.flip-nav .logo, #docs.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; }
|
||||
#docsToc .push-menu-close-button { display: none; }
|
||||
#docsContent { width: calc(100% - 400px); }
|
||||
#docsContent #editPageButton { right: -25px; }
|
||||
section main, header main, footer main { max-width: 1200px; }
|
||||
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 main, #home header main, #home footer main { max-width: 1000px; }
|
||||
#oceanNodes main { position: relative; max-width: 830px; }
|
||||
#oceanNodes main:nth-child(1) { max-width: 1000px; padding-right: 475px; }
|
||||
#oceanNodes main:nth-child(1) h3, #oceanNodes main:nth-child(1) p { text-align: left; }
|
||||
#oceanNodes main:nth-child(1) .image-wrapper { position: absolute; max-width: 48%; transform: translateY(-50%); }
|
||||
#oceanNodes main:nth-child(1) .image-wrapper img { max-width: 425px; }
|
||||
#video { height: 550px; position: relative; background-image: url(../images/kub_video_banner_box.jpg); background-position: center center; background-size: cover; }
|
||||
#talkToUs h4 br { display: block; }
|
||||
#talkToUs #bigSocial div { width: calc(25% - 18px); }
|
||||
#talkToUs #bigSocial div + div { margin-left: 20px; }
|
||||
footer { width: 100%; background-image: url(../images/texture.png); background-color: #303030; }
|
||||
footer main { padding: 20px 0; }
|
||||
footer nav { overflow: hidden; margin-bottom: 20px; }
|
||||
footer nav a { width: 16.65%; float: left; font-size: 24px; font-weight: 300; white-space: nowrap; }
|
||||
footer .social { padding: 0 30px; max-width: 1200px; }
|
||||
footer .social div { float: left; }
|
||||
footer .social 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; }
|
||||
#search:focus, #wishField:focus { background-color: #f7f7f7; color: #303030; }
|
||||
.social a { display: inline-block; background-image: url(../images/social_sprite.png); background-repeat: no-repeat; background-size: auto; width: 50px; height: 50px; border-radius: 5px; margin-right: 10px; }
|
||||
.social a:hover { background-color: #fff; }
|
||||
.social a span { position: absolute; display: block; height: 0; overflow: hidden; }
|
||||
a.twitter { background-position: 0 0; }
|
||||
a.twitter:hover { background-position: 0 100%; }
|
||||
a.stack-overflow { background-position: -50px 0; }
|
||||
a.stack-overflow:hover { background-position: -50px 100%; }
|
||||
a.slack { background-position: -100px 0; }
|
||||
a.slack:hover { background-position: -100px 100%; }
|
||||
a.github { background-position: -150px 0; }
|
||||
a.github:hover { background-position: -150px 100%; }
|
||||
a.mailing-list { background-position: -200px 0; }
|
||||
a.mailing-list:hover { background-position: -200px 100%; }
|
||||
a.calendar { background-position: -250px 0; }
|
||||
a.calendar:hover { background-position: -250px 100%; }
|
||||
#community #hero, .gridPage #hero { text-align: left; }
|
||||
#community #hero h1, .gridPage #hero h1 { padding: 20px 100px; }
|
||||
#community #tryKubernetes, .gridPage #tryKubernetes { width: auto; background-color: #3371e3; 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; } }
|
||||
@@ -1,12 +0,0 @@
|
||||
---
|
||||
---
|
||||
|
||||
@import "../_sass/reset"
|
||||
@import "../_sass/skin"
|
||||
@import "../_sass/code-styles"
|
||||
|
||||
// media queries
|
||||
@import "../_sass/base"
|
||||
@import "../_sass/case-studies"
|
||||
@import "../_sass/tablet"
|
||||
@import "../_sass/desktop"
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user