diff --git a/website/source/assets/stylesheets/_footer.scss b/website/source/assets/stylesheets/_footer.scss
new file mode 100644
index 0000000000..95341b9cd1
--- /dev/null
+++ b/website/source/assets/stylesheets/_footer.scss
@@ -0,0 +1,140 @@
+#footer{
+ padding: 64px 0;
+ // @include consul-gradient-bg();
+ background-color: $black;
+
+ .footer-links{
+ li{
+ &.edit{
+ a{
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ font-size: 11px;
+ font-weight: 400;
+ }
+ }
+ a{
+ @include hashi-a-style();
+ @include project-a-style();
+ @include project-footer-a-style();
+ }
+ }
+ }
+
+ .pull-right{
+ padding-right: 15px;
+ }
+
+ .footer-hashi{
+ font-size: 14px;
+ color: $black;
+
+ a{
+ color: $black;
+ font-weight: 600;
+ }
+
+ span{
+ margin-right: 4px;
+ }
+
+ .hashicorp-project{
+ display: inline-block;
+ height: 30px;
+ line-height: 30px;
+ text-decoration: none;
+
+ &.white{
+ color: white;
+ svg{
+ path,
+ polygon{
+ fill: white;
+ }
+ line{
+ stroke: white;
+ }
+ }
+ }
+
+ &:hover{
+ svg{
+ &.svg-by{
+ line{
+ stroke: $purple;
+ }
+ }
+ }
+ }
+
+ 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);
+ }
+ }
+ }
+ }
+ }
+}
+
+@media (max-width: 768px) {
+ #footer{
+ text-align: center;
+
+ .footer-links{
+ float: none;
+ display: inline-block;
+ margin-bottom: 36px;
+ }
+
+ .footer-hashi {
+ float: none;
+ display: inline-block;
+
+ .pull-right{
+ float: none !important;
+ padding-right: 0;
+ }
+ }
+ }
+}
+
+@media (max-width: 414px) {
+ #footer{
+ .footer-links{
+ li{
+ display: block;
+ float: none;
+ }
+ }
+ }
+}
diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss
index 13860a090c..0aaf557a3e 100755
--- a/website/source/assets/stylesheets/_header.scss
+++ b/website/source/assets/stylesheets/_header.scss
@@ -6,7 +6,7 @@
body.page-sub{
#header{
- background-color: $purple;
+ @include consul-gradient-bg();
.navbar-brand {
.logo{
@@ -88,7 +88,7 @@ body.page-sub{
#header {
.navbar-brand {
.logo{
-
+
}
}
}
diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss
index 0519ec5e4c..f6f8dd0d2b 100755
--- a/website/source/assets/stylesheets/_home.scss
+++ b/website/source/assets/stylesheets/_home.scss
@@ -127,37 +127,6 @@ body.page-home{
}
}
-
-
-#footer{
- background-color: $consul-footer-gray;
- background: $consul-footer-gray image-url('consul-footer-logo.png') center center no-repeat;
- @include img-retina("consul-footer-logo.png", "consul-footer-logo@2x.png", 446px, 443px);
-
- .footer-links{
- margin-bottom: 20px;
- }
-
- .footer-hashi{
- letter-spacing: 2px;
- margin-bottom: 30px;
-
- a{
- font-weight: $font-weight-museo-xb;
- }
-
- span{
- margin-right: 20px;
- }
- img{
- display: inline-block;
- width: 37px;
- height: 40px;
- }
- }
-}
-
-
@media (max-width: 992px) {
#features{
top: $large-negative-hero-margin;
diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss
index ab3c41d994..22b222fffa 100644
--- a/website/source/assets/stylesheets/application.scss
+++ b/website/source/assets/stylesheets/application.scss
@@ -25,6 +25,7 @@
// Components
@import "_header";
+@import '_footer';
@import "_jumbotron";
@import "_buttons";
@import '_sidebar';
diff --git a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss
index 1571a6291a..fc4f1634a2 100755
--- a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss
+++ b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss
@@ -30,10 +30,10 @@ $nav-margin-right: 12px;
padding: 0;
line-height: 22px;
@include hashi-a-style-core();
- @include transition( color 0.3s ease );
+ @include transition( all 0.3s ease );
&:hover{
- @include transition( color 0.3s ease );
+ @include transition( all 0.3s ease );
background-color: transparent;
}
}
diff --git a/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss b/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss
index f475f518af..00adb1e67b 100755
--- a/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss
+++ b/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss
@@ -18,3 +18,11 @@ $project-logo-pad-left: 8px;
color: $white;
}
}
+
+@mixin project-footer-a-style{
+ line-height: 30px;
+
+ &:hover{
+ opacity: .5;
+ }
+}
diff --git a/website/source/layouts/_footer.erb b/website/source/layouts/_footer.erb
index 3a771b6ac7..9331ba8d84 100644
--- a/website/source/layouts/_footer.erb
+++ b/website/source/layouts/_footer.erb
@@ -1,29 +1,30 @@