From 421d6685664976ca49353081879b19b7a6104ce2 Mon Sep 17 00:00:00 2001 From: Marius Date: Thu, 22 Jan 2026 22:53:35 +0200 Subject: [PATCH] 751 - Fix footer spacing --- public/assets/logos/new_stem_footer.svg | 1 + .../list-groups/ListGroupFooterBottom.tsx | 72 +++++---- src/app/components/navigation/Footer.tsx | 8 +- src/scss/common/footer.scss | 142 +++++++++++------- 4 files changed, 130 insertions(+), 93 deletions(-) create mode 100644 public/assets/logos/new_stem_footer.svg diff --git a/public/assets/logos/new_stem_footer.svg b/public/assets/logos/new_stem_footer.svg new file mode 100644 index 0000000000..4f2e6f5cf5 --- /dev/null +++ b/public/assets/logos/new_stem_footer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index 3b3f18a523..1c49f47362 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -35,37 +35,53 @@ const footerLinks = { }; export const ListGroupFooterBottom = () => ( -
- - +
+
+

Links

{footerLinks.right} - - -

- All teaching materials on this site are available under the{" "} - - Open Government Licence v3.0 +

+
+ +
+
+
+

+ All teaching materials on this site are available under the{" "} + + Open Government Licence v3.0 + + , except where otherwise stated. +

+
+
+ +
+
+ + National Centre for Computing Education website - , except where otherwise stated. -

- +
- - - National Centre for Computing Education website - - - UK Department for Education - - - +
+ + UK Department for Education + +
+ +
+ + STEM Learning + +
+
+
); diff --git a/src/app/components/navigation/Footer.tsx b/src/app/components/navigation/Footer.tsx index 7d48406fc4..7791cff1a8 100644 --- a/src/app/components/navigation/Footer.tsx +++ b/src/app/components/navigation/Footer.tsx @@ -4,7 +4,6 @@ import { ListGroupFooter } from "../elements/list-groups/ListGroupFooter"; import { ListGroupSocial } from "../elements/list-groups/ListGroupSocial"; import { ListGroupFooterBottom } from "../elements/list-groups/ListGroupFooterBottom"; import { Link } from "react-router-dom"; -import { ExternalLink } from "../elements/ExternalLink"; export const Footer = () => (
@@ -37,15 +36,10 @@ export const Footer = () => (
- + -
- - STEM Learning - -
); diff --git a/src/scss/common/footer.scss b/src/scss/common/footer.scss index 94793faa01..d8c984d022 100644 --- a/src/scss/common/footer.scss +++ b/src/scss/common/footer.scss @@ -101,15 +101,6 @@ font-size: 14px; color: #000000; } - @include respond-above(md) { - width: 40%; - } - } - .footer-bottom-logos { - @include respond-above(md) { - width: 30%; - margin-left: 8%; - } } } @@ -127,17 +118,63 @@ color: black !important; } -.footer-bottom-logos img { - max-width: 100%; - height: auto; +.footer-bottom-info-section { + flex: 0 0 auto; + max-width: 450px; +} + +.footer-bottom-links { + white-space: nowrap; +} + +.footer-bottom-info { + p { + white-space: normal; + margin: 0; + } +} + +.footer-bottom-logos { + gap: 4rem; + padding-right: 3rem; +} + +.footer-bottom-logo img { + height: 35px; + width: auto; +} + +.footer-bottom-logo .footer-ncce-logo { + height: 41px; + width: auto; +} + +.footer-bottom-logo .footer-dfe-logo { + height: 52px; + width: auto; +} + +.footer-bottom-logo .footer-stem-logo { + height: 40px; + width: auto; } @media only screen and (min-width: 990px) { - .footer-bottom-logos img { - height: auto; + .footer-bottom-logo img { + height: 40px; width: auto; - max-width: 90%; - padding-left: 14px; + } + + .footer-bottom-logo .footer-ncce-logo { + height: 46px; + } + + .footer-bottom-logo .footer-dfe-logo { + height: 59px; + } + + .footer-bottom-logo .footer-stem-logo { + height: 47px; } } @@ -146,76 +183,65 @@ padding-top: 0.5rem !important; } - .footer-bottom-info { - p { - padding-bottom: 1.5rem !important; - } + .footer-bottom-logo img { + height: 35px; + width: auto; } - .footer-bottom-logos { - padding-bottom: 1.5rem; + .footer-bottom-logo .footer-dfe-logo { + height: 42px; } - - .footer-bottom-logos img { - height: auto; - width: auto; - max-width: 90%; - padding-left: 14px; + + .footer-bottom-logo .footer-stem-logo { + height: 30px; } } -@media only screen and (min-width: 480px) and (max-width: 768px) { +// Mobile styles (max-width: 768px) +@media only screen and (max-width: 768px) { .links-col { padding-top: 0.5rem !important; } - .footer-links .footer-support-links .h5, + .footer-links .footer-support-links .h5, .footer-bottom-links .h5 { margin-bottom: 15px; text-align: left; } - + .footer-links .footer-support-links a, .footer-bottom-links a { margin-bottom: 10px; } - .footer-bottom-info { - p { - padding-bottom: 1.5rem !important; - } + .footer-bottom-row { + align-items: flex-start !important; + } + + .footer-bottom-info-section { + max-width: 100%; + width: 100%; } .footer-bottom-logos { - padding-bottom: 1.5rem; - margin-left: 5%; - gap: 1.25rem; + flex-direction: column; + align-items: flex-start !important; + padding-right: 0; + gap: 1rem; + margin-top: 1rem; + } + + .footer-bottom-logo { + justify-content: flex-start !important; } + .footer-bottom { + padding-left: 1rem; + } } @media only screen and (max-width: 480px) { .logo-col { padding: 20px !important; } - - .links-col { - padding-top: 0.5rem !important; - } - - .footer-links .footer-support-links .h5, - .footer-bottom-links .h5 { - margin-bottom: 15px; - text-align: left; - } - - .footer-links .footer-support-links a, - .footer-bottom-links a { - margin-bottom: 10px; - } - - .footer-bottom-logos { - gap: 1.25rem; - margin-left: 5%; - } } \ No newline at end of file