Update design
This commit is contained in:
parent
58c18195a6
commit
057e0ecf74
GPG key ID:
9833D3C5A25BD227
4 changed files with 100 additions and 123 deletions
|
|
@ -1,17 +1,3 @@
|
||||||
h1 {
|
|
||||||
font-size: 4rem;
|
|
||||||
font-variant: small-caps;
|
|
||||||
font-weight: 850;
|
|
||||||
letter-spacing: -.05em;
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1.2em;
|
|
||||||
}
|
|
||||||
h1 img {
|
|
||||||
height: 1.2em;
|
|
||||||
vertical-align: top;
|
|
||||||
margin-right: var(--gap);
|
|
||||||
}
|
|
||||||
|
|
||||||
a.big-link {
|
a.big-link {
|
||||||
margin-right: 1em;
|
margin-right: 1em;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -43,16 +43,11 @@
|
||||||
body {
|
body {
|
||||||
font-family: "Inter var experimental", "Inter var", "Inter", sans-serif;
|
font-family: "Inter var experimental", "Inter var", "Inter", sans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 2em;
|
|
||||||
|
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
line-height: 2em;
|
line-height: 2em;
|
||||||
}
|
}
|
||||||
|
|
@ -68,8 +63,45 @@ a:hover {
|
||||||
.red {color: var(--red)}
|
.red {color: var(--red)}
|
||||||
.green {color: var(--text-green)}
|
.green {color: var(--text-green)}
|
||||||
|
|
||||||
.split {
|
body {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, auto);
|
grid-template-columns: max-content 1fr;
|
||||||
grid-gap: var(--gap);
|
}
|
||||||
|
main {
|
||||||
|
padding: 2rem;
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 1;
|
||||||
|
}
|
||||||
|
nav {
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 1;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 2rem;
|
||||||
|
background: var(--bg-01);
|
||||||
|
line-height: 2rem;
|
||||||
|
}
|
||||||
|
nav h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
height: 1cap;
|
||||||
|
line-height: 1cap;
|
||||||
|
}
|
||||||
|
nav h1 img {
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
nav ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
nav a.cur {
|
||||||
|
font-weight: 550;
|
||||||
|
}
|
||||||
|
nav a.cur::after {
|
||||||
|
content: "◎";
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
nav > :first-child,
|
||||||
|
main > :first-child {
|
||||||
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
:root {
|
|
||||||
--nav-lh: 2em;
|
|
||||||
--nav-pad: 1em;
|
|
||||||
--nav-height: calc(2 * var(--nav-pad) + var(--nav-lh));
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin-top: var(--nav-height);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
background: var(--theme);
|
|
||||||
color: var(--text-theme);
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: var(--nav-height);
|
|
||||||
line-height: var(--nav-lh);
|
|
||||||
padding: var(--nav-pad);
|
|
||||||
}
|
|
||||||
nav > a,
|
|
||||||
nav > form {
|
|
||||||
display: inline-block;
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: inherit;
|
|
||||||
height: var(--nav-lh);
|
|
||||||
margin: 0 var(--nav-pad);
|
|
||||||
}
|
|
||||||
nav > a.cur {
|
|
||||||
font-weight: 750;
|
|
||||||
}
|
|
||||||
nav > a.logout {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
nav > a img {
|
|
||||||
height: var(--nav-lh);
|
|
||||||
vertical-align: top;
|
|
||||||
margin-right: .5rem;
|
|
||||||
}
|
|
||||||
nav > a h1 {
|
|
||||||
display: inline;
|
|
||||||
font: inherit;
|
|
||||||
font-variant: small-caps;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav > form input {
|
|
||||||
font: inherit;
|
|
||||||
height: inherit;
|
|
||||||
border: none;
|
|
||||||
background: #ffffff35;
|
|
||||||
padding: 0 var(--gap);
|
|
||||||
}
|
|
||||||
nav > form input[type="text"] {
|
|
||||||
border-radius: var(--radius) 0 0 var(--radius);
|
|
||||||
}
|
|
||||||
nav > form input[type="submit"] {
|
|
||||||
border-radius: 0 var(--radius) var(--radius) 0;
|
|
||||||
}
|
|
||||||
nav > form input[type="submit"] {
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--green-text);
|
|
||||||
}
|
|
||||||
nav > form input[type="submit"]:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
@ -15,9 +15,6 @@
|
||||||
<link rel="stylesheet"
|
<link rel="stylesheet"
|
||||||
href="{% static 'main/css/main.css' %}"
|
href="{% static 'main/css/main.css' %}"
|
||||||
type="text/css"/>
|
type="text/css"/>
|
||||||
<link rel="stylesheet"
|
|
||||||
href="{% static 'main/css/nav.css' %}"
|
|
||||||
type="text/css"/>
|
|
||||||
<link rel="stylesheet"
|
<link rel="stylesheet"
|
||||||
href="{% static 'main/fontawesome/css/all.min.css' %}"
|
href="{% static 'main/fontawesome/css/all.min.css' %}"
|
||||||
type="text/css"/>
|
type="text/css"/>
|
||||||
|
|
@ -27,41 +24,69 @@
|
||||||
{% block nav %}
|
{% block nav %}
|
||||||
{% spaceless %}
|
{% spaceless %}
|
||||||
<nav>
|
<nav>
|
||||||
<a href="{% url 'index' %}"
|
<h1>
|
||||||
class="home{% if request.resolver_match.url_name == 'index' %} cur{% endif %}"
|
|
||||||
accesskey="h">
|
|
||||||
<img src="{% static 'main/svg/logo.svg' %}" alt="" />
|
<img src="{% static 'main/svg/logo.svg' %}" alt="" />
|
||||||
<h1>Nummi</h1>
|
Nummi
|
||||||
</a>
|
</h1>
|
||||||
<a href="{% url 'account' %}"
|
<ul>
|
||||||
class="{% if request.resolver_match.url_name == 'account' %}cur{% endif %}"
|
{% if user.is_authenticated %}
|
||||||
accesskey="a">
|
<li>
|
||||||
{% translate "Account" %}
|
<a href="{% url 'index' %}"
|
||||||
</a>
|
class="home{% if request.resolver_match.url_name == 'index' %} cur{% endif %}"
|
||||||
<a href="{% url 'snapshot' %}"
|
accesskey="h">
|
||||||
class="{% if request.resolver_match.url_name == 'snapshot' %}cur{% endif %}"
|
{% translate "Home" %}
|
||||||
accesskey="s">
|
</a>
|
||||||
{% translate "Snapshot" %}
|
</li>
|
||||||
</a>
|
<li>
|
||||||
<a href="{% url 'category' %}"
|
<a href="{% url 'account' %}"
|
||||||
class="{% if request.resolver_match.url_name == 'category' %}cur{% endif %}"
|
class="{% if request.resolver_match.url_name == 'account' %}cur{% endif %}"
|
||||||
accesskey="c">
|
accesskey="a">
|
||||||
{% translate "Category" %}
|
{% translate "Account" %}
|
||||||
</a>
|
</a>
|
||||||
<a href="{% url 'transaction' %}"
|
</li>
|
||||||
class="{% if request.resolver_match.url_name == 'transaction' %}cur{% endif %}"
|
<li>
|
||||||
accesskey="t">
|
<a href="{% url 'snapshot' %}"
|
||||||
{% translate "Transaction" %}
|
class="{% if request.resolver_match.url_name == 'snapshot' %}cur{% endif %}"
|
||||||
</a>
|
accesskey="s">
|
||||||
<a href="{% url 'search' %}"
|
{% translate "Snapshot" %}
|
||||||
class="{% if request.resolver_match.url_name == 'search' %}cur{% endif %}"
|
</a>
|
||||||
accesskey="r">
|
</li>
|
||||||
{% translate "Search" %}
|
<li>
|
||||||
</a>
|
<a href="{% url 'category' %}"
|
||||||
<a href="{% url 'logout' %}" class="logout" accesskey="l">{% translate "Log out" %}</a>
|
class="{% if request.resolver_match.url_name == 'category' %}cur{% endif %}"
|
||||||
|
accesskey="c">
|
||||||
|
{% translate "Category" %}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="{% url 'transaction' %}"
|
||||||
|
class="{% if request.resolver_match.url_name == 'transaction' %}cur{% endif %}"
|
||||||
|
accesskey="t">
|
||||||
|
{% translate "Transaction" %}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="{% url 'search' %}"
|
||||||
|
class="{% if request.resolver_match.url_name == 'search' %}cur{% endif %}"
|
||||||
|
accesskey="r">
|
||||||
|
{% translate "Search" %}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="{% url 'logout' %}" accesskey="l">{% translate "Log out" %}</a>
|
||||||
|
</li>
|
||||||
|
{% else %}
|
||||||
|
<li>
|
||||||
|
<a {% if request.resolver_match.url_name == "login" %}class="cur"{% endif %}
|
||||||
|
href="{% url "login" %}">{% translate "Log in" %}</a>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
{% endspaceless %}
|
{% endspaceless %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block body %}{% endblock %}
|
<main id="main">
|
||||||
|
{% block body %}{% endblock %}
|
||||||
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue