diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.scss b/frontend/src/app/shared/components/global-footer/global-footer.component.scss
index 6b67711b6..8cdc6df21 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.scss
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.scss
@@ -12,13 +12,13 @@ footer p {
}
footer .row.main {
- padding: 40px 0;
- max-width: 1200px;
+ padding: 40px 0 24px 0;
+ max-width: 1140px;
margin: 0 auto;
}
footer .row.main .branding {
- text-align: center;
+
}
footer .row.main .branding > p {
@@ -38,16 +38,16 @@ footer .row.main .branding .cta {
margin: 25px auto 25px auto;
}
-footer .row.main .links.outer {
- padding-left: 24px;
- padding-top: 10px;
+footer .link-tree .links:nth-child(1), footer .link-tree .links:nth-child(4) {
+ padding-left: 0;
+ padding-right: 0;
}
footer .row.main .links > div:first-child {
margin-bottom: 20px;
}
-footer .row.main .links .category {
+footer .links .category {
color: #4a68b9;
font-weight: 700;
}
@@ -57,12 +57,20 @@ footer .row.main .links .category:not(:first-child) {
}
footer .selector {
- margin: 20px 0;
+ margin: 20px 5px;
+ float: right;
+}
+
+footer .row.link-tree {
+ max-width: 1140px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
}
footer .row.social-links {
text-align: center;
- margin-bottom: 24px;
+ margin: 24px 0;
}
footer .row.social-links a {
@@ -90,22 +98,11 @@ footer .row.version p a {
}
.main-logo {
- max-width: 220px;
- margin: 0 auto 20px auto;
+ width: 220px;
+ margin: 0;
+ display: inline-block;
}
-@media (max-width: 992px) {
-
- footer .row.main .links.outer {
- text-align: center;
- }
-
- footer .row.main .links.outer > .row {
- margin-top: 20px;
- }
-
- footer .row.main .links.outer > .row > div:first-child {
- margin-bottom: 20px;
- }
+@media (max-width: 1100px) {
}
From d4f9600ff130ff332abd7325c96acc2802f05dfc Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Wed, 9 Aug 2023 16:42:16 +0900
Subject: [PATCH 2/2] Make footer refinements responsive
---
.../global-footer.component.html | 100 +++++++++---------
.../global-footer.component.scss | 86 +++++++++++++--
2 files changed, 130 insertions(+), 56 deletions(-)
diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html
index 0408accbe..0b9c20387 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.html
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html
@@ -6,14 +6,16 @@
diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.scss b/frontend/src/app/shared/components/global-footer/global-footer.component.scss
index 8cdc6df21..76d79b2eb 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.scss
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.scss
@@ -17,10 +17,6 @@ footer .row.main {
margin: 0 auto;
}
-footer .row.main .branding {
-
-}
-
footer .row.main .branding > p {
margin-bottom: 25px;
}
@@ -43,6 +39,10 @@ footer .link-tree .links:nth-child(1), footer .link-tree .links:nth-child(4) {
padding-right: 0;
}
+footer .link-tree .links p {
+ padding-right: 5px;
+}
+
footer .row.main .links > div:first-child {
margin-bottom: 20px;
}
@@ -56,9 +56,14 @@ footer .row.main .links .category:not(:first-child) {
margin-top: 1rem;
}
+footer .site-options {
+ float: right;
+ margin-top: -8px;
+}
+
footer .selector {
margin: 20px 5px;
- float: right;
+ display: inline-block;
}
footer .row.link-tree {
@@ -66,6 +71,7 @@ footer .row.link-tree {
margin: 0 auto;
display: flex;
justify-content: space-between;
+ flex-wrap: nowrap;
}
footer .row.social-links {
@@ -103,6 +109,74 @@ footer .row.version p a {
display: inline-block;
}
-@media (max-width: 1100px) {
+@media (max-width: 1200px) {
+
+ .main-logo {
+ width: 200px;
+ }
+
+ footer .row.main {
+ max-width: 90%;
+ }
+
+ footer .row.link-tree {
+ max-width: 90%;
+ font-size: 13px;
+ gap: 20px;
+ }
+
+ footer .row.social-links svg {
+ width: 18px;
+ }
}
+
+@media (max-width: 900px) {
+
+ .main-logo {
+ width: 220px;
+ }
+
+ footer .row.link-tree {
+ font-size: 16px;
+ }
+
+ footer .row.social-links svg {
+ width: 20px;
+ }
+
+ footer .row.link-tree {
+ display: block;
+ text-align: center;
+ }
+
+ footer .link-tree .links {
+ margin-bottom: 20px;
+ }
+
+ footer .row.main .branding {
+ text-align: center;
+ }
+
+ .main-logo {
+ display: block;
+ margin: 0 auto;
+ }
+
+ footer .site-options {
+ float: none;
+ margin-top: 30px;
+ }
+
+ footer .row.social-links {
+ margin: 48px 0 24px 0;
+ }
+
+ footer .selector {
+ margin: 10px 0 0 0;
+ }
+
+ footer .selector:not(:last-child) {
+ margin-right: 10px;
+ }
+}