<a href="../accueil" class="vd-logo" title="Aller à la page d'accueil du Site du Canton de Vaud">
<img src="../../foehn/svg/ETATVAUD.svg" class="vd-logo__image" alt="État de Vaud" aria-hidden="true" />
</a>
<a
href="../accueil"
class="vd-logo{%- if styleModifier %} {{ styleModifier }}{% endif -%}"
title="Aller à la page d'accueil du Site du Canton de Vaud"
>
{%- if blason -%}
<div class="vd-logo__blason">
<img
src="{{ '/foehn/svg/logo/logo.svg' | path }}"
class="img-fluid d-none d-md-block"
alt="Logo du canton de Vaud"
/>
<img
src="{{ '/foehn/svg/logo/logo-square.svg' | path }}"
class="img-fluid d-md-none"
aria-hidden="true"
alt="Logo du canton de Vaud"
/>
</div>
{%- endif %} {%- if logoAlternate %}
<img
src="{{ '/foehn/svg/ETATVAUD-alt.svg' | path }}"
class="vd-logo__image"
alt="État de Vaud"
aria-hidden="true"
/>
{%- else %}
<img
src="{{ '/foehn/svg/ETATVAUD.svg' | path }}"
class="vd-logo__image"
alt="État de Vaud"
aria-hidden="true"
/>
{%- endif %}
</a>
/* No context defined. */
@charset 'UTF-8';
/**
* Logo of the website
*
* 1. Offset the blason on the left
* 2. Fix SVG in <img> tags not scaling in IE9, IE10, IE11
* https://gist.github.com/larrybotha/7881691
* 3. Align little blason at the end (bottom)
* 4. Align image at the start (top)
* 5. Fix SVG not showing in IE
*/
.vd-logo {
margin-bottom: $spacer;
display: inline-block;
&__image {
width: 12em;
height: auto;
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
max-width: 12em; /* [5] */
width: auto; /* [5] */
}
}
&--alt {
display: flex;
.vd-logo__image {
align-self: flex-start; /* [4] */
}
}
&__blason {
position: absolute;
width: 1.8em;
margin-left: -3 * $spacer; /* [1] */
img {
width: 100%; /* [2] */
}
@include media-breakpoint-down(sm) {
margin-right: 2 * $spacer;
align-self: flex-end; /* [3] */
}
@media print {
display: none;
}
}
}
This is the logo for the État de Vaud website.