edpibu
/
nummi
1
Fork 0
Code Issues 4 Releases Activity

Add skip link, add sticky navigation

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); 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;

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

@ -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>