Lehigh Clutch Style Guide

Department footer 

<h2>Lehigh's New theme- clutch</h2>
<ul class="social-media">

    <li>
        <a href="https://twitter.com/lehighu">
            <i class="fab fa-twitter"></i>
            <span class="sr-only">Like us on Twitter</span>
        </a>
    </li>
    <li>
        <a href="https://www.facebook.com/lehighu">
            <i class="fab fa-facebook-f"></i>
            <span class="sr-only">Like us on Facebook</span>
        </a>
    </li>
    <li>
        <a href="https://www.linkedin.com/school/lehigh-college-of-business/">
            <i class="fab fa-linkedin"></i>
            <span class="sr-only">Like us on LinkedIn</span>
        </a>
    </li>
    <li>
        <a href="https://lehighu.tumblr.com/">
            <i class="fab fa-tumblr"></i>
            <span class="sr-only">Like us on Tumblr</span>
        </a>
    </li>
    <li>
        <a href="https://www.tiktok.com/@lehighadmissions">
            <i class="fab fa-tiktok"></i>
            <span class="sr-only">Like us on TikTok</span>
        </a>
    </li>
    <li>
        <a href="https://www.instagram.com/lehighu/">
            <i class="fab fa-instagram"></i>
            <span class="sr-only">Like us on Instagram</span>
        </a>
    </li>
    <li>
        <a href="https://www.youtube.com/user/lehighuofficial">
            <i class="fab fa-youtube"></i>
            <span class="sr-only">Like us on YouTube</span>
        </a>
    </li>

</ul>

<ul class="contact-info">
    <li>
        <i class="fas fa-phone"></i>
        <span class="sr-only">Phone Number</span>
        <span>(610) 758 4025</span>
    </li>
    <li>
        <i class="fas fa-fax"></i>
        <span class="sr-only">Fax Number</span>
        <span>(610) 758 4026</span>
    </li>
    <li>
        <a href="https://www.google.com/maps/@40.6078606,-75.379379,19z" target="_blank">
            <i class="fas fa-map-marker-alt"></i>
            <span class="sr-only">Address</span>
            <address>19 Memorial Drive W.<br /> Lehigh University<br /> Bethlehem, PA<br /> 18015</address>
        </a>
    </li>
    <li>
        <a href="mailto:engineering@lehigh.edu">
            <i class="fas fa-envelope"></i>
            <span class="sr-only">Email address</span>
            engineering@lehigh.edu
        </a>
    </li>
</ul>

<div class="footer-buttons text-center">
    <a href="#" class="btn btn-primary gold" role="button">
        <span class="button_text">Contact Us</span>
        <span class="arrow fal fa-chevron-right"></span>
    </a>
    <a href="#" class="btn btn-primary gold" role="button">
        <span class="button_text">Get Help</span>
        <span class="arrow fal fa-chevron-right"></span>
    </a>
</div>
 
<h2>{{ website_title }}</h2>
    <ul class="social-media">
      {# Embed the social media data here instead of Fractal
            context so that the CMS doesn't need to duplicate it. #}

      {% for fa_icon in website_social %}
        <li>
          <a href="{{ fa_icon.link }}">
            <i class="{{ fa_icon.class }}"></i>
            <span class="sr-only">Like us on {{ fa_icon.name }}</span>
          </a>
        </li>
      {% endfor %}

    </ul>

    <ul class="contact-info">
    {% block contact %}
      {% if website_phone %}
      <li>
        <i class="fas fa-phone"></i>
        <span class="sr-only">Phone Number</span>
        <span>{{ website_phone }}</span>
      </li>
      {% endif %}
      {% if website_fax %}
      <li>
        <i class="fas fa-fax"></i>
        <span class="sr-only">Fax Number</span>
        <span>{{ website_fax }}</span>
      </li>
      {% endif %}
      {% if website_address %}
      <li>
        {% if website_address_link|trim %}
        <a href="{{ website_address_link }}" target="_blank">
        {% endif %}
          <i class="fas fa-map-marker-alt"></i>
          <span class="sr-only">Address</span>
          <address>{{ website_address }}</address>
        {% if website_address_link|trim %}
        </a>
        {% endif %}
      </li>
      {% endif %}
      {% if website_email %}
      <li>
        <a href="mailto:{{ website_email }}">
          <i class="fas fa-envelope"></i>
          <span class="sr-only">Email address</span>
          {{ website_email }}
        </a>
      </li>
      {% endif %}
      {% endblock contact %}
    </ul>

    {% block buttons %}
      {% if website_buttons %}
        <div class="footer-buttons text-center">
        {% for button in website_buttons %}
          {% include "@a_tag" with button only %}
        {% endfor %}
        </div>
      {% endif %}
    {% endblock buttons %}
 
{
  "website_title": "Lehigh's New theme- clutch",
  "website_phone": "(610) 758 4025",
  "website_fax": "(610) 758 4026",
  "website_email": "engineering@lehigh.edu",
  "website_address": "19 Memorial Drive W.<br /> Lehigh University<br /> Bethlehem, PA<br/> 18015",
  "website_address_link": "https://www.google.com/maps/@40.6078606,-75.379379,19z",
  "website_social": [
    {
      "name": "Twitter",
      "class": "fab fa-twitter",
      "link": "https://twitter.com/lehighu"
    },
    {
      "name": "Facebook",
      "class": "fab fa-facebook-f",
      "link": "https://www.facebook.com/lehighu"
    },
    {
      "name": "LinkedIn",
      "class": "fab fa-linkedin",
      "link": "https://www.linkedin.com/school/lehigh-college-of-business/"
    },
    {
      "name": "Tumblr",
      "class": "fab fa-tumblr",
      "link": "https://lehighu.tumblr.com/"
    },
    {
      "name": "TikTok",
      "class": "fab fa-tiktok",
      "link": "https://www.tiktok.com/@lehighadmissions"
    },
    {
      "name": "Instagram",
      "class": "fab fa-instagram",
      "link": "https://www.instagram.com/lehighu/"
    },
    {
      "name": "YouTube",
      "class": "fab fa-youtube",
      "link": "https://www.youtube.com/user/lehighuofficial"
    }
  ],
  "website_buttons": {
    "1": {
      "text": "Contact Us",
      "url": "#",
      "color": "gold"
    },
    "2": {
      "text": "Get Help",
      "url": "#",
      "color": "gold"
    }
  }
}
  • Content: 
    #department_footer {
  padding: $space_two 0;
  background-color: $grey_20;
  border-top: 3px solid $accent_color;
  border-top: 3px solid var(--accent_color, $accent_color);

  .color-scheme-dark & {
    background-color: $dark_mode_grey;
  }

  .footer-wrapper {
    text-align: center;

    h2 {
      &::after {
        content: " ";
        display: block;
        color: $accent_color;
        color: var(--accent_color, $accent_color);
        border-bottom: 5px solid $accent_color;
        border-bottom: 5px solid var(--accent_color, $accent_color);
        width: 90%;
        max-width: 400px;
        padding: 15px 0 0 0;
        margin: 0 auto;
      }
    }

    .social-media,
    .contact-info {
      @include reset-list-nav;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      margin: $space_two 0 0 0;

      li {
        margin: 0 $spacer;

        a {
          color: $body-color;
          font-size: 2rem;

          &:hover,
          &:focus {
            color: $lehigh_brown;
          }
        }
      }
    }

    .contact-info {
      li {
        a {
          color: $body-color;
          font-size: 1rem;

          i {
            font-size: 1.5rem;
          }
        }

        i {
          font-size: 1.5rem;
        }

        address {
          margin-bottom: 0;
        }
      }
    }
  }
}
  • URL: /components/raw/department_footer/department_footer.scss
  • Filesystem Path: bits/04-components/_footer_pieces/department_footer/department_footer.scss
  • Size: 1.4 KB

No notes defined.