<footer id="site_footer">
<div class="footer_wrapper">
<div class="row">
<script src="/files/lehigh_footer-clutch-min.js"></script>
<!-- region for footer-main -->
<section class="department_footer">
<!-- Single block styled as 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:email@lehigh.edu">
<i class="fas fa-envelope"></i>
<span class="sr-only">Email address</span>
email@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>
</section>
<!-- endregion for footer-main -->
<!-- region for footer-group -->
<!-- endregion for footer-group -->
</div>
<div class="row">
<div class="dark-toggle">
<div class="moon">
<span class="sr-only">Dark mode toggle on and off switch</span>
</div>
</div>
</div>
</div>
</footer>
{% set website_footer_js = website_footer_js is defined ? website_footer_js : '/files/lehigh_footer-clutch-min.js' %}
<footer id="site_footer">
<div class="footer_wrapper">
<div class="row">
{% block lehigh_footer_js %}
<script src="{{ website_footer_js }}"></script>
{% endblock lehigh_footer_js %}
<!-- region for footer-main -->
{% block department_footer %}
<section class="department_footer">
<!-- Single block styled as department footer -->
{% include "@department_footer" %}
</section>
{% endblock department_footer %}
<!-- endregion for footer-main -->
<!-- region for footer-group -->
{% block group_footer %}
{% endblock group_footer %}
<!-- endregion for footer-group -->
</div>
<div class="row">
{% include "@dark_mode_toggle" %}
</div>
</div>
</footer>
{
"site_logo": "/img/lehigh-logo.svg",
"website_footer_js": "/files/lehigh_footer-clutch-min.js",
"website_title": "Lehigh's New theme- clutch",
"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_phone": "(610) 758 4025",
"website_fax": "(610) 758 4026",
"website_email": "email@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_buttons": {
"1": {
"text": "Contact Us",
"url": "#",
"color": "gold"
},
"2": {
"text": "Get Help",
"url": "#",
"color": "gold"
}
}
}
#site_footer {
.footer_wrapper {
max-width: $max_screen_width;
margin: 0 auto;
padding: 0 $spacer;
// flex-direction: row;
// flex-wrap: nowrap;
&> .row {
margin: 0;
@include media-breakpoint-down(md) {
display: flex;
flex-direction: column;
}
}
section {
padding: 0 $spacer;
border-left: 2px solid $accent_color;
border-left: 2px solid var(--accent_color, $accent_color);
&:first-of-type {
border-left: 0;
padding: 0 $spacer 0 0;
@include media-breakpoint-down(md) {
padding: 0 0 $spacer 0
}
}
&:last-of-type {
padding: 0 0 0 $spacer;
@include media-breakpoint-down(md) {
padding: $spacer 0 0 0;
}
}
@include media-breakpoint-down(md) {
padding: $space_two $spacer;
border-left: 0;
border-bottom: 2px solid $accent_color;
border-bottom: 2px solid var(--accent_color, $accent_color);
&:last-of-type {
border-bottom: 0;
}
}
&.lehigh_footer {
flex: 1;
.logo {
img {
max-width: 300px;
}
}
.common-links {
ul {
@include reset-list-nav;
column-count: 2;
li {
margin: 0 0 $space_one-half 0;
a {
text-decoration: underline;
font-size: .875rem;
font-weight: normal;
border-bottom: 0;
&:hover {
text-decoration: none;
}
}
}
}
}
}
&.department_footer {
flex: 2;
display: flex;
flex-direction: column;
align-items: center;
h2 {
color: $white;
font-size: 1.75rem;
text-align: center;
}
ul {
@include reset-list-nav;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin: $space-two 0;
&.account {
.nav-item {
margin: 0 $space-one-half 0 0;
padding: 0;
&:last-of-type {
margin: 0;
}
}
}
address {
font-size: .875rem;
}
// prevent contextual links from getting styled.
&.contextual-links {
display: block;
margin: 0;
padding: 0.25em 0;
li {
margin: 0;
a {
color: $hyperlink;
color: var(--hyperlink, $hyperlink);
}
}
}
&.social-media {
li {
margin: 0 $space_and_half 0 0;
i,
svg {
color: $accent_color;
color: var(--accent_color, $accent_color);
font-size: 2rem;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
&:hover {
i,
svg {
color: $white;
}
}
}
}
&.contact-info {
padding: $space_one_quarter 0 0 0;
li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
flex-grow: 1;
word-break: break-all;
text-align: center;
margin: 0 $spacer;
a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-decoration: none !important;
}
i,
svg {
font-size: 2rem;
color: $accent_color;
color: var(--accent_color, $accent_color);
margin: 0 0 $space_one_half 0;
}
}
}
}
}
&.group_footer {
flex: 1;
text-align: center;
h2 {
color: $white;
font-size: 1.5rem;
text-align: center;
}
ul {
&.contextual-links {
display: block;
margin: 0;
padding: 0.25em 0;
li {
margin: 0;
a {
color: $hyperlink;
color: var(--hyperlink, $hyperlink);
}
}
}
}
}
}
}
a {
text-decoration: underline;
font-size: .875rem;
font-weight: normal;
border-bottom: 0;
&:hover {
text-decoration: none;
}
.extlink {
display: none;
}
&.btn {
text-decoration: none;
color: $grey_darkest;
}
}
.footer-buttons {
margin: .5rem 0;
}
}
Display an option for the footer to include a site footer next to the department footer.