-
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