<a class="logo " href="/components/preview/home" aria-label="Homepage">
<img
class="logo__image "
src="/images/logo/logo_cruc.jpeg"
alt="Cruc Logo"
>
</a>
<a
class="logo {{ class }}"
href="{{ href }}"
aria-label="{{ ariaLabel}}"
>
<img
class="logo__image {{ imageClass }}"
{{#if imageSrcSet }}
srcset="{{ imageSrcSet }}"
{{/if}}
src="{{ imageSrc }}"
alt="{{ imageAlt }}"
{{{ imageAttributes }}}
>
</a>
{
"class": "",
"ariaLabel": "Homepage",
"imageAlt": "Cruc Logo",
"imageAttributes": "",
"imageClass": "",
"imageSrcSet": "",
"imageSrc": "/images/logo/logo_cruc.jpeg",
"href": "/components/preview/home"
}
$logo__max-width : 30% !default;
$logo__max-width\@medium : 150px !default;
$logo__max-width\@large : 250px !default;
$logo__image-height : 30px !default;
$logo__image-height\@medium: 45px !default;
$logo__image-width\@medium : auto !default;
.logo {
display: flex;
align-items: center;
flex: 1 $logo__max-width;
justify-content: center;
max-width: calc(#{$logo__max-width} * 2);
order: 2;
@include mq($screen-m) {
justify-content: flex-start;
max-width: $logo__max-width\@medium;
margin: 15px 0;
}
@include mq($screen-l) {
justify-content: flex-start;
max-width: $logo__max-width\@large;
}
&__image {
height: $logo__image-height;
width: auto;
margin: 5px 0;
//filter: invert(44%) sepia(26%) saturate(840%) hue-rotate(353deg) brightness(94%) contrast(82%);
@include mq($screen-l) {
height: $logo__image-height\@medium;
width: $logo__image-width\@medium;
margin: 0;
}
}
}
There are no notes for this item.