<picture class="image lehigh-logo e11y-ok">
<a href="https://www.lehigh.edu/" 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>
<picture class="image lehigh-logo e11y-ok">
<a href="{{ logo_link }}" class="logo__link">
<img class="web" src="{{ site_logo }}" alt="Lehigh University logo" width="200" height="43" />
<span class="u-a11y-text">Go to homepage</span>
</a>
</picture>
{
"img_src": "/img/maxresdefault.jpg",
"img_alt": "hot lava",
"img_url": "https://www.google.com",
"img_caption": "This is the caption",
"logo_link": "https://www.lehigh.edu/",
"site_logo": "/img/lehigh-logo.svg"
}
@mixin img {
display: block;
height: auto;
max-width: 100%;
width: 100%;
}
.image img {
@include img;
}
.favicon img {
width: inherit;
}
.figure,
.caption-img {
max-width: 370px;
margin: 0;
figcaption,
.figure-caption {
text-align: right;
padding: $space_one_half;
background-color: $grey_lightest;
color: $grey_darkest;
.color-scheme-dark & {
background-color: $dark_mode_grey;
color: $white;
}
}
}
.lehigh-logo {
margin: 0 $spacer 0 0;
flex-grow: 2;
max-width: 180px;
@include media-breakpoint-up(md) {
min-width: 200px;
}
img {
.fractal-preview & {
background-color: $lehigh_brown;
background-color: var(--lehigh_brown, $lehigh_brown);
}
}
}
img {
&.align-left {
padding: $spacer $spacer $spacer 0;
}
&.align-right {
padding: $spacer 0 $spacer $spacer;
}
}
Display of the Lehigh University logo.