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

Convert all Sass to line spacing (#11463)

Browse Source
This commit is contained in:
Luc Perkins
2019-01-16 10:13:05 -08:00
committed by Kubernetes Prow Robot
parent 52daf4d171
commit 49dfdd8c0a
11 changed files with 1739 additions and 1754 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sass/_base.sass
+1271 -1286
View File
File diff suppressed because it is too large Load Diff
sass/_desktop.sass
+247 -247
View File
@@ -3,294 +3,294 @@ $vendor-strip-height: 44px
$video-section-height: 550px $video-section-height: 550px
@media screen and (min-width: 1025px) @media screen and (min-width: 1025px)
#hamburger #hamburger
display: none display: none
ul.global-nav ul.global-nav
display: inline-block display: inline-block
#docs #vendorStrip #searchBox:before #docs #vendorStrip #searchBox:before
top: 15px top: 15px
#vendorStrip #vendorStrip
height: $vendor-strip-height height: $vendor-strip-height
line-height: $vendor-strip-height line-height: $vendor-strip-height
li li
a.YAH a.YAH
&:after &:after
content: "" content: ""
display: block display: block
position: absolute position: absolute
left: 0 left: 0
bottom: 0 bottom: 0
width: 100% width: 100%
height: 4px height: 4px
background-color: $blue background-color: $blue
#searchBox #searchBox
float: right float: right
#home #home
#hero #hero
#vendorStrip #vendorStrip
display: block display: block
#docs #docs
#hero #hero
h1, h5 h1, h5
text-align: left text-align: left
#vendorStrip #vendorStrip
ul ul
float: left float: left
#searchBox #searchBox
float: right float: right
width: 250px width: 250px
#search #search
vertical-align: middle vertical-align: middle
.flyout-button .flyout-button
display: none display: none
.logo .logo
position: relative position: relative
float: left float: left
display: block display: block
width: 180px width: 180px
height: 88px height: 88px
top: 0 top: 0
left: 0 left: 0
transform: none transform: none
background-image: url(../images/nav_logo.svg) background-image: url(../images/nav_logo.svg)
&.flip-nav, &.open-nav &.flip-nav, &.open-nav
.logo .logo
background-image: url(../images/nav_logo2.svg) background-image: url(../images/nav_logo2.svg)
#encyclopedia #encyclopedia
padding: 50px 50px 100px 100px padding: 50px 50px 100px 100px
clear: both clear: both
#docsToc #docsToc
position: relative position: relative
float: left float: left
padding: 0 20px padding: 0 20px
left: 0 left: 0
width: 350px width: 350px
z-index: auto z-index: auto
.push-menu-close-button .push-menu-close-button
display: none display: none
#docsContent #docsContent
width: calc(100% - 400px) width: calc(100% - 400px)
#editPageButton #editPageButton
right: -25px right: -25px
section, header, footer section, header, footer
main main
max-width: $main-max-width max-width: $main-max-width
header, #vendorStrip, #encyclopedia, #hero h1, #hero h5, #docs #hero h1, #docs #hero h5, 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 #community #hero h1, .gridPage #hero h1, #community #hero h5, .gridPage #hero h5
padding-left: 100px padding-left: 100px
padding-right: 100px padding-right: 100px
#vendorStrip #vendorStrip
padding-right: 10px padding-right: 10px
#home #home
section, header, footer section, header, footer
main main
max-width: 1000px max-width: 1000px
#oceanNodes #oceanNodes
main main
position: relative position: relative
max-width: 830px max-width: 830px
&:nth-child(1) &:nth-child(1)
max-width: 1000px max-width: 1000px
padding-right: 475px padding-right: 475px
h3, p h3, p
text-align: left text-align: left
.image-wrapper .image-wrapper
position: absolute position: absolute
max-width: 48% max-width: 48%
transform: translateY(-50%) transform: translateY(-50%)
img img
max-width: 425px max-width: 425px
//.content //.content
// width: 50% // width: 50%
#video #video
height: $video-section-height height: $video-section-height
position: relative position: relative
background-position: center center background-position: center center
background-size: cover background-size: cover
#talkToUs #talkToUs
h4 h4
br br
display: block display: block
#bigSocial #bigSocial
div div
width: calc(25% - 18px) width: calc(25% - 18px)
div + div div + div
margin-left: 20px margin-left: 20px
// //
//div:nth-child(3), div:nth-child(4) //div:nth-child(3), div:nth-child(4)
// margin-top: 0 // margin-top: 0
//#home #bigSocial //#home #bigSocial
// div // div
// width: calc(33% - 15px) // width: calc(33% - 15px)
// //
// div:nth-child(3) // div:nth-child(3)
// margin-top: inherit // margin-top: inherit
// FOOTER // FOOTER
footer footer
width: 100% width: 100%
background-image: url(../images/texture.png) background-image: url(../images/texture.png)
background-color: $dark-grey background-color: $dark-grey
main main
padding: 20px 0 padding: 20px 0
nav nav
overflow: hidden overflow: hidden
margin-bottom: 20px margin-bottom: 20px
a a
width: 16.65% width: 16.65%
float: left float: left
font-size: 24px font-size: 24px
font-weight: 300 font-weight: 300
white-space: nowrap white-space: nowrap
.social .social
padding: 0 30px padding: 0 30px
max-width: 1200px max-width: 1200px
div div
float: left float: left
div:last-child div:last-child
float: right float: right
#search, #wishField #search, #wishField
background-color: transparent background-color: transparent
padding: 10px padding: 10px
font-size: 16px font-size: 16px
font-weight: 100 font-weight: 100
color: white color: white
border: 1px solid white border: 1px solid white
transition: 0.3s transition: 0.3s
&:focus &:focus
background-color: $light-grey background-color: $light-grey
color: $dark-grey color: $dark-grey
.social a .social a
display: inline-block display: inline-block
background-image: url(../images/social_sprite.png) background-image: url(../images/social_sprite.png)
background-repeat: no-repeat background-repeat: no-repeat
background-size: auto background-size: auto
width: 50px width: 50px
height: 50px height: 50px
border-radius: 5px border-radius: 5px
margin-right: 10px margin-right: 10px
&:hover &:hover
background-color: #fff background-color: #fff
span span
position: absolute position: absolute
display: block display: block
height: 0 height: 0
overflow: hidden overflow: hidden
a.twitter a.twitter
background-position: 0 0 background-position: 0 0
&:hover &:hover
background-position: 0 100% background-position: 0 100%
a.stack-overflow a.stack-overflow
background-position: -50px 0 background-position: -50px 0
&:hover &:hover
background-position: -50px 100% background-position: -50px 100%
a.slack a.slack
background-position: -100px 0 background-position: -100px 0
&:hover &:hover
background-position: -100px 100% background-position: -100px 100%
a.github a.github
background-position: -150px 0 background-position: -150px 0
&:hover &:hover
background-position: -150px 100% background-position: -150px 100%
a.mailing-list a.mailing-list
background-position: -200px 0 background-position: -200px 0
&:hover &:hover
background-position: -200px 100% background-position: -200px 100%
a.calendar a.calendar
background-position: -250px 0 background-position: -250px 0
&:hover &:hover
background-position: -250px 100% background-position: -250px 100%
#community, .gridPage #community, .gridPage
#hero #hero
text-align: left text-align: left
h1 h1
padding: 20px 100px padding: 20px 100px
#tryKubernetes #tryKubernetes
width: auto width: auto
background-color: $blue background-color: $blue
padding: 0 20px padding: 0 20px
#bigSocial #bigSocial
div div
width: calc(25% - 18px) width: calc(25% - 18px)
#home #caseStudiesWrapper #home #caseStudiesWrapper
div div
width: 24% width: 24%
min-height: 260px min-height: 260px
@media screen and (min-width: 1300px) @media screen and (min-width: 1300px)
#vendorStrip #vendorStrip
padding-right: 100px padding-right: 100px
@media screen and (min-width: 456px) @media screen and (min-width: 456px)
#vendorStrip #vendorStrip
li + li li + li
margin-left: 20px margin-left: 20px
sass/_reset.sass
+27 -27
View File
@@ -1,61 +1,61 @@
html, body html, body
margin: 0 margin: 0
padding: 0 padding: 0
input, button input, button
outline: none outline: none
button button
cursor: pointer cursor: pointer
ul, li ul, li
list-style: none list-style: none
ul ul
margin: 0 margin: 0
padding: 0 padding: 0
a a
text-decoration: none text-decoration: none
// CONVENIENCE // CONVENIENCE
.clear .clear
display: block display: block
clear: both clear: both
.light-text .light-text
color: white color: white
.right .right
float: right float: right
.left .left
float: left float: left
.center .center
text-align: center text-align: center
//mixins //mixins
@mixin fullScreen @mixin fullScreen
position: fixed position: fixed
top: 0 top: 0
left: 0 left: 0
width: 100vw width: 100vw
height: 100vh height: 100vh
@mixin pureCenter($left: 50%, $top: 50%) @mixin pureCenter($left: 50%, $top: 50%)
position: absolute position: absolute
top: $top top: $top
left: $left left: $left
transform: translate(-50%, -50%) transform: translate(-50%, -50%)
@mixin maintain-aspect-ratio ($width-factor: 16, $height-factor: 9, $target-width: 80vw, $target-height: 80vh) @mixin maintain-aspect-ratio ($width-factor: 16, $height-factor: 9, $target-width: 80vw, $target-height: 80vh)
width: $target-width width: $target-width
height: $target-width * ($height-factor / $width-factor) height: $target-width * ($height-factor / $width-factor)
max-width: $target-height * ($width-factor / $height-factor) max-width: $target-height * ($width-factor / $height-factor)
max-height: $target-height max-height: $target-height
sass/_size.sass
+49 -49
View File
@@ -1,86 +1,86 @@
h1 h1
font-size: $h1-font-size font-size: $h1-font-size
line-height: $h1-line-height line-height: $h1-line-height
h2 h2
font-size: $h2-font-size font-size: $h2-font-size
line-height: $h2-line-height line-height: $h2-line-height
h3 h3
font-size: $h3-font-size font-size: $h3-font-size
line-height: $h3-line-height line-height: $h3-line-height
h4 h4
font-size: $h4-font-size font-size: $h4-font-size
line-height: $h4-line-height line-height: $h4-line-height
h5 h5
font-size: $h5-font-size font-size: $h5-font-size
line-height: $h5-line-height line-height: $h5-line-height
p p
font-size: $p-font-size font-size: $p-font-size
line-height: $p-line-height line-height: $p-line-height
section, header, #vendorStrip section, header, #vendorStrip
padding-left: $full-width-paddingX padding-left: $full-width-paddingX
padding-right: $full-width-paddingX padding-right: $full-width-paddingX
main main
width: $main-width width: $main-width
max-width: $main-max-width max-width: $main-max-width
header header
height: $header-height height: $header-height
.nav-buttons .nav-buttons
height: $header-height height: $header-height
line-height: $header-height line-height: $header-height
.button + * .button + *
margin-left: $nav-buttons-margin-left margin-left: $nav-buttons-margin-left
#hamburger #hamburger
width: $hamburger-size width: $hamburger-size
height: $hamburger-size height: $hamburger-size
#mainNav #mainNav
padding: $main-nav-padding padding: $main-nav-padding
h5 h5
margin-bottom: $main-nav-h5-margin-bottom margin-bottom: $main-nav-h5-margin-bottom
h3 h3
margin-bottom: $main-nav-h3-margin-bottom margin-bottom: $main-nav-h3-margin-bottom
.nav-box .nav-box
width: $nav-box-width width: $nav-box-width
.nav-box + .nav-box .nav-box + .nav-box
margin-left: $nav-box-sibling-margin-left margin-left: $nav-box-sibling-margin-left
main + main main + main
margin-top: $main-nav-main-sibling-margin-top margin-top: $main-nav-main-sibling-margin-top
.left .button .left .button
height: $main-nav-left-button-size height: $main-nav-left-button-size
line-height: $main-nav-left-button-size line-height: $main-nav-left-button-size
font-size: $main-nav-left-button-font-size font-size: $main-nav-left-button-font-size
.open-nav, .y-enough .open-nav, .y-enough
#tryKubernetes #tryKubernetes
margin-left: $nav-buttons-margin-left margin-left: $nav-buttons-margin-left
#hero #hero
padding-top: $hero-padding-top padding-top: $hero-padding-top
#docs #docs
#hero #hero
h1, h5 h1, h5
padding-left: $full-width-paddingX padding-left: $full-width-paddingX
padding-right: $full-width-paddingX padding-right: $full-width-paddingX
#vendorStrip #vendorStrip
height: $vendor-strip-height height: $vendor-strip-height
line-height: $vendor-strip-height line-height: $vendor-strip-height
font-size: $vendor-strip-font-size font-size: $vendor-strip-font-size
sass/_skin.sass
+8 -8
View File
@@ -9,17 +9,17 @@ $mono-font: 'Roboto Mono', monospace
*, .button *, .button
box-sizing: border-box box-sizing: border-box
font-family: $base-font font-family: $base-font
background: none background: none
margin: 0 margin: 0
border: 0 border: 0
body body
font-family: $base-font font-family: $base-font
h1, h2, h5, p h1, h2, h5, p
font-weight: 300 font-weight: 300
h3, h4 h3, h4
font-weight: 400 font-weight: 400
sass/_tablet.sass
+132 -132
View File
@@ -66,185 +66,185 @@ $feature-box-div-width: 45%
//////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////
@media screen and (min-width: 750px) @media screen and (min-width: 750px)
@import "size" @import "size"
p p
font-size: 16px font-size: 16px
line-height: 24px line-height: 24px
letter-spacing: 0.1px letter-spacing: 0.1px
h1 h1
font-size: 36px font-size: 36px
line-height: 44px line-height: 44px
h3 h3
font-size: 28px font-size: 28px
line-height: 36px line-height: 36px
h4 h4
font-size: 24px font-size: 24px
line-height: 40px line-height: 40px
#home #home
#viewDocs, #tryKubernetes #viewDocs, #tryKubernetes
display: inline-block display: inline-block
#vendorStrip #vendorStrip
display: block display: block
text-align: center text-align: center
img img
max-height: 24px max-height: 24px
vertical-align: middle vertical-align: middle
margin: 0 30px margin: 0 30px
#docs #docs
#vendorStrip #vendorStrip
li li
a a
font-size: 1em font-size: 1em
font-weight: normal font-weight: normal
li + li li + li
margin-left: 60px margin-left: 60px
#oceanNodes #oceanNodes
h3 h3
text-align: left text-align: left
margin-bottom: 18px margin-bottom: 18px
main main
position: relative position: relative
clear: both clear: both
display: table display: table
height: 160px height: 160px
.content .content
display: table-cell display: table-cell
position: relative position: relative
vertical-align: middle vertical-align: middle
.image-wrapper .image-wrapper
position: absolute position: absolute
top: 50% top: 50%
max-width: 25% max-width: 25%
max-height: 100% max-height: 100%
transform: translateY(-50%) transform: translateY(-50%)
&:nth-child(odd) &:nth-child(odd)
padding-right: 210px padding-right: 210px
.image-wrapper .image-wrapper
right: 0 right: 0
&:nth-child(even) &:nth-child(even)
padding-left: 210px padding-left: 210px
.image-wrapper .image-wrapper
left: 0 left: 0
&:nth-child(1) &:nth-child(1)
padding-right: 0 padding-right: 0
h3, p h3, p
text-align: center text-align: center
.image-wrapper .image-wrapper
position: relative position: relative
display: block display: block
float: none float: none
max-width: 100% max-width: 100%
transform: none transform: none
.content .content
display: block display: block
img img
width: 100% width: 100%
#video #video
height: $video-section-height height: $video-section-height
display: block display: block
& > .light-text & > .light-text
display: block display: block
#mobileShowVideoButton #mobileShowVideoButton
display: none display: none
#features #features
padding-bottom: 60px padding-bottom: 60px
.feature-box .feature-box
margin-bottom: 30px margin-bottom: 30px
&:last-child &:last-child
margin-bottom: 0 margin-bottom: 0
h3 h3
margin-bottom: $features-h3-margin-bottom margin-bottom: $features-h3-margin-bottom
.feature-box .feature-box
& > div & > div
width: $feature-box-div-width width: $feature-box-div-width
margin-bottom: $feature-box-div-margin-bottom margin-bottom: $feature-box-div-margin-bottom
#talkToUs #talkToUs
#bigSocial #bigSocial
div div
width: calc(50% - 15px) width: calc(50% - 15px)
div + div div + div
margin-top: 0 margin-top: 0
div:nth-child(2) div:nth-child(2)
margin-left: 20px margin-left: 20px
div:nth-child(3) div:nth-child(3)
margin-top: 20px margin-top: 20px
div:nth-child(4) div:nth-child(4)
margin-top: 20px margin-top: 20px
margin-left: 20px margin-left: 20px
a a
display: inline-block display: inline-block
color: $blue color: $blue
font-weight: 400 font-weight: 400
text-decoration: none text-decoration: none
// FOOTER // FOOTER
footer footer
nav nav
text-align: center text-align: center
a a
width: 30% width: 30%
padding: 0 20px padding: 0 20px
.social .social
text-align: center text-align: center
div div
display: inline-block display: inline-block
div:last-child div:last-child
display: block display: block
margin: 0 margin: 0
span span
display: inline-block display: inline-block
margin-right: 10px margin-right: 10px
input input
text-align: left text-align: left
#home #caseStudiesWrapper #home #caseStudiesWrapper
div div
width: 48% width: 48%
sass/styles.sass
+1 -1
View File
@@ -4,4 +4,4 @@
// media queries // media queries
@import "base" @import "base"
@import "tablet" @import "tablet"
@import "desktop" @import "desktop"
static/css/case-study-styles.css
+1 -1
View File
File diff suppressed because one or more lines are too long
static/css/case-study-styles.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
static/css/styles.css
+1 -1
View File
File diff suppressed because one or more lines are too long
static/css/styles.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long