diff --git a/website/source/assets/stylesheets/_api.scss b/website/source/assets/stylesheets/_api.scss
index 9bbffe6aa..8decfdb4f 100644
--- a/website/source/assets/stylesheets/_api.scss
+++ b/website/source/assets/stylesheets/_api.scss
@@ -3,49 +3,49 @@
// --------------------------------------------------
.bs-api-section dl, dl.api {
- margin-top: 30px;
- line-height: 20px;
+ margin-top: 30px;
+ line-height: 20px;
- dt {
+ dt {
+ color: #888;
+ text-transform: uppercase;
+ font-weight: normal;
+ float: left;
+ width: 150px;
+ text-align: right;
+ }
+
+ dd {
+ margin-left: 170px;
+
+ pre.api-sample {
+ margin-top: 20px;
+ font-size: 14px;
+ padding: 10px;
+ }
+ }
+
+ ul {
+ margin: 0;
+ padding: 0;
+
+ li {
+ margin: 0;
+ list-style-type: none;
+ padding-bottom: 20px;
+ font-size: 15px;
+ font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-weight: 500;
+
+ span.param {
+ font-weight: bold;
+ }
+
+ span.param-flags {
+ font-style: italic;
color: #888;
- text-transform: uppercase;
- font-weight: normal;
- float: left;
- width: 150px;
- text-align: right;
- }
-
- dd {
- margin-left: 170px;
-
- pre.api-sample {
- margin-top: 20px;
- font-size: 14px;
- padding: 10px;
- }
- }
-
- ul {
- margin: 0;
- padding: 0;
-
- li {
- margin: 0;
- list-style-type: none;
- padding-bottom: 20px;
- font-size: 15px;
- font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-weight: 500;
-
- span.param {
- font-weight: bold;
- }
-
- span.param-flags {
- font-style: italic;
- color: #888;
- padding-right: 6px;
- }
- }
+ padding-right: 6px;
+ }
}
+ }
}
diff --git a/website/source/assets/stylesheets/_buttons.scss b/website/source/assets/stylesheets/_buttons.scss
index 57b9f842e..4407600f6 100755
--- a/website/source/assets/stylesheets/_buttons.scss
+++ b/website/source/assets/stylesheets/_buttons.scss
@@ -3,117 +3,117 @@
// --------------------------------------------------
.h-btn{
- display: inline-block;
- background-color: transparent;
- color: $black;
- @include transition(color .3s ease-in-out);
- //@include btn-shadow();
- font-family: $font-family-blanc-reg;
- text-transform: uppercase;
- border-radius: 3px;
+ display: inline-block;
+ background-color: transparent;
+ color: $black;
+ @include transition(color .3s ease-in-out);
+ //@include btn-shadow();
+ font-family: $font-family-blanc-reg;
+ text-transform: uppercase;
+ border-radius: 3px;
- &.has-caret{
- span.h-caret{
- display: inline-block;
- width: 8px;
- height: 12px;
- margin-left: 10px;
- @include transition(all 300ms ease-in);
- }
- }
+ &.has-caret{
+ span.h-caret{
+ display: inline-block;
+ width: 8px;
+ height: 12px;
+ margin-left: 10px;
+ @include transition(all 300ms ease-in);
+ }
+ }
- &.lrg{
- font-size: $font-size-reg;
- padding: 10px 24px;
- }
+ &.lrg{
+ font-size: $font-size-reg;
+ padding: 10px 24px;
+ }
- &.sml{
- padding: 8px 14px;
- font-size: $font-size-reg - 2;
- line-height: 14px;
+ &.sml{
+ padding: 8px 14px;
+ font-size: $font-size-reg - 2;
+ line-height: 14px;
- &.has-caret{
- span.h-caret{
- background-size: 6px 9px !important;
- margin-bottom: -2px;
- margin-right: -3px;
- }
- }
- }
+ &.has-caret{
+ span.h-caret{
+ background-size: 6px 9px !important;
+ margin-bottom: -2px;
+ margin-right: -3px;
+ }
+ }
+ }
- &.light{
- color: $green-light;
+ &.light{
+ color: $green-light;
- &.has-border{
- border: 2px solid $green-light;
- }
+ &.has-border{
+ border: 2px solid $green-light;
+ }
- &.has-caret{
- span.h-caret{
- background: image-url('../images/caret-light.png') 0 0 no-repeat;
- @include img-retina("../images/caret-light.png", "../images/caret-light@2x.png", 8px, 12px);
- }
- }
- }
+ &.has-caret{
+ span.h-caret{
+ background: image-url('../images/caret-light.png') 0 0 no-repeat;
+ @include img-retina("../images/caret-light.png", "../images/caret-light@2x.png", 8px, 12px);
+ }
+ }
+ }
- &.green{
- color: $green;
+ &.green{
+ color: $green;
- &.has-border{
- border: 2px solid $green;
- }
+ &.has-border{
+ border: 2px solid $green;
+ }
- span.h-caret{
- background: image-url('../images/caret-green.png') 0 0 no-repeat;
- @include img-retina("../images/caret-green.png", "../images/caret-green@2x.png", 8px, 12px);
- }
+ span.h-caret{
+ background: image-url('../images/caret-green.png') 0 0 no-repeat;
+ @include img-retina("../images/caret-green.png", "../images/caret-green@2x.png", 8px, 12px);
+ }
- &.fill{
- background-color: $green;
- color: $white;
+ &.fill{
+ background-color: $green;
+ color: $white;
- span.h-caret{
- background: image-url('../images/caret-white.png') 0 0 no-repeat;
- @include img-retina("../images/caret-white.png", "../images/caret-white@2x.png", 8px, 12px);
- }
- }
- }
+ span.h-caret{
+ background: image-url('../images/caret-white.png') 0 0 no-repeat;
+ @include img-retina("../images/caret-white.png", "../images/caret-white@2x.png", 8px, 12px);
+ }
+ }
+ }
- &.gray{
- color: $blue-light;
+ &.gray{
+ color: $blue-light;
- &.border{
- border: 2px solid $blue-light;
- }
+ &.border{
+ border: 2px solid $blue-light;
+ }
- &.fill{
- background-color: $blue-light;
- color: $white;
+ &.fill{
+ background-color: $blue-light;
+ color: $white;
- span.h-caret{
- background: image-url('../images/caret-white.png') 0 0 no-repeat;
- @include img-retina("../images/caret-white.png", "../images/caret-white@2x.png", 8px, 12px);
- }
- }
- }
+ span.h-caret{
+ background: image-url('../images/caret-white.png') 0 0 no-repeat;
+ @include img-retina("../images/caret-white.png", "../images/caret-white@2x.png", 8px, 12px);
+ }
+ }
+ }
- &.dark{
- color: $green-dark;
+ &.dark{
+ color: $green-dark;
- &.border{
- border: 2px solid $green-dark;
- }
- }
+ &.border{
+ border: 2px solid $green-dark;
+ }
+ }
- &:hover{
- text-decoration: none;
- @include transition(color 200ms ease-in);
+ &:hover{
+ text-decoration: none;
+ @include transition(color 200ms ease-in);
- &.has-caret{
- span.h-caret{
- @include translate(4px, 0);
- @include transition(all 200ms ease-in);
- }
- }
- }
+ &.has-caret{
+ span.h-caret{
+ @include translate(4px, 0);
+ @include transition(all 200ms ease-in);
+ }
+ }
+ }
}
diff --git a/website/source/assets/stylesheets/_community.scss b/website/source/assets/stylesheets/_community.scss
index 280360058..65b6ecceb 100644
--- a/website/source/assets/stylesheets/_community.scss
+++ b/website/source/assets/stylesheets/_community.scss
@@ -1,21 +1,21 @@
.people {
- margin-top: 30px;
+ margin-top: 30px;
- .person {
- margin-bottom: 40px;
+ .person {
+ margin-bottom: 40px;
- h3 {
- color: $blue-dark;
- text-transform: none;
- }
-
- img {
- width: 125px;
- margin: auto auto;
- }
-
- .bio {
- padding-left: 150px;
- }
+ h3 {
+ color: $blue-dark;
+ text-transform: none;
}
+
+ img {
+ width: 125px;
+ margin: auto auto;
+ }
+
+ .bio {
+ padding-left: 150px;
+ }
+ }
}
diff --git a/website/source/assets/stylesheets/_docs.scss b/website/source/assets/stylesheets/_docs.scss
index 27d91c598..60de39620 100755
--- a/website/source/assets/stylesheets/_docs.scss
+++ b/website/source/assets/stylesheets/_docs.scss
@@ -17,266 +17,266 @@ body.layout-docs,
body.layout-inner,
body.layout-downloads,
body.layout-intro{
- //background: $light-black image-url('sidebar-wire.png') left 62px no-repeat;
- >.container{
- .col-md-8[role=main]{
- min-height: 800px;
- background-color: white;
+ //background: $light-black image-url('sidebar-wire.png') left 62px no-repeat;
+ >.container{
+ .col-md-8[role=main]{
+ min-height: 800px;
+ background-color: white;
- >div{
- position: relative;
- z-index: 10;
- }
- }
- }
+ >div{
+ position: relative;
+ z-index: 10;
+ }
+ }
+ }
}
.docs-sidebar{
- position: relative;
- z-index: 20;
- margin-bottom: 30px;
- margin-top: 50px;
- @include open();
+ position: relative;
+ z-index: 20;
+ margin-bottom: 30px;
+ margin-top: 50px;
+ @include open();
- .nav.docs-sidenav{
- padding-bottom: 15px;
+ .nav.docs-sidenav{
+ padding-bottom: 15px;
- :last-child{
- border-bottom: none;
- }
+ :last-child{
+ border-bottom: none;
+ }
- //all li
- li{
- position: relative;
+ //all li
+ li{
+ position: relative;
- > a{
- padding: 10px 8px;
- font-size: 15px;
- color: $blue-dark;
+ > a{
+ padding: 10px 8px;
+ font-size: 15px;
+ color: $blue-dark;
- &:before{
- @include bez-1-transition();
- }
-
- &:hover{
- background-color: transparent !important;
-
- &:before{
- @include bez-1-transition();
- }
- }
- }
- }
-
- $parent-active-state: -14px;
- $parent-default-state: -10px;
- $child-active-state: -4px;
- $child-default-state: 0px;
-
- //first teir li
- > li {
- margin: 0 0 0 10px;
-
- &.active {
- >a{
- color: $green-dark;
- font-weight: 600;
- border-right: 1px solid $green-faint;
-
- &:hover{
- &:before{
- left: $parent-default-state;
- }
- }
-
- &:before{
- @include rotate(90deg);
- opacity: 1;
- }
- }
-
- .nav {
- display: block;
- }
- }
-
- > a {
- -webkit-font-smoothing: antialiased;
-
- &:hover{
- &:before{
- left: $parent-active-state;
- }
- }
-
- &:before{
- content: '';
- position: absolute;
- width: 8px;
- height: 12px;
- top: 15px;
- left: $parent-default-state;
- overflow: hidden;
- background: url(../images/caret-green.png) 0 0 no-repeat;
- opacity: .3;
- @include img-retina("../images/caret-light.png", "../images/caret-light@2x.png", 6px, 9px);
- }
- }
- }
-
- //nested ul.nav
- .nav {
- display: none;
- padding-top: 10px;
- padding-bottom: 10px;
- margin-bottom: 15px;
- border-right: 1px solid $green-faint;
- border-bottom: 1px solid $green-faint;
-
- > li{
- margin-left: 10px;
-
- &.active{
- > a{
- color: $green-dark;
- font-weight: 600;
-
- &:hover{
- &:before{
- left: $child-default-state;
- }
- }
-
- &:before{
- //background: url(../images/triangle-sprite.png) 0 0 no-repeat;
- //@include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 5px, 19px);
- }
- }
- }
-
- > a{
- -webkit-font-smoothing: antialiased;
- padding: 6px 15px;
-
- &:hover{
- &:before{
- left: $child-active-state;
- }
- }
-
- &:before{
- opacity: .75;
- content: '';
- position: absolute;
- width: 5px;
- height: 7px;
- top: 12px;
- left: $child-default-state;
- overflow: hidden;
- //background: url(../images/triangle-sprite.png) 0 -13px no-repeat;
- //@include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 5px, 19px);
- }
- }
- }
- }
-
- .nav-visible {
- display: block;
+ &:before{
+ @include bez-1-transition();
}
- }
+
+ &:hover{
+ background-color: transparent !important;
+
+ &:before{
+ @include bez-1-transition();
+ }
+ }
+ }
+ }
+
+ $parent-active-state: -14px;
+ $parent-default-state: -10px;
+ $child-active-state: -4px;
+ $child-default-state: 0px;
+
+ //first teir li
+ > li {
+ margin: 0 0 0 10px;
+
+ &.active {
+ >a{
+ color: $green-dark;
+ font-weight: 600;
+ border-right: 1px solid $green-faint;
+
+ &:hover{
+ &:before{
+ left: $parent-default-state;
+ }
+ }
+
+ &:before{
+ @include rotate(90deg);
+ opacity: 1;
+ }
+ }
+
+ .nav {
+ display: block;
+ }
+ }
+
+ > a {
+ -webkit-font-smoothing: antialiased;
+
+ &:hover{
+ &:before{
+ left: $parent-active-state;
+ }
+ }
+
+ &:before{
+ content: '';
+ position: absolute;
+ width: 8px;
+ height: 12px;
+ top: 15px;
+ left: $parent-default-state;
+ overflow: hidden;
+ background: url(../images/caret-green.png) 0 0 no-repeat;
+ opacity: .3;
+ @include img-retina("../images/caret-light.png", "../images/caret-light@2x.png", 6px, 9px);
+ }
+ }
+ }
+
+ //nested ul.nav
+ .nav {
+ display: none;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ margin-bottom: 15px;
+ border-right: 1px solid $green-faint;
+ border-bottom: 1px solid $green-faint;
+
+ > li{
+ margin-left: 10px;
+
+ &.active{
+ > a{
+ color: $green-dark;
+ font-weight: 600;
+
+ &:hover{
+ &:before{
+ left: $child-default-state;
+ }
+ }
+
+ &:before{
+ //background: url(../images/triangle-sprite.png) 0 0 no-repeat;
+ //@include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 5px, 19px);
+ }
+ }
+ }
+
+ > a{
+ -webkit-font-smoothing: antialiased;
+ padding: 6px 15px;
+
+ &:hover{
+ &:before{
+ left: $child-active-state;
+ }
+ }
+
+ &:before{
+ opacity: .75;
+ content: '';
+ position: absolute;
+ width: 5px;
+ height: 7px;
+ top: 12px;
+ left: $child-default-state;
+ overflow: hidden;
+ //background: url(../images/triangle-sprite.png) 0 -13px no-repeat;
+ //@include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 5px, 19px);
+ }
+ }
+ }
+ }
+
+ .nav-visible {
+ display: block;
+ }
+ }
}
.bs-docs-section{
- padding-top: 10px;
- padding-left: 3%;
- padding-bottom: 80px;
+ padding-top: 10px;
+ padding-left: 3%;
+ padding-bottom: 160px;
- .lead{
- margin-bottom: 48px
- }
+ .lead{
+ margin-bottom: 48px
+ }
- .doc-sectional{
- margin-bottom: 48px;
- }
+ .doc-sectional{
+ margin-bottom: 48px;
+ }
- p, li, .alert {
- color: $blue-dark;
- font-size: 18px;
- font-family: $font-family-open-sans;
- font-weight: $font-weight-reg;
- line-height: 1.84em;
- margin: 0 0 18px;
- -webkit-font-smoothing: antialiased;
- }
+ p, li, .alert {
+ color: $blue-dark;
+ font-size: 18px;
+ font-family: $font-family-open-sans;
+ font-weight: $font-weight-reg;
+ line-height: 1.84em;
+ margin: 0 0 18px;
+ -webkit-font-smoothing: antialiased;
+ }
- pre{
- margin: 0 0 18px;
+ pre{
+ margin: 0 0 18px;
+ }
+
+ a{
+ color: $green-dark;
+ border-bottom: 1px solid $green-dark;
+ @include transition(all 300ms ease-in);
+
+ &:hover{
+ color: $blue-dark;
+ border-bottom: 2px solid $blue-dark;
+ text-decoration: none;
+ @include transition(all 300ms ease-in);
}
+ }
- a{
- color: $green-dark;
- border-bottom: 1px solid $green-dark;
- @include transition(all 300ms ease-in);
+ img{
+ max-width: 650px;
+ margin-top: 25px;
+ margin-bottom: 25px;
+ }
- &:hover{
- color: $blue-dark;
- border-bottom: 2px solid $blue-dark;
- text-decoration: none;
- @include transition(all 300ms ease-in);
- }
- }
+ h1, .h1, h2, .h2, h3, .h3, h4, .h4{
+ color: $gray-dark;
+ margin-top: 54px;
+ margin-bottom: 18px;
+ @include open-sb();
+ }
- img{
- max-width: 650px;
- margin-top: 25px;
- margin-bottom: 25px;
- }
+ h1{
+ font-size: 36px;
+ }
- h1, .h1, h2, .h2, h3, .h3, h4, .h4{
- color: $gray-dark;
- margin-top: 54px;
- margin-bottom: 18px;
- @include open-sb();
- }
-
- h1{
- font-size: 36px;
- }
-
- #graph {
- margin-top: 30px;
- }
+ #graph {
+ margin-top: 30px;
+ }
}
@media (max-width: 992px) {
.bs-docs-section{
- padding-left: 0;
+ padding-left: 0;
}
}
@media (max-width: 768px) {
- .bs-docs-section{
- padding-top: 0;
- h1{
- margin-top: 0;
- }
- }
+ .bs-docs-section{
+ padding-top: 0;
+ h1{
+ margin-top: 0;
+ }
+ }
}
@media (max-width: 480px) {
- .bs-docs-section{
- img{
- max-width: 450px;
- }
+ .bs-docs-section{
+ img{
+ max-width: 450px;
+ }
- h1{
- font-size: 32px;
- }
- }
+ h1{
+ font-size: 32px;
+ }
+ }
}
diff --git a/website/source/assets/stylesheets/_downloads.scss b/website/source/assets/stylesheets/_downloads.scss
index be2187eaf..7150c6f40 100644
--- a/website/source/assets/stylesheets/_downloads.scss
+++ b/website/source/assets/stylesheets/_downloads.scss
@@ -1,59 +1,59 @@
.downloads {
+ margin-top: 20px;
+
+ .description {
+ margin-bottom: 20px;
+ }
+
+ .download {
+ border-bottom: 1px solid #b2b2b2;
+ padding-bottom: 15px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+
+ .details {
+ padding-left: 95px;
+
+ h2 {
+ margin-top: 30px;
+ }
+
+ ul {
+ padding-left: 0px;
+ }
+
+ li {
+ display: inline-block;
+
+ &:after {
+ content: " | ";
+ }
+
+ &:last-child:after {
+ content: "";
+ }
+ }
+ }
+
+ .icon {
+ img {
+ width: 75px;
+ }
+ }
+
+ .os-name {
+ font-size: 40px;
+ margin-bottom: -3px;
+ }
+ }
+
+ .poweredby {
margin-top: 20px;
- .description {
- margin-bottom: 20px;
- }
-
- .download {
- border-bottom: 1px solid #b2b2b2;
- padding-bottom: 15px;
- margin-top: 10px;
- margin-bottom: 10px;
-
- .details {
- padding-left: 95px;
-
- h2 {
- margin-top: 30px;
- }
-
- ul {
- padding-left: 0px;
- }
-
- li {
- display: inline-block;
-
- &:after {
- content: " | ";
- }
-
- &:last-child:after {
- content: "";
- }
- }
- }
-
- .icon {
- img {
- width: 75px;
- }
- }
-
- .os-name {
- font-size: 40px;
- margin-bottom: -3px;
- }
- }
-
- .poweredby {
- margin-top: 20px;
-
- img {
- display: block;
- margin: 0 auto;
- width: 122px;
- }
+ img {
+ display: block;
+ margin: 0 auto;
+ width: 122px;
}
+ }
}
diff --git a/website/source/assets/stylesheets/_footer.scss b/website/source/assets/stylesheets/_footer.scss
index 02acb5c03..468939219 100644
--- a/website/source/assets/stylesheets/_footer.scss
+++ b/website/source/assets/stylesheets/_footer.scss
@@ -1,68 +1,115 @@
body.page-sub{
- #footer{
- padding: 0 0 40px 0;
- .col-md-5{
- padding-top: 40px;
- border-top: 1px solid $faint-gray;
- }
+ #footer{
+ padding: 0 0 40px 0;
+ .col-md-5{
+ padding-top: 40px;
+ border-top: 1px solid $faint-gray;
}
+ }
}
#footer{
- padding: 40px 0;
- color: black;
+ position: relative;
+ padding: 64px 0;
+ color: $black;
- .footer-links{
- margin-bottom: 20px;
+ > .container{
+ position: relative;
+ }
- .li-under a:hover::after,
- .li-under a:focus::after {
- opacity: 1;
- -webkit-transform: skewY(15deg) translateY(8px);
- -moz-transform: skewY(15deg) translateY(8px);
- transform: skewY(15deg) translateY(8px);
- }
+ .footer-links{
+ li{
+ a{
+ @include hashi-a-style();
+ @include project-a-style;
+ line-height: 30px;
+ }
+ }
+ }
- .li-under a::after {
- background-color: $purple;
- }
+ .pull-right{
+ padding-right: 15px;
+ }
- li{
- a{
- @include v-nav-style();
+ .footer-hashi{
+ font-size: 14px;
+
+ color: $black;
+
+ a{
+ color: $black;
+ font-weight: 600;
+ }
+
+ span{
+ margin-right: 4px;
+ }
+
+ .hashi-project{
+ display: inline-block;
+ height: 30px;
+ line-height: 30px;
+ text-decoration: none;
+
+ &:hover{
+ svg{
+ &.svg-by{
+ line{
+ stroke: $green-dark;
}
+ }
}
+ }
+
+ span{
+ font-family: $header-font-family;
+ font-weight: 500;
+ }
+
+ span,
+ svg{
+ display: inline-block;
+ }
+
+ svg{
+ &.svg-by{
+ width: $by-hashicorp-width;
+ height: $by-hashicorp-height;
+ margin-bottom: -4px;
+ margin-left: -3px;
+ }
+
+ &.svg-logo{
+ width: 30px;
+ height: 30px;
+ margin-bottom: -10px;
+ margin-left: -1px;
+ }
+
+ path,
+ line{
+ fill: $black;
+ @include transition(all 300ms ease-in);
+
+ &:hover{
+ @include transition(all 300ms ease-in);
+ }
+ }
+ }
}
+ }
+}
- .pull-right{
- padding-right: 15px;
- }
+.edit-page-link{
+ position: absolute;
+ top: -70px;
+ right: 30px;;
- .footer-hashi{
- font-size: 14px;
-
- a{
- color: black;
- font-weight: 600;
- }
-
- span{
- margin-right: 4px;
- }
-
- .hashi-logo{
- display: inline-block;
- vertical-align: middle;
- i{
- display: inline-block;
- margin-top: -2px;
- width: 27px;
- height: 28px;
- background: image-url('../images/hashi-logo.png') 0 0 no-repeat;
- @include img-retina('../images/hashi-logo.png', '../images/hashi-logo@2x.png', 27px, 28px);
- }
- }
- }
+ a{
+ text-transform: uppercase;
+ color: $black;
+ font-size: 13px;
+ }
}
@media (max-width: 992px) {
@@ -70,50 +117,34 @@ body.page-sub{
}
@media (max-width: 768px) {
+ #footer{
+ text-align: center;
- body.page-sub{
- #footer{
- .col-md-5{
- &:last-child{
- padding-top: 0;
- border-top: none;
- }
- }
- }
+ .footer-links{
+ float: none;
+ display: inline-block;
+ margin-bottom: 36px;
}
- #footer{
- padding: 100px 0 40px;
- text-align: center;
+ .footer-hashi {
+ float: none;
+ display: inline-block;
- .footer-links{
- float: none;
- display: inline-block;
- }
-
- .footer-hashi {
- float: none;
- display: inline-block;
-
- .pull-right{
- float: none !important;
- }
- }
+ .pull-right{
+ float: none !important;
+ padding-right: 0;
+ }
}
+ }
}
-@media (max-width: 480px) {
-
- #footer{
- padding: 40px 0 40px;
- text-align: center;
-
- .footer-links{
- .li-under{
- display: block;
- margin-bottom: $xsmall-pad;
- float: none !important;
- }
- }
+@media (max-width: 414px) {
+ #footer{
+ .footer-links{
+ li{
+ display: block;
+ float: none;
+ }
}
+ }
}
diff --git a/website/source/assets/stylesheets/_global.scss b/website/source/assets/stylesheets/_global.scss
index de0e080bd..acc38ea47 100755
--- a/website/source/assets/stylesheets/_global.scss
+++ b/website/source/assets/stylesheets/_global.scss
@@ -3,115 +3,115 @@
// --------------------------------------------------
/*html{
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
+text-rendering: optimizeLegibility;
+-webkit-font-smoothing: antialiased;
}*/
body {
- -webkit-font-smoothing: antialiased;
- color: $black;
- background-color: $white;
- font-size: 15px;
- font-family: $font-family-open-sans;
- font-weight: 500;
+ -webkit-font-smoothing: antialiased;
+ color: $black;
+ background-color: $white;
+ font-size: 15px;
+ font-family: $font-family-open-sans;
+ font-weight: 500;
}
h1, h2, h3, h4, h5 {
- -webkit-font-smoothing: antialiased;
+ -webkit-font-smoothing: antialiased;
}
h1{
- font-size: 42px;
- line-height: 42px;
- font-family: $font-family-open-sans;
- font-weight: $font-weight-reg;
- margin-bottom: 24px;
+ font-size: 42px;
+ line-height: 42px;
+ font-family: $font-family-open-sans;
+ font-weight: $font-weight-reg;
+ margin-bottom: 24px;
}
h3, h4{
- font-size: 24px;
- line-height: 24px;
- font-family: $font-family-open-sans;
- font-weight: $font-weight-reg;
+ font-size: 24px;
+ line-height: 24px;
+ font-family: $font-family-open-sans;
+ font-weight: $font-weight-reg;
}
//an alternative color for buttons in the doc body
.btn-serf{
- color: $white !important;
- background-color: $btn-color;
- border-radius: $btn-border-radius;
- //@include box-shadow( $shadow );
+ color: $white !important;
+ background-color: $btn-color;
+ border-radius: $btn-border-radius;
+ //@include box-shadow( $shadow );
}
.highlight{
- margin-bottom: 18px;
+ margin-bottom: 18px;
}
pre {
- background-color: $black;
- color: $white;
- font-size: 14px;
- font-weight: normal;
- font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
- border: none;
- padding: 20px;
- margin-bottom: 0;
+ background-color: $black;
+ color: $white;
+ font-size: 14px;
+ font-weight: normal;
+ font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
+ border: none;
+ padding: 20px;
+ margin-bottom: 0;
}
//all below styles are overriding corrections for below (min-width: 992px)
//below (min-width: 992px) these styles change
.navbar-nav {
- margin: 0;
+ margin: 0;
}
.navbar-right {
- float: right !important;
+ float: right !important;
}
.navbar-nav > li {
- float: left;
+ float: left;
}
.navbar-nav > li > a {
- padding-top: 15px;
- padding-bottom: 15px;
+ padding-top: 15px;
+ padding-bottom: 15px;
}
.center {
- text-align: center;
+ text-align: center;
}
//fixed grid below 992 to prevent smaller responsive sizes
@media (max-width: 992px) {
- .container{
- max-width: 970px;
- }
+ .container{
+ max-width: 970px;
+ }
}
@media (max-width: 768px) {
- body {
- font-size: 14px;
- }
+ body {
+ font-size: 14px;
+ }
- h1{
- font-size: $font-size-m !important;
- line-height: $font-size-m;
- font-weight: $font-weight-reg;
- margin-bottom: 24px;
- }
+ h1{
+ font-size: $font-size-m !important;
+ line-height: $font-size-m;
+ font-weight: $font-weight-reg;
+ margin-bottom: 24px;
+ }
- h2{
- font-size: $font-size-m !important;
- font-weight: $font-weight-reg;
- }
+ h2{
+ font-size: $font-size-m !important;
+ font-weight: $font-weight-reg;
+ }
- h3{
- font-size: $font-size-m !important;
- font-weight: $font-weight-reg;
- }
+ h3{
+ font-size: $font-size-m !important;
+ font-weight: $font-weight-reg;
+ }
- h4{
- font-size: $font-size-reg !important;
- font-weight: $font-weight-reg;
- }
+ h4{
+ font-size: $font-size-reg !important;
+ font-weight: $font-weight-reg;
+ }
}
diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss
index 3fa5d421e..5bca1464a 100755
--- a/website/source/assets/stylesheets/_header.scss
+++ b/website/source/assets/stylesheets/_header.scss
@@ -1,148 +1,79 @@
//
// Header
+// - Project Specific
+// - edits should be made here
// --------------------------------------------------
#header {
- position: relative;
- height: 92px;
- color: $white;
- text-rendering: optimizeLegibility;
- margin-bottom: 0;
- /* opacity: 0;
- @include translate3d(0, -10px, 0); */
- transition: all 1s ease;
- background-color: $white;
+ .navbar-brand {
+ .logo{
+ color: $gray-darker;
+ font-family: $font-family-blanc;
+ font-size: 28px;
+ background: image-url('../images/logo-header.png') 0 0 no-repeat;
+ @include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width, $project-logo-height);
+ background-position: 0 center;
- /* &.showit{
- opacity: 1;
- @include translate3d(0, 0px, 0);
- transition: all 1s ease;
- } */
-
- // &.navbar-static-top{
- // height:70px;
- // z-index: 1000;
- // }
-
- .navbar-header{
-
- .navbar-toggle{
- padding-right: 15px;
- margin-top: 26px;
- margin-bottom: 14px;
- margin-right: 0;
- //border: 2px solid $white;
- border-radius: 0;
- .icon-bar{
- border: 1px solid $black;
- border-radius: 0;
- }
- }
+ &:hover{
+ color: $green-dark;
+ }
}
+ .by{
+ &:hover{
+ svg{
+ line{
+ stroke: $green-dark;
+ }
+ }
+ }
+ }
+ }
+
+ .buttons{
+ margin-top: 2px; //baseline everything
+ ul.navbar-nav{
+ li {
+ &:hover{
+ svg path{
+ fill: $black;
+ }
+ }
+
+ svg path{
+ fill: $blue-light;
+ }
+ }
+ }
+ }
+
+ .main-links,
+ .external-links {
+ li > a {
+ @include project-a-style();
+ }
+ }
+}
+
+@media (max-width: 414px) {
+ #header {
.navbar-brand {
- display: inline-block;
- padding: 0;
- margin: 16px 10px 0 0 ;
-
- .logo{
- display: inline-block;
- height: 56px;
- padding: 0;
- color: $gray-darker;
- font-family: $font-family-blanc;
- font-size: 28px;
- line-height: 56px;
- padding-left: 60px;
- background: image-url('../images/logo-header.png') 0 0 no-repeat;
- @include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", 49px, 56px);
-
- &:hover{
- @include transition(all 300ms ease-in);
- color: $green-dark;
- text-decoration: none;
- }
- }
- }
-
- .main-links.navbar-nav{
- margin-top: 36px;
- margin-left: 120px;
-
- li > a {
- @include v-nav-style();
- }
- }
-
- .buttons{
- ul.navbar-nav{
- margin-top: 36px;
- li {
- padding-left: 12px;
-
- &.download{
- background: image-url('../images/icon-download.png') 0 0 no-repeat;
- @include img-retina("../images/icon-download.png", "../images/icon-download@2x.png", 18px, 18px);
- margin-right: 22px;
- background-position: 0 1px;
- }
-
- &.github{
- background: image-url('../images/icon-github.png') 0 0 no-repeat;
- @include img-retina("../images/icon-github.png", "../images/icon-github@2x.png", 19px, 18px);
- background-position: 0 1px;
- }
-
- >a {
- @include v-nav-style();
- }
- }
- }
- }
-
- .nav > li > a:hover, .nav > li > a:focus {
- background-color: transparent;
- color: $black;
- @include transition( color 0.3s ease );
- }
-}
-
-@media (min-width: 992px) {
-
-}
-
-@media (max-width: 992px) {
-
-}
-
-@media (max-width: 992px) {
- #header{
- .main-links.navbar-nav{
- margin-left: 20px;
- }
-
- .buttons{
- ul.navbar-nav{
- li {
- &.download{
- margin-right: 8px;
- }
- }
- }
- }
- }
-
-}
-
-@media (max-width: 763px) {
- .navbar-static-top {
- .nav-white {
- background-color:rgba(0,0,0,0.5);
- }
+ .logo{
+ padding-left: 42px;
+ font-size: 18px;
+ @include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width * .75, $project-logo-height * .75);
+ }
}
+ }
}
@media (max-width: 320px) {
-
+ #header {
+ .navbar-brand {
+ .logo{
+ // font-size: 0 !important; //hide terraform text
+ }
+ }
+ }
}
diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss
index 2f8fc5ed8..29d02586a 100755
--- a/website/source/assets/stylesheets/_home.scss
+++ b/website/source/assets/stylesheets/_home.scss
@@ -3,411 +3,408 @@
// --------------------------------------------------
#hero{
- position: relative;
- @include translate3d(0, -10px, 0);
- text-align: center;
- //background: image-url('../images/nomad-bg.png') 0 0 repeat;
- //@include img-retina("../images/nomad-bg.png", "../images/nomad-bg@2x.png", 624px, 358px);
- background: image-url('../images/nomad-giant.jpg') 0 0 no-repeat;
- @include img-retina("../images/nomad-giant.jpg", "../images/nomad-giant.jpg", 624px, 358px);
- background-size: cover !important;
- overflow: hidden;
+ position: relative;
+ text-align: center;
+ background: image-url('../images/nomad-giant.jpg') 0 0 no-repeat;
+ @include img-retina("../images/nomad-giant.jpg", "../images/nomad-giant.jpg", 624px, 358px);
+ background-size: cover !important;
+ overflow: hidden;
- &:before{
- content: '';
- position: absolute;
- top: -20px;
- left: 50%;
- width: 1000px;
- height: 1000px;
- margin-left: -500px;
- border-radius: 500px;
- background-color: $white;
- z-index: 1;
- }
+ &:before{
+ content: '';
+ position: absolute;
+ top: -20px;
+ left: 50%;
+ width: 1000px;
+ height: 1000px;
+ margin-left: -500px;
+ border-radius: 500px;
+ background-color: $white;
+ z-index: 1;
+ }
- #hero-graphic{
- position: absolute;
- display: inline-block;
- left: 50%;
- top: 0;
- width: 499px;
- height: 340px;
- margin-top: 38px;
- margin-left: -250px;
- z-index: 2;
+ #hero-graphic{
+ position: absolute;
+ display: inline-block;
+ left: 50%;
+ top: 0;
+ width: 499px;
+ height: 340px;
+ margin-top: 38px;
+ margin-left: -250px;
+ z-index: 2;
- #hero-logotype{
- position: absolute;
- display: inline-block;
- top: 75px;
- left: 50%;
- width: 115px;
- height: 155px;
- margin-left: -60px;
- background: image-url('../images/hero-logotype.png') 0 0 no-repeat;
- @include img-retina("../images/hero-logotype.png", "../images/hero-logotype@2x.png", 115px, 155px);
- }
+ #hero-logotype{
+ position: absolute;
+ display: inline-block;
+ top: 75px;
+ left: 50%;
+ width: 115px;
+ height: 155px;
+ margin-left: -60px;
+ background: image-url('../images/hero-logotype.png') 0 0 no-repeat;
+ @include img-retina("../images/hero-logotype.png", "../images/hero-logotype@2x.png", 115px, 155px);
+ }
- #cubes{
- .cube{
- position: absolute;
- top: 300px;
- left: 248px;
- opacity: 0.01;
- @include transform( translate(0, 150px) );
- @include transition( all 1.5s $easeInOutBack );
+ #cubes{
+ .cube{
+ position: absolute;
+ top: 300px;
+ left: 248px;
+ opacity: 0.01;
+ @include transform( translate(0, 150px) );
+ @include transition( all 1.5s $easeInOutBack );
- &.in{
- @include transform( translate(0, 0) );
- opacity: 1;
- }
+ &.in{
+ @include transform( translate(0, 0) );
+ opacity: 1;
+ }
- .face {
- @include transform-origin(0 0);
- position: absolute;
- height: 44px;
- width: 44px;
+ .face {
+ @include transform-origin(0 0);
+ position: absolute;
+ height: 44px;
+ width: 44px;
- &.top{
- background-color: $green;
- @include transform(rotate(210deg) skewX(-30deg) scaleY(0.864) );
- }
- &.left{
- background-color: $green-dark;
- @include transform(rotate(90deg) skewX(-30deg) scaleY(0.864) );
- }
- &.right{
- background-color: $green-light;
- @include transform(rotate(-30deg) skewX(-30deg) scaleY(0.864) );
- }
- }
- }
- }
- }
+ &.top{
+ background-color: $green;
+ @include transform(rotate(210deg) skewX(-30deg) scaleY(0.864) );
+ }
+ &.left{
+ background-color: $green-dark;
+ @include transform(rotate(90deg) skewX(-30deg) scaleY(0.864) );
+ }
+ &.right{
+ background-color: $green-light;
+ @include transform(rotate(-30deg) skewX(-30deg) scaleY(0.864) );
+ }
+ }
+ }
+ }
+ }
- #hero-text{
- position: relative;
- padding-top: 400px;
+ #hero-text{
+ position: relative;
+ padding-top: 400px;
- #hero-text-content{
- position: relative;
- z-index: 2;
- padding-bottom: 40px;
- }
+ #hero-text-content{
+ position: relative;
+ z-index: 2;
+ padding-bottom: 40px;
+ }
- h1{
- margin-top: 0;
- color: $blue-dark;
- font-size: $font-size-xl;
- font-family: $font-family-blanc;
- }
+ h1{
+ margin-top: 0;
+ color: $blue-dark;
+ font-size: $font-size-xl;
+ font-family: $font-family-blanc;
+ }
- h4{
- color: $blue-light;
- font-family: $font-family-blanc;
- }
+ h4{
+ color: $blue-light;
+ font-family: $font-family-blanc;
+ }
- #hero-btns{
- margin-top: 26px;
- a{
+ #hero-btns{
+ margin-top: 26px;
+ a{
- }
- }
- }
+ }
+ }
+ }
- #tag-line{
- margin: 15px 0 20px 0;
- font-size: 24px;
- font-weight: 300;
- }
+ #tag-line{
+ margin: 15px 0 20px 0;
+ font-size: 24px;
+ font-weight: 300;
+ }
- p{
- margin-top: 60px;
- text-align: left;
- font-size: 18px;
- font-weight: 300;
- line-height: 2em;
+ p{
+ margin-top: 60px;
+ text-align: left;
+ font-size: 18px;
+ font-weight: 300;
+ line-height: 2em;
- .strong{
- font-size: 20px;
- font-weight: 500;
- }
- }
+ .strong{
+ font-size: 20px;
+ font-weight: 500;
+ }
+ }
}
.banner{
- margin-top: 120px;
+ margin-top: 120px;
- .col{
- p{
- line-height: 24px;
- }
- }
+ .col{
+ p{
+ line-height: 24px;
+ }
+ }
- &.gray-banner{
- .col{
- border: 1px solid $blue-faint;
- }
+ &.gray-banner{
+ .col{
+ border: 1px solid $blue-faint;
+ }
- p{
- color: $blue-light;
- }
- }
+ p{
+ color: $blue-light;
+ }
+ }
- &.green-banner{
- .col{
- border: 1px solid $blue-faint;
- }
+ &.green-banner{
+ .col{
+ border: 1px solid $blue-faint;
+ }
- p{
- color: $blue-dark;
- }
- }
+ p{
+ color: $blue-dark;
+ }
+ }
- &#cta-banner{
- margin-top: 0;
- margin-bottom: 80px;
+ &#cta-banner{
+ margin-top: 0;
+ margin-bottom: 80px;
- .col{
- padding: 60px 20px;
- }
- }
+ .col{
+ padding: 60px 20px;
+ }
+ }
- .col{
- padding: 20px;
- text-align: center;
- border-radius: 3px;
- }
+ .col{
+ padding: 20px;
+ text-align: center;
+ border-radius: 3px;
+ }
- p{
- margin-bottom: 0px;
- margin-right: 30px;
- font-size: $font-size-reg;
- line-height: $font-size-reg;
- font-family: $font-family-blanc-reg;
- }
+ p{
+ margin-bottom: 0px;
+ margin-right: 30px;
+ font-size: $font-size-reg;
+ line-height: $font-size-reg;
+ font-family: $font-family-blanc-reg;
+ }
- p, a{
- display: inline-block;
- }
+ p, a{
+ display: inline-block;
+ }
}
#content{
- overflow: hidden;
- margin-top: 120px;
+ overflow: hidden;
+ margin-top: 120px;
- h2{
- margin-bottom: 120px;
- text-align: center;
- font-size: $font-size-m;
- font-family: $font-family-blanc;
- color: $green;
- text-transform: uppercase;
- }
+ h2{
+ margin-bottom: 120px;
+ text-align: center;
+ font-size: $font-size-m;
+ font-family: $font-family-blanc;
+ color: $green;
+ text-transform: uppercase;
+ }
- .feature{
- position: relative;
- margin-bottom: 60px;
- padding-bottom: 60px;
- border-bottom: 1px solid $blue-faint;
+ .feature{
+ position: relative;
+ margin-bottom: 60px;
+ padding-bottom: 60px;
+ border-bottom: 1px solid $blue-faint;
- &:last-child{
- border-bottom: none;
- }
+ &:last-child{
+ border-bottom: none;
+ }
- &#deploy{
- .feature-graphic{
- margin-top: -130px;
- width: 1161px;
- height: 735px;
- background: image-url('../images/feature-deploy.png') 0 0 no-repeat;
- @include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 1161px, 735px);
- }
- }
+ &#deploy{
+ .feature-graphic{
+ margin-top: -130px;
+ width: 1161px;
+ height: 735px;
+ background: image-url('../images/feature-deploy.png') 0 0 no-repeat;
+ @include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 1161px, 735px);
+ }
+ }
- &#maintain{
- .feature-graphic{
- margin-top: -50px;
- width: 1113px;
- height: 689px;
- background: image-url('../images/feature-manage.png') 0 0 no-repeat;
- @include img-retina("../images/feature-manage.png", "../images/feature-manage@2x.png", 1113px, 689px);
- }
- }
+ &#maintain{
+ .feature-graphic{
+ margin-top: -50px;
+ width: 1113px;
+ height: 689px;
+ background: image-url('../images/feature-manage.png') 0 0 no-repeat;
+ @include img-retina("../images/feature-manage.png", "../images/feature-manage@2x.png", 1113px, 689px);
+ }
+ }
- &#healing{
- .feature-graphic{
- margin-top: 80px;
- width: 1009px;
- height: 309px;
- background: image-url('../images/feature-healing.png') 0 0 no-repeat;
- @include img-retina("../images/feature-healing.png", "../images/feature-healing@2x.png", 1009px, 309px);
- }
- }
+ &#healing{
+ .feature-graphic{
+ margin-top: 80px;
+ width: 1009px;
+ height: 309px;
+ background: image-url('../images/feature-healing.png') 0 0 no-repeat;
+ @include img-retina("../images/feature-healing.png", "../images/feature-healing@2x.png", 1009px, 309px);
+ }
+ }
- &#density{
- .feature-graphic{
- margin-top: 80px;
- width: 1040px;
- height: 409px;
- background: image-url('../images/feature-density.png') 0 0 no-repeat;
- @include img-retina("../images/feature-density.png", "../images/feature-density@2x.png", 1040px, 409px);
- }
- }
+ &#density{
+ .feature-graphic{
+ margin-top: 80px;
+ width: 1040px;
+ height: 409px;
+ background: image-url('../images/feature-density.png') 0 0 no-repeat;
+ @include img-retina("../images/feature-density.png", "../images/feature-density@2x.png", 1040px, 409px);
+ }
+ }
- &#partners{
- .partner-logos{
- .docker-wrap{
- border-right: 1px solid $blue-faint;
+ &#partners{
+ .partner-logos{
+ .docker-wrap{
+ border-right: 1px solid $blue-faint;
- .partner-logo{
- display: inline-block;
- width: 120px;
- height: 180px;
+ .partner-logo{
+ display: inline-block;
+ width: 120px;
+ height: 180px;
- &.docker-logo{
- background: image-url('../images/partner-docker.png') center center no-repeat;
- @include img-retina("../images/partner-docker.png", "../images/partner-docker@2x.png", 100px, 84px);
- }
- }
- }
+ &.docker-logo{
+ background: image-url('../images/partner-docker.png') center center no-repeat;
+ @include img-retina("../images/partner-docker.png", "../images/partner-docker@2x.png", 100px, 84px);
+ }
+ }
+ }
- .cloud-wrap{
- .partner-logo{
- float: left;
- width: 25%;
- height: 180px;
+ .cloud-wrap{
+ .partner-logo{
+ float: left;
+ width: 25%;
+ height: 180px;
- &.aws-logo{
- background: image-url('../images/partner-amazon.png') center center no-repeat;
- @include img-retina("../images/partner-amazon.png", "../images/partner-amazon@2x.png", 153px, 56px);
- }
- &.google-logo{
- background: image-url('../images/partner-google.png') center center no-repeat;
- @include img-retina("../images/partner-google.png", "../images/partner-google@2x.png", 135px, 87px);
- }
- &.microsoft-logo{
- background: image-url('../images/partner-microsoft.png') center center no-repeat;
- @include img-retina("../images/partner-microsoft.png", "../images/partner-microsoft@2x.png", 188px, 84px);
- }
- &.engineyard-logo{
- background: image-url('../images/partner-engineyard.png') center center no-repeat;
- @include img-retina("../images/partner-engineyard.png", "../images/partner-engineyard@2x.png", 178px, 37px);
- }
- &.digitalocean-logo{
- background: image-url('../images/partner-digitalocean.png') center center no-repeat;
- @include img-retina("../images/partner-digitalocean.png", "../images/partner-digitalocean@2x.png", 134px, 85px);
- }
- }
- }
- }
- }
+ &.aws-logo{
+ background: image-url('../images/partner-amazon.png') center center no-repeat;
+ @include img-retina("../images/partner-amazon.png", "../images/partner-amazon@2x.png", 153px, 56px);
+ }
+ &.google-logo{
+ background: image-url('../images/partner-google.png') center center no-repeat;
+ @include img-retina("../images/partner-google.png", "../images/partner-google@2x.png", 135px, 87px);
+ }
+ &.microsoft-logo{
+ background: image-url('../images/partner-microsoft.png') center center no-repeat;
+ @include img-retina("../images/partner-microsoft.png", "../images/partner-microsoft@2x.png", 188px, 84px);
+ }
+ &.engineyard-logo{
+ background: image-url('../images/partner-engineyard.png') center center no-repeat;
+ @include img-retina("../images/partner-engineyard.png", "../images/partner-engineyard@2x.png", 178px, 37px);
+ }
+ &.digitalocean-logo{
+ background: image-url('../images/partner-digitalocean.png') center center no-repeat;
+ @include img-retina("../images/partner-digitalocean.png", "../images/partner-digitalocean@2x.png", 134px, 85px);
+ }
+ }
+ }
+ }
+ }
- .feature-graphic{
- margin: 0 auto;
- }
+ .feature-graphic{
+ margin: 0 auto;
+ }
- .feature-header{
+ .feature-header{
- &.right{
- h3, p{
- text-align: right;
- display: block;
- float: right;
- }
- }
+ &.right{
+ h3, p{
+ text-align: right;
+ display: block;
+ float: right;
+ }
+ }
- h3{
- margin: 30px 0 20px 0;
- color: $blue-dark;
- letter-spacing: 1px;
- font-size: $font-size-l;
- font-family: $font-family-blanc;
- line-height: 1.25em;
- max-width: 640px;
- }
+ h3{
+ margin: 30px 0 20px 0;
+ color: $blue-dark;
+ letter-spacing: 1px;
+ font-size: $font-size-l;
+ font-family: $font-family-blanc;
+ line-height: 1.25em;
+ max-width: 640px;
+ }
- p{
- margin-bottom: 30px;
- color: $blue-light;
- font-size: $font-size-reg+2;
- font-family: $font-family-blanc-reg;
- line-height: 1.75em;
- max-width: 480px;
- }
- }
+ p{
+ margin-bottom: 30px;
+ color: $blue-light;
+ font-size: $font-size-reg+2;
+ font-family: $font-family-blanc-reg;
+ line-height: 1.75em;
+ max-width: 480px;
+ }
+ }
- .feature-footer{
- margin-top: -50px;
+ .feature-footer{
+ margin-top: -50px;
- p{
- display: inline-block;
- color: $blue-dark;
- font-size: $font-size-reg;
- font-family: $font-family-blanc;
- line-height: 1.75em;
- max-width: 320px;
- padding-left: 20px;
- border-left: 1px solid $blue-faint;
- }
+ p{
+ display: inline-block;
+ color: $blue-dark;
+ font-size: $font-size-reg;
+ font-family: $font-family-blanc;
+ line-height: 1.75em;
+ max-width: 320px;
+ padding-left: 20px;
+ border-left: 1px solid $blue-faint;
+ }
- .docker-outline-logo{
- display: inline-block;
- width: 80px;
- height: 67px;
- position: relative;
- top: 12px;
- margin-left: 8px;
- background: image-url('../images/partner-docker.png') 0 0 no-repeat;
- @include img-retina("../images/partner-docker.png", "../images/partner-docker@2x.png", 80px, 67px);
- }
+ .docker-outline-logo{
+ display: inline-block;
+ width: 80px;
+ height: 67px;
+ position: relative;
+ top: 12px;
+ margin-left: 8px;
+ background: image-url('../images/partner-docker.png') 0 0 no-repeat;
+ @include img-retina("../images/partner-docker.png", "../images/partner-docker@2x.png", 80px, 67px);
+ }
- a{
- margin-bottom: 15px;
- margin-left: 15px;
+ a{
+ margin-bottom: 15px;
+ margin-left: 15px;
- &:first-child{
- margin-left: 0;
- }
- }
- }
- }
+ &:first-child{
+ margin-left: 0;
+ }
+ }
+ }
+ }
- #cta {
- position: relative;
- padding: 160px 0;
- background: image-url('../images/bg-iconscrud.png') center center no-repeat;
- @include img-retina("../images/bg-icons.png", "../images/bg-icons@2x.png", 669px, 260px);
- background-position: center center;
- border-top: 1px solid $faint-gray;
- border-bottom: 1px solid $faint-gray;
+ #cta {
+ position: relative;
+ padding: 160px 0;
+ background: image-url('../images/bg-iconscrud.png') center center no-repeat;
+ @include img-retina("../images/bg-icons.png", "../images/bg-icons@2x.png", 669px, 260px);
+ background-position: center center;
+ border-top: 1px solid $faint-gray;
+ border-bottom: 1px solid $faint-gray;
- a{
- margin-bottom: 5px;
- }
+ a{
+ margin-bottom: 5px;
+ }
- p{
- margin-top: 10px;
- color: $black;
- font-size: 14px;
- font-weight: 600;
- line-height: 1.5esm;
+ p{
+ margin-top: 10px;
+ color: $black;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 1.5esm;
- &.cta-gray{
- color: $gray;
- font-weight: 300;
- }
- }
+ &.cta-gray{
+ color: $gray;
+ font-weight: 300;
+ }
+ }
- .outline-btn {
- padding: 16px 40px;
- display: inline-block;
- &:focus {
- outline: 0;
- }
- }
- }
+ .outline-btn {
+ padding: 16px 40px;
+ display: inline-block;
+ &:focus {
+ outline: 0;
+ }
+ }
+ }
}
@media (min-width: 1200px) {
@@ -420,270 +417,270 @@
}
@media (min-width: 992px) and (max-width:1200px) {
- #cta a {
- margin-top: 15px;
- font-size: 18px;
- }
+ #cta a {
+ margin-top: 15px;
+ font-size: 18px;
+ }
}
@media (min-width: 768px) and (max-width:992px) {
- #cta a {
- margin-top: 10px;
- }
+ #cta a {
+ margin-top: 10px;
+ }
}
@media (max-width: 992px) {
- #content{
- .feature{
- &#deploy{
- .feature-graphic{
- margin-top: -60px;
- width: 768px;
- height: 486px;
- background: image-url('../images/feature-deploy.png') 0 0 no-repeat;
- @include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 768px, 486px);
- }
+ #content{
+ .feature{
+ &#deploy{
+ .feature-graphic{
+ margin-top: -60px;
+ width: 768px;
+ height: 486px;
+ background: image-url('../images/feature-deploy.png') 0 0 no-repeat;
+ @include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 768px, 486px);
+ }
- .feature-footer{
- margin-top: 0;
- }
- }
+ .feature-footer{
+ margin-top: 0;
+ }
+ }
- &#maintain{
- .feature-graphic{
- margin-top: -50px;
- width: 768px;
- height: 475px;
- background: image-url('../images/feature-manage.png') 0 0 no-repeat;
- @include img-retina("../images/feature-manage.png", "../images/feature-manage@2x.png", 768px, 475px);
- }
- }
+ &#maintain{
+ .feature-graphic{
+ margin-top: -50px;
+ width: 768px;
+ height: 475px;
+ background: image-url('../images/feature-manage.png') 0 0 no-repeat;
+ @include img-retina("../images/feature-manage.png", "../images/feature-manage@2x.png", 768px, 475px);
+ }
+ }
- &#density{
- .feature-graphic{
- width: 768px;
- height: 302px;
- background: image-url('../images/feature-density.png') 0 0 no-repeat;
- @include img-retina("../images/feature-density.png", "../images/feature-density@2x.png", 768px, 302px);
- }
- }
+ &#density{
+ .feature-graphic{
+ width: 768px;
+ height: 302px;
+ background: image-url('../images/feature-density.png') 0 0 no-repeat;
+ @include img-retina("../images/feature-density.png", "../images/feature-density@2x.png", 768px, 302px);
+ }
+ }
- &#partners{
- .partner-logos{
- .docker-wrap{
- //border: none;
- .partner-logo{
- @include scale(.8);
- margin-left: -18px;
- }
- }
- .cloud-wrap{
- .partner-logo{
- @include scale(.8);
- }
- }
- }
- }
- }
- }
+ &#partners{
+ .partner-logos{
+ .docker-wrap{
+ //border: none;
+ .partner-logo{
+ @include scale(.8);
+ margin-left: -18px;
+ }
+ }
+ .cloud-wrap{
+ .partner-logo{
+ @include scale(.8);
+ }
+ }
+ }
+ }
+ }
+ }
}
@media (max-width: 768px) {
- #hero{
- #hero-graphic{
- @include scale(.8);
- }
- }
+ #hero{
+ #hero-graphic{
+ @include scale(.8);
+ }
+ }
- #content{
- .feature{
- &#deploy{
- .feature-graphic{
- margin-top: 0px;
- width: 480px;
- height: 304px;
- background: image-url('../images/feature-deploy.png') 0 0 no-repeat;
- @include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 480px, 304px);
- }
+ #content{
+ .feature{
+ &#deploy{
+ .feature-graphic{
+ margin-top: 0px;
+ width: 480px;
+ height: 304px;
+ background: image-url('../images/feature-deploy.png') 0 0 no-repeat;
+ @include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 480px, 304px);
+ }
- .feature-footer{
- margin-top: $small-pad;
+ .feature-footer{
+ margin-top: $small-pad;
- .docker-outline-logo{
- width: 94px;
- height: 63px;
- background: image-url('../images/icon-docker-outline.png') 0 0 no-repeat;
- @include img-retina("../images/icon-docker-outline.png", "../images/icon-docker-outline@2x.png", 94px, 63px);
- }
- }
- }
+ .docker-outline-logo{
+ width: 94px;
+ height: 63px;
+ background: image-url('../images/icon-docker-outline.png') 0 0 no-repeat;
+ @include img-retina("../images/icon-docker-outline.png", "../images/icon-docker-outline@2x.png", 94px, 63px);
+ }
+ }
+ }
- &#maintain{
- .feature-graphic{
- margin-top: $small-pad;
- width: 480px;
- height: 297px;
- background: image-url('../images/feature-manage.png') 0 0 no-repeat;
- @include img-retina("../images/feature-manage.png", "../images/feature-manage@2x.png", 480px, 297px);
- }
- }
+ &#maintain{
+ .feature-graphic{
+ margin-top: $small-pad;
+ width: 480px;
+ height: 297px;
+ background: image-url('../images/feature-manage.png') 0 0 no-repeat;
+ @include img-retina("../images/feature-manage.png", "../images/feature-manage@2x.png", 480px, 297px);
+ }
+ }
- &#healing{
- .feature-graphic{
- margin-top: $small-pad;
- width: 480px;
- height: 147px;
- background: image-url('../images/feature-healing.png') 0 0 no-repeat;
- @include img-retina("../images/feature-healing.png", "../images/feature-healing@2x.png", 480px, 147px);
- }
- }
+ &#healing{
+ .feature-graphic{
+ margin-top: $small-pad;
+ width: 480px;
+ height: 147px;
+ background: image-url('../images/feature-healing.png') 0 0 no-repeat;
+ @include img-retina("../images/feature-healing.png", "../images/feature-healing@2x.png", 480px, 147px);
+ }
+ }
- &#density{
- .feature-graphic{
- margin-top: $small-pad;
- width: 480px;
- height: 189px;
- background: image-url('../images/feature-density.png') 0 0 no-repeat;
- @include img-retina("../images/feature-density.png", "../images/feature-density@2x.png", 480px, 189px);
- }
- }
+ &#density{
+ .feature-graphic{
+ margin-top: $small-pad;
+ width: 480px;
+ height: 189px;
+ background: image-url('../images/feature-density.png') 0 0 no-repeat;
+ @include img-retina("../images/feature-density.png", "../images/feature-density@2x.png", 480px, 189px);
+ }
+ }
- &#partners{
- .partner-logo{
- display: block !important;
- float: none !important;
- width: 100% !important;
- margin: 0 auto;
- -webkit-transform: scale(1) !important;
- -ms-transform: scale(1) !important;
- transform: scale(1) !important;
- margin-left: 0 !important;
- height: 130px !important;
- }
+ &#partners{
+ .partner-logo{
+ display: block !important;
+ float: none !important;
+ width: 100% !important;
+ margin: 0 auto;
+ -webkit-transform: scale(1) !important;
+ -ms-transform: scale(1) !important;
+ transform: scale(1) !important;
+ margin-left: 0 !important;
+ height: 130px !important;
+ }
- p{
- padding: 0 20px;
- }
- }
- }
+ p{
+ padding: 0 20px;
+ }
+ }
+ }
- .feature-header{
- h3,p{
- text-align: center !important;
- max-width: none !important;
- float: none !important;
- }
- }
- }
+ .feature-header{
+ h3,p{
+ text-align: center !important;
+ max-width: none !important;
+ float: none !important;
+ }
+ }
+ }
- .banner{
- padding: 18px;
- margin: 0 20px;
+ .banner{
+ padding: 18px;
+ margin: 0 20px;
- .col{
- text-align: center;
+ .col{
+ text-align: center;
- p{
- display: block;
- margin-right: 0;
- margin-bottom: $small-pad;
- }
- }
- }
+ p{
+ display: block;
+ margin-right: 0;
+ margin-bottom: $small-pad;
+ }
+ }
+ }
- #cta{
- .intro{
- text-align: center;
- p{
- text-align: center;
- margin-bottom: 15px;
- }
- }
- }
+ #cta{
+ .intro{
+ text-align: center;
+ p{
+ text-align: center;
+ margin-bottom: 15px;
+ }
+ }
+ }
}
@media (max-width: 480px) {
- #hero{
- background: none;
+ #hero{
+ background: none;
- &:before{
- display: none;
- }
+ &:before{
+ display: none;
+ }
- #hero-graphic{
- height: 60px;
- margin-top: 0;
- @include scale(.54);
- }
+ #hero-graphic{
+ height: 60px;
+ margin-top: 0;
+ @include scale(.54);
+ }
- #hero-text{
- position: relative;
- padding-top: 220px;
- }
- }
+ #hero-text{
+ position: relative;
+ padding-top: 220px;
+ }
+ }
- #content{
- .feature{
- &#deploy{
- .feature-graphic{
- width: 280px;
- height: 177px;
- background: image-url('../images/feature-deploy.png') 0 0 no-repeat;
- @include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 280px, 177px);
- }
- .feature-footer{
- .docker-outline-logo{
- display: block;
- }
- }
- }
+ #content{
+ .feature{
+ &#deploy{
+ .feature-graphic{
+ width: 280px;
+ height: 177px;
+ background: image-url('../images/feature-deploy.png') 0 0 no-repeat;
+ @include img-retina("../images/feature-deploy.png", "../images/feature-deploy@2x.png", 280px, 177px);
+ }
+ .feature-footer{
+ .docker-outline-logo{
+ display: block;
+ }
+ }
+ }
- &#maintain{
- .feature-graphic{
- margin-top: $small-pad;
- width: 280px;
- height: 173px;
- background: image-url('../images/feature-manage.png') 0 0 no-repeat;
- @include img-retina("../images/feature-manage.png", "../images/feature-manage@2x.png", 280px, 173px);
- }
- }
+ &#maintain{
+ .feature-graphic{
+ margin-top: $small-pad;
+ width: 280px;
+ height: 173px;
+ background: image-url('../images/feature-manage.png') 0 0 no-repeat;
+ @include img-retina("../images/feature-manage.png", "../images/feature-manage@2x.png", 280px, 173px);
+ }
+ }
- &#healing{
- .feature-graphic{
- width: 280px;
- height: 86px;
- background: image-url('../images/feature-healing.png') 0 0 no-repeat;
- @include img-retina("../images/feature-healing.png", "../images/feature-healing@2x.png", 280px, 86px);
- }
- }
+ &#healing{
+ .feature-graphic{
+ width: 280px;
+ height: 86px;
+ background: image-url('../images/feature-healing.png') 0 0 no-repeat;
+ @include img-retina("../images/feature-healing.png", "../images/feature-healing@2x.png", 280px, 86px);
+ }
+ }
- &#density{
- .feature-graphic{
- width: 280px;
- height: 110px;
- background: image-url('../images/feature-density.png') 0 0 no-repeat;
- @include img-retina("../images/feature-density.png", "../images/feature-density@2x.png", 280px, 110px);
- }
- }
- }
- }
+ &#density{
+ .feature-graphic{
+ width: 280px;
+ height: 110px;
+ background: image-url('../images/feature-density.png') 0 0 no-repeat;
+ @include img-retina("../images/feature-density.png", "../images/feature-density@2x.png", 280px, 110px);
+ }
+ }
+ }
+ }
}
@media (max-width: 320px) {
- #hero{
- #diagram{
- width: 100%;
- height: 132px;
- background: image-url('../images/hero.png') center 0 no-repeat;
- @include img-retina("../images/hero.png", "../images/hero@2x.png", 320px, 132px);
- }
- }
+ #hero{
+ #diagram{
+ width: 100%;
+ height: 132px;
+ background: image-url('../images/hero.png') center 0 no-repeat;
+ @include img-retina("../images/hero.png", "../images/hero@2x.png", 320px, 132px);
+ }
+ }
- #cta a {
- font-size: 14px;
- font-weight: 400;
- }
+ #cta a {
+ font-size: 14px;
+ font-weight: 400;
+ }
}
diff --git a/website/source/assets/stylesheets/_livestream.scss b/website/source/assets/stylesheets/_livestream.scss
index 7bc651348..8d9253a8e 100644
--- a/website/source/assets/stylesheets/_livestream.scss
+++ b/website/source/assets/stylesheets/_livestream.scss
@@ -1,38 +1,37 @@
body.livestream {
- background-color: black;
+ background-color: black;
}
.livestream-container {
- display: block;
+ display: block;
}
.livestream-video {
- display: block;
- margin: 0 auto;
- max-width: 1000px;
+ display: block;
+ margin: 0 auto;
+ max-width: 1000px;
}
#live-stream-video {
- margin-top: 15px;
- border: 0 none transparent;
- width: 100%;
+ margin-top: 15px;
+ border: 0 none transparent;
+ width: 100%;
+ height: 650px;
+
+ @media (min-width: 1200px) {
height: 650px;
+ }
- @media (min-width: 1200px) {
- height: 650px;
- }
+ @media (max-width: 992px) {
+ height: 500px;
+ }
- @media (max-width: 992px) {
- height: 500px;
- }
+ @media (max-width: 768px) {
+ height: 325px;
+ }
- @media (max-width: 768px) {
- height: 325px;
- }
-
- @media (max-width: 422px) {
- height: 225px;
- }
+ @media (max-width: 422px) {
+ height: 225px;
+ }
}
-
diff --git a/website/source/assets/stylesheets/_mixins.scss b/website/source/assets/stylesheets/_mixins.scss
index 46f7bb2f7..7ccaf4b82 100755
--- a/website/source/assets/stylesheets/_mixins.scss
+++ b/website/source/assets/stylesheets/_mixins.scss
@@ -86,87 +86,87 @@
// Single side border-radius
@mixin border-top-radius($radius) {
border-top-right-radius: $radius;
- border-top-left-radius: $radius;
+ border-top-left-radius: $radius;
}
@mixin border-right-radius($radius) {
border-bottom-right-radius: $radius;
- border-top-right-radius: $radius;
+ border-top-right-radius: $radius;
}
@mixin border-bottom-radius($radius) {
border-bottom-right-radius: $radius;
- border-bottom-left-radius: $radius;
+ border-bottom-left-radius: $radius;
}
@mixin border-left-radius($radius) {
border-bottom-left-radius: $radius;
- border-top-left-radius: $radius;
+ border-top-left-radius: $radius;
}
// Drop shadows
@mixin box-shadow($shadow) {
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
- box-shadow: $shadow;
+ box-shadow: $shadow;
}
// Transitions
@mixin transition($transition) {
-webkit-transition: $transition;
- transition: $transition;
+ transition: $transition;
}
@mixin transition-delay($transition-delay) {
-webkit-transition-delay: $transition-delay;
- transition-delay: $transition-delay;
+ transition-delay: $transition-delay;
}
@mixin transition-duration($transition-duration) {
-webkit-transition-duration: $transition-duration;
- transition-duration: $transition-duration;
+ transition-duration: $transition-duration;
}
@mixin transition-transform($transition) {
-webkit-transition: -webkit-transform $transition;
- -moz-transition: -moz-transform $transition;
- -o-transition: -o-transform $transition;
- transition: transform $transition;
+ -moz-transition: -moz-transform $transition;
+ -o-transition: -o-transform $transition;
+ transition: transform $transition;
}
// Transformations
@mixin transform($transform...) {
- -webkit-transform: $transform;
- -ms-transform: $transform;
- transform: $transform;
+ -webkit-transform: $transform;
+ -ms-transform: $transform;
+ transform: $transform;
}
@mixin rotate($degrees) {
-webkit-transform: rotate($degrees);
- -ms-transform: rotate($degrees); // IE9+
- transform: rotate($degrees);
+ -ms-transform: rotate($degrees); // IE9+
+ transform: rotate($degrees);
}
@mixin scale($ratio) {
-webkit-transform: scale($ratio);
- -ms-transform: scale($ratio); // IE9+
- transform: scale($ratio);
+ -ms-transform: scale($ratio); // IE9+
+ transform: scale($ratio);
}
@mixin translate($x, $y) {
-webkit-transform: translate($x, $y);
- -ms-transform: translate($x, $y); // IE9+
- transform: translate($x, $y);
+ -ms-transform: translate($x, $y); // IE9+
+ transform: translate($x, $y);
}
@mixin skew($x, $y) {
-webkit-transform: skew($x, $y);
- -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
- transform: skew($x, $y);
+ -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
+ transform: skew($x, $y);
}
@mixin translate3d($x, $y, $z) {
-webkit-transform: translate3d($x, $y, $z);
- transform: translate3d($x, $y, $z);
+ transform: translate3d($x, $y, $z);
}
//transform origin
@mixin transform-origin ($origin) {
- moz-transform-origin: $origin;
- -o-transform-origin: $origin;
- -ms-transform-origin: $origin;
- -webkit-transform-origin: $origin;
- transform-origin: $origin;
+ moz-transform-origin: $origin;
+ -o-transform-origin: $origin;
+ -ms-transform-origin: $origin;
+ -webkit-transform-origin: $origin;
+ transform-origin: $origin;
}
// Backface visibility
@@ -175,25 +175,25 @@
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
@mixin backface-visibility($visibility) {
-webkit-backface-visibility: $visibility;
- -moz-backface-visibility: $visibility;
- backface-visibility: $visibility;
+ -moz-backface-visibility: $visibility;
+ backface-visibility: $visibility;
}
// Box sizing
@mixin box-sizing($boxmodel) {
-webkit-box-sizing: $boxmodel;
- -moz-box-sizing: $boxmodel;
- box-sizing: $boxmodel;
+ -moz-box-sizing: $boxmodel;
+ box-sizing: $boxmodel;
}
// User select
// For selecting text on the page
@mixin user-select($select) {
-webkit-user-select: $select;
- -moz-user-select: $select;
- -ms-user-select: $select; // IE10+
- -o-user-select: $select;
- user-select: $select;
+ -moz-user-select: $select;
+ -ms-user-select: $select; // IE10+
+ -o-user-select: $select;
+ user-select: $select;
}
// Resize anything
@@ -205,21 +205,21 @@
// CSS3 Content Columns
@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
-webkit-column-count: $column-count;
- -moz-column-count: $column-count;
- column-count: $column-count;
+ -moz-column-count: $column-count;
+ column-count: $column-count;
-webkit-column-gap: $column-gap;
- -moz-column-gap: $column-gap;
- column-gap: $column-gap;
+ -moz-column-gap: $column-gap;
+ column-gap: $column-gap;
}
// Optional hyphenation
@mixin hyphens($mode: auto) {
word-wrap: break-word;
-webkit-hyphens: $mode;
- -moz-hyphens: $mode;
- -ms-hyphens: $mode; // IE10+
- -o-hyphens: $mode;
- hyphens: $mode;
+ -moz-hyphens: $mode;
+ -ms-hyphens: $mode; // IE10+
+ -o-hyphens: $mode;
+ hyphens: $mode;
}
// Opacity
@@ -433,7 +433,7 @@
.open .dropdown-toggle& {
color: $color;
background-color: darken($background, 8%);
- border-color: darken($border, 12%);
+ border-color: darken($border, 12%);
}
&:active,
&.active,
@@ -449,7 +449,7 @@
&:active,
&.active {
background-color: $background;
- border-color: $border
+ border-color: $border
}
}
}
@@ -747,10 +747,10 @@
background-repeat: no-repeat;
@media (min--moz-device-pixel-ratio: 1.3),
- (-o-min-device-pixel-ratio: 2.6/2),
- (-webkit-min-device-pixel-ratio: 1.3),
- (min-device-pixel-ratio: 1.3),
- (min-resolution: 1.3dppx) {
+ (-o-min-device-pixel-ratio: 2.6/2),
+ (-webkit-min-device-pixel-ratio: 1.3),
+ (min-device-pixel-ratio: 1.3),
+ (min-resolution: 1.3dppx) {
/* on retina, use image that's scaled by 2 */
background-image: url($image);
background-size: $width $height;
diff --git a/website/source/assets/stylesheets/_sidebar.scss b/website/source/assets/stylesheets/_sidebar.scss
index 1f6a94db0..45a4ee64f 100644
--- a/website/source/assets/stylesheets/_sidebar.scss
+++ b/website/source/assets/stylesheets/_sidebar.scss
@@ -1,474 +1,23 @@
-
-// Base variables
-// --------------------------------------------------
-$screen-tablet: 768px;
-
-$gray-darker: #212121; // #212121 - text
-$gray-secondary: #757575; // #757575 - secondary text, icons
-$gray: #bdbdbd; // #bdbdbd - hint text
-$gray-light: #e0e0e0; // #e0e0e0 - divider
-$gray-lighter: #f5f5f5; // #f5f5f5 - background
-
-/* -- Sidebar style ------------------------------- */
-
-// Sidebar variables
-// --------------------------------------------------
-$zindex-sidebar-fixed: 1035;
-
-$sidebar-desktop-width: 280px;
-$sidebar-width: 240px;
-
-
-$sidebar-padding: 16px;
-$sidebar-divider: $sidebar-padding/2;
-
-$sidebar-nav-height: 48px;
-
-$sidebar-icon-width: 40px;
-$sidebar-icon-height: 20px;
-
-$sidebar-badge-size: $sidebar-nav-height/2;
-$sidebar-badge-font-size: 10px;
-
-$sidebar-brand-color: $gray-secondary;
-$sidebar-icon-color: $gray-secondary;
-$sidebar-menu-color: $gray-darker;
-
-
-$sidebar-font-weight: 300;
-
-// Sidebar mixins
-// --------------------------------------------------
-
-// Sidebar horizontal block
//
-// This settings will extended by .sidebar-text, .sidebar-brand and .sidebar-nav>li>a
-@mixin sidebar-block()
-{
- display: block;
- line-height: $sidebar-nav-height;
- padding: 0;
- //padding-left: ($sidebar-padding + $sidebar-badge-size) + $sidebar-padding;
- //padding-right: ($sidebar-padding + $sidebar-badge-size) + $sidebar-padding;
- text-decoration: none;
- clear: both;
- @include v-nav-style-core();
- //@include text-overflow();
- @include transition(all .2s ease-in-out);
- color: $blue-dark;
-
- &:hover, &:focus {
- @include box-shadow(none);
- outline: none;
- }
-
- // positioning caret in sidebar block
- .caret {
- position: absolute;
- right: $sidebar-padding + $sidebar-badge-size/2 - 4px; // caret centered by badge position; 4px - caret width
- top: $sidebar-nav-height/2;
- }
- // positioning badge in sidebar block
- .sidebar-badge {
- position: absolute;
- right: $sidebar-padding;
- top: ($sidebar-nav-height - $sidebar-badge-size)/2 ;
- }
-}
-
-// Sidebar design template
-//
-// You can make own sidebar style with this template
-@mixin sidebar-template(
- $color,
- $bg,
- $header-bg,
- $brand-color,
- $brand-bg,
- $brand-hover-color,
- $brand-hover-bg,
- $divider,
- $badge-color,
- $badge-bg,
- $icon-color,
- $icon-hover-color,
- $link-color,
- $link-bg,
- $link-hover-color,
- $link-hover-bg,
- $link-active-color,
- $link-active-bg,
- $link-disabled-color,
- $link-disabled-bg
-) {
-
- background-color: $bg;
-
- ul{
- padding-left: 0;
- list-style-type: none;
- }
-
- .sidebar-header {
- background-color: $header-bg;
- margin-bottom: 15px;
- }
-
- .sidebar-divider, .sidebar-nav .divider {
- background-color: $divider;
- }
-
- .sidebar-text {
- color: $color;
- }
-
- .buttons-nav{
- margin-top: 10px;
- text-align: center;
- @include v-nav-style-core();
-
- li{
- margin-bottom: 20px;
- a{
- min-width: 148px;
- color: $blue-dark;
- &:hover{
- color: $green-dark;
- }
- }
- }
- }
+// Sidebar
+// - Project Specific
+// - Make sidebar edits here
+// --------------------------------------------------
+.sidebar {
.sidebar-nav {
- text-align: center;
- //border-bottom: 1px solid $faint-gray;
- padding-bottom: 8px;
+ // Links
+ //----------------
+ li {
+ a {
+ color: $black;
- &:last-child{
- border-bottom: none;
- }
-
- li > a {
- color: $link-color;
- background-color: $link-bg;
-
- i {
- color: $icon-color;
- }
- }
- li:hover > a, li > a:hover {
- color: $link-hover-color;
- background-color: $link-hover-bg;
-
- i {
- color: $icon-hover-color;
- }
- }
- li:focus > a, li > a:focus {
- color: $link-color;
- background-color: $link-bg;
-
- i {
- color: $icon-hover-color;
- }
- }
-
- > .open > a {
- &,
- &:hover,
- &:focus {
- color: $link-hover-color;
- background-color: $link-hover-bg;
- }
- }
-
- > .active > a {
- &,
- &:hover,
- &:focus {
- color: $link-active-color;
- background-color: $link-active-bg;
- }
- }
- > .disabled > a {
- &,
- &:hover,
- &:focus {
- color: $link-disabled-color;
- background-color: $link-disabled-bg;
- }
- }
- > li > .ink {
- //background: #80d8ff;
- //opacity: 0.5;
- }
-
- // Dropdown menu items
- > .dropdown {
- // Remove background color from open dropdown
- > .dropdown-menu {
-
- background-color: $link-hover-bg;
-
- > li > a {
- &:focus {
- background-color: $link-hover-bg;
- color: $link-hover-color;
- }
- &:hover {
- background-color: darken($link-hover-bg, 7%);
- color: $link-hover-color;
- }
- }
-
- > .active > a {
- &,
- &:hover,
- &:focus {
- color: $link-active-color;
- background-color: $link-active-bg;
+ svg{
+ path{
+ fill: $black;
}
}
}
}
}
}
-
-//
-// Sidebars
-// --------------------------------------------------
-
-// Wrapper and base class
-//
-// Provide a static sidebar from which we expand to create other sidebar variations.
-.sidebar {
- position: relative;
- display: block;
- min-height: 100%;
- overflow-y: auto;
- overflow-x: hidden;
- border: none;
- @include transition(all 0.5s cubic-bezier(0.55, 0, 0.1, 1));
- @include clearfix();
-}
-
-// Sidebar Elements
-//
-// Basic style of sidebar elements
-.sidebar {
-
- // Sidebar heading
- //----------------
- .sidebar-header {
- position: relative;
- margin-bottom: $sidebar-divider;
- @include transition(all .2s ease-in-out);
- //border-bottom: 1px solid $faint-gray;
-
- .buttons{
- text-align: center;
- padding: $xsmall-pad 0 $small-pad;
- a{
- &.outline-btn{
- margin-right: 10px;
- }
- }
- }
- }
-
- .sidebar-image {
- padding-top: 24px;
- img {
- display: block;
- margin: 0 auto;
- }
- }
-
- // Brand/project name
- //
- // In google guideline used for email dropdown
- .sidebar-brand {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- @include sidebar-block();
-
- &:hover,
- &:focus {
- text-decoration: none;
- }
- }
-
- // Sidebar text
- //----------------
- .sidebar-text {
- @include sidebar-block();
- }
-
- // Sidebar icons
- //----------------
- .sidebar-icon {
- display: inline-block;
- height: $sidebar-icon-height;
- margin-right: $sidebar-divider;
- text-align: left;
- font-size: $sidebar-icon-height;
- vertical-align: middle;
-
- &:before, &:after {
- vertical-align: middle;
- }
- }
-}
-
-
-
-// Sidebar navigation class
-// ------------------------
-.sidebar .sidebar-nav {
- margin: 0;
- padding: 0;
-
- // Links
- //----------------
- li {
- position: relative;
- list-style-type: none;
-
- a {
- position: relative;
- cursor: pointer;
- user-select: none;
- @include sidebar-block();
-
- &:hover {
- background: transparent;
- }
- }
- }
-}
-
-// Sidebar color theme variations
-//
-// ------------------------
-.sidebar-default {
- @include sidebar-template(
- $color: $gray-darker,
- $bg: #fff,
- $header-bg: $white,
- $brand-color: $gray-dark,
- $brand-bg: transparent,
- $brand-hover-color: $gray-darker,
- $brand-hover-bg: rgba(0, 0, 0, 0.10),
- $divider: $gray,
- $badge-color: #fff,
- $badge-bg: $gray,
- $icon-color: $gray-dark,
- $icon-hover-color: $gray-dark,
- $link-color: $gray-darker,
- $link-bg: transparent,
- $link-hover-color: $gray-darker,
- $link-hover-bg: lighten($faint-gray, 6%),
- $link-active-color: $gray-darker,
- $link-active-bg: $gray-light,
- $link-disabled-color: $gray-light,
- $link-disabled-bg: transparent
- );
-}
-
-
-// Sidebar toggling
-//
-// Hide sidebar
-.sidebar {
- width: 0;
- @include translate3d(-$sidebar-desktop-width, 0, 0);
-
- &.open {
- min-width: $sidebar-desktop-width;
- width: $sidebar-desktop-width;
- @include translate3d(0, 0, 0);
- }
-}
-
-// Sidebar positions: fix the left/right sidebars
-.sidebar-fixed-left,
-.sidebar-fixed-right,
-.sidebar-stacked {
- position: fixed;
- top: 0;
- bottom: 0;
- z-index: $zindex-sidebar-fixed;
-}
-.sidebar-stacked {
- left: 0;
-}
-.sidebar-fixed-left {
- left: 0;
- box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
- -webkit-box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
-}
-.sidebar-fixed-right {
- right: 0;
- box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
- -webkit-box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
-
- @include translate3d($sidebar-desktop-width, 0, 0);
- &.open {
- @include translate3d(0, 0, 0);
- }
- .icon-material-sidebar-arrow:before {
- content: "\e614"; // icon-material-arrow-forward
- }
-}
-
-// Sidebar size
-//
-// Change size of sidebar and sidebar elements on small screens
-@media (max-width: $screen-tablet) {
- .sidebar.open {
- min-width: $sidebar-width;
- width: $sidebar-width;
- }
-
- .sidebar .sidebar-header {
- //height: $sidebar-width * 9/16; // 16:9 header dimension
- }
-
- .sidebar .sidebar-image {
- /* img {
- width: $sidebar-width/4 - $sidebar-padding;
- height: $sidebar-width/4 - $sidebar-padding;
- } */
- }
-}
-
-.sidebar-overlay {
- visibility: hidden;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- opacity: 0;
- background: $white;
- z-index: $zindex-sidebar-fixed - 1;
-
- -webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
- -moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
- transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
- -webkit-transform: translateZ(0);
- -moz-transform: translateZ(0);
- -ms-transform: translateZ(0);
- -o-transform: translateZ(0);
- transform: translateZ(0);
-}
-
-.sidebar-overlay.active {
- opacity: 0.3;
- visibility: visible;
- -webkit-transition-delay: 0;
- -moz-transition-delay: 0;
- transition-delay: 0;
-}
diff --git a/website/source/assets/stylesheets/_utilities.scss b/website/source/assets/stylesheets/_utilities.scss
index a1543f039..5ef814442 100755
--- a/website/source/assets/stylesheets/_utilities.scss
+++ b/website/source/assets/stylesheets/_utilities.scss
@@ -6,62 +6,62 @@
//
// -------------------------
@mixin anti-alias() {
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
}
@mixin open-light() {
- font-family: $font-family-open-sans;
- font-weight: 300;
+ font-family: $font-family-open-sans;
+ font-weight: 300;
}
@mixin open() {
- font-family: $font-family-open-sans;
- font-weight: 400;
+ font-family: $font-family-open-sans;
+ font-weight: 400;
}
@mixin open-sb() {
- font-family: $font-family-open-sans;
- font-weight: 600;
+ font-family: $font-family-open-sans;
+ font-weight: 600;
}
@mixin open-bold() {
- font-family: $font-family-open-sans;
- font-weight: 700;
+ font-family: $font-family-open-sans;
+ font-weight: 700;
}
@mixin skewY($skew) {
- -webkit-transform: skewY($skew);
- -moz-transform: skewY($skew);
- -ms-transform: skewY($skew);
- -o-transform: skewY($skew);
- transform: skewY($skew);
+ -webkit-transform: skewY($skew);
+ -moz-transform: skewY($skew);
+ -ms-transform: skewY($skew);
+ -o-transform: skewY($skew);
+ transform: skewY($skew);
}
@mixin v-nav-style-core{
- color: $gray-darker;
- font-family: $font-family-blanc-reg;
- font-size: 13px;
- text-transform: uppercase;
- letter-spacing: 0.0625em;
+ color: $gray-darker;
+ font-family: $font-family-blanc-reg;
+ font-size: 13px;
+ text-transform: uppercase;
+ letter-spacing: 0.0625em;
}
@mixin v-nav-style{
- margin: 0 15px;
- padding: 0;
- line-height: 22px;
- @include v-nav-style-core();
- @include transition( color 0.3s ease );
+ margin: 0 15px;
+ padding: 0;
+ line-height: 22px;
+ @include v-nav-style-core();
+ @include transition( color 0.3s ease );
- &:hover{
- color: $green-dark;
- @include transition( color 0.3s ease );
- background-color: transparent;
- }
+ &:hover{
+ color: $green-dark;
+ @include transition( color 0.3s ease );
+ background-color: transparent;
+ }
}
@mixin bez-1-transition{
- @include transition( all 300ms ease-in-out );
+ @include transition( all 300ms ease-in-out );
}
@@ -90,121 +90,121 @@
}
#demo-app .loading-bar{
- display: block;
- -webkit-animation: shift-rightwards 2s ease-in-out infinite;
- -moz-animation: shift-rightwards 2s ease-in-out infinite;
- -ms-animation: shift-rightwards 2s ease-in-out infinite;
- -o-animation: shift-rightwards 2s ease-in-out infinite;
- animation: shift-rightwards 2s ease-in-out infinite;
- -webkit-animation-delay: .4s;
- -moz-animation-delay: .4s;
- -o-animation-delay: .4s;
- animation-delay: .4s;
+ display: block;
+ -webkit-animation: shift-rightwards 2s ease-in-out infinite;
+ -moz-animation: shift-rightwards 2s ease-in-out infinite;
+ -ms-animation: shift-rightwards 2s ease-in-out infinite;
+ -o-animation: shift-rightwards 2s ease-in-out infinite;
+ animation: shift-rightwards 2s ease-in-out infinite;
+ -webkit-animation-delay: .4s;
+ -moz-animation-delay: .4s;
+ -o-animation-delay: .4s;
+ animation-delay: .4s;
}
.loading-bar{
- position: fixed;
- display: none;
- bottom: 0;
- left: 0;
- right: 0;
- height: 2px;
- z-index: 800;
- background: $blue;
- -webkit-transform: translateX(100%);
- -moz-transform: translateX(100%);
- -o-transform: translateX(100%);
- transform: translateX(100%);
+ position: fixed;
+ display: none;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 2px;
+ z-index: 800;
+ background: $blue;
+ -webkit-transform: translateX(100%);
+ -moz-transform: translateX(100%);
+ -o-transform: translateX(100%);
+ transform: translateX(100%);
}
@-webkit-keyframes shift-rightwards
{
- 0%
- {
- @include translate(-100%, 0);
- }
+ 0%
+ {
+ @include translate(-100%, 0);
+ }
- 40%
- {
- @include translate(0%, 0);
- }
+ 40%
+ {
+ @include translate(0%, 0);
+ }
- 60%
- {
- @include translate(0%, 0);
- }
+ 60%
+ {
+ @include translate(0%, 0);
+ }
- 100%
- {
- @include translate(100%, 0);
- }
+ 100%
+ {
+ @include translate(100%, 0);
+ }
}
@-moz-keyframes shift-rightwards
{
- 0%
- {
- @include translate(-100%, 0);
- }
+ 0%
+ {
+ @include translate(-100%, 0);
+ }
- 40%
- {
- @include translate(0%, 0);
- }
+ 40%
+ {
+ @include translate(0%, 0);
+ }
- 60%
- {
- @include translate(0%, 0);
- }
+ 60%
+ {
+ @include translate(0%, 0);
+ }
- 100%
- {
- @include translate(100%, 0);
- }
+ 100%
+ {
+ @include translate(100%, 0);
+ }
}
@-o-keyframes shift-rightwards
{
- 0%
- {
- @include translate(-100%, 0);
- }
+ 0%
+ {
+ @include translate(-100%, 0);
+ }
- 40%
- {
- @include translate(0%, 0);
- }
+ 40%
+ {
+ @include translate(0%, 0);
+ }
- 60%
- {
- @include translate(0%, 0);
- }
+ 60%
+ {
+ @include translate(0%, 0);
+ }
- 100%
- {
- @include translate(100%, 0);
- }
+ 100%
+ {
+ @include translate(100%, 0);
+ }
}
@keyframes shift-rightwards
{
- 0%
- {
- @include translate(-100%, 0);
- }
+ 0%
+ {
+ @include translate(-100%, 0);
+ }
- 40%
- {
- @include translate(0%, 0);
- }
+ 40%
+ {
+ @include translate(0%, 0);
+ }
- 60%
- {
- @include translate(0%, 0);
- }
+ 60%
+ {
+ @include translate(0%, 0);
+ }
- 100%
- {
- @include translate(100%, 0);
- }
+ 100%
+ {
+ @include translate(100%, 0);
+ }
}
diff --git a/website/source/assets/stylesheets/_variables.scss b/website/source/assets/stylesheets/_variables.scss
index 546424316..c93e9421c 100755
--- a/website/source/assets/stylesheets/_variables.scss
+++ b/website/source/assets/stylesheets/_variables.scss
@@ -6,75 +6,75 @@
// Global values
// --------------------------------------------------
-$header-height: 90px;
-$btn-border-radius: 4px;
-$el-border-radius: 6px;
+$header-height: 90px;
+$btn-border-radius: 4px;
+$el-border-radius: 6px;
// colors
// -------------------------
-$white: #fff;
-$black: #000;
-$gray: #929199;
-$light-gray: #C2C1C7;
-$faint-gray: #E3E3EA;
-$green: #56cdad;
-$green-dark: #449b82;
-$green-light: #9bdb9c;
-$green-faint: #E3F5E3;
-$blue-dark: #4e5859;
-$blue-light: #89999A;
-$blue: #00BFE0;
-$blue-faint: #E0E8E8;
-$light-black: #242424;
-$orange: #e78c5b;
-$gray-dark: #3B4142; //#4e5859;
-$gray: #777;
-$gray-light: #939393;
-$gray-lighter: #979797;
-$red: #dd4e58;
-$red-dark: #c5454e;
-$purple: #822ff7;
-$light-purple: #f7f3f9;
-$btn-color: #4592C5;
+$white: #fff;
+$black: #000;
+$gray: #929199;
+$light-gray: #C2C1C7;
+$faint-gray: #E3E3EA;
+$green: #56cdad;
+$green-dark: #449b82;
+$green-light: #9bdb9c;
+$green-faint: #E3F5E3;
+$blue-dark: #4e5859;
+$blue-light: #89999A;
+$blue: #00BFE0;
+$blue-faint: #E0E8E8;
+$light-black: #242424;
+$orange: #e78c5b;
+$gray-dark: #3B4142; //#4e5859;
+$gray: #777;
+$gray-light: #939393;
+$gray-lighter: #979797;
+$red: #dd4e58;
+$red-dark: #c5454e;
+$purple: #822ff7;
+$light-purple: #f7f3f9;
+$btn-color: #4592C5;
// Scaffolding
// -------------------------
-$body-bg: #fff;
-$text-color: $gray;
+$body-bg: #fff;
+$text-color: $gray;
// Links
// -------------------------
-$link-color: $red-dark;
-$link-hover-color: darken($link-color, 15%);
+$link-color: $red-dark;
+$link-hover-color: darken($link-color, 15%);
// Typography
// -------------------------
-$font-family-open-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$font-family-blanc: 'Blanc-Light', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$font-family-blanc-reg: 'Blanc-Regular', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$font-weight-xl: 300;
-$font-weight-reg: 400;
-$font-weight-sb: 600;
-$font-weight-xb: 700;
-$font-size-xl: 44px;
-$font-size-l: 36px;
-$font-size-m: 28px;
-$font-size-reg: 16px;
+$font-family-open-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$font-family-blanc: 'Blanc-Light', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$font-family-blanc-reg: 'Blanc-Regular', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$font-weight-xl: 300;
+$font-weight-reg: 400;
+$font-weight-sb: 600;
+$font-weight-xb: 700;
+$font-size-xl: 44px;
+$font-size-l: 36px;
+$font-size-m: 28px;
+$font-size-reg: 16px;
-$text-shadow: 1px 1px 1px #000;
-$shadow: $text-shadow;
+$text-shadow: 1px 1px 1px #000;
+$shadow: $text-shadow;
//margin + padding
-$xsmall-pad: 20px;
-$small-pad: 30px;
-$med-pad: 70px;
-$large-pad: 120px;
-$xl-pad: 150px;
+$xsmall-pad: 20px;
+$small-pad: 30px;
+$med-pad: 70px;
+$large-pad: 120px;
+$xl-pad: 150px;
-$light-outline: #f7f7f7;
+$light-outline: #f7f7f7;
//
-$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss
index 723da895e..af16ae319 100755
--- a/website/source/assets/stylesheets/application.scss
+++ b/website/source/assets/stylesheets/application.scss
@@ -16,6 +16,12 @@
//Global Site
@import '_global';
+// Hashicorp Shared Project Styles
+@import 'hashicorp-shared/_hashicorp-utility';
+@import 'hashicorp-shared/_project-utility';
+@import 'hashicorp-shared/_hashicorp-header';
+@import 'hashicorp-shared/_hashicorp-sidebar';
+
// Components
@import '_header';
@import '_footer';
diff --git a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss
new file mode 100755
index 000000000..c9bc593b6
--- /dev/null
+++ b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss
@@ -0,0 +1,228 @@
+//
+// Hashicorp header
+// - Shared throughout projects
+// - Edits should not be made here
+// --------------------------------------------------
+
+#header {
+ position: relative;
+ color: black;
+ text-rendering: optimizeLegibility;
+ margin-bottom: 0;
+ transition: all 1s ease;
+
+ &.white{
+ color: white;
+ .navbar-brand {
+ .logo {
+ color: white;
+ }
+
+ .by{
+ color: white;
+ font-weight: 300;
+ svg{
+ path,
+ polygon{
+ fill: white;
+ }
+ line{
+ stroke: white;
+ }
+ }
+ }
+ }
+
+ .main-links,
+ .external-links {
+ li > a {
+ &:hover{
+ opacity: 1;
+ }
+ }
+ }
+
+ .nav > li > a:hover, .nav > li > a:focus {
+ color: white;
+ }
+
+ .navbar-header{
+ .navbar-toggle{
+ .icon-bar{
+ border: 1px solid white;
+ }
+ }
+ }
+ }
+
+ .navbar-header{
+ .navbar-toggle{
+ height: $header-height;
+ margin: 0;
+ padding-right: 15px;
+ border-radius: 0;
+ .icon-bar{
+ border: 1px solid $black;
+ border-radius: 0;
+ }
+ }
+ }
+
+ .navbar-brand {
+ display: block;
+ height: $header-height;
+ padding: 0;
+ margin: 0 10px 0 0 ;
+
+ .logo{
+ display: inline-block;
+ height: $header-height;
+ vertical-align:top;
+ padding: 0;
+ line-height: $header-height;
+ padding-left: $project-logo-width + $project-logo-pad-left;
+ background-position: 0 center;
+ @include transition(all 300ms ease-in);
+
+ &:hover{
+ @include transition(all 300ms ease-in);
+ text-decoration: none;
+ }
+ }
+
+ .by{
+ display: inline-block;
+ vertical-align:top;
+ height: $header-height;
+ margin-left: 3px;
+ padding-top: 2px;
+ color: black;
+ line-height: $header-height;
+ font-family: $header-font-family;
+ font-weight: 600;
+ font-size: 0;
+ text-decoration: none;
+
+ .svg-wrap{
+ font-size: 13px;
+ }
+
+ svg{
+ &.svg-by{
+ width: $by-hashicorp-width;
+ height: $by-hashicorp-height;
+ margin-bottom: -4px;
+ margin-left: 4px;
+ }
+
+ &.svg-logo{
+ width: 16px;
+ height: 16px;
+ margin-bottom: -3px;
+ margin-left: 4px;
+ }
+
+ path,
+ polygon{
+ fill: black;
+ @include transition(all 300ms ease-in);
+
+ &:hover{
+ @include transition(all 300ms ease-in);
+ }
+ }
+ line{
+ stroke: black;
+ @include transition(all 300ms ease-in);
+
+ &:hover{
+ @include transition(all 300ms ease-in);
+ }
+ }
+ }
+ }
+ }
+
+ .external-links {
+ li {
+ position: relative;
+
+ svg path{
+ @include transition( all 300ms ease-in );
+ }
+
+ &:hover{
+ svg path{
+ @include transition( all 300ms ease-in );
+ }
+ }
+
+ &.download{
+ margin-right: 10px;
+ }
+
+ > a {
+ padding-left: 12px !important;
+ svg{
+ position: absolute;
+ left: -12px;
+ top: 50%;
+ margin-top: -7px;
+ width: 14px;
+ height: 14px;
+ }
+ }
+ }
+ }
+
+ .main-links{
+ margin-right: $nav-margin-right * 2;
+ }
+
+ .main-links,
+ .external-links {
+ li > a {
+ @include hashi-a-style();
+ margin: 0 10px;
+ padding-top: 1px;
+ line-height: $header-height;
+ }
+ }
+
+ .nav > li > a:hover, .nav > li > a:focus {
+ background-color: transparent;
+ color: $black;
+ @include transition( all 300ms ease-in );
+ }
+}
+
+@media (max-width: 414px) {
+ #header {
+ .navbar-header{
+ .navbar-toggle{
+ padding-top: 10px;
+ height: $header-mobile-height;
+ }
+ }
+
+ .navbar-brand {
+ height: $header-mobile-height;
+
+ .logo{
+ height: $header-mobile-height;
+ line-height: $header-mobile-height;
+ }
+ .by{
+ height: $header-mobile-height;
+ line-height: $header-mobile-height;
+ padding-top: 0;
+ }
+ }
+ .main-links,
+ .external-links {
+ li > a {
+ line-height: $header-mobile-height;
+ }
+ }
+ }
+}
diff --git a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss
new file mode 100644
index 000000000..99f77f6c5
--- /dev/null
+++ b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss
@@ -0,0 +1,293 @@
+//
+// Hashicorp Sidebar
+// - Shared throughout projects
+// - Edits should not be made here
+// --------------------------------------------------
+
+// Base variables
+// --------------------------------------------------
+$screen-tablet: 768px;
+
+$gray-darker: #212121; // #212121 - text
+$gray-secondary: #757575; // #757575 - secondary text, icons
+$gray: #bdbdbd; // #bdbdbd - hint text
+$gray-light: #e0e0e0; // #e0e0e0 - divider
+$gray-lighter: #f5f5f5; // #f5f5f5 - background
+$link-color: $gray-darker;
+$link-bg: transparent;
+$link-hover-color: $gray-lighter;
+$link-hover-bg: $gray-lighter;
+$link-active-color: $gray-darker;
+$link-active-bg: $gray-light;
+$link-disabled-color: $gray-light;
+$link-disabled-bg: transparent;
+
+/* -- Sidebar style ------------------------------- */
+
+// Sidebar variables
+// --------------------------------------------------
+$zindex-sidebar-fixed: 1035;
+
+$sidebar-desktop-width: 280px;
+$sidebar-width: 240px;
+
+$sidebar-padding: 16px;
+$sidebar-divider: $sidebar-padding/2;
+
+$sidebar-icon-width: 40px;
+$sidebar-icon-height: 20px;
+
+@mixin sidebar-nav-base {
+ text-align: center;
+
+ &:last-child{
+ border-bottom: none;
+ }
+
+ li > a {
+ background-color: $link-bg;
+ }
+ li:hover > a {
+ background-color: $link-hover-bg;
+ }
+ li:focus > a, li > a:focus {
+ background-color: $link-bg;
+ }
+
+ > .open > a {
+ &,
+ &:hover,
+ &:focus {
+ background-color: $link-hover-bg;
+ }
+ }
+
+ > .active > a {
+ &,
+ &:hover,
+ &:focus {
+ background-color: $link-active-bg;
+ }
+ }
+ > .disabled > a {
+ &,
+ &:hover,
+ &:focus {
+ background-color: $link-disabled-bg;
+ }
+ }
+
+ // Dropdown menu items
+ > .dropdown {
+ // Remove background color from open dropdown
+ > .dropdown-menu {
+ background-color: $link-hover-bg;
+
+ > li > a {
+ &:focus {
+ background-color: $link-hover-bg;
+ }
+ &:hover {
+ background-color: $link-hover-bg;
+ }
+ }
+
+ > .active > a {
+ &,
+ &:hover,
+ &:focus {
+ color: $link-active-color;
+ background-color: $link-active-bg;
+ }
+ }
+ }
+ }
+}
+
+//
+// Sidebar
+// --------------------------------------------------
+
+// Sidebar Elements
+//
+// Basic style of sidebar elements
+.sidebar {
+ position: relative;
+ display: block;
+ min-height: 100%;
+ overflow-y: auto;
+ overflow-x: hidden;
+ border: none;
+ @include transition(all 0.5s cubic-bezier(0.55, 0, 0.1, 1));
+ @include clearfix();
+ background-color: $white;
+
+ ul{
+ padding-left: 0;
+ list-style-type: none;
+ }
+
+ .sidebar-divider, .divider {
+ width: 80%;
+ height: 1px;
+ margin: 8px auto;
+ background-color: lighten($gray, 20%);
+ }
+
+ // Sidebar heading
+ //----------------
+ .sidebar-header {
+ position: relative;
+ margin-bottom: $sidebar-padding;
+ @include transition(all .2s ease-in-out);
+ }
+
+ .sidebar-image {
+ padding-top: 24px;
+ img {
+ display: block;
+ margin: 0 auto;
+ }
+ }
+
+
+ // Sidebar icons
+ //----------------
+ .sidebar-icon {
+ display: inline-block;
+ height: $sidebar-icon-height;
+ margin-right: $sidebar-divider;
+ text-align: left;
+ font-size: $sidebar-icon-height;
+ vertical-align: middle;
+
+ &:before, &:after {
+ vertical-align: middle;
+ }
+ }
+
+ .sidebar-nav {
+ margin: 0;
+ padding: 0;
+
+ @include sidebar-nav-base();
+
+ // Links
+ //----------------
+ li {
+ position: relative;
+ list-style-type: none;
+ text-align: center;
+
+ a {
+ position: relative;
+ cursor: pointer;
+ user-select: none;
+ @include hashi-a-style-core();
+
+ svg{
+ top: 2px;
+ width: 14px;
+ height: 14px;
+ margin-bottom: -2px;
+ margin-right: 4px;
+ }
+ }
+ }
+ }
+}
+
+// Sidebar toggling
+//
+// Hide sidebar
+.sidebar {
+ width: 0;
+ @include translate3d(-$sidebar-desktop-width, 0, 0);
+
+ &.open {
+ min-width: $sidebar-desktop-width;
+ width: $sidebar-desktop-width;
+ @include translate3d(0, 0, 0);
+ }
+}
+
+// Sidebar positions: fix the left/right sidebars
+.sidebar-fixed-left,
+.sidebar-fixed-right,
+.sidebar-stacked {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ z-index: $zindex-sidebar-fixed;
+}
+.sidebar-stacked {
+ left: 0;
+}
+.sidebar-fixed-left {
+ left: 0;
+ box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
+ -webkit-box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
+}
+.sidebar-fixed-right {
+ right: 0;
+ box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
+ -webkit-box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
+
+ @include translate3d($sidebar-desktop-width, 0, 0);
+ &.open {
+ @include translate3d(0, 0, 0);
+ }
+ .icon-material-sidebar-arrow:before {
+ content: "\e614"; // icon-material-arrow-forward
+ }
+}
+
+// Sidebar size
+//
+// Change size of sidebar and sidebar elements on small screens
+@media (max-width: $screen-tablet) {
+ .sidebar.open {
+ min-width: $sidebar-width;
+ width: $sidebar-width;
+ }
+
+ .sidebar .sidebar-header {
+ //height: $sidebar-width * 9/16; // 16:9 header dimension
+ }
+
+ .sidebar .sidebar-image {
+ /* img {
+ width: $sidebar-width/4 - $sidebar-padding;
+ height: $sidebar-width/4 - $sidebar-padding;
+ } */
+ }
+}
+
+.sidebar-overlay {
+ visibility: hidden;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ opacity: 0;
+ background: $white;
+ z-index: $zindex-sidebar-fixed - 1;
+
+ -webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
+ -moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
+ transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
+ -webkit-transform: translateZ(0);
+ -moz-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ -o-transform: translateZ(0);
+ transform: translateZ(0);
+}
+
+.sidebar-overlay.active {
+ opacity: 0.3;
+ visibility: visible;
+ -webkit-transition-delay: 0;
+ -moz-transition-delay: 0;
+ transition-delay: 0;
+}
diff --git a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss
new file mode 100755
index 000000000..1571a6291
--- /dev/null
+++ b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss
@@ -0,0 +1,87 @@
+//
+// Hashicorp Nav (header/footer) Utiliy Vars and Mixins
+//
+// Notes:
+// - Include this in Application.scss before header and feature-footer
+// - Open Sans Google (Semibold - 600) font needs to be included if not already
+// --------------------------------------------------
+
+// Variables
+$font-family-open-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$header-font-family: $font-family-open-sans;
+$header-font-weight: 600; // semi-bold
+
+$header-height: 74px;
+$header-mobile-height: 60px;
+$by-hashicorp-width: 74px;
+$by-hashicorp-height: 16px;
+$nav-margin-right: 12px;
+
+// Mixins
+@mixin hashi-a-style-core{
+ font-family: $header-font-family;
+ font-weight: $header-font-weight;
+ font-size: 14px;
+ //letter-spacing: 0.0625em;
+}
+
+@mixin hashi-a-style{
+ margin: 0 15px;
+ padding: 0;
+ line-height: 22px;
+ @include hashi-a-style-core();
+ @include transition( color 0.3s ease );
+
+ &:hover{
+ @include transition( color 0.3s ease );
+ background-color: transparent;
+ }
+}
+
+//general shared project mixins
+@mixin img-retina($image1x, $image, $width, $height) {
+ background-image: url($image1x);
+ background-size: $width $height;
+ background-repeat: no-repeat;
+
+ @media (min--moz-device-pixel-ratio: 1.3),
+ (-o-min-device-pixel-ratio: 2.6/2),
+ (-webkit-min-device-pixel-ratio: 1.3),
+ (min-device-pixel-ratio: 1.3),
+ (min-resolution: 1.3dppx) {
+ /* on retina, use image that's scaled by 2 */
+ background-image: url($image);
+ background-size: $width $height;
+ }
+}
+
+//
+// -------------------------
+@mixin anti-alias() {
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+}
+
+@mixin open-light() {
+ font-family: $font-family-open-sans;
+ font-weight: 300;
+}
+
+@mixin open() {
+ font-family: $font-family-open-sans;
+ font-weight: 400;
+}
+
+@mixin open-sb() {
+ font-family: $font-family-open-sans;
+ font-weight: 600;
+}
+
+@mixin open-bold() {
+ font-family: $font-family-open-sans;
+ font-weight: 700;
+}
+
+@mixin bez-1-transition{
+ @include transition( all 300ms ease-in-out );
+}
diff --git a/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss b/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss
new file mode 100755
index 000000000..13e1b6081
--- /dev/null
+++ b/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss
@@ -0,0 +1,19 @@
+//
+// Mixins Specific to project
+// - make edits to mixins here
+// --------------------------------------------------
+
+// Variables
+$header-height: 92px;
+$project-logo-width: 49px;
+$project-logo-height: 56px;
+$project-logo-pad-left: 8px;
+
+// Mixins
+@mixin project-a-style{
+ color: $blue-light;
+
+ &:hover{
+ color: $green-dark;
+ }
+}
diff --git a/website/source/layouts/_footer.erb b/website/source/layouts/_footer.erb
index 291033025..ff6b5c46c 100644
--- a/website/source/layouts/_footer.erb
+++ b/website/source/layouts/_footer.erb
@@ -1,26 +1,30 @@
-
+