<ul class="social-links social-links--durp">
<li class="social-links__item">
<a href="https://facebook.com" class="social-links__item-link" aria-label="Facebook">
<span class="social-links__item-text">
Facebook page for
</span>
<svg class="facebook" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 12 24">
<path class="facebook__logo" fill="#FFF" fill-rule="evenodd" d="M11.976 0h-3.55C4.288 0 2.751 1.887 2.662 5.078l-.004.302v2.483H0v4.135h2.659V24h5.32V11.998h3.55L12 7.863H7.979l.007-2.07c0-1.022.099-1.594 1.521-1.651l.25-.005h2.219V0z"/>
</svg>
</a>
</li>
<li class="social-links__item">
<a href="https://flickr.com" class="social-links__item-link" aria-label="Flicker photos">
<span class="social-links__item-text">
Flickr profile for
</span>
<svg class="flickr" xmlns="http://www.w3.org/2000/svg" width="34" height="16" viewBox="0 0 34 16">
<path class="flickr__logo" fill="#FFF" fill-rule="evenodd" d="M8 0c4.418 0 8 3.582 8 8s-3.582 8-8 8-8-3.582-8-8 3.582-8 8-8zm18 0c4.418 0 8 3.582 8 8s-3.582 8-8 8-8-3.582-8-8 3.582-8 8-8zm0 2c-3.314 0-6 2.686-6 6s2.686 6 6 6 6-2.686 6-6-2.686-6-6-6z"/>
</svg>
</a>
</li>
<li class="social-links__item">
<a href="https://linkedin.com" class="social-links__item-link" aria-label="Linked In">
<span class="social-links__item-text">
Linked in profile for
</span>
<svg class="linkedin" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path class="linkedin__logo" fill="#FFF" fill-rule="evenodd" d="M.605 7.696h4.678v16.302H.605V7.696zm2.22-2.04h-.034C1.098 5.657 0 4.41 0 2.833 0 1.222 1.13 0 2.857 0c1.726 0 2.787 1.219 2.821 2.828 0 1.578-1.095 2.829-2.853 2.829zM24 24h-5.304v-8.438c0-2.208-.83-3.714-2.655-3.714-1.395 0-2.171 1.016-2.533 1.998-.135.35-.114.84-.114 1.332V24H8.14s.068-14.946 0-16.304h5.255v2.558c.31-1.118 1.99-2.715 4.67-2.715 3.324 0 5.936 2.347 5.936 7.395V24z"/>
</svg>
</a>
</li>
<li class="social-links__item">
<a href="https://twitter.com" class="social-links__item-link" aria-label="Twitter">
<span class="social-links__item-text">
Twitter account for
</span>
<svg class="twitter" width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="twitter__bird" fill-rule="evenodd" clip-rule="evenodd" d="M16.6156 0C13.8968 0 11.6936 2.26058 11.6936 5.04839C11.6936 5.44417 11.7345 5.82984 11.819 6.19818C7.72812 5.98729 4.10072 3.97949 1.67072 0.92301C1.2467 1.67124 1.0044 2.53792 1.0044 3.46237C1.0044 5.21306 1.87357 6.75863 3.19493 7.66575C2.38774 7.63975 1.62846 7.41008 0.96355 7.03452V7.09663C0.96355 9.54355 2.65962 11.5846 4.91495 12.0468C4.50079 12.1652 4.06691 12.2245 3.61613 12.2245C3.29917 12.2245 2.98926 12.1941 2.69061 12.1349C3.31608 14.1398 5.13471 15.6016 7.29002 15.6406C5.6038 16.9955 3.48089 17.8015 1.17485 17.8015C0.777602 17.8015 0.384575 17.7799 0 17.7322C2.17926 19.1637 4.76704 20 7.54781 20C16.6057 20 21.5559 12.3068 21.5559 5.63484C21.5559 5.41528 21.5531 5.19717 21.5432 4.98194C22.5054 4.26982 23.3421 3.38004 24 2.36747C23.1167 2.76903 22.1673 3.04059 21.1727 3.16192C22.1898 2.53792 22.9702 1.54846 23.3365 0.369782C22.3842 0.94901 21.3319 1.3679 20.2092 1.59468C19.3133 0.612451 18.0328 0 16.6156 0Z" fill="#FF552E"/>
</svg>
</a>
</li>
<li class="social-links__item">
<a href="https://instagram.com" class="social-links__item-link" aria-label="Instagram">
<span class="social-links__item-text">
Instagram account for
</span>
<svg class="instagram" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="instagram__camera" fill-rule="evenodd" clip-rule="evenodd" d="M18 0L18.2995 0.00734296C21.3985 0.159666 23.8793 2.66319 23.9957 5.77151L24 6V18L23.9927 18.2995C23.8403 21.3985 21.3368 23.8793 18.2285 23.9957L18 24H6L5.70054 23.9927C2.60154 23.8403 0.120651 21.3368 0.0042705 18.2285L0 18V6L0.00734296 5.70054C0.159666 2.60154 2.66319 0.120651 5.77151 0.0042705L6 0H18ZM17.993 2H6C3.93434 2 2.22293 3.57043 2.02178 5.55026L2.00674 5.74957L2 6V18C2 20.0657 3.57043 21.7771 5.55026 21.9782L5.74957 21.9933L6 22H18C20.0657 22 21.7771 20.4296 21.9782 18.4497L21.9933 18.2504L22 18V6C22 3.93434 20.4296 2.22293 18.4497 2.02178L18.2504 2.00674L17.993 2ZM18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18C15.3137 18 18 15.3137 18 12ZM12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM20 5.5C20 4.67157 19.3284 4 18.5 4C17.6716 4 17 4.67157 17 5.5C17 6.32843 17.6716 7 18.5 7C19.3284 7 20 6.32843 20 5.5Z" fill="#FF552E"/>
</svg>
</a>
</li>
<li class="social-links__item">
<a href="https://youtube.com" class="social-links__item-link" aria-label="YouTube">
<span class="social-links__item-text">
Youtube account for
</span>
<svg class="youtube" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
<path class="youtube__play-button" fill-rule="evenodd" clip-rule="evenodd" d="M36 28.5825V19.4175C36 19.4175 36 15 31.8641 15H16.1345C16.1345 15 12 15 12 19.4175V28.5825C12 28.5825 12 33 16.1345 33H31.8641C31.8641 33 36 33 36 28.5825ZM28.6595 24.0128L20.8024 28.9412V19.0829L28.6595 24.0128Z" fill="white"/>
</svg>
</a>
</li>
<li class="social-links__item">
<a href="https://tiktok.com" class="social-links__item-link" aria-label="TikTok">
<span class="social-links__item-text">
TikTok account for
</span>
<svg class="tiktok" xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512">
<path class="tiktok__logo"
d="M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z"/>
</svg>
</a>
</li>
</ul>
<ul class="social-links social-links--{{ siteUnit }}">
{% if contactInfo.facebookLink %}
<li class="social-links__item">
<a href="{{ contactInfo.facebookLink }}" class="social-links__item-link" aria-label="Facebook">
<span class="social-links__item-text">
Facebook page for {{ site.name }}
</span>
{% include 'bits/icons/facebook.twig' %}
</a>
</li>
{% endif %}
{% if contactInfo.flickrLink %}
<li class="social-links__item">
<a href="{{ contactInfo.flickrLink }}" class="social-links__item-link" aria-label="Flicker photos">
<span class="social-links__item-text">
Flickr profile for {{ site.name }}
</span>
{% include 'bits/icons/flickr.twig' %}
</a>
</li>
{% endif %}
{% if contactInfo.linkedInLink %}
<li class="social-links__item">
<a href="{{ contactInfo.linkedInLink }}" class="social-links__item-link" aria-label="Linked In">
<span class="social-links__item-text">
Linked in profile for {{ site.name }}
</span>
{% include 'bits/icons/linkedin.twig' %}
</a>
</li>
{% endif %}
{% if contactInfo.twitterLink %}
<li class="social-links__item">
<a href="{{ contactInfo.twitterLink }}" class="social-links__item-link" aria-label="Twitter">
<span class="social-links__item-text">
Twitter account for {{ site.name }}
</span>
{% include 'bits/icons/twitter.twig' %}
</a>
</li>
{% endif %}
{% if contactInfo.instagramLink %}
<li class="social-links__item">
<a href="{{ contactInfo.instagramLink }}" class="social-links__item-link" aria-label="Instagram">
<span class="social-links__item-text">
Instagram account for {{ site.name }}
</span>
{% include 'bits/icons/instagram.twig' %}
</a>
</li>
{% endif %}
{% if contactInfo.youtubeLink %}
<li class="social-links__item">
<a href="{{ contactInfo.youtubeLink }}" class="social-links__item-link" aria-label="YouTube">
<span class="social-links__item-text">
Youtube account for {{ site.name }}
</span>
{% include 'bits/icons/youtube.twig' %}
</a>
</li>
{% endif %}
{% if contactInfo.tiktokLink %}
<li class="social-links__item">
<a href="{{ contactInfo.tiktokLink }}" class="social-links__item-link" aria-label="TikTok">
<span class="social-links__item-text">
TikTok account for {{ site.name }}
</span>
{% include 'bits/icons/tiktok.twig' %}
</a>
</li>
{% endif %}
</ul>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"contactInfo": {
"facebookLink": "https://facebook.com",
"flickrLink": "https://flickr.com",
"linkedInLink": "https://linkedin.com",
"twitterLink": "https://twitter.com",
"instagramLink": "https://instagram.com",
"youtubeLink": "https://youtube.com",
"tiktokLink": "https://tiktok.com"
}
}
.social-links
--backgroundColorActive transparent
--border 2px solid illiniOrange
--iconFillColor white
--iconFillColorActive white
&--arch
--backgroundColorActive transparent
--border 2px solid charcoalLight
--iconFillColor charcoalLight
--iconFillColorActive charcoalLight
&--art
--backgroundColorActive transparent
--border 2px solid archesBlue
--iconFillColor white
--iconFillColorActive white
&--college
--backgroundColorActive illiniOrange
--border 2px solid illiniOrange
--iconFillColor illiniBlue
--iconFillColorActive illiniBlue
&--dance
--backgroundColorActive transparent
--border 2px solid archesBlue
--iconFillColor white
--iconFillColorActive white
&--durp
--backgroundColorActive transparent
--border 2px solid illiniOrange
--iconFillColor white
--iconFillColorActive white
&--landarch
--backgroundColorActive illiniOrange
--border 2px solid illiniOrange
--iconFillColor charcoalDarker
--iconFillColorActive black
&--theatre
--backgroundColorActive illiniOrange
--border 2px solid illiniOrange
--iconFillColor white
--iconFillColorActive illiniBlue
display flex
flex-wrap wrap
margin-top 24px
&__item
margin-bottom 16px
margin-right 16px
&__item-link
background-color transparent
border var(--border)
border-radius 50px
display flex
width 48px
height 48px
justify-content center
align-items center
transition all 0.3s
&:focus
&:hover
&:active
background-color var(--backgroundColorActive)
transform scale(1.2)
& .facebook__logo
& .flickr__logo
& .linkedin__logo
& .twitter__bird
& .instagram__camera
& .youtube__play-button
& .tiktok__logo
fill var(--iconFillColor)
&:focus .facebook__logo
&:focus .flickr__logo
&:focus .linkedin__logo
&:focus .twitter__bird
&:focus .instagram__camera
&:focus .youtube__play-button
&:focus .tiktok__logo
&:hover .facebook__logo
&:hover .flickr__logo
&:hover .linkedin__logo
&:hover .twitter__bird
&:hover .instagram__camera
&:hover .youtube__play-button
&:hover .tiktok__logo
&:active .facebook__logo
&:active .flickr__logo
&:active .linkedin__logo
&:active .twitter__bird
&:active .instagram__camera
&:active .youtube__play-button
&:active .tiktok__logo
fill var(--iconFillColorActive)
&__item-text
zoom 1
@extends $visually-hidden
There are no notes for this item.