edpibu/nummi
1
Fork 0
Code Issues 4 Releases Activity

Add skip link, add sticky navigation

Browse source
This commit is contained in:
Edgar P. Burkhart 2023-04-18 14:05:13 +02:00
parent 057e0ecf74
commit c912343442
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
2 changed files with 31 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
nummi/main/static/main/css/main.css
View file

@ -46,6 +46,9 @@ body {
background: var(--bg);
color: var(--text);
display: grid;
grid-template-columns: max-content 1fr;
}
p {
@ -63,10 +66,6 @@ a:hover {
.red {color: var(--red)}
.green {color: var(--text-green)}
body {
display: grid;
grid-template-columns: max-content 1fr;
}
main {
padding: 2rem;
grid-column: 2;
@ -91,7 +90,15 @@ nav h1 img {
nav ul {
list-style: none;
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 {
font-weight: 550;

23
nummi/main/templates/main/base.html
View file

@ -29,6 +29,9 @@
Nummi
</h1>
<ul>
<li>
<a class="skip-link" href="#main">{% translate "Skip to main content" %}</a>
</li>
{% if user.is_authenticated %}
<li>
<a href="{% url 'index' %}"
@ -37,32 +40,44 @@
{% translate "Home" %}
</a>
</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>
<a href="{% url 'account' %}"
class="{% if request.resolver_match.url_name == 'account' %}cur{% endif %}"
accesskey="a">
{% translate "Account" %}
{% translate "New account" %}
</a>
</li>
<li>
<a href="{% url 'snapshot' %}"
class="{% if request.resolver_match.url_name == 'snapshot' %}cur{% endif %}"
accesskey="s">
{% translate "Snapshot" %}
{% translate "New snapshot" %}
</a>
</li>
<li>
<a href="{% url 'category' %}"
class="{% if request.resolver_match.url_name == 'category' %}cur{% endif %}"
accesskey="c">
{% translate "Category" %}
{% translate "New category" %}
</a>
</li>
<li>
<a href="{% url 'transaction' %}"
class="{% if request.resolver_match.url_name == 'transaction' %}cur{% endif %}"
accesskey="t">
{% translate "Transaction" %}
{% translate "New transaction" %}
</a>
</li>
<li>