<footer class="mt-5">
<div class="container">
<div class="text-end">
<a href="#" class="btn btn-sm btn-dark" title="Retour vers le haut de la page">Haut <span class="fas fa-chevron-up"></span></a>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-xs-10">
<nav class="row" aria-label="pied de page">
<div class="col-sm">
<ul class="list-unstyled ">
<li><a href="">Contact</a></li>
<li><a href="">Pourquoi créer un compte</a></li>
<li><a href="">Mentions légales</a></li>
</ul>
</div>
</nav>
</div>
<div class="col-xs-2">
<div class="d-flex align-items-end flex-column h-100">
<div class="mt-auto w-100 end">
<a href="#" class="d-inline-block">
<span class="sr-only">Retour à la page d'accueil</span>
<img aria-hidden="true" class="img-fluid footer-logo" src="../../foehn/svg/logo/logo--white.svg" alt="Canton de Vaud">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
{% if (social) or (updateTime) %}
<div class="container mt-5">
{% if updateTime %}{% render '@update-time' %}{% endif %}
{%if social %}{%render '@social-icons', {title:'Partager la page', titleModifier:'sr-only', styleModifier:'mt-4 mb-3'}, true %}{% endif %}
</div>
{% endif %}
<footer{% if (not social) and (not updateTime) %} class="mt-5"{% endif %}>
{% render '@button-back-to-top' %}
<div class="footer">
<div class="container">
<div class="row">
<div class="col-xs-10">
<nav class="row" aria-label="pied de page">
{% for list in lists %}
<div class="col-sm">
{% if list.title %}<h2 class="vd-heading-light h4 {% if list.hideTitle %}sr-only{% endif %}">{{ list.title }}</h2>{% endif %}
<ul class="list-unstyled {% if list.style %}{{ list.style }}{% endif %}">
{%- for item in list.items -%}
<li><a href="{{ url }}">{{ item.text }}</a></li>
{%- endfor -%}
</ul>
</div>
{% endfor %}
</nav>
</div>
<div class="col-xs-2">
<div class="d-flex align-items-end flex-column h-100">
<div class="mt-auto w-100 end">
<a href="#" class="d-inline-block">
<span class="sr-only">Retour à la page d'accueil</span>
{% render '@logo--white' %}
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
{
"lists": [
{
"items": [
{
"text": "Contact",
"url": "#"
},
{
"text": "Pourquoi créer un compte",
"url": "#"
},
{
"text": "Mentions légales",
"url": "#"
}
]
}
]
}
@charset 'UTF-8';
/**
* footer
*
* 1. add a white line between on top of the green border
* 2. Make text and links more readable
*/
.footer {
position: relative; /* [1] */
padding: $spacer 0 $spacer;
background-image: url("../svg/bars_black.svg");
background-repeat: repeat-x;
background-position: center bottom;
background-size: auto 21px;
background-color: $dark;
border-bottom: 23px solid $vd-primary;
color: $white; /* [2] */
&:after {
content: ""; /* [1] */
display: block; /* [1] */
position: absolute; /* [1] */
bottom: 0; /* [1] */
left: 0; /* [1] */
width: 100%; /* [1] */
border-top: 2px solid $white; /* [1] */
}
a {
&,
&:visited {
color: $white; /* [2] */
}
&:focus {
color: $body-color; /* [2] */
}
}
@media print {
display: none;
}
}
.footer-logo {
width: 100%;
max-width: $spacer * 2;
margin-bottom: $spacer;
}