Add skip link, add sticky navigation
This commit is contained in:
parent
057e0ecf74
commit
c912343442
2 changed files with 31 additions and 9 deletions
|
@ -46,6 +46,9 @@ body {
|
||||||
|
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: max-content 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
@ -63,10 +66,6 @@ a:hover {
|
||||||
.red {color: var(--red)}
|
.red {color: var(--red)}
|
||||||
.green {color: var(--text-green)}
|
.green {color: var(--text-green)}
|
||||||
|
|
||||||
body {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: max-content 1fr;
|
|
||||||
}
|
|
||||||
main {
|
main {
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
grid-column: 2;
|
grid-column: 2;
|
||||||
|
@ -91,7 +90,15 @@ nav h1 img {
|
||||||
nav ul {
|
nav ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: relative;
|
position: sticky;
|
||||||
|
top: 2rem;
|
||||||
|
}
|
||||||
|
nav .skip-link {
|
||||||
|
opacity: .1;
|
||||||
|
}
|
||||||
|
nav .skip-link:active,
|
||||||
|
nav .skip-link:focus {
|
||||||
|
opacity: initial;
|
||||||
}
|
}
|
||||||
nav a.cur {
|
nav a.cur {
|
||||||
font-weight: 550;
|
font-weight: 550;
|
||||||
|
|
|
@ -29,6 +29,9 @@
|
||||||
Nummi
|
Nummi
|
||||||
</h1>
|
</h1>
|
||||||
<ul>
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a class="skip-link" href="#main">{% translate "Skip to main content" %}</a>
|
||||||
|
</li>
|
||||||
{% if user.is_authenticated %}
|
{% if user.is_authenticated %}
|
||||||
<li>
|
<li>
|
||||||
<a href="{% url 'index' %}"
|
<a href="{% url 'index' %}"
|
||||||
|
@ -37,32 +40,44 @@
|
||||||
{% translate "Home" %}
|
{% translate "Home" %}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="{% url 'snapshots' %}"
|
||||||
|
class="{% if request.resolver_match.url_name == 'snapshots' %}cur{% endif %}">
|
||||||
|
{% translate "Snapshots" %}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="{% url 'transactions' %}"
|
||||||
|
class="{% if request.resolver_match.url_name == 'transactions' %}cur{% endif %}">
|
||||||
|
{% translate "Transactions" %}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="{% url 'account' %}"
|
<a href="{% url 'account' %}"
|
||||||
class="{% if request.resolver_match.url_name == 'account' %}cur{% endif %}"
|
class="{% if request.resolver_match.url_name == 'account' %}cur{% endif %}"
|
||||||
accesskey="a">
|
accesskey="a">
|
||||||
{% translate "Account" %}
|
{% translate "New account" %}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="{% url 'snapshot' %}"
|
<a href="{% url 'snapshot' %}"
|
||||||
class="{% if request.resolver_match.url_name == 'snapshot' %}cur{% endif %}"
|
class="{% if request.resolver_match.url_name == 'snapshot' %}cur{% endif %}"
|
||||||
accesskey="s">
|
accesskey="s">
|
||||||
{% translate "Snapshot" %}
|
{% translate "New snapshot" %}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="{% url 'category' %}"
|
<a href="{% url 'category' %}"
|
||||||
class="{% if request.resolver_match.url_name == 'category' %}cur{% endif %}"
|
class="{% if request.resolver_match.url_name == 'category' %}cur{% endif %}"
|
||||||
accesskey="c">
|
accesskey="c">
|
||||||
{% translate "Category" %}
|
{% translate "New category" %}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="{% url 'transaction' %}"
|
<a href="{% url 'transaction' %}"
|
||||||
class="{% if request.resolver_match.url_name == 'transaction' %}cur{% endif %}"
|
class="{% if request.resolver_match.url_name == 'transaction' %}cur{% endif %}"
|
||||||
accesskey="t">
|
accesskey="t">
|
||||||
{% translate "Transaction" %}
|
{% translate "New transaction" %}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
|
|
Loading…
Reference in a new issue