/**
* Footer Component * * Based on the existing GOV.UK footer in GOV.UK Template, built with flexbox * and with tweaked behaviour for the OGL logo for the smaller viewport (when * allowing for the table of contents) * * Example Usage: * * <footer class="footer"> * <div class="footer__licence"> * <a class="footer__licence-logo" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence</a> * <p class="footer__licence-description">All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated</p> * </div> * * <div class="footer__copyright"> * <a class="footer__copyright-logo" href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">© Crown copyright</a> * </div> * </footer> */
// Copied from govuk_template $footer-background: $grey-3; $footer-border-top: a1acb2; $footer-link: #454a4c; $footer-link-hover: #171819; $footer-text: $footer-link;
.footer {
display: block; margin-top: $gutter * 2; padding: $gutter $gutter-half ($gutter * 2); border-top: 1px solid $footer-border-top; background: $footer-background; color: $footer-text; @include media(tablet) { padding: $gutter; display: flex; flex-shrink: 0; align-items: flex-end; justify-content: space-between; } a:link, a:visited { color: $footer-link; } a:hover, a:active { color: $footer-link-hover; }
}
.footer__licence {
line-height: 1; margin-bottom: -1em;
}
.footer__licence-logo {
margin-top: -2px; // Align baseline with paragraph margin-bottom: 1em; display: block; width: 41px; height: 17px; overflow: hidden; text-indent: -999em; background-image: file-url("/images/open-government-licence.png"); background-repeat: no-repeat; background-size: 41px 17px; @include device-pixel-ratio() { background-image: file-url("/images/open-government-licence_2x.png"); } @include media(tablet) { float: left; margin-right: 12px; }
}
.footer__licence-description {
@include core-16; margin: 0 0 1em; display: inline-block;
}
.footer__copyright {
@include core-16; margin-top: 30px;
}
.footer__copyright-logo {
display: block; white-space: nowrap; padding: 115px 0 0 0; min-width: 125px; background-image: file-url("/images/govuk-crest.png"); background-size: 125px 102px; background-repeat: no-repeat; background-position: 50% 0%; text-align: center; text-decoration: none; @include device-pixel-ratio() { background-image: file-url("/images/govuk-crest-2x.png"); }
}
.flexbox, .flexboxtweener {
@include media(tablet) { .footer__license { flex-shrink: 1; } .footer__copyright { margin-top: 0; display: inline-block; margin-left: $gutter; } .footer__copyright-logo { text-align: right; } }
}