diff --git a/website/source/assets/stylesheets/_api.scss b/website/source/assets/stylesheets/_api.scss index 9bbffe6aa..8decfdb4f 100644 --- a/website/source/assets/stylesheets/_api.scss +++ b/website/source/assets/stylesheets/_api.scss @@ -3,49 +3,49 @@ // -------------------------------------------------- .bs-api-section dl, dl.api { - margin-top: 30px; - line-height: 20px; + margin-top: 30px; + line-height: 20px; - dt { + dt { + color: #888; + text-transform: uppercase; + font-weight: normal; + float: left; + width: 150px; + text-align: right; + } + + dd { + margin-left: 170px; + + pre.api-sample { + margin-top: 20px; + font-size: 14px; + padding: 10px; + } + } + + ul { + margin: 0; + padding: 0; + + li { + margin: 0; + list-style-type: none; + padding-bottom: 20px; + font-size: 15px; + font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: 500; + + span.param { + font-weight: bold; + } + + span.param-flags { + font-style: italic; color: #888; - text-transform: uppercase; - font-weight: normal; - float: left; - width: 150px; - text-align: right; - } - - dd { - margin-left: 170px; - - pre.api-sample { - margin-top: 20px; - font-size: 14px; - padding: 10px; - } - } - - ul { - margin: 0; - padding: 0; - - li { - margin: 0; - list-style-type: none; - padding-bottom: 20px; - font-size: 15px; - font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 500; - - span.param { - font-weight: bold; - } - - span.param-flags { - font-style: italic; - color: #888; - padding-right: 6px; - } - } + padding-right: 6px; + } } + } } diff --git a/website/source/assets/stylesheets/_buttons.scss b/website/source/assets/stylesheets/_buttons.scss index 57b9f842e..4407600f6 100755 --- a/website/source/assets/stylesheets/_buttons.scss +++ b/website/source/assets/stylesheets/_buttons.scss @@ -3,117 +3,117 @@ // -------------------------------------------------- .h-btn{ - display: inline-block; - background-color: transparent; - color: $black; - @include transition(color .3s ease-in-out); - //@include btn-shadow(); - font-family: $font-family-blanc-reg; - text-transform: uppercase; - border-radius: 3px; + display: inline-block; + background-color: transparent; + color: $black; + @include transition(color .3s ease-in-out); + //@include btn-shadow(); + font-family: $font-family-blanc-reg; + text-transform: uppercase; + border-radius: 3px; - &.has-caret{ - span.h-caret{ - display: inline-block; - width: 8px; - height: 12px; - margin-left: 10px; - @include transition(all 300ms ease-in); - } - } + &.has-caret{ + span.h-caret{ + display: inline-block; + width: 8px; + height: 12px; + margin-left: 10px; + @include transition(all 300ms ease-in); + } + } - &.lrg{ - font-size: $font-size-reg; - padding: 10px 24px; - } + &.lrg{ + font-size: $font-size-reg; + padding: 10px 24px; + } - &.sml{ - padding: 8px 14px; - font-size: $font-size-reg - 2; - line-height: 14px; + &.sml{ + padding: 8px 14px; + font-size: $font-size-reg - 2; + line-height: 14px; - &.has-caret{ - span.h-caret{ - background-size: 6px 9px !important; - margin-bottom: -2px; - margin-right: -3px; - } - } - } + &.has-caret{ + span.h-caret{ + background-size: 6px 9px !important; + margin-bottom: -2px; + margin-right: -3px; + } + } + } - &.light{ - color: $green-light; + &.light{ + color: $green-light; - &.has-border{ - border: 2px solid $green-light; - } + &.has-border{ + border: 2px solid $green-light; + } - &.has-caret{ - span.h-caret{ - background: image-url('../images/caret-light.png') 0 0 no-repeat; - @include img-retina("../images/caret-light.png", "../images/caret-light@2x.png", 8px, 12px); - } - } - } + &.has-caret{ + span.h-caret{ + background: image-url('../images/caret-light.png') 0 0 no-repeat; + @include img-retina("../images/caret-light.png", "../images/caret-light@2x.png", 8px, 12px); + } + } + } - &.green{ - color: $green; + &.green{ + color: $green; - &.has-border{ - border: 2px solid $green; - } + &.has-border{ + border: 2px solid $green; + } - span.h-caret{ - background: image-url('../images/caret-green.png') 0 0 no-repeat; - @include img-retina("../images/caret-green.png", "../images/caret-green@2x.png", 8px, 12px); - } + span.h-caret{ + background: image-url('../images/caret-green.png') 0 0 no-repeat; + @include img-retina("../images/caret-green.png", "../images/caret-green@2x.png", 8px, 12px); + } - &.fill{ - background-color: $green; - color: $white; + &.fill{ + background-color: $green; + color: $white; - span.h-caret{ - background: image-url('../images/caret-white.png') 0 0 no-repeat; - @include img-retina("../images/caret-white.png", "../images/caret-white@2x.png", 8px, 12px); - } - } - } + span.h-caret{ + background: image-url('../images/caret-white.png') 0 0 no-repeat; + @include img-retina("../images/caret-white.png", "../images/caret-white@2x.png", 8px, 12px); + } + } + } - &.gray{ - color: $blue-light; + &.gray{ + color: $blue-light; - &.border{ - border: 2px solid $blue-light; - } + &.border{ + border: 2px solid $blue-light; + } - &.fill{ - background-color: $blue-light; - color: $white; + &.fill{ + background-color: $blue-light; + color: $white; - span.h-caret{ - background: image-url('../images/caret-white.png') 0 0 no-repeat; - @include img-retina("../images/caret-white.png", "../images/caret-white@2x.png", 8px, 12px); - } - } - } + span.h-caret{ + background: image-url('../images/caret-white.png') 0 0 no-repeat; + @include img-retina("../images/caret-white.png", "../images/caret-white@2x.png", 8px, 12px); + } + } + } - &.dark{ - color: $green-dark; + &.dark{ + color: $green-dark; - &.border{ - border: 2px solid $green-dark; - } - } + &.border{ + border: 2px solid $green-dark; + } + } - &:hover{ - text-decoration: none; - @include transition(color 200ms ease-in); + &:hover{ + text-decoration: none; + @include transition(color 200ms ease-in); - &.has-caret{ - span.h-caret{ - @include translate(4px, 0); - @include transition(all 200ms ease-in); - } - } - } + &.has-caret{ + span.h-caret{ + @include translate(4px, 0); + @include transition(all 200ms ease-in); + } + } + } } diff --git a/website/source/assets/stylesheets/_community.scss b/website/source/assets/stylesheets/_community.scss index 280360058..65b6ecceb 100644 --- a/website/source/assets/stylesheets/_community.scss +++ b/website/source/assets/stylesheets/_community.scss @@ -1,21 +1,21 @@ .people { - margin-top: 30px; + margin-top: 30px; - .person { - margin-bottom: 40px; + .person { + margin-bottom: 40px; - h3 { - color: $blue-dark; - text-transform: none; - } - - img { - width: 125px; - margin: auto auto; - } - - .bio { - padding-left: 150px; - } + h3 { + color: $blue-dark; + text-transform: none; } + + img { + width: 125px; + margin: auto auto; + } + + .bio { + padding-left: 150px; + } + } } diff --git a/website/source/assets/stylesheets/_docs.scss b/website/source/assets/stylesheets/_docs.scss index 2c384dff3..60de39620 100755 --- a/website/source/assets/stylesheets/_docs.scss +++ b/website/source/assets/stylesheets/_docs.scss @@ -17,266 +17,266 @@ body.layout-docs, body.layout-inner, body.layout-downloads, body.layout-intro{ - //background: $light-black image-url('sidebar-wire.png') left 62px no-repeat; - >.container{ - .col-md-8[role=main]{ - min-height: 800px; - background-color: white; + //background: $light-black image-url('sidebar-wire.png') left 62px no-repeat; + >.container{ + .col-md-8[role=main]{ + min-height: 800px; + background-color: white; - >div{ - position: relative; - z-index: 10; - } - } - } + >div{ + position: relative; + z-index: 10; + } + } + } } .docs-sidebar{ - position: relative; - z-index: 20; - margin-bottom: 30px; - margin-top: 50px; - @include open(); + position: relative; + z-index: 20; + margin-bottom: 30px; + margin-top: 50px; + @include open(); - .nav.docs-sidenav{ - padding-bottom: 15px; + .nav.docs-sidenav{ + padding-bottom: 15px; - :last-child{ - border-bottom: none; - } + :last-child{ + border-bottom: none; + } - //all li - li{ - position: relative; + //all li + li{ + position: relative; - > a{ - padding: 10px 8px; - font-size: 15px; - color: $blue-dark; + > a{ + padding: 10px 8px; + font-size: 15px; + color: $blue-dark; - &:before{ - @include bez-1-transition(); - } - - &:hover{ - background-color: transparent !important; - - &:before{ - @include bez-1-transition(); - } - } - } - } - - $parent-active-state: -14px; - $parent-default-state: -10px; - $child-active-state: -4px; - $child-default-state: 0px; - - //first teir li - > li { - margin: 0 0 0 10px; - - &.active { - >a{ - color: $green-dark; - font-weight: 600; - border-right: 1px solid $green-faint; - - &:hover{ - &:before{ - left: $parent-default-state; - } - } - - &:before{ - @include rotate(90deg); - opacity: 1; - } - } - - .nav { - display: block; - } - } - - > a { - -webkit-font-smoothing: antialiased; - - &:hover{ - &:before{ - left: $parent-active-state; - } - } - - &:before{ - content: ''; - position: absolute; - width: 8px; - height: 12px; - top: 15px; - left: $parent-default-state; - overflow: hidden; - background: url(../images/caret-green.png) 0 0 no-repeat; - opacity: .3; - @include img-retina("../images/caret-light.png", "../images/caret-light@2x.png", 6px, 9px); - } - } - } - - //nested ul.nav - .nav { - display: none; - padding-top: 10px; - padding-bottom: 10px; - margin-bottom: 15px; - border-right: 1px solid $green-faint; - border-bottom: 1px solid $green-faint; - - > li{ - margin-left: 10px; - - &.active{ - > a{ - color: $green-dark; - font-weight: 600; - - &:hover{ - &:before{ - left: $child-default-state; - } - } - - &:before{ - //background: url(../images/triangle-sprite.png) 0 0 no-repeat; - //@include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 5px, 19px); - } - } - } - - > a{ - -webkit-font-smoothing: antialiased; - padding: 6px 15px; - - &:hover{ - &:before{ - left: $child-active-state; - } - } - - &:before{ - opacity: .75; - content: ''; - position: absolute; - width: 5px; - height: 7px; - top: 12px; - left: $child-default-state; - overflow: hidden; - //background: url(../images/triangle-sprite.png) 0 -13px no-repeat; - //@include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 5px, 19px); - } - } - } - } - - .nav-visible { - display: block; + &:before{ + @include bez-1-transition(); } - } + + &:hover{ + background-color: transparent !important; + + &:before{ + @include bez-1-transition(); + } + } + } + } + + $parent-active-state: -14px; + $parent-default-state: -10px; + $child-active-state: -4px; + $child-default-state: 0px; + + //first teir li + > li { + margin: 0 0 0 10px; + + &.active { + >a{ + color: $green-dark; + font-weight: 600; + border-right: 1px solid $green-faint; + + &:hover{ + &:before{ + left: $parent-default-state; + } + } + + &:before{ + @include rotate(90deg); + opacity: 1; + } + } + + .nav { + display: block; + } + } + + > a { + -webkit-font-smoothing: antialiased; + + &:hover{ + &:before{ + left: $parent-active-state; + } + } + + &:before{ + content: ''; + position: absolute; + width: 8px; + height: 12px; + top: 15px; + left: $parent-default-state; + overflow: hidden; + background: url(../images/caret-green.png) 0 0 no-repeat; + opacity: .3; + @include img-retina("../images/caret-light.png", "../images/caret-light@2x.png", 6px, 9px); + } + } + } + + //nested ul.nav + .nav { + display: none; + padding-top: 10px; + padding-bottom: 10px; + margin-bottom: 15px; + border-right: 1px solid $green-faint; + border-bottom: 1px solid $green-faint; + + > li{ + margin-left: 10px; + + &.active{ + > a{ + color: $green-dark; + font-weight: 600; + + &:hover{ + &:before{ + left: $child-default-state; + } + } + + &:before{ + //background: url(../images/triangle-sprite.png) 0 0 no-repeat; + //@include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 5px, 19px); + } + } + } + + > a{ + -webkit-font-smoothing: antialiased; + padding: 6px 15px; + + &:hover{ + &:before{ + left: $child-active-state; + } + } + + &:before{ + opacity: .75; + content: ''; + position: absolute; + width: 5px; + height: 7px; + top: 12px; + left: $child-default-state; + overflow: hidden; + //background: url(../images/triangle-sprite.png) 0 -13px no-repeat; + //@include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 5px, 19px); + } + } + } + } + + .nav-visible { + display: block; + } + } } .bs-docs-section{ - padding-top: 10px; - padding-left: 3%; - padding-bottom: 160px; + padding-top: 10px; + padding-left: 3%; + padding-bottom: 160px; - .lead{ - margin-bottom: 48px - } + .lead{ + margin-bottom: 48px + } - .doc-sectional{ - margin-bottom: 48px; - } + .doc-sectional{ + margin-bottom: 48px; + } - p, li, .alert { - color: $blue-dark; - font-size: 18px; - font-family: $font-family-open-sans; - font-weight: $font-weight-reg; - line-height: 1.84em; - margin: 0 0 18px; - -webkit-font-smoothing: antialiased; - } + p, li, .alert { + color: $blue-dark; + font-size: 18px; + font-family: $font-family-open-sans; + font-weight: $font-weight-reg; + line-height: 1.84em; + margin: 0 0 18px; + -webkit-font-smoothing: antialiased; + } - pre{ - margin: 0 0 18px; + pre{ + margin: 0 0 18px; + } + + a{ + color: $green-dark; + border-bottom: 1px solid $green-dark; + @include transition(all 300ms ease-in); + + &:hover{ + color: $blue-dark; + border-bottom: 2px solid $blue-dark; + text-decoration: none; + @include transition(all 300ms ease-in); } + } - a{ - color: $green-dark; - border-bottom: 1px solid $green-dark; - @include transition(all 300ms ease-in); + img{ + max-width: 650px; + margin-top: 25px; + margin-bottom: 25px; + } - &:hover{ - color: $blue-dark; - border-bottom: 2px solid $blue-dark; - text-decoration: none; - @include transition(all 300ms ease-in); - } - } + h1, .h1, h2, .h2, h3, .h3, h4, .h4{ + color: $gray-dark; + margin-top: 54px; + margin-bottom: 18px; + @include open-sb(); + } - img{ - max-width: 650px; - margin-top: 25px; - margin-bottom: 25px; - } + h1{ + font-size: 36px; + } - h1, .h1, h2, .h2, h3, .h3, h4, .h4{ - color: $gray-dark; - margin-top: 54px; - margin-bottom: 18px; - @include open-sb(); - } - - h1{ - font-size: 36px; - } - - #graph { - margin-top: 30px; - } + #graph { + margin-top: 30px; + } } @media (max-width: 992px) { .bs-docs-section{ - padding-left: 0; + padding-left: 0; } } @media (max-width: 768px) { - .bs-docs-section{ - padding-top: 0; - h1{ - margin-top: 0; - } - } + .bs-docs-section{ + padding-top: 0; + h1{ + margin-top: 0; + } + } } @media (max-width: 480px) { - .bs-docs-section{ - img{ - max-width: 450px; - } + .bs-docs-section{ + img{ + max-width: 450px; + } - h1{ - font-size: 32px; - } - } + h1{ + font-size: 32px; + } + } } diff --git a/website/source/assets/stylesheets/_downloads.scss b/website/source/assets/stylesheets/_downloads.scss index be2187eaf..7150c6f40 100644 --- a/website/source/assets/stylesheets/_downloads.scss +++ b/website/source/assets/stylesheets/_downloads.scss @@ -1,59 +1,59 @@ .downloads { + margin-top: 20px; + + .description { + margin-bottom: 20px; + } + + .download { + border-bottom: 1px solid #b2b2b2; + padding-bottom: 15px; + margin-top: 10px; + margin-bottom: 10px; + + .details { + padding-left: 95px; + + h2 { + margin-top: 30px; + } + + ul { + padding-left: 0px; + } + + li { + display: inline-block; + + &:after { + content: " | "; + } + + &:last-child:after { + content: ""; + } + } + } + + .icon { + img { + width: 75px; + } + } + + .os-name { + font-size: 40px; + margin-bottom: -3px; + } + } + + .poweredby { margin-top: 20px; - .description { - margin-bottom: 20px; - } - - .download { - border-bottom: 1px solid #b2b2b2; - padding-bottom: 15px; - margin-top: 10px; - margin-bottom: 10px; - - .details { - padding-left: 95px; - - h2 { - margin-top: 30px; - } - - ul { - padding-left: 0px; - } - - li { - display: inline-block; - - &:after { - content: " | "; - } - - &:last-child:after { - content: ""; - } - } - } - - .icon { - img { - width: 75px; - } - } - - .os-name { - font-size: 40px; - margin-bottom: -3px; - } - } - - .poweredby { - margin-top: 20px; - - img { - display: block; - margin: 0 auto; - width: 122px; - } + img { + display: block; + margin: 0 auto; + width: 122px; } + } } diff --git a/website/source/assets/stylesheets/_global.scss b/website/source/assets/stylesheets/_global.scss index de0e080bd..acc38ea47 100755 --- a/website/source/assets/stylesheets/_global.scss +++ b/website/source/assets/stylesheets/_global.scss @@ -3,115 +3,115 @@ // -------------------------------------------------- /*html{ - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; +text-rendering: optimizeLegibility; +-webkit-font-smoothing: antialiased; }*/ body { - -webkit-font-smoothing: antialiased; - color: $black; - background-color: $white; - font-size: 15px; - font-family: $font-family-open-sans; - font-weight: 500; + -webkit-font-smoothing: antialiased; + color: $black; + background-color: $white; + font-size: 15px; + font-family: $font-family-open-sans; + font-weight: 500; } h1, h2, h3, h4, h5 { - -webkit-font-smoothing: antialiased; + -webkit-font-smoothing: antialiased; } h1{ - font-size: 42px; - line-height: 42px; - font-family: $font-family-open-sans; - font-weight: $font-weight-reg; - margin-bottom: 24px; + font-size: 42px; + line-height: 42px; + font-family: $font-family-open-sans; + font-weight: $font-weight-reg; + margin-bottom: 24px; } h3, h4{ - font-size: 24px; - line-height: 24px; - font-family: $font-family-open-sans; - font-weight: $font-weight-reg; + font-size: 24px; + line-height: 24px; + font-family: $font-family-open-sans; + font-weight: $font-weight-reg; } //an alternative color for buttons in the doc body .btn-serf{ - color: $white !important; - background-color: $btn-color; - border-radius: $btn-border-radius; - //@include box-shadow( $shadow ); + color: $white !important; + background-color: $btn-color; + border-radius: $btn-border-radius; + //@include box-shadow( $shadow ); } .highlight{ - margin-bottom: 18px; + margin-bottom: 18px; } pre { - background-color: $black; - color: $white; - font-size: 14px; - font-weight: normal; - font-family: "Courier New", Monaco, Menlo, Consolas, monospace; - border: none; - padding: 20px; - margin-bottom: 0; + background-color: $black; + color: $white; + font-size: 14px; + font-weight: normal; + font-family: "Courier New", Monaco, Menlo, Consolas, monospace; + border: none; + padding: 20px; + margin-bottom: 0; } //all below styles are overriding corrections for below (min-width: 992px) //below (min-width: 992px) these styles change .navbar-nav { - margin: 0; + margin: 0; } .navbar-right { - float: right !important; + float: right !important; } .navbar-nav > li { - float: left; + float: left; } .navbar-nav > li > a { - padding-top: 15px; - padding-bottom: 15px; + padding-top: 15px; + padding-bottom: 15px; } .center { - text-align: center; + text-align: center; } //fixed grid below 992 to prevent smaller responsive sizes @media (max-width: 992px) { - .container{ - max-width: 970px; - } + .container{ + max-width: 970px; + } } @media (max-width: 768px) { - body { - font-size: 14px; - } + body { + font-size: 14px; + } - h1{ - font-size: $font-size-m !important; - line-height: $font-size-m; - font-weight: $font-weight-reg; - margin-bottom: 24px; - } + h1{ + font-size: $font-size-m !important; + line-height: $font-size-m; + font-weight: $font-weight-reg; + margin-bottom: 24px; + } - h2{ - font-size: $font-size-m !important; - font-weight: $font-weight-reg; - } + h2{ + font-size: $font-size-m !important; + font-weight: $font-weight-reg; + } - h3{ - font-size: $font-size-m !important; - font-weight: $font-weight-reg; - } + h3{ + font-size: $font-size-m !important; + font-weight: $font-weight-reg; + } - h4{ - font-size: $font-size-reg !important; - font-weight: $font-weight-reg; - } + h4{ + font-size: $font-size-reg !important; + font-weight: $font-weight-reg; + } } diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss index 6ab4ad4e0..5bca1464a 100755 --- a/website/source/assets/stylesheets/_header.scss +++ b/website/source/assets/stylesheets/_header.scss @@ -29,7 +29,7 @@ } } } - + .buttons{ margin-top: 2px; //baseline everything diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss index b3355e22e..29d02586a 100755 --- a/website/source/assets/stylesheets/_home.scss +++ b/website/source/assets/stylesheets/_home.scss @@ -3,408 +3,408 @@ // -------------------------------------------------- #hero{ - position: relative; - text-align: center; - background: image-url('../images/nomad-giant.jpg') 0 0 no-repeat; - @include img-retina("../images/nomad-giant.jpg", "../images/nomad-giant.jpg", 624px, 358px); - background-size: cover !important; - overflow: hidden; + position: relative; + text-align: center; + background: image-url('../images/nomad-giant.jpg') 0 0 no-repeat; + @include img-retina("../images/nomad-giant.jpg", "../images/nomad-giant.jpg", 624px, 358px); + background-size: cover !important; + overflow: hidden; - &:before{ - content: ''; - position: absolute; - top: -20px; - left: 50%; - width: 1000px; - height: 1000px; - margin-left: -500px; - border-radius: 500px; - background-color: $white; - z-index: 1; - } + &:before{ + content: ''; + position: absolute; + top: -20px; + left: 50%; + width: 1000px; + height: 1000px; + margin-left: -500px; + border-radius: 500px; + background-color: $white; + z-index: 1; + } - #hero-graphic{ - position: absolute; - display: inline-block; - left: 50%; - top: 0; - width: 499px; - height: 340px; - margin-top: 38px; - margin-left: -250px; - z-index: 2; + #hero-graphic{ + position: absolute; + display: inline-block; + left: 50%; + top: 0; + width: 499px; + height: 340px; + margin-top: 38px; + margin-left: -250px; + z-index: 2; - #hero-logotype{ - position: absolute; - display: inline-block; - top: 75px; - left: 50%; - width: 115px; - height: 155px; - margin-left: -60px; - background: image-url('../images/hero-logotype.png') 0 0 no-repeat; - @include img-retina("../images/hero-logotype.png", "../images/hero-logotype@2x.png", 115px, 155px); - } + #hero-logotype{ + position: absolute; + display: inline-block; + top: 75px; + left: 50%; + width: 115px; + height: 155px; + margin-left: -60px; + background: image-url('../images/hero-logotype.png') 0 0 no-repeat; + @include img-retina("../images/hero-logotype.png", "../images/hero-logotype@2x.png", 115px, 155px); + } - #cubes{ - .cube{ - position: absolute; - top: 300px; - left: 248px; - opacity: 0.01; - @include transform( translate(0, 150px) ); - @include transition( all 1.5s $easeInOutBack ); + #cubes{ + .cube{ + position: absolute; + top: 300px; + left: 248px; + opacity: 0.01; + @include transform( translate(0, 150px) ); + @include transition( all 1.5s $easeInOutBack ); - &.in{ - @include transform( translate(0, 0) ); - opacity: 1; - } + &.in{ + @include transform( translate(0, 0) ); + opacity: 1; + } - .face { - @include transform-origin(0 0); - position: absolute; - height: 44px; - width: 44px; + .face { + @include transform-origin(0 0); + position: absolute; + height: 44px; + width: 44px; - &.top{ - background-color: $green; - @include transform(rotate(210deg) skewX(-30deg) scaleY(0.864) ); - } - &.left{ - background-color: $green-dark; - @include transform(rotate(90deg) skewX(-30deg) scaleY(0.864) ); - } - &.right{ - background-color: $green-light; - @include transform(rotate(-30deg) skewX(-30deg) scaleY(0.864) ); - } - } - } - } - } + &.top{ + background-color: $green; + @include transform(rotate(210deg) skewX(-30deg) scaleY(0.864) ); + } + &.left{ + background-color: $green-dark; + @include transform(rotate(90deg) skewX(-30deg) scaleY(0.864) ); + } + &.right{ + background-color: $green-light; + @include transform(rotate(-30deg) skewX(-30deg) scaleY(0.864) ); + } + } + } + } + } - #hero-text{ - position: relative; - padding-top: 400px; + #hero-text{ + position: relative; + padding-top: 400px; - #hero-text-content{ - position: relative; - z-index: 2; - padding-bottom: 40px; - } + #hero-text-content{ + position: relative; + z-index: 2; + padding-bottom: 40px; + } - h1{ - margin-top: 0; - color: $blue-dark; - font-size: $font-size-xl; - font-family: $font-family-blanc; - } + h1{ + margin-top: 0; + color: $blue-dark; + font-size: $font-size-xl; + font-family: $font-family-blanc; + } - h4{ - color: $blue-light; - font-family: $font-family-blanc; - } + h4{ + color: $blue-light; + font-family: $font-family-blanc; + } - #hero-btns{ - margin-top: 26px; - a{ + #hero-btns{ + margin-top: 26px; + a{ - } - } - } + } + } + } - #tag-line{ - margin: 15px 0 20px 0; - font-size: 24px; - font-weight: 300; - } + #tag-line{ + margin: 15px 0 20px 0; + font-size: 24px; + font-weight: 300; + } - p{ - margin-top: 60px; - text-align: left; - font-size: 18px; - font-weight: 300; - line-height: 2em; + p{ + margin-top: 60px; + text-align: left; + font-size: 18px; + font-weight: 300; + line-height: 2em; - .strong{ - font-size: 20px; - font-weight: 500; - } - } + .strong{ + font-size: 20px; + font-weight: 500; + } + } } .banner{ - margin-top: 120px; + margin-top: 120px; - .col{ - p{ - line-height: 24px; - } - } + .col{ + p{ + line-height: 24px; + } + } - &.gray-banner{ - .col{ - border: 1px solid $blue-faint; - } + &.gray-banner{ + .col{ + border: 1px solid $blue-faint; + } - p{ - color: $blue-light; - } - } + p{ + color: $blue-light; + } + } - &.green-banner{ - .col{ - border: 1px solid $blue-faint; - } + &.green-banner{ + .col{ + border: 1px solid $blue-faint; + } - p{ - color: $blue-dark; - } - } + p{ + color: $blue-dark; + } + } - &#cta-banner{ - margin-top: 0; - margin-bottom: 80px; + &#cta-banner{ + margin-top: 0; + margin-bottom: 80px; - .col{ - padding: 60px 20px; - } - } + .col{ + padding: 60px 20px; + } + } - .col{ - padding: 20px; - text-align: center; - border-radius: 3px; - } + .col{ + padding: 20px; + text-align: center; + border-radius: 3px; + } - p{ - margin-bottom: 0px; - margin-right: 30px; - font-size: $font-size-reg; - line-height: $font-size-reg; - font-family: $font-family-blanc-reg; - } + p{ + margin-bottom: 0px; + margin-right: 30px; + font-size: $font-size-reg; + line-height: $font-size-reg; + font-family: $font-family-blanc-reg; + } - p, a{ - display: inline-block; - } + p, a{ + display: inline-block; + } } #content{ - overflow: hidden; - margin-top: 120px; + overflow: hidden; + margin-top: 120px; - h2{ - margin-bottom: 120px; - text-align: center; - font-size: $font-size-m; - font-family: $font-family-blanc; - color: $green; - text-transform: uppercase; - } + h2{ + margin-bottom: 120px; + text-align: center; + font-size: $font-size-m; + font-family: $font-family-blanc; + color: $green; + text-transform: uppercase; + } - .feature{ - position: relative; - margin-bottom: 60px; - padding-bottom: 60px; - border-bottom: 1px solid $blue-faint; + .feature{ + position: relative; + margin-bottom: 60px; + padding-bottom: 60px; + border-bottom: 1px solid $blue-faint; - &:last-child{ - border-bottom: none; - } + &:last-child{ + border-bottom: none; + } - &#deploy{ - .feature-graphic{ - margin-top: -130px; - width: 1161px; - height: 735px; - background: image-url('../images/feature-deploy.png') 0 0 no-repeat; - @include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 1161px, 735px); - } - } + &#deploy{ + .feature-graphic{ + margin-top: -130px; + width: 1161px; + height: 735px; + background: image-url('../images/feature-deploy.png') 0 0 no-repeat; + @include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 1161px, 735px); + } + } - &#maintain{ - .feature-graphic{ - margin-top: -50px; - width: 1113px; - height: 689px; - background: image-url('../images/feature-manage.png') 0 0 no-repeat; - @include img-retina("../images/feature-manage.png", "../images/feature-manage@2x.png", 1113px, 689px); - } - } + &#maintain{ + .feature-graphic{ + margin-top: -50px; + width: 1113px; + height: 689px; + background: image-url('../images/feature-manage.png') 0 0 no-repeat; + @include img-retina("../images/feature-manage.png", "../images/feature-manage@2x.png", 1113px, 689px); + } + } - &#healing{ - .feature-graphic{ - margin-top: 80px; - width: 1009px; - height: 309px; - background: image-url('../images/feature-healing.png') 0 0 no-repeat; - @include img-retina("../images/feature-healing.png", "../images/feature-healing@2x.png", 1009px, 309px); - } - } + &#healing{ + .feature-graphic{ + margin-top: 80px; + width: 1009px; + height: 309px; + background: image-url('../images/feature-healing.png') 0 0 no-repeat; + @include img-retina("../images/feature-healing.png", "../images/feature-healing@2x.png", 1009px, 309px); + } + } - &#density{ - .feature-graphic{ - margin-top: 80px; - width: 1040px; - height: 409px; - background: image-url('../images/feature-density.png') 0 0 no-repeat; - @include img-retina("../images/feature-density.png", "../images/feature-density@2x.png", 1040px, 409px); - } - } + &#density{ + .feature-graphic{ + margin-top: 80px; + width: 1040px; + height: 409px; + background: image-url('../images/feature-density.png') 0 0 no-repeat; + @include img-retina("../images/feature-density.png", "../images/feature-density@2x.png", 1040px, 409px); + } + } - &#partners{ - .partner-logos{ - .docker-wrap{ - border-right: 1px solid $blue-faint; + &#partners{ + .partner-logos{ + .docker-wrap{ + border-right: 1px solid $blue-faint; - .partner-logo{ - display: inline-block; - width: 120px; - height: 180px; + .partner-logo{ + display: inline-block; + width: 120px; + height: 180px; - &.docker-logo{ - background: image-url('../images/partner-docker.png') center center no-repeat; - @include img-retina("../images/partner-docker.png", "../images/partner-docker@2x.png", 100px, 84px); - } - } - } + &.docker-logo{ + background: image-url('../images/partner-docker.png') center center no-repeat; + @include img-retina("../images/partner-docker.png", "../images/partner-docker@2x.png", 100px, 84px); + } + } + } - .cloud-wrap{ - .partner-logo{ - float: left; - width: 25%; - height: 180px; + .cloud-wrap{ + .partner-logo{ + float: left; + width: 25%; + height: 180px; - &.aws-logo{ - background: image-url('../images/partner-amazon.png') center center no-repeat; - @include img-retina("../images/partner-amazon.png", "../images/partner-amazon@2x.png", 153px, 56px); - } - &.google-logo{ - background: image-url('../images/partner-google.png') center center no-repeat; - @include img-retina("../images/partner-google.png", "../images/partner-google@2x.png", 135px, 87px); - } - &.microsoft-logo{ - background: image-url('../images/partner-microsoft.png') center center no-repeat; - @include img-retina("../images/partner-microsoft.png", "../images/partner-microsoft@2x.png", 188px, 84px); - } - &.engineyard-logo{ - background: image-url('../images/partner-engineyard.png') center center no-repeat; - @include img-retina("../images/partner-engineyard.png", "../images/partner-engineyard@2x.png", 178px, 37px); - } - &.digitalocean-logo{ - background: image-url('../images/partner-digitalocean.png') center center no-repeat; - @include img-retina("../images/partner-digitalocean.png", "../images/partner-digitalocean@2x.png", 134px, 85px); - } - } - } - } - } + &.aws-logo{ + background: image-url('../images/partner-amazon.png') center center no-repeat; + @include img-retina("../images/partner-amazon.png", "../images/partner-amazon@2x.png", 153px, 56px); + } + &.google-logo{ + background: image-url('../images/partner-google.png') center center no-repeat; + @include img-retina("../images/partner-google.png", "../images/partner-google@2x.png", 135px, 87px); + } + &.microsoft-logo{ + background: image-url('../images/partner-microsoft.png') center center no-repeat; + @include img-retina("../images/partner-microsoft.png", "../images/partner-microsoft@2x.png", 188px, 84px); + } + &.engineyard-logo{ + background: image-url('../images/partner-engineyard.png') center center no-repeat; + @include img-retina("../images/partner-engineyard.png", "../images/partner-engineyard@2x.png", 178px, 37px); + } + &.digitalocean-logo{ + background: image-url('../images/partner-digitalocean.png') center center no-repeat; + @include img-retina("../images/partner-digitalocean.png", "../images/partner-digitalocean@2x.png", 134px, 85px); + } + } + } + } + } - .feature-graphic{ - margin: 0 auto; - } + .feature-graphic{ + margin: 0 auto; + } - .feature-header{ + .feature-header{ - &.right{ - h3, p{ - text-align: right; - display: block; - float: right; - } - } + &.right{ + h3, p{ + text-align: right; + display: block; + float: right; + } + } - h3{ - margin: 30px 0 20px 0; - color: $blue-dark; - letter-spacing: 1px; - font-size: $font-size-l; - font-family: $font-family-blanc; - line-height: 1.25em; - max-width: 640px; - } + h3{ + margin: 30px 0 20px 0; + color: $blue-dark; + letter-spacing: 1px; + font-size: $font-size-l; + font-family: $font-family-blanc; + line-height: 1.25em; + max-width: 640px; + } - p{ - margin-bottom: 30px; - color: $blue-light; - font-size: $font-size-reg+2; - font-family: $font-family-blanc-reg; - line-height: 1.75em; - max-width: 480px; - } - } + p{ + margin-bottom: 30px; + color: $blue-light; + font-size: $font-size-reg+2; + font-family: $font-family-blanc-reg; + line-height: 1.75em; + max-width: 480px; + } + } - .feature-footer{ - margin-top: -50px; + .feature-footer{ + margin-top: -50px; - p{ - display: inline-block; - color: $blue-dark; - font-size: $font-size-reg; - font-family: $font-family-blanc; - line-height: 1.75em; - max-width: 320px; - padding-left: 20px; - border-left: 1px solid $blue-faint; - } + p{ + display: inline-block; + color: $blue-dark; + font-size: $font-size-reg; + font-family: $font-family-blanc; + line-height: 1.75em; + max-width: 320px; + padding-left: 20px; + border-left: 1px solid $blue-faint; + } - .docker-outline-logo{ - display: inline-block; - width: 80px; - height: 67px; - position: relative; - top: 12px; - margin-left: 8px; - background: image-url('../images/partner-docker.png') 0 0 no-repeat; - @include img-retina("../images/partner-docker.png", "../images/partner-docker@2x.png", 80px, 67px); - } + .docker-outline-logo{ + display: inline-block; + width: 80px; + height: 67px; + position: relative; + top: 12px; + margin-left: 8px; + background: image-url('../images/partner-docker.png') 0 0 no-repeat; + @include img-retina("../images/partner-docker.png", "../images/partner-docker@2x.png", 80px, 67px); + } - a{ - margin-bottom: 15px; - margin-left: 15px; + a{ + margin-bottom: 15px; + margin-left: 15px; - &:first-child{ - margin-left: 0; - } - } - } - } + &:first-child{ + margin-left: 0; + } + } + } + } - #cta { - position: relative; - padding: 160px 0; - background: image-url('../images/bg-iconscrud.png') center center no-repeat; - @include img-retina("../images/bg-icons.png", "../images/bg-icons@2x.png", 669px, 260px); - background-position: center center; - border-top: 1px solid $faint-gray; - border-bottom: 1px solid $faint-gray; + #cta { + position: relative; + padding: 160px 0; + background: image-url('../images/bg-iconscrud.png') center center no-repeat; + @include img-retina("../images/bg-icons.png", "../images/bg-icons@2x.png", 669px, 260px); + background-position: center center; + border-top: 1px solid $faint-gray; + border-bottom: 1px solid $faint-gray; - a{ - margin-bottom: 5px; - } + a{ + margin-bottom: 5px; + } - p{ - margin-top: 10px; - color: $black; - font-size: 14px; - font-weight: 600; - line-height: 1.5esm; + p{ + margin-top: 10px; + color: $black; + font-size: 14px; + font-weight: 600; + line-height: 1.5esm; - &.cta-gray{ - color: $gray; - font-weight: 300; - } - } + &.cta-gray{ + color: $gray; + font-weight: 300; + } + } - .outline-btn { - padding: 16px 40px; - display: inline-block; - &:focus { - outline: 0; - } - } - } + .outline-btn { + padding: 16px 40px; + display: inline-block; + &:focus { + outline: 0; + } + } + } } @media (min-width: 1200px) { @@ -417,270 +417,270 @@ } @media (min-width: 992px) and (max-width:1200px) { - #cta a { - margin-top: 15px; - font-size: 18px; - } + #cta a { + margin-top: 15px; + font-size: 18px; + } } @media (min-width: 768px) and (max-width:992px) { - #cta a { - margin-top: 10px; - } + #cta a { + margin-top: 10px; + } } @media (max-width: 992px) { - #content{ - .feature{ - &#deploy{ - .feature-graphic{ - margin-top: -60px; - width: 768px; - height: 486px; - background: image-url('../images/feature-deploy.png') 0 0 no-repeat; - @include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 768px, 486px); - } + #content{ + .feature{ + &#deploy{ + .feature-graphic{ + margin-top: -60px; + width: 768px; + height: 486px; + background: image-url('../images/feature-deploy.png') 0 0 no-repeat; + @include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 768px, 486px); + } - .feature-footer{ - margin-top: 0; - } - } + .feature-footer{ + margin-top: 0; + } + } - &#maintain{ - .feature-graphic{ - margin-top: -50px; - width: 768px; - height: 475px; - background: image-url('../images/feature-manage.png') 0 0 no-repeat; - @include img-retina("../images/feature-manage.png", "../images/feature-manage@2x.png", 768px, 475px); - } - } + &#maintain{ + .feature-graphic{ + margin-top: -50px; + width: 768px; + height: 475px; + background: image-url('../images/feature-manage.png') 0 0 no-repeat; + @include img-retina("../images/feature-manage.png", "../images/feature-manage@2x.png", 768px, 475px); + } + } - &#density{ - .feature-graphic{ - width: 768px; - height: 302px; - background: image-url('../images/feature-density.png') 0 0 no-repeat; - @include img-retina("../images/feature-density.png", "../images/feature-density@2x.png", 768px, 302px); - } - } + &#density{ + .feature-graphic{ + width: 768px; + height: 302px; + background: image-url('../images/feature-density.png') 0 0 no-repeat; + @include img-retina("../images/feature-density.png", "../images/feature-density@2x.png", 768px, 302px); + } + } - &#partners{ - .partner-logos{ - .docker-wrap{ - //border: none; - .partner-logo{ - @include scale(.8); - margin-left: -18px; - } - } - .cloud-wrap{ - .partner-logo{ - @include scale(.8); - } - } - } - } - } - } + &#partners{ + .partner-logos{ + .docker-wrap{ + //border: none; + .partner-logo{ + @include scale(.8); + margin-left: -18px; + } + } + .cloud-wrap{ + .partner-logo{ + @include scale(.8); + } + } + } + } + } + } } @media (max-width: 768px) { - #hero{ - #hero-graphic{ - @include scale(.8); - } - } + #hero{ + #hero-graphic{ + @include scale(.8); + } + } - #content{ - .feature{ - &#deploy{ - .feature-graphic{ - margin-top: 0px; - width: 480px; - height: 304px; - background: image-url('../images/feature-deploy.png') 0 0 no-repeat; - @include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 480px, 304px); - } + #content{ + .feature{ + &#deploy{ + .feature-graphic{ + margin-top: 0px; + width: 480px; + height: 304px; + background: image-url('../images/feature-deploy.png') 0 0 no-repeat; + @include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 480px, 304px); + } - .feature-footer{ - margin-top: $small-pad; + .feature-footer{ + margin-top: $small-pad; - .docker-outline-logo{ - width: 94px; - height: 63px; - background: image-url('../images/icon-docker-outline.png') 0 0 no-repeat; - @include img-retina("../images/icon-docker-outline.png", "../images/icon-docker-outline@2x.png", 94px, 63px); - } - } - } + .docker-outline-logo{ + width: 94px; + height: 63px; + background: image-url('../images/icon-docker-outline.png') 0 0 no-repeat; + @include img-retina("../images/icon-docker-outline.png", "../images/icon-docker-outline@2x.png", 94px, 63px); + } + } + } - &#maintain{ - .feature-graphic{ - margin-top: $small-pad; - width: 480px; - height: 297px; - background: image-url('../images/feature-manage.png') 0 0 no-repeat; - @include img-retina("../images/feature-manage.png", "../images/feature-manage@2x.png", 480px, 297px); - } - } + &#maintain{ + .feature-graphic{ + margin-top: $small-pad; + width: 480px; + height: 297px; + background: image-url('../images/feature-manage.png') 0 0 no-repeat; + @include img-retina("../images/feature-manage.png", "../images/feature-manage@2x.png", 480px, 297px); + } + } - &#healing{ - .feature-graphic{ - margin-top: $small-pad; - width: 480px; - height: 147px; - background: image-url('../images/feature-healing.png') 0 0 no-repeat; - @include img-retina("../images/feature-healing.png", "../images/feature-healing@2x.png", 480px, 147px); - } - } + &#healing{ + .feature-graphic{ + margin-top: $small-pad; + width: 480px; + height: 147px; + background: image-url('../images/feature-healing.png') 0 0 no-repeat; + @include img-retina("../images/feature-healing.png", "../images/feature-healing@2x.png", 480px, 147px); + } + } - &#density{ - .feature-graphic{ - margin-top: $small-pad; - width: 480px; - height: 189px; - background: image-url('../images/feature-density.png') 0 0 no-repeat; - @include img-retina("../images/feature-density.png", "../images/feature-density@2x.png", 480px, 189px); - } - } + &#density{ + .feature-graphic{ + margin-top: $small-pad; + width: 480px; + height: 189px; + background: image-url('../images/feature-density.png') 0 0 no-repeat; + @include img-retina("../images/feature-density.png", "../images/feature-density@2x.png", 480px, 189px); + } + } - &#partners{ - .partner-logo{ - display: block !important; - float: none !important; - width: 100% !important; - margin: 0 auto; - -webkit-transform: scale(1) !important; - -ms-transform: scale(1) !important; - transform: scale(1) !important; - margin-left: 0 !important; - height: 130px !important; - } + &#partners{ + .partner-logo{ + display: block !important; + float: none !important; + width: 100% !important; + margin: 0 auto; + -webkit-transform: scale(1) !important; + -ms-transform: scale(1) !important; + transform: scale(1) !important; + margin-left: 0 !important; + height: 130px !important; + } - p{ - padding: 0 20px; - } - } - } + p{ + padding: 0 20px; + } + } + } - .feature-header{ - h3,p{ - text-align: center !important; - max-width: none !important; - float: none !important; - } - } - } + .feature-header{ + h3,p{ + text-align: center !important; + max-width: none !important; + float: none !important; + } + } + } - .banner{ - padding: 18px; - margin: 0 20px; + .banner{ + padding: 18px; + margin: 0 20px; - .col{ - text-align: center; + .col{ + text-align: center; - p{ - display: block; - margin-right: 0; - margin-bottom: $small-pad; - } - } - } + p{ + display: block; + margin-right: 0; + margin-bottom: $small-pad; + } + } + } - #cta{ - .intro{ - text-align: center; - p{ - text-align: center; - margin-bottom: 15px; - } - } - } + #cta{ + .intro{ + text-align: center; + p{ + text-align: center; + margin-bottom: 15px; + } + } + } } @media (max-width: 480px) { - #hero{ - background: none; + #hero{ + background: none; - &:before{ - display: none; - } + &:before{ + display: none; + } - #hero-graphic{ - height: 60px; - margin-top: 0; - @include scale(.54); - } + #hero-graphic{ + height: 60px; + margin-top: 0; + @include scale(.54); + } - #hero-text{ - position: relative; - padding-top: 220px; - } - } + #hero-text{ + position: relative; + padding-top: 220px; + } + } - #content{ - .feature{ - &#deploy{ - .feature-graphic{ - width: 280px; - height: 177px; - background: image-url('../images/feature-deploy.png') 0 0 no-repeat; - @include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 280px, 177px); - } - .feature-footer{ - .docker-outline-logo{ - display: block; - } - } - } + #content{ + .feature{ + &#deploy{ + .feature-graphic{ + width: 280px; + height: 177px; + background: image-url('../images/feature-deploy.png') 0 0 no-repeat; + @include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 280px, 177px); + } + .feature-footer{ + .docker-outline-logo{ + display: block; + } + } + } - &#maintain{ - .feature-graphic{ - margin-top: $small-pad; - width: 280px; - height: 173px; - background: image-url('../images/feature-manage.png') 0 0 no-repeat; - @include img-retina("../images/feature-manage.png", "../images/feature-manage@2x.png", 280px, 173px); - } - } + &#maintain{ + .feature-graphic{ + margin-top: $small-pad; + width: 280px; + height: 173px; + background: image-url('../images/feature-manage.png') 0 0 no-repeat; + @include img-retina("../images/feature-manage.png", "../images/feature-manage@2x.png", 280px, 173px); + } + } - &#healing{ - .feature-graphic{ - width: 280px; - height: 86px; - background: image-url('../images/feature-healing.png') 0 0 no-repeat; - @include img-retina("../images/feature-healing.png", "../images/feature-healing@2x.png", 280px, 86px); - } - } + &#healing{ + .feature-graphic{ + width: 280px; + height: 86px; + background: image-url('../images/feature-healing.png') 0 0 no-repeat; + @include img-retina("../images/feature-healing.png", "../images/feature-healing@2x.png", 280px, 86px); + } + } - &#density{ - .feature-graphic{ - width: 280px; - height: 110px; - background: image-url('../images/feature-density.png') 0 0 no-repeat; - @include img-retina("../images/feature-density.png", "../images/feature-density@2x.png", 280px, 110px); - } - } - } - } + &#density{ + .feature-graphic{ + width: 280px; + height: 110px; + background: image-url('../images/feature-density.png') 0 0 no-repeat; + @include img-retina("../images/feature-density.png", "../images/feature-density@2x.png", 280px, 110px); + } + } + } + } } @media (max-width: 320px) { - #hero{ - #diagram{ - width: 100%; - height: 132px; - background: image-url('../images/hero.png') center 0 no-repeat; - @include img-retina("../images/hero.png", "../images/hero@2x.png", 320px, 132px); - } - } + #hero{ + #diagram{ + width: 100%; + height: 132px; + background: image-url('../images/hero.png') center 0 no-repeat; + @include img-retina("../images/hero.png", "../images/hero@2x.png", 320px, 132px); + } + } - #cta a { - font-size: 14px; - font-weight: 400; - } + #cta a { + font-size: 14px; + font-weight: 400; + } } diff --git a/website/source/assets/stylesheets/_livestream.scss b/website/source/assets/stylesheets/_livestream.scss index 7bc651348..8d9253a8e 100644 --- a/website/source/assets/stylesheets/_livestream.scss +++ b/website/source/assets/stylesheets/_livestream.scss @@ -1,38 +1,37 @@ body.livestream { - background-color: black; + background-color: black; } .livestream-container { - display: block; + display: block; } .livestream-video { - display: block; - margin: 0 auto; - max-width: 1000px; + display: block; + margin: 0 auto; + max-width: 1000px; } #live-stream-video { - margin-top: 15px; - border: 0 none transparent; - width: 100%; + margin-top: 15px; + border: 0 none transparent; + width: 100%; + height: 650px; + + @media (min-width: 1200px) { height: 650px; + } - @media (min-width: 1200px) { - height: 650px; - } + @media (max-width: 992px) { + height: 500px; + } - @media (max-width: 992px) { - height: 500px; - } + @media (max-width: 768px) { + height: 325px; + } - @media (max-width: 768px) { - height: 325px; - } - - @media (max-width: 422px) { - height: 225px; - } + @media (max-width: 422px) { + height: 225px; + } } - diff --git a/website/source/assets/stylesheets/_mixins.scss b/website/source/assets/stylesheets/_mixins.scss index 46f7bb2f7..7ccaf4b82 100755 --- a/website/source/assets/stylesheets/_mixins.scss +++ b/website/source/assets/stylesheets/_mixins.scss @@ -86,87 +86,87 @@ // Single side border-radius @mixin border-top-radius($radius) { border-top-right-radius: $radius; - border-top-left-radius: $radius; + border-top-left-radius: $radius; } @mixin border-right-radius($radius) { border-bottom-right-radius: $radius; - border-top-right-radius: $radius; + border-top-right-radius: $radius; } @mixin border-bottom-radius($radius) { border-bottom-right-radius: $radius; - border-bottom-left-radius: $radius; + border-bottom-left-radius: $radius; } @mixin border-left-radius($radius) { border-bottom-left-radius: $radius; - border-top-left-radius: $radius; + border-top-left-radius: $radius; } // Drop shadows @mixin box-shadow($shadow) { -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 - box-shadow: $shadow; + box-shadow: $shadow; } // Transitions @mixin transition($transition) { -webkit-transition: $transition; - transition: $transition; + transition: $transition; } @mixin transition-delay($transition-delay) { -webkit-transition-delay: $transition-delay; - transition-delay: $transition-delay; + transition-delay: $transition-delay; } @mixin transition-duration($transition-duration) { -webkit-transition-duration: $transition-duration; - transition-duration: $transition-duration; + transition-duration: $transition-duration; } @mixin transition-transform($transition) { -webkit-transition: -webkit-transform $transition; - -moz-transition: -moz-transform $transition; - -o-transition: -o-transform $transition; - transition: transform $transition; + -moz-transition: -moz-transform $transition; + -o-transition: -o-transform $transition; + transition: transform $transition; } // Transformations @mixin transform($transform...) { - -webkit-transform: $transform; - -ms-transform: $transform; - transform: $transform; + -webkit-transform: $transform; + -ms-transform: $transform; + transform: $transform; } @mixin rotate($degrees) { -webkit-transform: rotate($degrees); - -ms-transform: rotate($degrees); // IE9+ - transform: rotate($degrees); + -ms-transform: rotate($degrees); // IE9+ + transform: rotate($degrees); } @mixin scale($ratio) { -webkit-transform: scale($ratio); - -ms-transform: scale($ratio); // IE9+ - transform: scale($ratio); + -ms-transform: scale($ratio); // IE9+ + transform: scale($ratio); } @mixin translate($x, $y) { -webkit-transform: translate($x, $y); - -ms-transform: translate($x, $y); // IE9+ - transform: translate($x, $y); + -ms-transform: translate($x, $y); // IE9+ + transform: translate($x, $y); } @mixin skew($x, $y) { -webkit-transform: skew($x, $y); - -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ - transform: skew($x, $y); + -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ + transform: skew($x, $y); } @mixin translate3d($x, $y, $z) { -webkit-transform: translate3d($x, $y, $z); - transform: translate3d($x, $y, $z); + transform: translate3d($x, $y, $z); } //transform origin @mixin transform-origin ($origin) { - moz-transform-origin: $origin; - -o-transform-origin: $origin; - -ms-transform-origin: $origin; - -webkit-transform-origin: $origin; - transform-origin: $origin; + moz-transform-origin: $origin; + -o-transform-origin: $origin; + -ms-transform-origin: $origin; + -webkit-transform-origin: $origin; + transform-origin: $origin; } // Backface visibility @@ -175,25 +175,25 @@ // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples @mixin backface-visibility($visibility) { -webkit-backface-visibility: $visibility; - -moz-backface-visibility: $visibility; - backface-visibility: $visibility; + -moz-backface-visibility: $visibility; + backface-visibility: $visibility; } // Box sizing @mixin box-sizing($boxmodel) { -webkit-box-sizing: $boxmodel; - -moz-box-sizing: $boxmodel; - box-sizing: $boxmodel; + -moz-box-sizing: $boxmodel; + box-sizing: $boxmodel; } // User select // For selecting text on the page @mixin user-select($select) { -webkit-user-select: $select; - -moz-user-select: $select; - -ms-user-select: $select; // IE10+ - -o-user-select: $select; - user-select: $select; + -moz-user-select: $select; + -ms-user-select: $select; // IE10+ + -o-user-select: $select; + user-select: $select; } // Resize anything @@ -205,21 +205,21 @@ // CSS3 Content Columns @mixin content-columns($column-count, $column-gap: $grid-gutter-width) { -webkit-column-count: $column-count; - -moz-column-count: $column-count; - column-count: $column-count; + -moz-column-count: $column-count; + column-count: $column-count; -webkit-column-gap: $column-gap; - -moz-column-gap: $column-gap; - column-gap: $column-gap; + -moz-column-gap: $column-gap; + column-gap: $column-gap; } // Optional hyphenation @mixin hyphens($mode: auto) { word-wrap: break-word; -webkit-hyphens: $mode; - -moz-hyphens: $mode; - -ms-hyphens: $mode; // IE10+ - -o-hyphens: $mode; - hyphens: $mode; + -moz-hyphens: $mode; + -ms-hyphens: $mode; // IE10+ + -o-hyphens: $mode; + hyphens: $mode; } // Opacity @@ -433,7 +433,7 @@ .open .dropdown-toggle& { color: $color; background-color: darken($background, 8%); - border-color: darken($border, 12%); + border-color: darken($border, 12%); } &:active, &.active, @@ -449,7 +449,7 @@ &:active, &.active { background-color: $background; - border-color: $border + border-color: $border } } } @@ -747,10 +747,10 @@ background-repeat: no-repeat; @media (min--moz-device-pixel-ratio: 1.3), - (-o-min-device-pixel-ratio: 2.6/2), - (-webkit-min-device-pixel-ratio: 1.3), - (min-device-pixel-ratio: 1.3), - (min-resolution: 1.3dppx) { + (-o-min-device-pixel-ratio: 2.6/2), + (-webkit-min-device-pixel-ratio: 1.3), + (min-device-pixel-ratio: 1.3), + (min-resolution: 1.3dppx) { /* on retina, use image that's scaled by 2 */ background-image: url($image); background-size: $width $height; diff --git a/website/source/assets/stylesheets/_utilities.scss b/website/source/assets/stylesheets/_utilities.scss index a1543f039..5ef814442 100755 --- a/website/source/assets/stylesheets/_utilities.scss +++ b/website/source/assets/stylesheets/_utilities.scss @@ -6,62 +6,62 @@ // // ------------------------- @mixin anti-alias() { - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; } @mixin open-light() { - font-family: $font-family-open-sans; - font-weight: 300; + font-family: $font-family-open-sans; + font-weight: 300; } @mixin open() { - font-family: $font-family-open-sans; - font-weight: 400; + font-family: $font-family-open-sans; + font-weight: 400; } @mixin open-sb() { - font-family: $font-family-open-sans; - font-weight: 600; + font-family: $font-family-open-sans; + font-weight: 600; } @mixin open-bold() { - font-family: $font-family-open-sans; - font-weight: 700; + font-family: $font-family-open-sans; + font-weight: 700; } @mixin skewY($skew) { - -webkit-transform: skewY($skew); - -moz-transform: skewY($skew); - -ms-transform: skewY($skew); - -o-transform: skewY($skew); - transform: skewY($skew); + -webkit-transform: skewY($skew); + -moz-transform: skewY($skew); + -ms-transform: skewY($skew); + -o-transform: skewY($skew); + transform: skewY($skew); } @mixin v-nav-style-core{ - color: $gray-darker; - font-family: $font-family-blanc-reg; - font-size: 13px; - text-transform: uppercase; - letter-spacing: 0.0625em; + color: $gray-darker; + font-family: $font-family-blanc-reg; + font-size: 13px; + text-transform: uppercase; + letter-spacing: 0.0625em; } @mixin v-nav-style{ - margin: 0 15px; - padding: 0; - line-height: 22px; - @include v-nav-style-core(); - @include transition( color 0.3s ease ); + margin: 0 15px; + padding: 0; + line-height: 22px; + @include v-nav-style-core(); + @include transition( color 0.3s ease ); - &:hover{ - color: $green-dark; - @include transition( color 0.3s ease ); - background-color: transparent; - } + &:hover{ + color: $green-dark; + @include transition( color 0.3s ease ); + background-color: transparent; + } } @mixin bez-1-transition{ - @include transition( all 300ms ease-in-out ); + @include transition( all 300ms ease-in-out ); } @@ -90,121 +90,121 @@ } #demo-app .loading-bar{ - display: block; - -webkit-animation: shift-rightwards 2s ease-in-out infinite; - -moz-animation: shift-rightwards 2s ease-in-out infinite; - -ms-animation: shift-rightwards 2s ease-in-out infinite; - -o-animation: shift-rightwards 2s ease-in-out infinite; - animation: shift-rightwards 2s ease-in-out infinite; - -webkit-animation-delay: .4s; - -moz-animation-delay: .4s; - -o-animation-delay: .4s; - animation-delay: .4s; + display: block; + -webkit-animation: shift-rightwards 2s ease-in-out infinite; + -moz-animation: shift-rightwards 2s ease-in-out infinite; + -ms-animation: shift-rightwards 2s ease-in-out infinite; + -o-animation: shift-rightwards 2s ease-in-out infinite; + animation: shift-rightwards 2s ease-in-out infinite; + -webkit-animation-delay: .4s; + -moz-animation-delay: .4s; + -o-animation-delay: .4s; + animation-delay: .4s; } .loading-bar{ - position: fixed; - display: none; - bottom: 0; - left: 0; - right: 0; - height: 2px; - z-index: 800; - background: $blue; - -webkit-transform: translateX(100%); - -moz-transform: translateX(100%); - -o-transform: translateX(100%); - transform: translateX(100%); + position: fixed; + display: none; + bottom: 0; + left: 0; + right: 0; + height: 2px; + z-index: 800; + background: $blue; + -webkit-transform: translateX(100%); + -moz-transform: translateX(100%); + -o-transform: translateX(100%); + transform: translateX(100%); } @-webkit-keyframes shift-rightwards { - 0% - { - @include translate(-100%, 0); - } + 0% + { + @include translate(-100%, 0); + } - 40% - { - @include translate(0%, 0); - } + 40% + { + @include translate(0%, 0); + } - 60% - { - @include translate(0%, 0); - } + 60% + { + @include translate(0%, 0); + } - 100% - { - @include translate(100%, 0); - } + 100% + { + @include translate(100%, 0); + } } @-moz-keyframes shift-rightwards { - 0% - { - @include translate(-100%, 0); - } + 0% + { + @include translate(-100%, 0); + } - 40% - { - @include translate(0%, 0); - } + 40% + { + @include translate(0%, 0); + } - 60% - { - @include translate(0%, 0); - } + 60% + { + @include translate(0%, 0); + } - 100% - { - @include translate(100%, 0); - } + 100% + { + @include translate(100%, 0); + } } @-o-keyframes shift-rightwards { - 0% - { - @include translate(-100%, 0); - } + 0% + { + @include translate(-100%, 0); + } - 40% - { - @include translate(0%, 0); - } + 40% + { + @include translate(0%, 0); + } - 60% - { - @include translate(0%, 0); - } + 60% + { + @include translate(0%, 0); + } - 100% - { - @include translate(100%, 0); - } + 100% + { + @include translate(100%, 0); + } } @keyframes shift-rightwards { - 0% - { - @include translate(-100%, 0); - } + 0% + { + @include translate(-100%, 0); + } - 40% - { - @include translate(0%, 0); - } + 40% + { + @include translate(0%, 0); + } - 60% - { - @include translate(0%, 0); - } + 60% + { + @include translate(0%, 0); + } - 100% - { - @include translate(100%, 0); - } + 100% + { + @include translate(100%, 0); + } } diff --git a/website/source/assets/stylesheets/_variables.scss b/website/source/assets/stylesheets/_variables.scss index 546424316..c93e9421c 100755 --- a/website/source/assets/stylesheets/_variables.scss +++ b/website/source/assets/stylesheets/_variables.scss @@ -6,75 +6,75 @@ // Global values // -------------------------------------------------- -$header-height: 90px; -$btn-border-radius: 4px; -$el-border-radius: 6px; +$header-height: 90px; +$btn-border-radius: 4px; +$el-border-radius: 6px; // colors // ------------------------- -$white: #fff; -$black: #000; -$gray: #929199; -$light-gray: #C2C1C7; -$faint-gray: #E3E3EA; -$green: #56cdad; -$green-dark: #449b82; -$green-light: #9bdb9c; -$green-faint: #E3F5E3; -$blue-dark: #4e5859; -$blue-light: #89999A; -$blue: #00BFE0; -$blue-faint: #E0E8E8; -$light-black: #242424; -$orange: #e78c5b; -$gray-dark: #3B4142; //#4e5859; -$gray: #777; -$gray-light: #939393; -$gray-lighter: #979797; -$red: #dd4e58; -$red-dark: #c5454e; -$purple: #822ff7; -$light-purple: #f7f3f9; -$btn-color: #4592C5; +$white: #fff; +$black: #000; +$gray: #929199; +$light-gray: #C2C1C7; +$faint-gray: #E3E3EA; +$green: #56cdad; +$green-dark: #449b82; +$green-light: #9bdb9c; +$green-faint: #E3F5E3; +$blue-dark: #4e5859; +$blue-light: #89999A; +$blue: #00BFE0; +$blue-faint: #E0E8E8; +$light-black: #242424; +$orange: #e78c5b; +$gray-dark: #3B4142; //#4e5859; +$gray: #777; +$gray-light: #939393; +$gray-lighter: #979797; +$red: #dd4e58; +$red-dark: #c5454e; +$purple: #822ff7; +$light-purple: #f7f3f9; +$btn-color: #4592C5; // Scaffolding // ------------------------- -$body-bg: #fff; -$text-color: $gray; +$body-bg: #fff; +$text-color: $gray; // Links // ------------------------- -$link-color: $red-dark; -$link-hover-color: darken($link-color, 15%); +$link-color: $red-dark; +$link-hover-color: darken($link-color, 15%); // Typography // ------------------------- -$font-family-open-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -$font-family-blanc: 'Blanc-Light', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; -$font-family-blanc-reg: 'Blanc-Regular', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; -$font-weight-xl: 300; -$font-weight-reg: 400; -$font-weight-sb: 600; -$font-weight-xb: 700; -$font-size-xl: 44px; -$font-size-l: 36px; -$font-size-m: 28px; -$font-size-reg: 16px; +$font-family-open-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; +$font-family-blanc: 'Blanc-Light', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; +$font-family-blanc-reg: 'Blanc-Regular', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; +$font-weight-xl: 300; +$font-weight-reg: 400; +$font-weight-sb: 600; +$font-weight-xb: 700; +$font-size-xl: 44px; +$font-size-l: 36px; +$font-size-m: 28px; +$font-size-reg: 16px; -$text-shadow: 1px 1px 1px #000; -$shadow: $text-shadow; +$text-shadow: 1px 1px 1px #000; +$shadow: $text-shadow; //margin + padding -$xsmall-pad: 20px; -$small-pad: 30px; -$med-pad: 70px; -$large-pad: 120px; -$xl-pad: 150px; +$xsmall-pad: 20px; +$small-pad: 30px; +$med-pad: 70px; +$large-pad: 120px; +$xl-pad: 150px; -$light-outline: #f7f7f7; +$light-outline: #f7f7f7; // -$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55); -$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275); +$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55); +$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);