Improve footer responsiveness
Change-Id: I600c7abb258c96d815ae7b7bef42996d235a854c
diff --git a/dev/scss/footer/footer.scss b/dev/scss/footer/footer.scss
index 97cfce8..e2ec64e 100644
--- a/dev/scss/footer/footer.scss
+++ b/dev/scss/footer/footer.scss
@@ -24,11 +24,33 @@
padding: $item-padding;
text-align: left;
flex-grow: 2;
+ display: flex;
+ flex-direction: row;
a {
white-space: nowrap;
}
}
+ > nav > div {
+ display: inline;
+ margin: .2em;
+ &:after {
+ font-size: bold;
+ content: " | ";
+ white-space: nowrap;
+ color: $dark-orange;
+ }
+ &:last-child {
+ margin-right: 0;
+ &:after {
+ content: none;
+ }
+ }
+ &:first-child {
+ margin-left: 0;
+ }
+ }
+
div.logos {
font-size: 0;
flex-grow: 1;
@@ -52,14 +74,6 @@
content: none
}
}
-
- span.separator {
- &:after {
- font-size: bold;
- content: " | ";
- color: $dark-orange;
- }
- }
}
/**
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index bb2975d..88738a9 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -209,9 +209,31 @@
footer {
padding-left: 0 !important;
+ nav {
+ margin-left: 1em;
+ height: auto;
+ flex-direction: column;
+ div {
+ margin-left: 0;
+ &:after {
+ content: "";
+ }
+ }
+ }
}
}
+@media all and (max-width: 32em) {
+ footer {
+ padding-top: 1em;
+ height: auto;
+ align-items: flex-start;
+ flex-direction: column;
+ div#logos {
+ margin: auto;
+ }
+ }
+}
@media print {
body, html, select, g > text {
@@ -239,4 +261,4 @@
border-left-color: black;
border-left-width: 1em;
}
-}
\ No newline at end of file
+}