<div class="logo ">
<a href="#" class="logo__content logo__link">
<figure class="image logo__image">
<img loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="../../inc/logo/logo.svg" data-sizes="auto" alt="letters-logo" class="image__img lazyload">
</figure>
</a>
</div>
{% set logoContent %}
{% if data.image %}
{% include '@image' with { class: 'logo__image', data: data.image } %}
{% else %}
<span class="logo__content">
<span class="logo__text">{{ data.text }}</span>
</span>
{% endif %}
{% endset %}
<div class="logo {{ modifier }} {{ class }}">
{% if data.link %}
<a href="{{ data.link }}" class="logo__content logo__link">
{{ logoContent }}
</a>
{% else %}
{{ logoContent }}
{% endif %}
</div>
{
"language": "en-US",
"data": {
"image": {
"alt": "letters-logo",
"srcset": "../../inc/logo/logo.svg"
},
"link": "#"
}
}
.logo {
position: relative;
&:before {
content: '';
display: block;
width: 100%;
padding-top: 30 / 212 * 100%;
}
}
.logo__content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.logo__link {
display: block;
width: 100%;
height: 100%;
}
.logo__image {
width: 100%;
height: 100%;
.image__img {
max-width: 30%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: filter $transition-duration $transition-easing;
@include bp(md-min) {
max-width: 60%;
}
}
}
body.theme-dark .logo__image .image__img {
filter: invert(1); /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
.logo__text {
display: block;
font-size: 16px;
line-height: 24px;
text-decoration: none;
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
import './logo.scss';
import '../../../assets/logo/nope.svg';
<div class="logo ">
<a href="#" class="logo__content logo__link">
<span class="logo__content">
<span class="logo__text">LETTERS FROM TARTU</span>
</span>
</a>
</div>
{% set logoContent %}
{% if data.image %}
{% include '@image' with { class: 'logo__image', data: data.image } %}
{% else %}
<span class="logo__content">
<span class="logo__text">{{ data.text }}</span>
</span>
{% endif %}
{% endset %}
<div class="logo {{ modifier }} {{ class }}">
{% if data.link %}
<a href="{{ data.link }}" class="logo__content logo__link">
{{ logoContent }}
</a>
{% else %}
{{ logoContent }}
{% endif %}
</div>
{
"language": "en-US",
"data": {
"image": false,
"link": "#",
"text": "LETTERS FROM TARTU"
}
}
.logo {
position: relative;
&:before {
content: '';
display: block;
width: 100%;
padding-top: 30 / 212 * 100%;
}
}
.logo__content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.logo__link {
display: block;
width: 100%;
height: 100%;
}
.logo__image {
width: 100%;
height: 100%;
.image__img {
max-width: 30%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: filter $transition-duration $transition-easing;
@include bp(md-min) {
max-width: 60%;
}
}
}
body.theme-dark .logo__image .image__img {
filter: invert(1); /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
.logo__text {
display: block;
font-size: 16px;
line-height: 24px;
text-decoration: none;
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
import './logo.scss';
import '../../../assets/logo/nope.svg';