diff --git a/server/src/footer-view.js b/server/src/footer-view.js index 0580dc4fb9..236f8f6aa2 100644 --- a/server/src/footer-view.js +++ b/server/src/footer-view.js @@ -4,14 +4,19 @@ exports.Footer = class Footer extends React.Component { render() { return (
-
-
- Terms - Privacy Notice - Report IP Infringement - Send Feedback - GitHub - {this.props.authenticated ? Leave Page Shot : null} +
+
+ +
+
+
+ Terms + Privacy Notice + Report IP Infringement + Send Feedback + GitHub + {this.props.authenticated ? Remove All Data : null} +
diff --git a/static/css/partials/_footer.scss b/static/css/partials/_footer.scss index 7283b12c91..beea8eac3f 100644 --- a/static/css/partials/_footer.scss +++ b/static/css/partials/_footer.scss @@ -1,14 +1,46 @@ .footer { + + @include respond-to('small') { + .legal-links { + @include flex-container(column, flex-start, stretch); + } + + a { + margin-bottom: 5px; + } + + .mozilla-logo { + margin-bottom: 10px; + } + } + + @include respond-to('medium') { + .legal-links { + @include flex-container(row, flex-end, flex-end); + height: 20px; + } + } + + + padding: $base-gutter; + .row-space-end { + @include respond-to('small') { + flex-direction: column; + align-items: flex-start; + } + } + a { font-size: 12px; } .legal-links a { + line-height: 12px; margin-right: 16px; } - + .inverse-color-scheme & a { opacity: .5; } @@ -16,6 +48,23 @@ .default-color-scheme & a { color: $light-grey; } + + .mozilla-logo { + background-repeat: no-repeat; + background-size: 77px 20px; + display: block; + height: 20px; + width: 77px; + } + + .inverse-color-scheme & .mozilla-logo { + background-image: url("../img/mozilla@2x.png"); + } + + .default-color-scheme & .mozilla-logo { + background-image: url("../img/mozilla-dark@2x.png"); + } + } diff --git a/static/css/partials/_layout.scss b/static/css/partials/_layout.scss index c29d5b634d..e3489942c1 100644 --- a/static/css/partials/_layout.scss +++ b/static/css/partials/_layout.scss @@ -26,6 +26,10 @@ &.row-center { @include flex-container(row, center, center); } + + &.row-space-end { + @include flex-container(row, space-between, flex-end); + } } .wrapper { diff --git a/static/img/mozilla-dark@2x.png b/static/img/mozilla-dark@2x.png new file mode 100644 index 0000000000..f77418f0d6 Binary files /dev/null and b/static/img/mozilla-dark@2x.png differ diff --git a/static/img/mozilla@2x.png b/static/img/mozilla@2x.png new file mode 100644 index 0000000000..cd5e28c3dd Binary files /dev/null and b/static/img/mozilla@2x.png differ