From f96c4d0b50e3039334eb39618257a4b41d254e57 Mon Sep 17 00:00:00 2001 From: captainill Date: Sun, 8 Nov 2015 23:16:24 -0800 Subject: [PATCH] footer redesign --- .../source/assets/stylesheets/_footer.scss | 140 ++++++++++++++++++ .../source/assets/stylesheets/_header.scss | 4 +- website/source/assets/stylesheets/_home.scss | 31 ---- .../assets/stylesheets/application.scss | 1 + .../hashicorp-shared/_hashicorp-utility.scss | 4 +- .../hashicorp-shared/_project-utility.scss | 8 + website/source/layouts/_footer.erb | 51 +++---- 7 files changed, 179 insertions(+), 60 deletions(-) create mode 100644 website/source/assets/stylesheets/_footer.scss 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 @@