Implémentation du "skip to content" #94
This commit is contained in:
parent
55beccf7f4
commit
6cbf5a51f9
|
@ -119,3 +119,20 @@ input[type="submit"]:hover,
|
|||
.bg-warn:active {
|
||||
background: var(--warn-active);
|
||||
}
|
||||
|
||||
|
||||
.skip-to-content-link {
|
||||
height: 30px;
|
||||
left: 50%;
|
||||
padding: 8px;
|
||||
position: absolute;
|
||||
transform: translateY(-100%);
|
||||
transition: transform 0.3s;
|
||||
background: var(--links);
|
||||
color: var(--warn-text);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.skip-to-content-link:focus {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
<html lang="fr-FR">
|
||||
{% include "base/head.html" %}
|
||||
<body>
|
||||
<div><a class="skip-to-content-link" href="#main-content">Aller directement au contenu</a></div>
|
||||
{% include "base/navbar.html" %}
|
||||
|
||||
<div class=container>
|
||||
|
@ -10,8 +11,10 @@
|
|||
<div class=title>{% block title %}<h1>Planète Casio</h1>{% endblock %}</div>
|
||||
{% include "base/header.html" %}
|
||||
</header>
|
||||
|
||||
{% include "base/flash.html" %}
|
||||
|
||||
<div id="main-content"></div>
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
|
||||
|
|
Loading…
Reference in New Issue