<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. */
  • Content:
    // 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); }
    }
    
  • URL: /components/raw/footer/footer.scss
  • Filesystem Path: src/components/04-modules/footer/footer.scss
  • Size: 3.3 KB

No notes defined.