From 6593f945eb3f96ebe3ac8701862dae6d45c8a358 Mon Sep 17 00:00:00 2001 From: captainill Date: Mon, 9 Nov 2015 13:48:29 -0800 Subject: [PATCH] whitespace --- .../source/assets/javascripts/_app/docs.js | 76 +-- .../assets/javascripts/_app/homepage.js | 15 +- .../source/assets/javascripts/_app/util.js | 50 +- .../source/assets/stylesheets/_buttons.scss | 78 +-- .../source/assets/stylesheets/_community.scss | 20 +- website/source/assets/stylesheets/_docs.scss | 396 +++++------ .../source/assets/stylesheets/_downloads.scss | 108 +-- .../source/assets/stylesheets/_global.scss | 72 +- .../source/assets/stylesheets/_header.scss | 2 +- website/source/assets/stylesheets/_home.scss | 644 +++++++++--------- .../source/assets/stylesheets/_jumbotron.scss | 54 +- .../source/assets/stylesheets/_utilities.scss | 21 +- .../source/assets/stylesheets/_variables.scss | 72 +- 13 files changed, 803 insertions(+), 805 deletions(-) diff --git a/website/source/assets/javascripts/_app/docs.js b/website/source/assets/javascripts/_app/docs.js index a0ab205cf0..9a44b86b0f 100644 --- a/website/source/assets/javascripts/_app/docs.js +++ b/website/source/assets/javascripts/_app/docs.js @@ -1,48 +1,48 @@ (function(){ -var mainContentMin = 600; + var mainContentMin = 600; -var Init = { + var Init = { - start: function(){ - var classname = this.hasClass(document.body, 'page-sub'); + start: function(){ + var classname = this.hasClass(document.body, 'page-sub'); - if (classname) { - this.addEventListeners(); + if (classname) { + this.addEventListeners(); + } + }, + + hasClass: function (elem, className) { + return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' '); + }, + + addEventListeners: function(){ + var _this = this; + //console.log(document.querySelectorAll('.navbar-static-top')[0]); + window.addEventListener('resize', _this.resizeImage, false); + + this.resizeImage(); + }, + + resizeImage: function(){ + + var header = document.getElementById('header'), + footer = document.getElementById('footer'), + main = document.getElementById('main-content'), + vp = window.innerHeight, + bodyHeight = document.body.clientHeight, + hHeight = header.clientHeight, + fHeight = footer.clientHeight, + withMinHeight = hHeight + fHeight + mainContentMin; + + if(withMinHeight < vp && bodyHeight < vp){ + var newHeight = mainContentMin + (vp-withMinHeight) + 'px'; + main.style.height = newHeight; + } } - }, - hasClass: function (elem, className) { - return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' '); - }, + }; - addEventListeners: function(){ - var _this = this; - //console.log(document.querySelectorAll('.navbar-static-top')[0]); - window.addEventListener('resize', _this.resizeImage, false); - - this.resizeImage(); - }, - - resizeImage: function(){ - - var header = document.getElementById('header'), - footer = document.getElementById('footer'), - main = document.getElementById('main-content'), - vp = window.innerHeight, - bodyHeight = document.body.clientHeight, - hHeight = header.clientHeight, - fHeight = footer.clientHeight, - withMinHeight = hHeight + fHeight + mainContentMin; - - if(withMinHeight < vp && bodyHeight < vp){ - var newHeight = mainContentMin + (vp-withMinHeight) + 'px'; - main.style.height = newHeight; - } - } - -}; - -Init.start(); + Init.start(); })(); diff --git a/website/source/assets/javascripts/_app/homepage.js b/website/source/assets/javascripts/_app/homepage.js index 9af3e6d7c2..79ff40e3e8 100644 --- a/website/source/assets/javascripts/_app/homepage.js +++ b/website/source/assets/javascripts/_app/homepage.js @@ -17,26 +17,26 @@ var APP = APP || {}; $hero: $('#jumbotron'), $collapse: $('.navbar-collapse') } - + this.addEventListeners(); }, - + addEventListeners: function(){ var _this = this; if(APP.Utils.isMobile) - return; - + return; + _this.ui.$doc.scroll(function() { //if collapseable menu is open dont do parrallax. It looks wonky. Bootstrap conflict if( _this.ui.$collapse.hasClass('in')) - return; + return; var top = _this.ui.$doc.scrollTop(), - speedAdj = (top*0.8), - speedAdjOffset = speedAdj - top; + speedAdj = (top*0.8), + speedAdjOffset = speedAdj - top; _this.ui.$hero.css('webkitTransform', 'translate(0, '+ speedAdj +'px)'); _this.ui.$hero.find('.container').css('webkitTransform', 'translate(0, '+ speedAdjOffset +'px)'); @@ -46,4 +46,3 @@ var APP = APP || {}; }()); }(jQuery, this)); - diff --git a/website/source/assets/javascripts/_app/util.js b/website/source/assets/javascripts/_app/util.js index f6acd8eb4a..0025c2678f 100644 --- a/website/source/assets/javascripts/_app/util.js +++ b/website/source/assets/javascripts/_app/util.js @@ -4,30 +4,30 @@ var APP = APP || {}; APP.Utils = (function () { - return { - //check for mobile user agents - isMobile : (function(){ - if( navigator.userAgent.match(/Android/i) - || navigator.userAgent.match(/webOS/i) - || navigator.userAgent.match(/iPhone/i) - //|| navigator.userAgent.match(/iPad/i) - || navigator.userAgent.match(/iPod/i) - || navigator.userAgent.match(/BlackBerry/i) - || navigator.userAgent.match(/Windows Phone/i) - ){ - return true; - } - else { - return false; - } - })(), + return { + //check for mobile user agents + isMobile : (function(){ + if( navigator.userAgent.match(/Android/i) + || navigator.userAgent.match(/webOS/i) + || navigator.userAgent.match(/iPhone/i) + //|| navigator.userAgent.match(/iPad/i) + || navigator.userAgent.match(/iPod/i) + || navigator.userAgent.match(/BlackBerry/i) + || navigator.userAgent.match(/Windows Phone/i) + ){ + return true; + } + else { + return false; + } + })(), - runIfClassNamePresent: function(selector, initFunction) { - var elms = document.getElementsByClassName(selector); - if (elms.length > 0) { - initFunction(); - } - } - } + runIfClassNamePresent: function(selector, initFunction) { + var elms = document.getElementsByClassName(selector); + if (elms.length > 0) { + initFunction(); + } + } +} -}()); \ No newline at end of file +}()); diff --git a/website/source/assets/stylesheets/_buttons.scss b/website/source/assets/stylesheets/_buttons.scss index 4bec8b8832..9076eaf2e2 100755 --- a/website/source/assets/stylesheets/_buttons.scss +++ b/website/source/assets/stylesheets/_buttons.scss @@ -3,54 +3,54 @@ // -------------------------------------------------- .outline-btn{ - background-color: transparent; - color: $white; - border: 2px solid $white; - border-radius: $btn-border-radius; - text-decoration: none !important; - @include transition(background-color .3s ease-in-out); + background-color: transparent; + color: $white; + border: 2px solid $white; + border-radius: $btn-border-radius; + text-decoration: none !important; + @include transition(background-color .3s ease-in-out); - &.purple{ - color: $purple; - border: 2px solid $purple; - } + &.purple{ + color: $purple; + border: 2px solid $purple; + } - &:hover{ - color: $white; - background-color: rgba(255, 255, 255, .2); - @include transition(background-color .3s ease-in-out); + &:hover{ + color: $white; + background-color: rgba(255, 255, 255, .2); + @include transition(background-color .3s ease-in-out); - &.purple{ - background-color: rgba(255, 255, 255, .5); - } - } + &.purple{ + background-color: rgba(255, 255, 255, .5); + } + } } //dot animation on header main nav link hover .li-under a::after { - position: absolute; - top: 68%; - left: 50%; - margin-left: -4px; - width: 8px; - height: 8px; - background-color: $white; - border-radius: 4px; - content: ''; - opacity: 0; - text-decoration: none; - -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s; - -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s; - transition: height 0.3s, opacity 0.3s, transform 0.3s; - -webkit-transform: translateY(-10px); - -moz-transform: translateY(-10px); - transform: translateY(-10px); + position: absolute; + top: 68%; + left: 50%; + margin-left: -4px; + width: 8px; + height: 8px; + background-color: $white; + border-radius: 4px; + content: ''; + opacity: 0; + text-decoration: none; + -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s; + -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s; + transition: height 0.3s, opacity 0.3s, transform 0.3s; + -webkit-transform: translateY(-10px); + -moz-transform: translateY(-10px); + transform: translateY(-10px); } .li-under a:hover::after, .li-under a:focus::after { - opacity: .5; - -webkit-transform: translateY(0px); - -moz-transform: translateY(0px); - transform: translateY(0px); + opacity: .5; + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + transform: translateY(0px); } diff --git a/website/source/assets/stylesheets/_community.scss b/website/source/assets/stylesheets/_community.scss index 1bda35761f..e94cfa76d9 100644 --- a/website/source/assets/stylesheets/_community.scss +++ b/website/source/assets/stylesheets/_community.scss @@ -1,15 +1,15 @@ .people { - margin-top: 30px; + margin-top: 30px; - .person { - margin-bottom: 40px; + .person { + margin-bottom: 40px; - h3 { - text-transform: none; - } - - .bio { - padding-left: 150px; - } + h3 { + text-transform: none; } + + .bio { + padding-left: 150px; + } + } } diff --git a/website/source/assets/stylesheets/_docs.scss b/website/source/assets/stylesheets/_docs.scss index 84969297a4..5591a6d195 100755 --- a/website/source/assets/stylesheets/_docs.scss +++ b/website/source/assets/stylesheets/_docs.scss @@ -4,256 +4,256 @@ body.layout-docs, body.layout-intro{ - background: $light-purple image-url('sidebar-dots.jpg') left 62px no-repeat; + background: $light-purple image-url('sidebar-dots.jpg') left 62px no-repeat; #main-content{ min-height: 600px; } - >.container{ - .col-md-8[role=main]{ - min-height: 800px; - background-color: white; + >.container{ + .col-md-8[role=main]{ + min-height: 800px; + background-color: white; - &::before { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: -9999px; - right: 0; - border-left: none; - box-shadow: 9999px 0 0 white; - } + &::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: -9999px; + right: 0; + border-left: none; + box-shadow: 9999px 0 0 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; - margin-right: 4%; - background-color: $light-purple; - border-radius: $el-border-radius; + position: relative; + z-index: 20; + margin-bottom: 30px; + margin-top: 50px; + margin-right: 4%; + background-color: $light-purple; + border-radius: $el-border-radius; - a{ - color: $purple; - } + a{ + color: $purple; + } - .docs-sidenav{ - padding-top: 15px; - padding-bottom: 15px; + .docs-sidenav{ + padding-top: 15px; + padding-bottom: 15px; - :last-child{ - border-bottom: none; - } + :last-child{ + border-bottom: none; + } - //all li > a - li{ - position: relative; + //all li > a + li{ + position: relative; - > a{ - color: $purple; - @include transition( color 0.5s ease ); - } + > a{ + color: $purple; + @include transition( color 0.5s ease ); + } - > a:hover, - > a:focus { - background-color: transparent !important; - color: $black; - @include transition( color 0.5s ease ); - } - } + > a:hover, + > a:focus { + background-color: transparent !important; + color: $black; + @include transition( color 0.5s ease ); + } + } - > li { - padding: 10px 0; - margin: 0 30px; - border-bottom: 2px solid #fff; + > li { + padding: 10px 0; + margin: 0 30px; + border-bottom: 2px solid #fff; - >.nav{ - li{ - a{ - color: $black; - } - } - } + >.nav{ + li{ + a{ + color: $black; + } + } + } - &.active { - &:before{ - content: ''; - position: absolute; - width: 8px; - height: 8px; - background-color: $purple; - border-radius: 4px; - top: 26px; - left: -10px; - } - > a{ - -webkit-font-smoothing: antialiased; - } + &.active { + &:before{ + content: ''; + position: absolute; + width: 8px; + height: 8px; + background-color: $purple; + border-radius: 4px; + top: 26px; + left: -10px; + } + > a{ + -webkit-font-smoothing: antialiased; + } - /*> a:hover, - > a:focus { - font-weight: $font-weight-museo-xb; - }*/ + /*> a:hover, + > a:focus { + font-weight: $font-weight-museo-xb; + }*/ - .nav { - display: block; + .nav { + display: block; - li.active a { - font-weight: $font-weight-museo-xb; - } + li.active a { + font-weight: $font-weight-museo-xb; + } - li.active .subnav { - display: block; + li.active .subnav { + display: block; - li a { - font-weight: $font-weight-museo-sb; - } + li a { + font-weight: $font-weight-museo-sb; + } - li.active a { - font-weight: $font-weight-museo-xb; - } - } - } - } + li.active a { + font-weight: $font-weight-museo-xb; + } + } + } + } - > a { - text-transform: uppercase; - font-family: $font-family-museo; - font-weight: $font-weight-museo-sb; - -webkit-font-smoothing: antialiased; - } - } + > a { + text-transform: uppercase; + font-family: $font-family-museo; + font-weight: $font-weight-museo-sb; + -webkit-font-smoothing: antialiased; + } + } - .nav { - display: none; - margin-bottom: 15px; + .nav { + display: none; + margin-bottom: 15px; - > li{ - margin-left: 20px; + > li{ + margin-left: 20px; - > a{ - -webkit-font-smoothing: antialiased; - font-family: $font-family-source-sans; - padding: 6px 15px; - } + > a{ + -webkit-font-smoothing: antialiased; + font-family: $font-family-source-sans; + padding: 6px 15px; + } - .subnav { - display: none; - margin-bottom: 15px; - list-style: none; - > li{ - padding: 6px 0; - > a{ - -webkit-font-smoothing: antialiased; - font-family: $font-family-source-sans; - } - } - } - } - } - } + .subnav { + display: none; + margin-bottom: 15px; + list-style: none; + > li{ + padding: 6px 0; + > a{ + -webkit-font-smoothing: antialiased; + font-family: $font-family-source-sans; + } + } + } + } + } +} } .bs-docs-section{ - padding-top: 10px; - padding-left: 3%; - padding-bottom: 80px; + padding-top: 10px; + padding-left: 3%; + padding-bottom: 80px; - .lead{ - margin-bottom: 48px - } - - .doc-sectional{ - margin-bottom: 48px; - } - - p, li, .alert { - font-size: 20px; - font-family: $font-family-source-sans; - font-weight: $font-weight-open; - line-height: 1.5em; - margin: 0 0 18px; - -webkit-font-smoothing: antialiased; - } - - li p a, li a { - text-decoration: none; + .lead{ + margin-bottom: 48px } - pre{ - margin: 0 0 18px; - } + .doc-sectional{ + margin-bottom: 48px; + } - a{ - color: $purple; - &:hover{ - text-decoration: underline; - } - } + p, li, .alert { + font-size: 20px; + font-family: $font-family-source-sans; + font-weight: $font-weight-open; + line-height: 1.5em; + margin: 0 0 18px; + -webkit-font-smoothing: antialiased; + } - img{ - max-width: 650px; - margin-top: 25px; - margin-bottom: 25px; - } + li p a, li a { + text-decoration: none; + } - h1{ - color: $purple; - text-transform: uppercase; - padding-bottom: 24px; - margin-top: 40px; - margin-bottom: 24px; - border-bottom: 1px solid #eeeeee; - } + pre{ + margin: 0 0 18px; + } - h2, h3, h4{ - margin-bottom: 16px; - } + a{ + color: $purple; + &:hover{ + text-decoration: underline; + } + } - #graph { - margin-top: 30px; - } + img{ + max-width: 650px; + margin-top: 25px; + margin-bottom: 25px; + } + + h1{ + color: $purple; + text-transform: uppercase; + padding-bottom: 24px; + margin-top: 40px; + margin-bottom: 24px; + border-bottom: 1px solid #eeeeee; + } + + h2, h3, h4{ + margin-bottom: 16px; + } + + #graph { + margin-top: 30px; + } .alert p { - margin-bottom: 0; + margin-bottom: 0; } } @media (max-width: 992px) { - body.layout-docs, - body.layout-intro{ - >.container{ - .col-md-8[role=main]{ - min-height: 0; - &::before { - border-left: 9999px solid white; - } - } - } - } + body.layout-docs, + body.layout-intro{ + >.container{ + .col-md-8[role=main]{ + min-height: 0; + &::before { + border-left: 9999px solid white; + } + } + } + } } @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 765ba8595a..ff758bf952 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: 0px; + } + + 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: 0px; - } - - 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 9bbb64c3ac..9511210803 100755 --- a/website/source/assets/stylesheets/_global.scss +++ b/website/source/assets/stylesheets/_global.scss @@ -3,81 +3,81 @@ // -------------------------------------------------- /*html{ - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; +text-rendering: optimizeLegibility; +-webkit-font-smoothing: antialiased; }*/ body { - font-size: 15px; - color: $black; - font-weight: 300; + font-size: 15px; + color: $black; + font-weight: 300; } h1{ - font-size: 42px; - line-height: 42px; - font-family: $font-family-museo; - font-weight: $font-weight-museo-sb; - margin-bottom: 24px; + font-size: 42px; + line-height: 42px; + font-family: $font-family-museo; + font-weight: $font-weight-museo-sb; + margin-bottom: 24px; } h3{ - font-size: 28px; - line-height: 28px; - font-family: $font-family-museo; - font-weight: $font-weight-museo-sb; + font-size: 28px; + line-height: 28px; + font-family: $font-family-museo; + font-weight: $font-weight-museo-sb; } //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; } //fixed grid below 992 to prevent smaller responsive sizes @media (max-width: 992px) { - .container{ - max-width: 970px; - } + .container{ + max-width: 970px; + } } //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; } diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss index f32b13ed6b..6c36e571f4 100755 --- a/website/source/assets/stylesheets/_header.scss +++ b/website/source/assets/stylesheets/_header.scss @@ -6,7 +6,7 @@ body.page-sub{ #header{ - @include consul-gradient-bg(); + @include consul-gradient-bg(); .navbar-brand { .logo{ diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss index d3eafdc2e5..ed19fee656 100755 --- a/website/source/assets/stylesheets/_home.scss +++ b/website/source/assets/stylesheets/_home.scss @@ -2,397 +2,397 @@ // Home // -------------------------------------------------- body.page-home{ - background-color: #f8f8f8; + background-color: #f8f8f8; } #features{ - @include anti-alias(); - padding: 130px 0 0 0; - background: #f8f8f8 image-url('hero-dots-below@2x.png') center top no-repeat; - background-size: 1280px 49px; + @include anti-alias(); + padding: 130px 0 0 0; + background: #f8f8f8 image-url('hero-dots-below@2x.png') center top no-repeat; + background-size: 1280px 49px; position: relative; top: $negative-hero-margin; - .double-row{ - padding: 0 0 50px 0; - } + .double-row{ + padding: 0 0 50px 0; + } - h2{ - font-size: 24px; - letter-spacing: 2px; - color: $purple; - font-family: $font-family-museo; - font-weight: $font-weight-museo-xb; - } - p{ - font-size: 16px; - letter-spacing: 1px; - line-height: 1.5em; - color: $consul-gray; - font-family: $font-family-museo; - font-weight: $font-weight-museo-sb; - } + h2{ + font-size: 24px; + letter-spacing: 2px; + color: $purple; + font-family: $font-family-museo; + font-weight: $font-weight-museo-xb; + } + p{ + font-size: 16px; + letter-spacing: 1px; + line-height: 1.5em; + color: $consul-gray; + font-family: $font-family-museo; + font-weight: $font-weight-museo-sb; + } - .icn{ - display: block; - width: 186px; - height: 272px; - margin: 0 auto; - background-position: center 0; - background-repeat: no-repeat; - } + .icn{ + display: block; + width: 186px; + height: 272px; + margin: 0 auto; + background-position: center 0; + background-repeat: no-repeat; + } - .discovery{ - background-image: image-url('feature-discovery@2x.png'); - background-size: 181px 181px; - } - .health{ - background-image: image-url('feature-health@2x.png'); - background-size: 125px 179px; - } - .multi{ - background-image: image-url('feature-multi@2x.png'); - background-size: 182px 184px; - } - .config{ - background-image: image-url('feature-config@2x.png'); - background-size: 157px 179px; - } + .discovery{ + background-image: image-url('feature-discovery@2x.png'); + background-size: 181px 181px; + } + .health{ + background-image: image-url('feature-health@2x.png'); + background-size: 125px 179px; + } + .multi{ + background-image: image-url('feature-multi@2x.png'); + background-size: 182px 184px; + } + .config{ + background-image: image-url('feature-config@2x.png'); + background-size: 157px 179px; + } } #trusted{ - background-color: $black; - padding: 140px 0; + background-color: $black; + padding: 140px 0; - h3{ - margin-bottom: 60px; - color: $white; - text-transform: uppercase; - font-size: 18px; - text-align: center; - } + h3{ + margin-bottom: 60px; + color: $white; + text-transform: uppercase; + font-size: 18px; + text-align: center; + } - .trusted-items{ - width: 800px; - margin: 0 auto; + .trusted-items{ + width: 800px; + margin: 0 auto; - ul { - padding: 0; - > li{ - display: inline-block; - float: left; - width: 25%; - height: 80px; - margin: 12px 0; - background: image-url('trusted-sprite.png') 0 0 no-repeat; + ul { + padding: 0; + > li{ + display: inline-block; + float: left; + width: 25%; + height: 80px; + margin: 12px 0; + background: image-url('trusted-sprite.png') 0 0 no-repeat; - &#i0{ - background-position: 0 0; - } - &#i1{ - background-position: 0 -80px; - } - &#i2{ - background-position: 0 -160px; - } - &#i3{ - background-position: 0 -240px; - } - &#i4{ - background-position: 0 -320px; - } - &#i5{ - background-position: 0 -400px; - } - &#i6{ - background-position: 0 -480px; - } - &#i7{ - background-position: 0 -560px; - } - &#i8{ - background-position: 0 -640px; - } - &#i9{ - background-position: 0 -720px; - } - &#i10{ - background-position: 0 -800px; - } - &#i11{ - background-position: 0 -880px; - } - } - } - } -} - -@media (max-width: 992px) { - #features{ - top: $large-negative-hero-margin; - .double-row{ - padding: 0 0 0 0; - .row{ - padding-bottom: 90px; - } - } - - .icn{ - height: 200px; - } - } -} - -@media (max-width: 768px){ - #cta{ - text-align: center; - .intro{ - .left{ - text-align: center !important; + &#i0{ + background-position: 0 0; + } + &#i1{ + background-position: 0 -80px; + } + &#i2{ + background-position: 0 -160px; + } + &#i3{ + background-position: 0 -240px; + } + &#i4{ + background-position: 0 -320px; + } + &#i5{ + background-position: 0 -400px; + } + &#i6{ + background-position: 0 -480px; + } + &#i7{ + background-position: 0 -560px; + } + &#i8{ + background-position: 0 -640px; + } + &#i9{ + background-position: 0 -720px; + } + &#i10{ + background-position: 0 -800px; + } + &#i11{ + background-position: 0 -880px; } } } + } +} + +@media (max-width: 992px) { + #features{ + top: $large-negative-hero-margin; + .double-row{ + padding: 0 0 0 0; + .row{ + padding-bottom: 90px; + } + } + + .icn{ + height: 200px; + } + } +} + +@media (max-width: 768px){ + #cta{ + text-align: center; + .intro{ + .left{ + text-align: center !important; + } + } + } } @media (max-width: 480px) { - #features{ - text-align: center; - } + #features{ + text-align: center; + } } #cta { - padding: 130px 0 130px; + padding: 130px 0 130px; - .intro { - .left { - text-align: right; - } + .intro { + .left { + text-align: right; + } - .right { - margin-top: 12px; - } + .right { + margin-top: 12px; + } - } + } - p{ - font-size: 14px; - letter-spacing: 1px; - line-height: 1.5em; - color: $consul-gray; - font-family: $font-family-museo; - font-weight: $font-weight-museo-sb; - } + p{ + font-size: 14px; + letter-spacing: 1px; + line-height: 1.5em; + color: $consul-gray; + font-family: $font-family-museo; + font-weight: $font-weight-museo-sb; + } - .outline-btn { - padding: 8px; - display: inline-block; - &:focus { - outline: 0; - } + .outline-btn { + padding: 8px; + display: inline-block; + &:focus { + outline: 0; + } - } + } - a { - font-weight: 500; - font-size: 16px; - text-transform: uppercase; - letter-spacing: 3px; - color: $purple; - &:hover { - text-decoration: none; - } - } + a { + font-weight: 500; + font-size: 16px; + text-transform: uppercase; + letter-spacing: 3px; + color: $purple; + &:hover { + text-decoration: none; + } + } } #demos{ - padding: 30px 0 60px; - background-color: $light-purple; - background: $light-purple image-url('sidebar-dots.jpg') left 62px no-repeat; + padding: 30px 0 60px; + background-color: $light-purple; + background: $light-purple image-url('sidebar-dots.jpg') left 62px no-repeat; - .explantion { - margin: 40px 0 40px 0; + .explantion { + margin: 40px 0 40px 0; - h2 { - font-size: 22px; - color: lighten($gray-light, 15%); - text-transform: uppercase; - font-family: $font-family-museo; - font-weight: $font-weight-museo-xb; - } + h2 { + font-size: 22px; + color: lighten($gray-light, 15%); + text-transform: uppercase; + font-family: $font-family-museo; + font-weight: $font-weight-museo-xb; + } - p{ - font-size: 16px; - letter-spacing: 1px; - line-height: 1.5em; - color: $consul-gray; - font-family: $font-family-museo; - font-weight: $font-weight-museo-sb; - } - } + p{ + font-size: 16px; + letter-spacing: 1px; + line-height: 1.5em; + color: $consul-gray; + font-family: $font-family-museo; + font-weight: $font-weight-museo-sb; + } + } - .terminals{ - margin-bottom: 80px; + .terminals{ + margin-bottom: 80px; - .terminal-item{ - border-bottom: 1px solid #eaeae; + .terminal-item{ + border-bottom: 1px solid #eaeae; - &.last{ - border-bottom: none; - } - >header{ - .left{ - span.icn{ - display: inline-block; - width: 83px; - height: 74px; - } - } + &.last{ + border-bottom: none; + } + >header{ + .left{ + span.icn{ + display: inline-block; + width: 83px; + height: 74px; + } + } - .right{ - padding-left: 25px; + .right{ + padding-left: 25px; - h2{ - margin-top: 0; - font-size: 28px; - text-transform: uppercase; - } + h2{ + margin-top: 0; + font-size: 28px; + text-transform: uppercase; + } - p{ - font-size: 16px; - } - } - } + p{ + font-size: 16px; + } + } + } - .terminal{ - background-color: darken($gray-darker, 15%); - border-radius: 4px; + .terminal{ + background-color: darken($gray-darker, 15%); + border-radius: 4px; - header{ - position: relative; - background-color: $consul-gray; - text-align: center; - padding: 3px; - border-top-left-radius: 4px; - border-top-right-radius: 4px; + header{ + position: relative; + background-color: $consul-gray; + text-align: center; + padding: 3px; + border-top-left-radius: 4px; + border-top-right-radius: 4px; - h4{ - font-size: 14px; - letter-spacing: 1px; - color: $gray-darker; - font-family: $font-family-museo; - font-weight: $font-weight-museo-xb; - } + h4{ + font-size: 14px; + letter-spacing: 1px; + color: $gray-darker; + font-family: $font-family-museo; + font-weight: $font-weight-museo-xb; + } - ul.shell-dots{ - position: absolute; - top: 10px; - left: 8px; - padding-left: 0; + ul.shell-dots{ + position: absolute; + top: 10px; + left: 8px; + padding-left: 0; - li{ - display: inline-block; - width: 12px; - height: 12px; - border-radius: 6px; - background-color: $gray-darker; - margin-left: 6px; - } - } - } + li{ + display: inline-block; + width: 12px; + height: 12px; + border-radius: 6px; + background-color: $gray-darker; + margin-left: 6px; + } + } + } - .terminal-window{ - min-height: 140px; - padding: 20px; - font-size: 15px; - font-weight: normal; - font-family: "Courier New", Monaco, Menlo, Consolas, monospace; - color: $white; + .terminal-window{ + min-height: 140px; + padding: 20px; + font-size: 15px; + font-weight: normal; + font-family: "Courier New", Monaco, Menlo, Consolas, monospace; + color: $white; - .txt-r { - color: lighten($red, 8%);; - } - .txt-p { - font-weight: bold; - color: lighten($purple, 15%); - } - p{ - margin-bottom: 2px; - white-space: pre-wrap; - } - .cursor { - background-color: $light-purple; - } - } - } + .txt-r { + color: lighten($red, 8%);; + } + .txt-p { + font-weight: bold; + color: lighten($purple, 15%); + } + p{ + margin-bottom: 2px; + white-space: pre-wrap; + } + .cursor { + background-color: $light-purple; + } + } + } - .feature-bullets{ - list-style-type: none; - padding-left: 35px; + .feature-bullets{ + list-style-type: none; + padding-left: 35px; - li{ - padding: 5px 0 5px 45px; - } - } - } - } + li{ + padding: 5px 0 5px 45px; + } + } + } + } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { - #demos{ - .terminals{ - .terminal-item{ - .feature-bullets{ - li{ - background-size: 12px 12px; - } - } - } - } - } + #demos{ + .terminals{ + .terminal-item{ + .feature-bullets{ + li{ + background-size: 12px 12px; + } + } + } + } + } } @media (max-width: 992px) { - #demos{ - .terminals{ - .terminal-item{ - >header{ - .left{ - span.icn{ - } - } + #demos{ + .terminals{ + .terminal-item{ + >header{ + .left{ + span.icn{ + } + } - .right{ - padding-left: 54px; - } - } - } - } - } + .right{ + padding-left: 54px; + } + } + } + } + } } @media (max-width: 768px) { - #demos{ - .terminals{ - .terminal-item{ - >header{ - .left{ - span.icn{ - padding-bottom: 15px; - } - } + #demos{ + .terminals{ + .terminal-item{ + >header{ + .left{ + span.icn{ + padding-bottom: 15px; + } + } - .right{ - padding-left: 15px; - } - } - } - } - } + .right{ + padding-left: 15px; + } + } + } + } + } } @media (max-width: 480px) { diff --git a/website/source/assets/stylesheets/_jumbotron.scss b/website/source/assets/stylesheets/_jumbotron.scss index 99e998354b..0c957be5f4 100755 --- a/website/source/assets/stylesheets/_jumbotron.scss +++ b/website/source/assets/stylesheets/_jumbotron.scss @@ -36,41 +36,41 @@ .jumbotron-dots{ - position: absolute; - top: 0; - left: 0; - height: 632px; - width: 100%; - margin-top: $negative-hero-margin; - background: transparent image-url('hero-dots.png') center $header-height no-repeat; + position: absolute; + top: 0; + left: 0; + height: 632px; + width: 100%; + margin-top: $negative-hero-margin; + background: transparent image-url('hero-dots.png') center $header-height no-repeat; } .container{ - position: relative; - height: 100%; - margin-top: $header-height; - -webkit-backface-visibility:hidden; + position: relative; + height: 100%; + margin-top: $header-height; + -webkit-backface-visibility:hidden; - .jumbo-logo-wrap{ - margin-top: 135px; + .jumbo-logo-wrap{ + margin-top: 135px; - .jumbo-logo{ - width: 318px; - height: 316px; - background: transparent image-url('consul-hero-logo@2x.png') 0 0 no-repeat; - background-size: 318px 316px; - z-index: 20; - } + .jumbo-logo{ + width: 318px; + height: 316px; + background: transparent image-url('consul-hero-logo@2x.png') 0 0 no-repeat; + background-size: 318px 316px; + z-index: 20; } + } - h2{ - margin-top: 175px; - font-size: 40px; - line-height: 48px; - letter-spacing: 1px; - margin-left: 40px; - } + h2{ + margin-top: 175px; + font-size: 40px; + line-height: 48px; + letter-spacing: 1px; + margin-left: 40px; + } } } diff --git a/website/source/assets/stylesheets/_utilities.scss b/website/source/assets/stylesheets/_utilities.scss index 3e8fe200f6..7df4c7c4a6 100755 --- a/website/source/assets/stylesheets/_utilities.scss +++ b/website/source/assets/stylesheets/_utilities.scss @@ -7,18 +7,17 @@ // ------------------------- @mixin anti-alias() { - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; } @mixin consul-gradient-bg() { - background: #694a9c; /* Old browsers */ - background: -moz-linear-gradient(left, #694a9c 0%, #cd2028 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, right top, color-stop(0%,#694a9c), color-stop(100%,#cd2028)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* IE10+ */ - background: linear-gradient(to right, #694a9c 0%,#cd2028 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#694a9c', endColorstr='#cd2028',GradientType=1 ); /* IE6-9 */ - + background: #694a9c; /* Old browsers */ + background: -moz-linear-gradient(left, #694a9c 0%, #cd2028 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, right top, color-stop(0%,#694a9c), color-stop(100%,#cd2028)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* IE10+ */ + background: linear-gradient(to right, #694a9c 0%,#cd2028 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#694a9c', endColorstr='#cd2028',GradientType=1 ); /* IE6-9 */ } diff --git a/website/source/assets/stylesheets/_variables.scss b/website/source/assets/stylesheets/_variables.scss index 93fa3065eb..a6049b0eed 100755 --- a/website/source/assets/stylesheets/_variables.scss +++ b/website/source/assets/stylesheets/_variables.scss @@ -6,54 +6,54 @@ // Global values // -------------------------------------------------- -$jumbotron-height: 540px; -$header-height: 92px; -$jumbotron-total-height: 542px; //jumbo+header -$jumbotron-color: #fff; -$btn-border-radius: 4px; -$el-border-radius: 6px; -$negative-hero-margin: -93px; -$large-negative-hero-margin: -154px; +$jumbotron-height: 540px; +$header-height: 92px; +$jumbotron-total-height: 542px; //jumbo+header +$jumbotron-color: #fff; +$btn-border-radius: 4px; +$el-border-radius: 6px; +$negative-hero-margin: -93px; +$large-negative-hero-margin: -154px; // colors // ------------------------- -$white: #fff; -$black: #242424; -$gray-darker: #555; -$gray: #777; -$gray-light: #939393; -$gray-lighter: #979797; -$red: #dd4e58; -$red-dark: #c5454e; -$red-darker: #b03c44; -$tan: #f0f0e5; -$consul-gray: #909090; -$consul-footer-gray: #d7d4d7; -$purple: #69499a; -$light-purple: #f7f3f9; -$btn-color: #4592C5; +$white: #fff; +$black: #242424; +$gray-darker: #555; +$gray: #777; +$gray-light: #939393; +$gray-lighter: #979797; +$red: #dd4e58; +$red-dark: #c5454e; +$red-darker: #b03c44; +$tan: #f0f0e5; +$consul-gray: #909090; +$consul-footer-gray: #d7d4d7; +$purple: #69499a; +$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-museo: 'museo-sans', "Helvetica Neue", Helvetica, Arial, sans-serif; -$font-family-source-sans: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif; -$font-weight-museo-xl: 100; -$font-weight-museo-reg: 300; -$font-weight-museo-sb: 500; -$font-weight-museo-xb: 700; -$font-weight-open: $font-weight-museo-reg; +$font-family-museo: 'museo-sans', "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-source-sans: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-weight-museo-xl: 100; +$font-weight-museo-reg: 300; +$font-weight-museo-sb: 500; +$font-weight-museo-xb: 700; +$font-weight-open: $font-weight-museo-reg; -$text-shadow: 1px 1px 1px #000; -$shadow: $text-shadow; +$text-shadow: 1px 1px 1px #000; +$shadow: $text-shadow;