From 74e129879ee8fc70398cfb4cc6fce7c66a0df313 Mon Sep 17 00:00:00 2001 From: Madhura Date: Fri, 28 Nov 2025 11:31:23 +0000 Subject: [PATCH 1/9] make footer content in one div --- .../list-groups/ListGroupFooterBottom.tsx | 3 +++ src/app/components/navigation/Footer.tsx | 24 +++++++++---------- src/scss/common/footer.scss | 2 +- 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index ee89d5a79f..e6e40d5356 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -65,6 +65,9 @@ export const ListGroupFooterBottom = () => ( UK Department for Education + + STEM Learning + diff --git a/src/app/components/navigation/Footer.tsx b/src/app/components/navigation/Footer.tsx index 7d48406fc4..fae9f919ee 100644 --- a/src/app/components/navigation/Footer.tsx +++ b/src/app/components/navigation/Footer.tsx @@ -4,7 +4,7 @@ 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"; +// import { ExternalLink } from "../elements/ExternalLink"; export const Footer = () => ( ); diff --git a/src/scss/common/footer.scss b/src/scss/common/footer.scss index 94793faa01..162741e781 100644 --- a/src/scss/common/footer.scss +++ b/src/scss/common/footer.scss @@ -129,7 +129,7 @@ .footer-bottom-logos img { max-width: 100%; - height: auto; + // height: auto; } @media only screen and (min-width: 990px) { From a2dd4da6ee7bda63e5e4e230bd303748ab093853 Mon Sep 17 00:00:00 2001 From: Madhura Date: Fri, 28 Nov 2025 13:26:16 +0000 Subject: [PATCH 2/9] Remove unwanted classes --- .../list-groups/ListGroupFooterBottom.tsx | 39 +++-- src/app/components/navigation/Footer.tsx | 8 +- src/scss/common/footer.scss | 134 +++++++++--------- 3 files changed, 92 insertions(+), 89 deletions(-) diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index e6e40d5356..24b415d75b 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -35,10 +35,12 @@ const footerLinks = { }; export const ListGroupFooterBottom = () => ( -
- +
+ {/* */} + {/*
*/} +
-

Links

+

Links

{footerLinks.right} @@ -53,22 +55,19 @@ export const ListGroupFooterBottom = () => ( , except where otherwise stated.

- - - - National Centre for Computing Education website - - - UK Department for Education - - - STEM Learning - - - +
+ + + National Centre for Computing Education website + + + UK Department for Education + + + STEM Learning + + + {/*
*/} + {/* */}
); diff --git a/src/app/components/navigation/Footer.tsx b/src/app/components/navigation/Footer.tsx index fae9f919ee..67ef823b38 100644 --- a/src/app/components/navigation/Footer.tsx +++ b/src/app/components/navigation/Footer.tsx @@ -35,11 +35,11 @@ export const Footer = () => (
-
+
{/* */} - - - + {/* */} + + {/* */} {/*
STEM Learning diff --git a/src/scss/common/footer.scss b/src/scss/common/footer.scss index 162741e781..93e47dc8f5 100644 --- a/src/scss/common/footer.scss +++ b/src/scss/common/footer.scss @@ -5,72 +5,77 @@ color: white; } -.footer-links { - color: white; - - .footer-support-links { - .h5 { - font-family: $footer-links-font; - } - - .link-list { - - a { - font-family: $footer-text-font; - color: white; - text-decoration: none; - - &:hover { - color: white; - } - } - } - } - - .h5 { - font-family: $footer-links-font; - } - - a { - color: white; - display: block; - text-decoration: none; - - &:hover { - color: white; - } - } - - .footerLink { - font-family: $footer-text-font; - font-size: 16px; - } +.footer-container { + background-color: white; + width: 100%; +} - .logo-col { - @include respond-below(sm) { - padding: 1rem; - } - a { - color: white; - display: block; - text-decoration: none; - - &:hover { - color: white; - } - } - } - &.footer-links-social { - background-position: left 82%; - background-repeat: no-repeat; - height: 100%; +// .footer-links { +// color: white; + +// .footer-support-links { +// .h5 { +// font-family: $footer-links-font; +// } + +// .link-list { + +// a { +// font-family: $footer-text-font; +// color: white; +// text-decoration: none; + +// &:hover { +// color: white; +// } +// } +// } +// } + +// .h5 { +// font-family: $footer-links-font; +// } + +// a { +// color: white; +// display: block; +// text-decoration: none; + +// &:hover { +// color: white; +// } +// } + +// .footerLink { +// font-family: $footer-text-font; +// font-size: 16px; +// } + +// .logo-col { +// @include respond-below(sm) { +// padding: 1rem; +// } +// a { +// color: white; +// display: block; +// text-decoration: none; + +// &:hover { +// color: white; +// } +// } +// } +// &.footer-links-social { +// background-position: left 82%; +// background-repeat: no-repeat; +// height: 100%; - @include respond-above(md) { - background-position: left 100% bottom 15%; - } - } -} +// @include respond-above(md) { +// background-position: left 100% bottom 15%; +// } +// } +// } .logo-text { color: white; @@ -108,12 +113,11 @@ .footer-bottom-logos { @include respond-above(md) { width: 30%; - margin-left: 8%; } } } -.footer-bottom-links a { +.footer-bottom-links a, h3 { color: black; padding-right: 30px; From 86c3fb8db8e40657edbf6d1c13e1b617fa742c7c Mon Sep 17 00:00:00 2001 From: Madhura Date: Fri, 28 Nov 2025 13:48:24 +0000 Subject: [PATCH 3/9] Remove nested divs --- .../elements/list-groups/ListGroupFooterBottom.tsx | 7 +++---- src/app/components/navigation/Footer.tsx | 11 +---------- 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index 24b415d75b..1dc709b988 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -35,9 +35,9 @@ const footerLinks = { }; export const ListGroupFooterBottom = () => ( -
+ //
+ <> {/* */} - {/*
*/}

Links

@@ -67,7 +67,6 @@ export const ListGroupFooterBottom = () => ( STEM Learning - {/*
*/} {/* */} -
+ ); diff --git a/src/app/components/navigation/Footer.tsx b/src/app/components/navigation/Footer.tsx index 67ef823b38..2f882d9136 100644 --- a/src/app/components/navigation/Footer.tsx +++ b/src/app/components/navigation/Footer.tsx @@ -35,17 +35,8 @@ export const Footer = () => (
-
- {/* */} - {/* */} +
- {/* */} - {/*
- - STEM Learning - -
*/} - {/* */}
); From 3225f5a456023b8076c8fcdba1025e4882a56655 Mon Sep 17 00:00:00 2001 From: Madhura Date: Mon, 1 Dec 2025 14:57:47 +0000 Subject: [PATCH 4/9] fix position of logos to the end --- .../list-groups/ListGroupFooterBottom.tsx | 64 +++++++++++-------- src/app/components/navigation/Footer.tsx | 4 +- src/scss/common/footer.scss | 14 +++- 3 files changed, 52 insertions(+), 30 deletions(-) diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index 1dc709b988..905b207822 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { ListGroup, ListGroupItem } from "reactstrap"; +import { ListGroup, ListGroupItem, Container } from "reactstrap"; import { ExternalLink } from "../ExternalLink"; import { Link } from "react-router-dom"; interface FooterLinkProps { @@ -38,35 +38,45 @@ export const ListGroupFooterBottom = () => ( //
<> {/* */} -
- -

Links

- {footerLinks.right} - - -

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

+ +
+ +

Links

+ {footerLinks.right} + + +

+ 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 + + + UK Department for Education - , except where otherwise stated. -

+ + STEM Learning + +
- - - National Centre for Computing Education website - - - UK Department for Education - - - STEM Learning - - {/* */} ); diff --git a/src/app/components/navigation/Footer.tsx b/src/app/components/navigation/Footer.tsx index 2f882d9136..9d3c28d091 100644 --- a/src/app/components/navigation/Footer.tsx +++ b/src/app/components/navigation/Footer.tsx @@ -35,8 +35,10 @@ export const Footer = () => (
-
+ {/* */} +
+ {/* */} ); diff --git a/src/scss/common/footer.scss b/src/scss/common/footer.scss index 93e47dc8f5..29968dadd6 100644 --- a/src/scss/common/footer.scss +++ b/src/scss/common/footer.scss @@ -7,7 +7,13 @@ .footer-container { background-color: white; - width: 100%; + // width: 100%; + // margin: 0px !important; +} + +.list-group a{ + color: white; + text-decoration: none; } // .footer-links { @@ -117,6 +123,10 @@ } } +// .footer-bottom-links-container { +// margin-right: 60px; +// } + .footer-bottom-links a, h3 { color: black; padding-right: 30px; @@ -140,7 +150,7 @@ .footer-bottom-logos img { height: auto; width: auto; - max-width: 90%; + // max-width: 90%; padding-left: 14px; } } From 9a71f762314e719ac7e558497f4f6360734f22ab Mon Sep 17 00:00:00 2001 From: Madhura Date: Mon, 1 Dec 2025 15:35:01 +0000 Subject: [PATCH 5/9] Styling for links --- src/scss/common/footer.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/scss/common/footer.scss b/src/scss/common/footer.scss index 29968dadd6..3cc3a9fb0f 100644 --- a/src/scss/common/footer.scss +++ b/src/scss/common/footer.scss @@ -130,12 +130,19 @@ .footer-bottom-links a, h3 { color: black; padding-right: 30px; + margin-bottom: 0; &:hover { color: black; } } +h3 { + font-family: $footer-links-font; + font-size: 18px; + margin-bottom: 0; +} + .print-font { font-family: $footer-bold-font; color: black !important; From 71bd061b5fce15263533183f69ca7a33449153b7 Mon Sep 17 00:00:00 2001 From: Madhura Date: Thu, 4 Dec 2025 10:08:19 +0000 Subject: [PATCH 6/9] Adjust container width --- .../list-groups/ListGroupFooterBottom.tsx | 47 ++++++++++--------- src/scss/common/footer.scss | 15 +++++- src/scss/cs/isaac.scss | 5 ++ 3 files changed, 42 insertions(+), 25 deletions(-) diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index 905b207822..951f80894f 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -38,15 +38,15 @@ export const ListGroupFooterBottom = () => ( //
<> {/* */} -
- + +
- +

Links

{footerLinks.right} -

+

All teaching materials on this site are available under the{" "} (

- - -
- - National Centre for Computing Education website - - - UK Department for Education - - - STEM Learning - -
- -
+ + +
+ + National Centre for Computing Education website + + + UK Department for Education + + + STEM Learning + +
+ +
+ {/* */} ); diff --git a/src/scss/common/footer.scss b/src/scss/common/footer.scss index 3cc3a9fb0f..218446fd0b 100644 --- a/src/scss/common/footer.scss +++ b/src/scss/common/footer.scss @@ -11,11 +11,21 @@ // margin: 0px !important; } +.footer-bottom-container { + max-width: 90vw !important; + // margin-left: 20vw; + padding-right: 0; +} + .list-group a{ color: white; text-decoration: none; } +.logos-container { + gap: 1rem; +} + // .footer-links { // color: white; @@ -211,10 +221,11 @@ h3 { padding-bottom: 1.5rem; margin-left: 5%; gap: 1.25rem; - } - + } } + + @media only screen and (max-width: 480px) { .logo-col { padding: 20px !important; diff --git a/src/scss/cs/isaac.scss b/src/scss/cs/isaac.scss index a25e25b6c3..06389f98d4 100644 --- a/src/scss/cs/isaac.scss +++ b/src/scss/cs/isaac.scss @@ -389,6 +389,11 @@ h2.h-title { } } +// .container { +// margin-left: 10vw; +// // margin-right: 5vw; +// } + // ---------------------------------------------- // Custom width styling // ---------------------------------------------- From d50abadafc41b43895c86a5803c96bc8c2d33273 Mon Sep 17 00:00:00 2001 From: Madhura Date: Thu, 4 Dec 2025 16:33:03 +0000 Subject: [PATCH 7/9] Fixed container positioning --- src/scss/cs/isaac.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/scss/cs/isaac.scss b/src/scss/cs/isaac.scss index 06389f98d4..e7c05d498d 100644 --- a/src/scss/cs/isaac.scss +++ b/src/scss/cs/isaac.scss @@ -389,10 +389,12 @@ h2.h-title { } } -// .container { -// margin-left: 10vw; -// // margin-right: 5vw; -// } +body +{ > .container { + margin-left: 10vw; + // margin-right: 5vw; +} +} // ---------------------------------------------- // Custom width styling From 6a40190c083c0c16ccdbd089140f58c7bdc796ef Mon Sep 17 00:00:00 2001 From: Madhura Date: Fri, 5 Dec 2025 16:51:26 +0000 Subject: [PATCH 8/9] Intermediate commit --- .../list-groups/ListGroupFooterBottom.tsx | 14 ++--- src/scss/common/footer.scss | 55 +++++++++++++------ src/scss/cs/isaac.scss | 40 ++++++++++++-- 3 files changed, 82 insertions(+), 27 deletions(-) diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index 951f80894f..10bd9a93d8 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -38,15 +38,15 @@ export const ListGroupFooterBottom = () => ( //
<> {/* */} - -
+ +
-

Links

+

Links

{footerLinks.right} -

+

All teaching materials on this site are available under the{" "} (

- -
- + +
+ National Centre for Computing Education website .container { - margin-left: 10vw; - // margin-right: 5vw; + +@media only screen and (min-width: 1680px) { +container { + margin-left: 18vw; + + & .container{ + margin-left: auto; + } +} } + +@media only screen and (min-width: 990px) and (max-width: 1680px) { +container { + // margin-left: 2vw; + + & .container{ + margin-left: 0 !important; + } } +} + +// @media only screen and (max-width: 990px) { +// container { +// margin-left: 1vw; + +// & .container{ +// margin-left: 0 !important; +// } +// } +// } + + +// footer .footerBottom +// { > .container { +// margin-left: 10vw; +// // margin-right: 5vw; +// } +// } // ---------------------------------------------- // Custom width styling From a013641a6107d6f58d556a7044e0130b4c00b647 Mon Sep 17 00:00:00 2001 From: Madhura Date: Mon, 8 Dec 2025 12:51:01 +0000 Subject: [PATCH 9/9] Adjust last logo height --- .../list-groups/ListGroupFooterBottom.tsx | 4 +- src/scss/common/footer.scss | 93 ++----------------- 2 files changed, 8 insertions(+), 89 deletions(-) diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index 10bd9a93d8..8a6add79b0 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -60,7 +60,7 @@ export const ListGroupFooterBottom = () => (
-
+
( UK Department for Education - STEM Learning + STEM Learning
diff --git a/src/scss/common/footer.scss b/src/scss/common/footer.scss index af95947145..5a67bf0fc5 100644 --- a/src/scss/common/footer.scss +++ b/src/scss/common/footer.scss @@ -1,5 +1,3 @@ -// NOMENSA footer.scss -// REPLACE ./assets WITH /assets .footerTop { background-color: #120540; color: white; @@ -7,8 +5,6 @@ .footer-container { background-color: white; - // width: 100%; - // margin: 0px !important; } .papya { @@ -42,80 +38,16 @@ } .logos-container { - gap: 2rem; // gap-4 equivalent + gap: 2rem; + margin-bottom: 1rem; @include respond-above(md) { - gap: 1rem; // gap-md-2 equivalent + gap: 1rem; + justify-content: flex-end; + align-items: flex-end !important; } } -// .footer-links { -// color: white; - -// .footer-support-links { -// .h5 { -// font-family: $footer-links-font; -// } - -// .link-list { - -// a { -// font-family: $footer-text-font; -// color: white; -// text-decoration: none; - -// &:hover { -// color: white; -// } -// } -// } -// } - -// .h5 { -// font-family: $footer-links-font; -// } - -// a { -// color: white; -// display: block; -// text-decoration: none; - -// &:hover { -// color: white; -// } -// } - -// .footerLink { -// font-family: $footer-text-font; -// font-size: 16px; -// } - -// .logo-col { -// @include respond-below(sm) { -// padding: 1rem; -// } -// a { -// color: white; -// display: block; -// text-decoration: none; - -// &:hover { -// color: white; -// } -// } -// } -// &.footer-links-social { -// background-position: left 82%; -// background-repeat: no-repeat; -// height: 100%; - - -// @include respond-above(md) { -// background-position: left 100% bottom 15%; -// } -// } -// } - .logo-text { color: white; font-family: $footer-text-font; @@ -156,10 +88,6 @@ } } -// .footer-bottom-links-container { -// margin-right: 60px; -// } - .footer-bottom-links a, h3 { color: black; padding-right: 30px; @@ -183,14 +111,12 @@ h3 { .footer-bottom-logos img { max-width: 100%; - // height: auto; } @media only screen and (min-width: 990px) { .footer-bottom-logos img { height: auto; width: auto; - // max-width: 90%; padding-left: 14px; } } @@ -200,12 +126,6 @@ h3 { padding-top: 0.5rem !important; } - // .footer-bottom-info { - // p { - // padding-bottom: 1.5rem !important; - // } - // } - .footer-bottom-logos { padding-bottom: 1.5rem; } @@ -213,7 +133,6 @@ h3 { .footer-bottom-logos img { height: auto; width: auto; - max-width: 90%; padding-left: 14px; } } @@ -242,7 +161,7 @@ h3 { .footer-bottom-logos { padding-bottom: 1.5rem; - margin-left: 5%; + // margin-left: 5%; gap: 1.25rem; } }