<picture class="image lehigh-logo">
<a href="https://www.lehigh.edu" class="logo__link">
<img class="web" src="/images/lehigh-logo.svg" alt="Lehigh University logo" />
<img class="print" src="/images/lehigh-logo-print.jpg" alt="Lehigh University logo" />
<span class="sr-only">Go to homepage</span>
</a>
</picture>
<picture class="image lehigh-logo">
<a href="https://www.lehigh.edu" class="logo__link">
<img class="web" src="{{ site_logo }}" alt="Lehigh University logo" />
<img class="print" src="{{ site_logo_print }}" alt="Lehigh University logo" />
<span class="sr-only">Go to homepage</span>
</a>
</picture>
{
"img_src": "/images/maxresdefault.jpg",
"img_alt": "hot lava",
"img_url": "https://www.google.com",
"img_caption": "Me mind on fire -- Me soul on fire -- Feeling hot hot hot - Buster Poindexter",
"site_logo": "/images/lehigh-logo.svg",
"site_logo_print": "/images/lehigh-logo-print.jpg"
}
@mixin img {
display: block;
height: auto;
max-width: 100%;
width: 100%;
}
.image img {
@include img;
}
.favicon img {
width: inherit;
}
.figure {
margin: 0;
}
.lehigh-logo {
background-color: $lehigh-brown;
padding: 0 $space 0 0;
margin: 0 $space 0 0;
border-right: 1px solid $white;
flex-grow: 2;
max-width: 180px;
@media only screen and (min-width: $break-desktop) {
max-width: 225px;
min-width: 150px;
}
.print {
display: none;
}
.sr-only {
color: $white;
}
}
.align-right {
img {
margin: $space-three-quarter 0 $space-three-quarter $space-three-quarter;
}
}
.align-left {
img {
margin: $space-three-quarter $space-three-quarter $space-three-quarter 0;
}
}
No notes defined.