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 {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,16 +43,11 @@
|
|||
body {
|
||||
font-family: "Inter var experimental", "Inter var", "Inter", sans-serif;
|
||||
margin: 0;
|
||||
padding: 2em;
|
||||
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 2em;
|
||||
}
|
||||
|
|
@ -68,8 +63,45 @@ a:hover {
|
|||
.red {color: var(--red)}
|
||||
.green {color: var(--text-green)}
|
||||
|
||||
.split {
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
grid-gap: var(--gap);
|
||||
grid-template-columns: max-content 1fr;
|
||||
}
|
||||
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"
|
||||
href="{% static 'main/css/main.css' %}"
|
||||
type="text/css"/>
|
||||
<link rel="stylesheet"
|
||||
href="{% static 'main/css/nav.css' %}"
|
||||
type="text/css"/>
|
||||
<link rel="stylesheet"
|
||||
href="{% static 'main/fontawesome/css/all.min.css' %}"
|
||||
type="text/css"/>
|
||||
|
|
@ -27,41 +24,69 @@
|
|||
{% block nav %}
|
||||
{% spaceless %}
|
||||
<nav>
|
||||
<a href="{% url 'index' %}"
|
||||
class="home{% if request.resolver_match.url_name == 'index' %} cur{% endif %}"
|
||||
accesskey="h">
|
||||
<h1>
|
||||
<img src="{% static 'main/svg/logo.svg' %}" alt="" />
|
||||
<h1>Nummi</h1>
|
||||
</a>
|
||||
<a href="{% url 'account' %}"
|
||||
class="{% if request.resolver_match.url_name == 'account' %}cur{% endif %}"
|
||||
accesskey="a">
|
||||
{% translate "Account" %}
|
||||
</a>
|
||||
<a href="{% url 'snapshot' %}"
|
||||
class="{% if request.resolver_match.url_name == 'snapshot' %}cur{% endif %}"
|
||||
accesskey="s">
|
||||
{% translate "Snapshot" %}
|
||||
</a>
|
||||
<a href="{% url 'category' %}"
|
||||
class="{% if request.resolver_match.url_name == 'category' %}cur{% endif %}"
|
||||
accesskey="c">
|
||||
{% translate "Category" %}
|
||||
</a>
|
||||
<a href="{% url 'transaction' %}"
|
||||
class="{% if request.resolver_match.url_name == 'transaction' %}cur{% endif %}"
|
||||
accesskey="t">
|
||||
{% translate "Transaction" %}
|
||||
</a>
|
||||
<a href="{% url 'search' %}"
|
||||
class="{% if request.resolver_match.url_name == 'search' %}cur{% endif %}"
|
||||
accesskey="r">
|
||||
{% translate "Search" %}
|
||||
</a>
|
||||
<a href="{% url 'logout' %}" class="logout" accesskey="l">{% translate "Log out" %}</a>
|
||||
Nummi
|
||||
</h1>
|
||||
<ul>
|
||||
{% if user.is_authenticated %}
|
||||
<li>
|
||||
<a href="{% url 'index' %}"
|
||||
class="home{% if request.resolver_match.url_name == 'index' %} cur{% endif %}"
|
||||
accesskey="h">
|
||||
{% translate "Home" %}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'account' %}"
|
||||
class="{% if request.resolver_match.url_name == 'account' %}cur{% endif %}"
|
||||
accesskey="a">
|
||||
{% translate "Account" %}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'snapshot' %}"
|
||||
class="{% if request.resolver_match.url_name == 'snapshot' %}cur{% endif %}"
|
||||
accesskey="s">
|
||||
{% translate "Snapshot" %}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'category' %}"
|
||||
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>
|
||||
{% endspaceless %}
|
||||
{% endblock %}
|
||||
{% block body %}{% endblock %}
|
||||
<main id="main">
|
||||
{% block body %}{% endblock %}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue