diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index ee89d5a79f..8a6add79b0 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 { @@ -35,37 +35,49 @@ const footerLinks = { }; export const ListGroupFooterBottom = () => ( -
- - -

Links

- {footerLinks.right} -
- -

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

-
+ //
+ <> + {/* */} + +
+
+ +

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 - - - -
+ +
+ + 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 7d48406fc4..9d3c28d091 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 = () => (
-
- - - - - -
- - STEM Learning - -
+ {/* */} +
+
+ {/*
*/} ); diff --git a/src/scss/common/footer.scss b/src/scss/common/footer.scss index 94793faa01..5a67bf0fc5 100644 --- a/src/scss/common/footer.scss +++ b/src/scss/common/footer.scss @@ -1,76 +1,52 @@ -// NOMENSA footer.scss -// REPLACE ./assets WITH /assets .footerTop { background-color: #120540; color: white; } -.footer-links { - color: white; - - .footer-support-links { - .h5 { - font-family: $footer-links-font; - } - - .link-list { +.footer-container { + background-color: white; +} - a { - font-family: $footer-text-font; - color: white; - text-decoration: none; +.papya { + margin-right: 0; + padding-right: 0; +} - &:hover { - color: white; - } - } - } - } +@media only screen and (min-width: 1680px) { +.papya { - .h5 { - font-family: $footer-links-font; + max-width: 82vw !important; + padding-left: 0 !important; } +} - a { - color: white; - display: block; - text-decoration: none; +@media only screen and (min-width: 991px) and (max-width: 1680px) { +// .papya { +// max-width: 98vw !important; +// } +} - &:hover { - color: white; - } +@media only screen and (max-width: 990px) { +.papya { + max-width: 99vw !important; } +} - .footerLink { - font-family: $footer-text-font; - font-size: 16px; - } +.list-group a{ + color: white; + text-decoration: none; +} - .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%; + .logos-container { + gap: 2rem; + margin-bottom: 1rem; - @include respond-above(md) { - background-position: left 100% bottom 15%; + gap: 1rem; + justify-content: flex-end; + align-items: flex-end !important; } } -} .logo-text { color: white; @@ -108,20 +84,26 @@ .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; + 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; @@ -129,14 +111,12 @@ .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; } } @@ -146,12 +126,6 @@ padding-top: 0.5rem !important; } - .footer-bottom-info { - p { - padding-bottom: 1.5rem !important; - } - } - .footer-bottom-logos { padding-bottom: 1.5rem; } @@ -159,7 +133,6 @@ .footer-bottom-logos img { height: auto; width: auto; - max-width: 90%; padding-left: 14px; } } @@ -180,20 +153,21 @@ margin-bottom: 10px; } - .footer-bottom-info { - p { - padding-bottom: 1.5rem !important; - } - } + // .footer-bottom-info { + // p { + // padding-bottom: 1.5rem !important; + // } + // } .footer-bottom-logos { padding-bottom: 1.5rem; - margin-left: 5%; + // 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..de20b5ec8c 100644 --- a/src/scss/cs/isaac.scss +++ b/src/scss/cs/isaac.scss @@ -389,6 +389,45 @@ h2.h-title { } } + +@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 // ----------------------------------------------