<footer class="footer footer--compact">
<div class="footer__row wrapper__left footer__small-print">
<div class="footer__column-1">
<div class="footer__logo"><img src="/images/360-giving-logo-white.svg" alt="360Giving"></div>
</div>
<div class="footer__column-2 footer__policy-links">
<p>
<strong>360 Giving</strong> (Trading as <strong>360Giving</strong>) is a registered charity <a href="https://register-of-charities.charitycommission.gov.uk/charity-details/?regId=1164883&subId=0">1164883</a> and a registered company <a href="https://beta.companieshouse.gov.uk/company/09668396">09668396</a>.
<br>Registered address: 360 Giving, c/o Sayer Vincent, 110 Golden Lane, London, EC1Y 0TG
</p>
</div>
</div>
<div class="footer__row wrapper__left footer__small-print">
<div class="footer__column-2">
<p>© Copyright 2021 360Giving.<br>Licensed under a <a href="#" target="_blank">Creative Commons Attribution 4.0 International License</a>.</p>
</div>
<div class="footer__column-2 footer__policy-links hide-print">
<p><a href="#">Privacy Notice</a> | <a href="#">Terms & Conditions</a> | <a href="#">Cookie Policy</a> | <a href="#">Take Down Policy</a> | <a href="#">License</a></p>
</div>
</div>
</footer>
<footer class="footer footer--compact">
<div class="footer__row wrapper__left footer__small-print">
<div class="footer__column-1">
<div class="footer__logo"><img src="/images/360-giving-logo-white.svg" alt="360Giving"></div>
</div>
<div class="footer__column-2 footer__policy-links">
<p>
<strong>360 Giving</strong> (Trading as <strong>360Giving</strong>) is a registered charity <a href="https://register-of-charities.charitycommission.gov.uk/charity-details/?regId=1164883&subId=0">1164883</a> and a registered company <a href="https://beta.companieshouse.gov.uk/company/09668396">09668396</a>.
<br>Registered address: 360 Giving, c/o Sayer Vincent, 110 Golden Lane, London, EC1Y 0TG
</p>
</div>
</div>
<div class="footer__row wrapper__left footer__small-print">
<div class="footer__column-2">
<p>© Copyright 2021 360Giving.<br>Licensed under a <a href="#" target="_blank">Creative Commons Attribution 4.0 International License</a>.</p>
</div>
<div class="footer__column-2 footer__policy-links hide-print">
<p><a href="#">Privacy Notice</a> | <a href="#">Terms & Conditions</a> | <a href="#">Cookie Policy</a> | <a href="#">Take Down Policy</a> | <a href="#">License</a></p>
</div>
</div>
</footer>
/* No context defined. */
// Footer Grid
.footer {
&__row {
display: flex;
@include breakpoint($small-only) { flex-direction: column; }
}
&__column-0 { flex: 0; }
&__column-1 {
flex: 1;
@include breakpoint($small-only) { min-width: 100px; }
}
&__column-2 {
flex: 2;
@include breakpoint($small-only) { min-width: 200px; }
}
&__column-3 { flex: 3; }
}
// Footer Structure and Visuals
.footer {
padding-top: 24px;
background-color: hsla(var(--base-hsl), 1);
ul {
list-style-type: none;
padding: 0;
}
a {
color: hsla(var(--white-hsl), 1);
text-decoration: underline;
text-underline-offset: under;
&:hover {
color: hsla(var(--white-hsl), 1);
text-decoration: underline;
}
@media print {
color: hsl(var(--base-hsl), 1);
}
}
@include breakpoint($large) {
padding-top: 48px;
}
&__row:first-of-type {
padding-bottom: 36px;
border-bottom: 1px solid hsla(var(--white-hsl), .2);
@media print {
padding-bottom: inherit;
}
}
&__row {
padding: 16px 0;
@media print {
@include reset_print;
}
}
&__section {
@include small_text;
color: hsla(var(--white-hsl), .7);
padding: 24px 0 16px;
& + & {
@include breakpoint($medium-up) { margin-left: 48px; }
}
& li { margin-top: 8px; }
}
&__heading {
@include h4;
font-weight: bold;
letter-spacing: 1px;
color: hsla(var(--yellow-hsl), 1);
margin-bottom: 16px;
}
&__branding,
&__social {
display: flex;
align-items: center;
}
&__branding {
@include breakpoint($small-only) {
flex-direction: column;
text-align: center;
}
}
&__logo {
opacity: .5;
@include breakpoint($small-only) {
margin-bottom: 16px;
}
@media print {
img {
-webkit-filter: invert(100%);
filter: invert(100%);
margin-bottom: 0.5cm;
opacity: 1;
}
}
}
&__tagline {
padding-bottom: 4px;
color: hsla(var(--white-hsl), 1);
font-weight: 300;
letter-spacing: 1px;
font-size: 1rem;
@include breakpoint($small-only) { margin-bottom: 16px; }
@include breakpoint($medium-up) { margin-left: 48px; }
@include breakpoint($large) { font-size: 1.3rem; }
}
&__social {
justify-content: flex-end;
@include breakpoint($small-only) { justify-content: center; }
* + * { margin-left: 24px;}
.github-icon { line-height: 3px; }
.twitter-icon { line-height: 8px; }
}
&__small-print {
@include small_text;
border-top: 1px solid hsla(var(--white-hsl), .2);
padding-top: 16px;
padding-bottom: 12px;
color: hsla(var(--white-hsl), .7);
@media print {
color: hsl(var(--base-hsl), 1);
}
}
.edit-github { float: right; }
&__policy-links {
a { display: inline-block; } // To avoid line-breaks in the links
@include breakpoint($medium-up) { text-align: right; }
@media print {
text-align: left;
}
}
&--compact {
padding-top: 12px;
.footer__small-print {
border-top: 0;
}
}
@media print {
border-top: 4px solid hsl(var(--base-hsl), 1);
background-color: inherit;
page-break-inside: avoid;
}
}
.footer {
p a:hover { color: hsla(var(--white-hsl), 1); }
}
No notes defined.