diff --git a/website/source/assets/images/logo-header-gradient@2x.png b/website/source/assets/images/logo-header-gradient@2x.png new file mode 100644 index 000000000..d6851ed91 --- /dev/null +++ b/website/source/assets/images/logo-header-gradient@2x.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4eba8da49f52ceabafe49d8ca3b40ddfbdcd1d0b69572e0cc8351be95d9ae8fb +size 3994 diff --git a/website/source/assets/images/consul-header-logo.png b/website/source/assets/images/logo-header.png similarity index 100% rename from website/source/assets/images/consul-header-logo.png rename to website/source/assets/images/logo-header.png diff --git a/website/source/assets/images/consul-header-logo@2x.png b/website/source/assets/images/logo-header@2x.png similarity index 100% rename from website/source/assets/images/consul-header-logo@2x.png rename to website/source/assets/images/logo-header@2x.png diff --git a/website/source/assets/images/wordtype@2x.png b/website/source/assets/images/wordtype@2x.png new file mode 100644 index 000000000..f40b9fdfd --- /dev/null +++ b/website/source/assets/images/wordtype@2x.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:053291a8f50011e743f18b9aefc76fd876809ec4b182a4e34f70027a194a0065 +size 2141 diff --git a/website/source/assets/javascripts/_app/Sidebar.js b/website/source/assets/javascripts/_app/Sidebar.js new file mode 100644 index 000000000..b36e508c4 --- /dev/null +++ b/website/source/assets/javascripts/_app/Sidebar.js @@ -0,0 +1,50 @@ +(function(){ + + Sidebar = Base.extend({ + + $body: null, + $overlay: null, + $sidebar: null, + $sidebarHeader: null, + $sidebarImg: null, + $toggleButton: null, + + constructor: function(){ + this.$body = $('body'); + this.$overlay = $('.sidebar-overlay'); + this.$sidebar = $('#sidebar'); + this.$sidebarHeader = $('#sidebar .sidebar-header'); + this.$toggleButton = $('.navbar-toggle'); + this.sidebarImg = this.$sidebarHeader.css('background-image'); + + this.addEventListeners(); + }, + + addEventListeners: function(){ + var _this = this; + + _this.$toggleButton.on('click', function() { + _this.$sidebar.toggleClass('open'); + if ((_this.$sidebar.hasClass('sidebar-fixed-left') || _this.$sidebar.hasClass('sidebar-fixed-right')) && _this.$sidebar.hasClass('open')) { + _this.$overlay.addClass('active'); + _this.$body.css('overflow', 'hidden'); + } else { + _this.$overlay.removeClass('active'); + _this.$body.css('overflow', 'auto'); + } + + return false; + }); + + _this.$overlay.on('click', function() { + $(this).removeClass('active'); + _this.$body.css('overflow', 'auto'); + _this.$sidebar.removeClass('open'); + }); + } + + }); + + window.Sidebar = Sidebar; + +})(); diff --git a/website/source/assets/javascripts/_app/app.js b/website/source/assets/javascripts/_app/app.js index c75c3614e..4cff2744f 100644 --- a/website/source/assets/javascripts/_app/app.js +++ b/website/source/assets/javascripts/_app/app.js @@ -4,17 +4,24 @@ var APP = (function() { - function initialize (){ - APP.Utils.runIfClassNamePresent('page-home', initHome); - } + function initializeSidebar() { + new Sidebar(); + } - function initHome() { - APP.Homepage.init(); - } + function initialize() { + APP.Utils.runIfClassNamePresent('page-home', initHome); - //api - return { - initialize: initialize - } + //always init sidebar + initializeSidebar(); + } + + function initHome() { + APP.Homepage.init(); + } + + //api + return { + initialize: initialize + } })(); diff --git a/website/source/assets/javascripts/_app/docs.js b/website/source/assets/javascripts/_app/docs.js new file mode 100644 index 000000000..9a44b86b0 --- /dev/null +++ b/website/source/assets/javascripts/_app/docs.js @@ -0,0 +1,48 @@ +(function(){ + + var mainContentMin = 600; + + var Init = { + + start: function(){ + var classname = this.hasClass(document.body, 'page-sub'); + + 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; + } + } + + }; + + Init.start(); + +})(); diff --git a/website/source/assets/javascripts/_app/homepage.js b/website/source/assets/javascripts/_app/homepage.js index 9af3e6d7c..79ff40e3e 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 f6acd8eb4..0025c2678 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/javascripts/application.coffee b/website/source/assets/javascripts/application.coffee index c226f163a..8221cd501 100644 --- a/website/source/assets/javascripts/application.coffee +++ b/website/source/assets/javascripts/application.coffee @@ -2,6 +2,10 @@ #= require jquery #= require bootstrap +#= require lib/Base + +#= require _app/docs +#= require _app/Sidebar #= require _app/app #= require _app/homepage #= require _app/util diff --git a/website/source/assets/javascripts/lib/Base.js b/website/source/assets/javascripts/lib/Base.js new file mode 100644 index 000000000..504e2beea --- /dev/null +++ b/website/source/assets/javascripts/lib/Base.js @@ -0,0 +1,145 @@ +/* + Based on Base.js 1.1a (c) 2006-2010, Dean Edwards + Updated to pass JSHint and converted into a module by Kenneth Powers + License: http://www.opensource.org/licenses/mit-license.php +*/ +/*global define:true module:true*/ +/*jshint eqeqeq:true*/ +(function (name, global, definition) { + if (typeof module !== 'undefined') { + module.exports = definition(); + } else if (typeof define !== 'undefined' && typeof define.amd === 'object') { + define(definition); + } else { + global[name] = definition(); + } +})('Base', this, function () { + // Base Object + var Base = function () {}; + + // Implementation + Base.extend = function (_instance, _static) { // subclass + var extend = Base.prototype.extend; + // build the prototype + Base._prototyping = true; + var proto = new this(); + extend.call(proto, _instance); + proto.base = function () { + // call this method from any other method to invoke that method's ancestor + }; + delete Base._prototyping; + // create the wrapper for the constructor function + //var constructor = proto.constructor.valueOf(); //-dean + var constructor = proto.constructor; + var klass = proto.constructor = function () { + if (!Base._prototyping) { + if (this._constructing || this.constructor === klass) { // instantiation + this._constructing = true; + constructor.apply(this, arguments); + delete this._constructing; + } else if (arguments[0] !== null) { // casting + return (arguments[0].extend || extend).call(arguments[0], proto); + } + } + }; + // build the class interface + klass.ancestor = this; + klass.extend = this.extend; + klass.forEach = this.forEach; + klass.implement = this.implement; + klass.prototype = proto; + klass.toString = this.toString; + klass.valueOf = function (type) { + return (type === 'object') ? klass : constructor.valueOf(); + }; + extend.call(klass, _static); + // class initialization + if (typeof klass.init === 'function') klass.init(); + return klass; + }; + + Base.prototype = { + extend: function (source, value) { + if (arguments.length > 1) { // extending with a name/value pair + var ancestor = this[source]; + if (ancestor && (typeof value === 'function') && // overriding a method? + // the valueOf() comparison is to avoid circular references + (!ancestor.valueOf || ancestor.valueOf() !== value.valueOf()) && /\bbase\b/.test(value)) { + // get the underlying method + var method = value.valueOf(); + // override + value = function () { + var previous = this.base || Base.prototype.base; + this.base = ancestor; + var returnValue = method.apply(this, arguments); + this.base = previous; + return returnValue; + }; + // point to the underlying method + value.valueOf = function (type) { + return (type === 'object') ? value : method; + }; + value.toString = Base.toString; + } + this[source] = value; + } else if (source) { // extending with an object literal + var extend = Base.prototype.extend; + // if this object has a customized extend method then use it + if (!Base._prototyping && typeof this !== 'function') { + extend = this.extend || extend; + } + var proto = { + toSource: null + }; + // do the "toString" and other methods manually + var hidden = ['constructor', 'toString', 'valueOf']; + // if we are prototyping then include the constructor + for (var i = Base._prototyping ? 0 : 1; i < hidden.length; i++) { + var h = hidden[i]; + if (source[h] !== proto[h]) + extend.call(this, h, source[h]); + } + // copy each of the source object's properties to this object + for (var key in source) { + if (!proto[key]) extend.call(this, key, source[key]); + } + } + return this; + } + }; + + // initialize + Base = Base.extend({ + constructor: function () { + this.extend(arguments[0]); + } + }, { + ancestor: Object, + version: '1.1', + forEach: function (object, block, context) { + for (var key in object) { + if (this.prototype[key] === undefined) { + block.call(context, object[key], key, object); + } + } + }, + implement: function () { + for (var i = 0; i < arguments.length; i++) { + if (typeof arguments[i] === 'function') { + // if it's a function, call it + arguments[i](this.prototype); + } else { + // add the interface using the extend method + this.prototype.extend(arguments[i]); + } + } + return this; + }, + toString: function () { + return String(this.valueOf()); + } + }); + + // Return Base implementation + return Base; +}); diff --git a/website/source/assets/stylesheets/_buttons.scss b/website/source/assets/stylesheets/_buttons.scss index 4bec8b883..9076eaf2e 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 1bda35761..e94cfa76d 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 06e9698f9..5591a6d19 100755 --- a/website/source/assets/stylesheets/_docs.scss +++ b/website/source/assets/stylesheets/_docs.scss @@ -4,253 +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; - >.container{ - .col-md-8[role=main]{ - min-height: 800px; - background-color: white; + #main-content{ + min-height: 600px; + } - &::before { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: -9999px; - right: 0; - border-left: none; - box-shadow: 9999px 0 0 white; - } + >.container{ + .col-md-8[role=main]{ + min-height: 800px; + background-color: white; - >div{ - position: relative; - z-index: 10; - } - } - } + &::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; + } + } + } } .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-open-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-open-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-open-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 765ba8595..ff758bf95 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/_fonts.scss b/website/source/assets/stylesheets/_fonts.scss index a77273479..622dc908d 100755 --- a/website/source/assets/stylesheets/_fonts.scss +++ b/website/source/assets/stylesheets/_fonts.scss @@ -19,8 +19,3 @@ font-family: $font-family-museo; font-weight: $font-weight-museo-xb; } - -.os{ - font-family: $font-family-open-sans; - font-weight: $font-weight-open; -} diff --git a/website/source/assets/stylesheets/_footer.scss b/website/source/assets/stylesheets/_footer.scss new file mode 100644 index 000000000..13ffebd47 --- /dev/null +++ b/website/source/assets/stylesheets/_footer.scss @@ -0,0 +1,70 @@ +#footer{ + padding: 64px 0; + background-color: $black; + + .hashicorp-project{ + margin-top: 24px; + } + + .pull-right{ + padding-right: 15px; + } +} + +.edit-page-link{ + position: absolute; + top: -110px; + right: 30px; + z-index: 9999; + + a{ + text-transform: uppercase; + color: $black; + } +} + +@media (max-width: 768px) { + #footer{ + text-align: center; + + .footer-hashi { + float: none !important; + display: block; + + .pull-right{ + float: none !important; + padding-right: 0; + } + } + + ul{ + float: none; + display: inline-block; + margin-bottom: 36px; + } + } +} + +@media (max-width: 414px) { + #footer{ + ul{ + display: block; + li{ + display: block; + float: none; + } + + &.external-links{ + li{ + svg{ + position: relative; + left: 0; + top: 2px; + margin-top: 0; + margin-right: 4px; + } + } + } + } + } +} diff --git a/website/source/assets/stylesheets/_global.scss b/website/source/assets/stylesheets/_global.scss index 9bbb64c3a..7fb37ad7b 100755 --- a/website/source/assets/stylesheets/_global.scss +++ b/website/source/assets/stylesheets/_global.scss @@ -3,81 +3,88 @@ // -------------------------------------------------- /*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; +} + +.edit-this-page{ + padding-top: 48px; + a{ + text-transform: uppercase; + } } diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss index c002e9f0b..04f035962 100755 --- a/website/source/assets/stylesheets/_header.scss +++ b/website/source/assets/stylesheets/_header.scss @@ -1,322 +1,77 @@ // // Header +// - Project Specific +// - edits should be made here // -------------------------------------------------- body.page-sub{ - #header{ - @include consul-gradient-bg(); + #header{ + @include consul-gradient-bg(); + + .navbar-brand { + .logo{ + &:hover{ + color: $black; + } + } } + } } -#footer, #header { - @include anti-alias(); - position: relative; - color: $white; - text-rendering: optimizeLegibility; - margin-bottom: 0; + .navbar-brand { + .logo{ + padding-left: 50px; + font-size: 0; + text-transform: uppercase; + background: image-url('../images/consul-hero-logo.png') 0 0 no-repeat; + @include img-retina("../images/consul-hero-logo.png", "../images/consul-hero-logo@2x.png", $project-logo-width, $project-logo-height); + background-position: 0 center; - .navbar-collapse{ - box-shadow: none; + &:hover{ + opacity: .4; + } } - &.navbar-static-top{ - z-index: 1000; - } - - a{ - color: $white; - } - - .navbar-toggle{ - margin-top: 14px; - margin-bottom: 14px; - border: 2px solid $white; - .icon-bar{ - border: 1px solid $white; + .by-hashicorp{ + &:hover{ + svg{ + .svg-bg-line{ + opacity: .4; + } } + } } + } - .brand { - padding: 13px 15px; - line-height: 0; - - .logo{ - display: block; - width: 179px; - height: 59px; - background: image-url('consul-header-logo.png') 0 0 no-repeat; - @include img-retina("consul-header-logo.png", "consul-header-logo@2x.png", 179px, 59px); - } - } - - .navbar-nav{ - -webkit-font-smoothing: antialiased; - li{ - position: relative; - - > a { - font-size: 12px; - text-transform: uppercase; - letter-spacing: 3px; - padding-left: 22px; - } - - &.first{ - >a{ - padding-left: 15px; - } - } - } - } - - .nav.li-under a::after { - - } - - .nav > li > a:hover, .nav > li > a:focus { - background-color: transparent; - /*color: $p; - @include transition( color 0.3s ease );*/ - } - - .main-links.navbar-nav{ - li + li::before { - content: ""; - position: absolute; - left: 0; - top: 35px; - width: 4px; - height: 23px; - background: image-url('nav-dotpipes.png') 0 0 no-repeat; - @include img-retina("nav-dotpipes.png", "nav-dotpipes@2x.png", 4px, 23px); - padding-right: 15px; - } - - /*li + li.li-under a::after{ - left: 15px; - }*/ - - li > a { - line-height: 62px; - } - - } - - .buttons.navbar-nav{ - margin-top: 26px; - margin-left: 30px; - - li{ - &.first{ - margin-right: 12px; - } - - &.download{ - a{ - background: image-url('icon-download.png') 8px 6px no-repeat; - @include img-retina("icon-download.png", "icon-download@2x.png", 20px, 20px); - } - } - - &.github{ - a{ - background: image-url('icon-github.png') 8px 6px no-repeat; - @include img-retina("icon-github.png", "icon-github@2x.png", 20px, 20px); - } - } - } - - li > a { - padding-top: 6px; - padding-bottom: 6px; - padding-left: 40px; - } - } + .buttons{ + margin-top: 2px; //baseline everything + } } -#footer{ - height: 650px; - text-align: center; - color: $purple; +@media (max-width: 414px) { + #header { + .navbar-brand { + .logo{ + padding-left: 37px; + @include img-retina("../images/consul-hero-logo.png", "../images/consul-hero-logo@2x.png", $project-logo-width * .75, $project-logo-height * .75); - .main-links.navbar-nav{ - float: none; - display: inline-block; - padding-top: 155px; - - .li-under a::after { - background-color: $purple; - } - } - - .footer-hashi{ - padding-top: 110px; - } - - a{ - color: $purple; - } - - .buttons.navbar-nav{ - float: none; - display: inline-block; - margin-bottom: 30px; - margin-top: 0px; - - li{ - &.first{ - margin-right: 12px; - } - - &.download{ - a{ - background: image-url('icon-download-purple.png') 8px 6px no-repeat; - @include img-retina("icon-download-purple.png", "icon-download-purple@2x.png", 20px, 20px); - } - } - - &.github{ - a{ - background: image-url('icon-github-purple.png') 8px 6px no-repeat; - @include img-retina("icon-github-purple.png", "icon-github-purple@2x.png", 20px, 20px); - } - } - } - - li > a { - padding-top: 6px; - padding-bottom: 6px; - padding-left: 40px; + img{ + width: 72px; + height: 14px; } + } } + } } -@media (max-width: 992px) { - #header { - .brand { - .logo{ - width: 120px; - height: 39px; - margin-top: 12px; - background-size: 120px 39px; - } - } +@media (max-width: 320px) { + #header { + .navbar-brand { + .logo{ - .buttons.navbar-nav{ - li{ - a{ - background: none !important; - padding-left: 15px; - } - } - } + } } -} - -@media (max-width: 768px) { - - #footer, - #header{ - .buttons.navbar-nav, - .main-links.navbar-nav{ - display: block; - padding-bottom: 15px; - li{ - display: block; - float: none; - margin-top: 15px; - } - - .li-under a::after, - li + li::before { - display: none; - } - } - } - - #header, - #footer{ - .main-links.navbar-nav{ - li > a { - padding: 0; - padding-left: 0; - line-height: 22px; - } - } - } - - #footer{ - .footer-hashi { - span{ - margin-right: 0; - } - - .hashi-logo{ - display: block; - margin-top: 15px; - margin-bottom: 20px; - } - } - - .buttons.navbar-nav{ - margin-left: 0; - - li.first { - margin-right: 0 !important; - } - } - } - - #header{ - @include consul-gradient-bg(); - - .navbar-right{ - float: none !important; - } - - .brand { - .logo{ - margin-top: 0; - } - } - - .navbar-nav > li{ - float: none; - } - - .buttons.navbar-nav{ - margin-top: 15px; - margin-left: 0px; - - li{ - a{ - padding-left: 40px; - } - &.first{ - margin-right: 0; - margin-bottom: 10px; - } - - &.download{ - a{ - background: image-url('icon-download.png') 8px 6px no-repeat !important;; - @include img-retina("icon-download.png", "icon-download@2x.png", 20px, 20px); - } - } - - &.github{ - a{ - background: image-url('icon-github.png') 8px 6px no-repeat !important;; - @include img-retina("icon-github.png", "icon-github@2x.png", 20px, 20px); - } - } - } - } - } -} - -@media (max-width: 480px) { - + } } diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss index 0519ec5e4..9129763b5 100755 --- a/website/source/assets/stylesheets/_home.scss +++ b/website/source/assets/stylesheets/_home.scss @@ -2,417 +2,396 @@ // 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; - } - } - } - } + &#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; + } + } + } + } } - - -#footer{ - background-color: $consul-footer-gray; - background: $consul-footer-gray image-url('consul-footer-logo.png') center center no-repeat; - @include img-retina("consul-footer-logo.png", "consul-footer-logo@2x.png", 446px, 443px); - - .footer-links{ - margin-bottom: 20px; - } - - .footer-hashi{ - letter-spacing: 2px; - margin-bottom: 30px; - - a{ - font-weight: $font-weight-museo-xb; - } - - span{ - margin-right: 20px; - } - img{ - display: inline-block; - width: 37px; - height: 40px; - } - } -} - - @media (max-width: 992px) { - #features{ + #features{ top: $large-negative-hero-margin; - .double-row{ - padding: 0 0 0 0; - .row{ - padding-bottom: 90px; - } - } + .double-row{ + padding: 0 0 0 0; + .row{ + padding-bottom: 90px; + } + } - .icn{ - height: 200px; - } - } + .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; + 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 99e998354..0c957be5f 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/_mixins.scss b/website/source/assets/stylesheets/_mixins.scss deleted file mode 100755 index 76dbc757b..000000000 --- a/website/source/assets/stylesheets/_mixins.scss +++ /dev/null @@ -1,724 +0,0 @@ -// -// Mixins -// -------------------------------------------------- - - -// Utilities -// ------------------------- - -// Clearfix -// Source: http://nicolasgallagher.com/micro-clearfix-hack/ -// -// For modern browsers -// 1. The space content is one way to avoid an Opera bug when the -// contenteditable attribute is included anywhere else in the document. -// Otherwise it causes space to appear at the top and bottom of elements -// that are clearfixed. -// 2. The use of `table` rather than `block` is only necessary if using -// `:before` to contain the top-margins of child elements. -@mixin clearfix() { - &:before, - &:after { - content: " "; /* 1 */ - display: table; /* 2 */ - } - &:after { - clear: both; - } -} - -// Webkit-style focus -@mixin tab-focus() { - // Default - outline: thin dotted #333; - // Webkit - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} - -// Center-align a block level element -@mixin center-block() { - display: block; - margin-left: auto; - margin-right: auto; -} - -// Sizing shortcuts -@mixin size($width, $height) { - width: $width; - height: $height; -} -@mixin square($size) { - @include size($size, $size); -} - -// Placeholder text -@mixin placeholder($color: $input-color-placeholder) { - &:-moz-placeholder { color: $color; } // Firefox 4-18 - &::-moz-placeholder { color: $color; } // Firefox 19+ - &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+ - &::-webkit-input-placeholder { color: $color; } // Safari and Chrome -} - -// Text overflow -// Requires inline-block or block for proper styling -@mixin text-overflow() { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -// CSS image replacement -// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 -@mixin hide-text() { - font: #{"0/0"} a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} - - - -// CSS3 PROPERTIES -// -------------------------------------------------- - -// Single side border-radius -@mixin border-top-radius($radius) { - border-top-right-radius: $radius; - border-top-left-radius: $radius; -} -@mixin border-right-radius($radius) { - border-bottom-right-radius: $radius; - border-top-right-radius: $radius; -} -@mixin border-bottom-radius($radius) { - border-bottom-right-radius: $radius; - border-bottom-left-radius: $radius; -} -@mixin border-left-radius($radius) { - border-bottom-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; -} - -// Transitions -@mixin transition($transition) { - -webkit-transition: $transition; - transition: $transition; -} -@mixin transition-delay($transition-delay) { - -webkit-transition-delay: $transition-delay; - transition-delay: $transition-delay; -} -@mixin transition-duration($transition-duration) { - -webkit-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; -} - -// Transformations -@mixin rotate($degrees) { - -webkit-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); -} -@mixin translate($x, $y) { - -webkit-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); -} -@mixin translate3d($x, $y, $z) { - -webkit-transform: translate3d($x, $y, $z); - transform: translate3d($x, $y, $z); -} - -// Backface visibility -// Prevent browsers from flickering when using CSS 3D transforms. -// Default value is `visible`, but can be changed to `hidden` -// 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; -} - -// Box sizing -@mixin box-sizing($boxmodel) { - -webkit-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; -} - -// Resize anything -@mixin resizable($direction) { - resize: $direction; // Options: horizontal, vertical, both - overflow: auto; // Safari fix -} - -// 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; - -webkit-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; -} - -// Opacity -@mixin opacity($opacity) { - opacity: $opacity; - // IE8 filter - $opacity-ie: ($opacity * 100); - filter: #{"alpha(opacity=${opacity-ie})"}; -} - - - -// GRADIENTS -// -------------------------------------------------- - -#gradient { - - // Horizontal gradient, from left to right - // - // Creates two color stops, start and end, by specifying a color and position for each color stop. - // Color stops are not available in IE9 and below. - @mixin horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { - background-image: -webkit-gradient(linear, $start-percent top, $end-percent top, from($start-color), to($end-color)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent)); // Safari 5.1+, Chrome 10+ - background-image: -moz-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // FF 3.6+ - background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10 - background-repeat: repeat-x; - // filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb($start-color),argb($end-color))); // IE9 and down - } - - // Vertical gradient, from top to bottom - // - // Creates two color stops, start and end, by specifying a color and position for each color stop. - // Color stops are not available in IE9 and below. - @mixin vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { - background-image: -webkit-gradient(linear, left $start-percent, left $end-percent, from($start-color), to($end-color)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(top, $start-color, $start-percent, $end-color, $end-percent); // Safari 5.1+, Chrome 10+ - background-image: -moz-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // FF 3.6+ - background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10 - background-repeat: repeat-x; - // filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb($start-color),argb($end-color))); // IE9 and down - } - - @mixin directional($start-color: #555, $end-color: #333, $deg: 45deg) { - background-repeat: repeat-x; - background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1+, Chrome 10+ - background-image: -moz-linear-gradient($deg, $start-color, $end-color); // FF 3.6+ - background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10 - } - @mixin horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { - background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from($start-color), color-stop($color-stop, $mid-color), to($end-color)); - background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color); - background-image: -moz-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color); - background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); - background-repeat: no-repeat; - // filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb($start-color),argb($end-color))); // IE9 and down, gets no color-stop at all for proper fallback - } - @mixin vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { - background-image: -webkit-gradient(linear, 0 0, 0 100%, from($start-color), color-stop($color-stop, $mid-color), to($end-color)); - background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color); - background-image: -moz-linear-gradient(top, $start-color, $mid-color $color-stop, $end-color); - background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); - background-repeat: no-repeat; - // filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb($start-color),argb($end-color))); // IE9 and down, gets no color-stop at all for proper fallback - } - @mixin radial($inner-color: #555, $outer-color: #333) { - background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($inner-color), to($outer-color)); - background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color); - background-image: -moz-radial-gradient(circle, $inner-color, $outer-color); - background-image: radial-gradient(circle, $inner-color, $outer-color); - background-repeat: no-repeat; - } - @mixin striped($color: #555, $angle: 45deg) { - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - } -} - -// Reset filters for IE -// -// When you need to remove a gradient background, do not forget to use this to reset -// the IE filter for IE9 and below. -@mixin reset-filter() { - // filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); -} - - - -// Retina images -// -// Short retina mixin for setting background-image and -size - -@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { - background-image: image-url("#{$file-1x}"); - background-size: $width-1x $height-1x; - - @media - only screen and (-webkit-min-device-pixel-ratio: 2), - only screen and ( min--moz-device-pixel-ratio: 2), - only screen and ( -o-min-device-pixel-ratio: 2/1), - only screen and ( min-device-pixel-ratio: 2), - only screen and ( min-resolution: 192dpi), - only screen and ( min-resolution: 2dppx) { - background-image: image-url("#{$file-2x}"); - background-size: $width-1x $height-1x; - } -} - - -// Responsive image -// -// Keep images from scaling beyond the width of their parents. - -@mixin img-responsive($display: block) { - display: $display; - max-width: 100%; // Part 1: Set a maximum relative to the parent - height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching -} - - -// COMPONENT MIXINS -// -------------------------------------------------- - -// Horizontal dividers -// ------------------------- -// Dividers (basically an hr) within dropdowns and nav lists -@mixin nav-divider($color: #e5e5e5) { - height: 1px; - margin: (($line-height-computed / 2) - 1) 0; - overflow: hidden; - background-color: $color; -} - -// Panels -// ------------------------- -@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) { - border-color: $border; - & > .panel-heading { - color: $heading-text-color; - background-color: $heading-bg-color; - border-color: $heading-border; - + .panel-collapse .panel-body { - border-top-color: $border; - } - } - & > .panel-footer { - + .panel-collapse .panel-body { - border-bottom-color: $border; - } - } -} - -// Alerts -// ------------------------- -@mixin alert-variant($background, $border, $text-color) { - background-color: $background; - border-color: $border; - color: $text-color; - hr { - border-top-color: darken($border, 5%); - } - .alert-link { - color: darken($text-color, 10%); - } -} - -// Tables -// ------------------------- -@mixin table-row-variant($state, $background, $border) { - // Exact selectors below required to override `.table-striped` and prevent - // inheritance to nested tables. - .table > thead > tr, - .table > tbody > tr, - .table > tfoot > tr { - > td.#{state}, - > th.#{state}, - &.#{state} > td, - &.#{state} > th { - background-color: $background; - border-color: $border; - } - } - - // Hove# states for `.table-hover` - // Note: this is not available for cells or rows within `thead` or `tfoot`. - .table-hover > tbody > tr { - > td.#{state}:hover, - > th.#{state}:hover, - &.#{state}:hover > td { - background-color: darken($background, 5%); - border-color: darken($border, 5%); - } - } -} - -// Button variants -// ------------------------- -// Easily pump out default styles, as well as :hover, :focus, :active, -// and disabled options for all buttons -@mixin button-variant($color, $background, $border) { - color: $color; - background-color: $background; - border-color: $border; - - &:hover, - &:focus, - &:active, - &.active, - .open .dropdown-toggle& { - color: $color; - background-color: darken($background, 8%); - border-color: darken($border, 12%); - } - &:active, - &.active, - .open .dropdown-toggle& { - background-image: none; - } - &.disabled, - &[disabled], - fieldset[disabled] & { - &, - &:hover, - &:focus, - &:active, - &.active { - background-color: $background; - border-color: $border - } - } -} - -// Button sizes -// ------------------------- -@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { - padding: $padding-vertical $padding-horizontal; - font-size: $font-size; - line-height: $line-height; - border-radius: $border-radius; -} - -// Pagination -// ------------------------- -@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) { - > li { - > a, - > span { - padding: $padding-vertical $padding-horizontal; - font-size: $font-size; - } - &:first-child { - > a, - > span { - @include border-left-radius($border-radius); - } - } - &:last-child { - > a, - > span { - @include border-right-radius($border-radius); - } - } - } -} - -// Labels -// ------------------------- -@mixin label-variant($color) { - background-color: $color; - &[href] { - &:hover, - &:focus { - background-color: darken($color, 10%); - } - } -} - -// Navbar vertical align -// ------------------------- -// Vertically center elements in the navbar. -// Example: an element has a height of 30px, so write out `@include navbar-vertical-align(30px);` to calculate the appropriate top margin. -@mixin navbar-vertical-align($element-height) { - margin-top: (($navbar-height - $element-height) / 2); - margin-bottom: (($navbar-height - $element-height) / 2); -} - -// Progress bars -// ------------------------- -// @mixin progress-bar-variant($color) { -// background-color: $color; -// .progress-striped & { -// #gradient > @include striped($color); -// } -// } - -// Responsive utilities -// ------------------------- -// More easily include all the states for responsive-utilities.less. -@mixin responsive-visibility() { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } -} - -@mixin responsive-invisibility() { - display: none !important; - tr& { display: none !important; } - th&, - td& { display: none !important; } -} - -// Grid System -// ----------- - -// Centered container element -@mixin container-fixed() { - margin-right: auto; - margin-left: auto; - padding-left: ($grid-gutter-width / 2); - padding-right: ($grid-gutter-width / 2); - @include clearfix(); -} - -// Creates a wrapper for a series of columns -@mixin make-row($gutter: $grid-gutter-width) { - margin-left: ($gutter / -2); - margin-right: ($gutter / -2); - @include clearfix(); -} - -// Generate the extra small columns -@mixin make-xs-column($columns, $gutter: $grid-gutter-width) { - position: relative; - float: left; - width: percentage(($columns / $grid-columns)); - // Prevent columns from collapsing when empty - min-height: 1px; - // Inner gutter via padding - padding-left: ($gutter / 2); - padding-right: ($gutter / 2); -} - -// Generate the small columns -@mixin make-sm-column($columns, $gutter: $grid-gutter-width) { - position: relative; - // Prevent columns from collapsing when empty - min-height: 1px; - // Inner gutter via padding - padding-left: ($gutter / 2); - padding-right: ($gutter / 2); - - // Calculate width based on number of columns available - @media (min-width: $screen-sm) { - float: left; - width: percentage(($columns / $grid-columns)); - } -} - -// Generate the small column offsets -@mixin make-sm-column-offset($columns) { - @media (min-width: $screen-sm) { - margin-left: percentage(($columns / $grid-columns)); - } -} -@mixin make-sm-column-push($columns) { - @media (min-width: $screen-sm) { - left: percentage(($columns / $grid-columns)); - } -} -@mixin make-sm-column-pull($columns) { - @media (min-width: $screen-sm) { - right: percentage(($columns / $grid-columns)); - } -} - -// Generate the medium columns -@mixin make-md-column($columns, $gutter: $grid-gutter-width) { - position: relative; - // Prevent columns from collapsing when empty - min-height: 1px; - // Inner gutter via padding - padding-left: ($gutter / 2); - padding-right: ($gutter / 2); - - // Calculate width based on number of columns available - @media (min-width: $screen-md) { - float: left; - width: percentage(($columns / $grid-columns)); - } -} - -// Generate the large column offsets -@mixin make-md-column-offset($columns) { - @media (min-width: $screen-md) { - margin-left: percentage(($columns / $grid-columns)); - } -} -@mixin make-md-column-push($columns) { - @media (min-width: $screen-md) { - left: percentage(($columns / $grid-columns)); - } -} -@mixin make-md-column-pull($columns) { - @media (min-width: $screen-md) { - right: percentage(($columns / $grid-columns)); - } -} - -// Generate the large columns -@mixin make-lg-column($columns, $gutter: $grid-gutter-width) { - position: relative; - // Prevent columns from collapsing when empty - min-height: 1px; - // Inner gutter via padding - padding-left: ($gutter / 2); - padding-right: ($gutter / 2); - - // Calculate width based on number of columns available - @media (min-width: $screen-lg) { - float: left; - width: percentage(($columns / $grid-columns)); - } -} - -// Generate the large column offsets -@mixin make-lg-column-offset($columns) { - @media (min-width: $screen-lg) { - margin-left: percentage(($columns / $grid-columns)); - } -} -@mixin make-lg-column-push($columns) { - @media (min-width: $screen-lg) { - left: percentage(($columns / $grid-columns)); - } -} -@mixin make-lg-column-pull($columns) { - @media (min-width: $screen-lg) { - right: percentage(($columns / $grid-columns)); - } -} - - -// Form validation states -// -// Used in forms.less to generate the form validation CSS for warnings, errors, -// and successes. - -@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) { - // Color the label and help text - .help-block, - .control-label { - color: $text-color; - } - // Set the border and box shadow on specific inputs to match - .form-control { - border-color: $border-color; - @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work - &:focus { - border-color: darken($border-color, 10%); - $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%); - @include box-shadow($shadow); - } - } - // Set validation states also for addons - .input-group-addon { - color: $text-color; - border-color: $border-color; - background-color: $background-color; - } -} - -// Form control focus state -// -// Generate a customized focus state and for any input with the specified color, -// which defaults to the `$input-focus-border` variable. -// -// We highly encourage you to not customize the default value, but instead use -// this to tweak colors on an as-needed basis. This aesthetic change is based on -// WebKit's default styles, but applicable to a wider range of browsers. Its -// usability and accessibility should be taken into account with any change. -// -// Example usage: change the default blue border and shadow to white for better -// contrast against a dark gray background. - -@mixin form-control-focus($color: $input-border-focus) { - $color-rgba: rgba(red($color), green($color), blue($color), .6); - &:focus { - border-color: $color; - outline: 0; - @include box-shadow(#{"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px ${color-rgba}"}); - } -} - -// Form control sizing -// -// Relative text size, padding, and border-radii changes for form controls. For -// horizontal sizing, wrap controls in the predefined grid classes. `