diff --git a/app/javascript/src/styles/base.scss b/app/javascript/src/styles/base.scss
index 68379cbe6..9a2066c2c 100644
--- a/app/javascript/src/styles/base.scss
+++ b/app/javascript/src/styles/base.scss
@@ -9,6 +9,7 @@
@import "base/links";
@import "base/fontawesome";
+@import "common/footer";
@import "common/helper_classes";
@import "common/helper_palette";
@import "common/ads.scss";
diff --git a/app/javascript/src/styles/common/_footer.scss b/app/javascript/src/styles/common/_footer.scss
new file mode 100644
index 000000000..79047aa3a
--- /dev/null
+++ b/app/javascript/src/styles/common/_footer.scss
@@ -0,0 +1,73 @@
+footer#page-footer {
+ display: grid;
+ grid-template-columns: 1fr 2fr;
+ gap: 0.5rem 0;
+
+ padding: 0.5rem 0 1rem;
+ margin: 1rem 0 0;
+
+ background: var(--color-foreground);
+
+ .footer-left, .footer-right {
+ display: flex;
+ flex-flow: column;
+ gap: 0.25em;
+ padding: 0 0.5rem;
+
+ font-size: 1.25em;
+
+ a, span {
+ line-height: 1.25em;
+ }
+ }
+ .footer-left {
+ align-items: end;
+ border-right: 1px solid var(--color-section);
+ }
+
+ .footer-logo {
+ grid-column: 1 / -1;
+ grid-row: 1;
+ text-align: center;
+
+ img {
+ width: 5rem;
+ height: 5rem;
+ }
+ }
+}
+
+
+// Desktop
+footer#page-footer {
+ @include window-larger-than(800px) {
+ grid-template-columns: 1fr min-content 1fr;
+
+ .footer-left, .footer-right {
+ font-size: unset;
+ flex-flow: row;
+ align-items: center;
+ border: 0;
+ gap: 0;
+
+ a:not(:last-child)::after {
+ content: "";
+ width: 4px;
+ height: 4px;
+ background: white;
+ display: inline-block;
+ border-radius: 2px;
+ margin: 0.125rem 0.5rem;
+ }
+
+ span.footer-running { display: none; }
+ }
+
+ .footer-left { justify-content: right; }
+
+ .footer-logo {
+ grid-column: unset;
+ grid-row: unset;
+ }
+ }
+}
\ No newline at end of file
diff --git a/app/javascript/src/styles/common/main_layout.scss b/app/javascript/src/styles/common/main_layout.scss
index 581252688..9868594da 100644
--- a/app/javascript/src/styles/common/main_layout.scss
+++ b/app/javascript/src/styles/common/main_layout.scss
@@ -96,37 +96,6 @@ div#page {
display: none;
}
-footer#page-footer {
- display: grid;
- grid-template-columns: 1fr 5em 1fr;
- align-items: center;
-
- padding: $padding-050 $padding-025;
- margin-top: 1em;
- line-height: 1.75em;
- background-color: themed("color-foreground");
-
- @include window-larger-than(800px) {
- border-radius: $border-radius-full $border-radius-full 0 0;
- margin: 1em 1em 0 1em;
- padding: $padding-050;
- }
-
- .footer-logo {
- width: 5em;
- }
-
- .left {
- text-align: right;
- padding-right: 0.75em;
- }
-
- .right {
- text-align: left;
- padding-left: 0.75em;
- }
-}
-
div.clearfix {
clear: both;
}
diff --git a/app/javascript/src/styles/common/z_responsive.scss b/app/javascript/src/styles/common/z_responsive.scss
index df11223a5..77ca3ce9c 100644
--- a/app/javascript/src/styles/common/z_responsive.scss
+++ b/app/javascript/src/styles/common/z_responsive.scss
@@ -109,27 +109,6 @@
position: relative;
}
- #page-footer {
- display: revert;
- text-align: center;
-
- .left {
- padding-right: revert;
- }
-
- .right {
- padding-left: revert;
- }
-
- .right::before {
- content: "–";
- }
-
- .logo-container {
- display: none;
- }
- }
-
/* Make the quick search box in the navbar full width. */
header#top menu form input {
width: auto;
diff --git a/app/views/static/_footer.html.erb b/app/views/static/_footer.html.erb
index 8a08c825b..0654485b4 100644
--- a/app/views/static/_footer.html.erb
+++ b/app/views/static/_footer.html.erb
@@ -1,20 +1,20 @@
diff --git a/public/images/main-logo.svg b/public/images/main-logo.svg
index e2479ac01..5f5fc1118 100644
--- a/public/images/main-logo.svg
+++ b/public/images/main-logo.svg
@@ -1,14 +1,14 @@