Lehigh Clutch Style Guide

Site Footer 

<footer id="site_footer">
    <div class="footer-wrapper">
        <div class="logo" role="logo">
            <picture class="image lehigh-logo e11y-ok">
                <a href="" class="logo__link">
                    <img class="web" src="/img/lehigh-logo.svg" alt="Lehigh University logo" width="200" height="43" />
                    <span class="u-a11y-text">Go to homepage</span>
                </a>
            </picture>
        </div><!-- end logo -->
        <div class="lehigh-contact">
            <address>27 Memorial Drive West<br />
                Bethlehem, PA 18015, USA</address>
            <span class="phone"><a href="tel:610-758-3000">610-758-3000</a></span>
        </div>
        <div class="copyright">
            <p>&copy; <script>
                    document.write(new Date().getFullYear());
                </script> Lehigh University. <a href="http://www1.lehigh.edu/about/copyright?footer">All Rights Reserved</a>.
                <a href="http://www1.lehigh.edu/about/privacy?footer">Privacy</a>. <a href="http://www1.lehigh.edu/about/serviceagreement?footer">Terms</a>
            </p>
        </div><!-- end copyright -->
        <div class="common-links">
            <ul>
                <li><a href="http://www1.lehigh.edu/insidelehigh?footer">Inside Lehigh</a></li>
                <li><a href="http://www.lehigh.edu/~www/directory/?footer">Directory</a></li>
                <li><a href="http://www1.lehigh.edu/about/maps?footer">Maps</a></li>
                <li><a href="http://www1.lehigh.edu/contactlehigh">Contact</a></li>
                <li><a href="http://www1.lehigh.edu/emergency">Emergency Info</a></li>
                <li><a href="http://www1.lehigh.edu/about/mobilefriendly?footer">Mobile Friendly</a></li>
                <li><a href="http://www.lehigh.edu/~inprv/heoa/index.html">Higher Education Opportunity Act</a></li>
                <li><a href="http://www.lehigh.edu/principlesequity?footer">Equitable Community</a></li>
                <li><a href="http://www.lehigh.edu/nondiscrimination?footer">Non-Discrimination</a></li>
            </ul>
        </div><!-- end common-links -->
    </div>
</footer>
 
<footer id="site_footer">
  <div class="footer-wrapper">
    <div class="logo" role="logo">
      {% block logo %}
        {% include "@images--lehigh_logo" %}
      {% endblock %}
    </div><!-- end logo -->
    <div class="lehigh-contact">
      <address>27 Memorial Drive West<br />
        Bethlehem, PA 18015, USA</address>
      <span class="phone"><a href="tel:610-758-3000">610-758-3000</a></span>
    </div>
    <div class="copyright">
      <p>&copy; <script>document.write(new Date().getFullYear());</script> Lehigh University. <a href="http://www1.lehigh.edu/about/copyright?footer">All Rights Reserved</a>.
        <a href="http://www1.lehigh.edu/about/privacy?footer">Privacy</a>. <a href="http://www1.lehigh.edu/about/serviceagreement?footer">Terms</a></p>
    </div><!-- end copyright -->
    <div class="common-links">
      <ul>
        <li><a href="http://www1.lehigh.edu/insidelehigh?footer">Inside Lehigh</a></li>
        <li><a href="http://www.lehigh.edu/~www/directory/?footer">Directory</a></li>
        <li><a href="http://www1.lehigh.edu/about/maps?footer">Maps</a></li>
        <li><a href="http://www1.lehigh.edu/contactlehigh">Contact</a></li>
        <li><a href="http://www1.lehigh.edu/emergency">Emergency Info</a></li>
        <li><a href="http://www1.lehigh.edu/about/mobilefriendly?footer">Mobile Friendly</a></li>
        <li><a href="http://www.lehigh.edu/~inprv/heoa/index.html">Higher Education Opportunity Act</a></li>
        <li><a href="http://www.lehigh.edu/principlesequity?footer">Equitable Community</a></li>
        <li><a href="http://www.lehigh.edu/nondiscrimination?footer">Non-Discrimination</a></li>
      </ul>
    </div><!-- end common-links -->
  </div>
</footer>
 
{
  "site_logo": "/img/lehigh-logo.svg"
}
  • Content: 
    .footer-wrapper {
  width: $max_screen_width;
  margin: 0 auto;

  @include media-breakpoint-down(md) {
    width: $max_screen_width_mobile;
  }

}

#site_footer {
  position: relative;
  background-color: $lehigh_brown;
  color: $white;
  padding: $space_two 0;
  border-top: 3px solid $accent_color;
  border-top: 3px solid var(--accent_color, $accent_color);
  
  form input{
    color: $black;
  }

  a {
    color: $white;
  }

  .footer-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;

    .logo {
      width: 100%;
      max-width: 300px;
    }

    > div {
      margin: $spacer 0;

      &:first-of-type {
        margin: 0 0 $spacer 0;
      }

      &:last-of-type {
        margin: $spacer 0 0 0;
      }
    }

    .lehigh-contact {
      text-align: center;

      address {
        margin-bottom: 0;
      }
    }

    .copyright {
      p {
        padding: 0;
        margin: 0;
      }
    }

    .common-links {
      ul {
        @include reset-list-nav;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        li {
          &::after {
            content: '|';
            margin: 0 $space_one_half;
            padding: 0 $space_one_half;
          }

          &:last-of-type {
            &::after {
              content: '';
              margin: 0;
              padding: 0;
            }
          }

          a {
            font-size: .875rem;
          }
        }
      }
    }
  }
}
  • URL: /components/raw/site_footer/site_footer.scss
  • Filesystem Path: bits/04-components/_footer_pieces/site_footer/site_footer.scss
  • Size: 1.5 KB

No notes defined.