nummi/main/static/main/css/index.css

@@ -1,3 +1,17 @@
+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;
 }

nummi/main/static/main/css/main.css

@@ -43,11 +43,16 @@
 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;
 }
@@ -63,45 +68,8 @@ a:hover {
 .red {color: var(--red)}
 .green {color: var(--text-green)}
 
-body {
+.split {
 	display: grid;
-	grid-template-columns: max-content 1fr;
+	grid-template-columns: repeat(2, auto);
-}
+	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;
 }

nummi/main/static/main/css/nav.css

@@ -0,0 +1,66 @@
+: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;
+}

nummi/main/templates/main/base.html

@@ -15,6 +15,9 @@
             <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"/>
@@ -24,69 +27,41 @@
         {% block nav %}
             {% spaceless %}
                 <nav>
-                    <h1>
+                    <a href="{% url 'index' %}"
+                       class="home{% if request.resolver_match.url_name == 'index' %} cur{% endif %}"
+                       accesskey="h">
                         <img src="{% static 'main/svg/logo.svg' %}" alt="" />
-                        Nummi
+                        <h1>Nummi</h1>
-                    </h1>
+                    </a>
-                    <ul>
+                    <a href="{% url 'account' %}"
-                        {% if user.is_authenticated %}
+                       class="{% if request.resolver_match.url_name == 'account' %}cur{% endif %}"
-                            <li>
+                       accesskey="a">
-                                <a href="{% url 'index' %}"
+                        {% translate "Account" %}
-                                   class="home{% if request.resolver_match.url_name == 'index' %} cur{% endif %}"
+                    </a>
-                                   accesskey="h">
+                    <a href="{% url 'snapshot' %}"
-                                    {% translate "Home" %}
+                       class="{% if request.resolver_match.url_name == 'snapshot' %}cur{% endif %}"
-                                </a>
+                       accesskey="s">
-                            </li>
+                        {% translate "Snapshot" %}
-                            <li>
+                    </a>
-                                <a href="{% url 'account' %}"
+                    <a href="{% url 'category' %}"
-                                   class="{% if request.resolver_match.url_name == 'account' %}cur{% endif %}"
+                       class="{% if request.resolver_match.url_name == 'category' %}cur{% endif %}"
-                                   accesskey="a">
+                       accesskey="c">
-                                    {% translate "Account" %}
+                        {% translate "Category" %}
-                                </a>
+                    </a>
-                            </li>
+                    <a href="{% url 'transaction' %}"
-                            <li>
+                       class="{% if request.resolver_match.url_name == 'transaction' %}cur{% endif %}"
-                                <a href="{% url 'snapshot' %}"
+                       accesskey="t">
-                                   class="{% if request.resolver_match.url_name == 'snapshot' %}cur{% endif %}"
+                        {% translate "Transaction" %}
-                                   accesskey="s">
+                    </a>
-                                    {% translate "Snapshot" %}
+                    <a href="{% url 'search' %}"
-                                </a>
+                       class="{% if request.resolver_match.url_name == 'search' %}cur{% endif %}"
-                            </li>
+                       accesskey="r">
-                            <li>
+                        {% translate "Search" %}
-                                <a href="{% url 'category' %}"
+                    </a>
-                                   class="{% if request.resolver_match.url_name == 'category' %}cur{% endif %}"
+                    <a href="{% url 'logout' %}" class="logout" accesskey="l">{% translate "Log out" %}</a>
-                                   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 %}
-        <main id="main">
+        {% block body %}{% endblock %}
-            {% block body %}{% endblock %}
-        </main>
     </body>
 </html>

nummi/main/templates/main/form/login.html

@@ -1,9 +0,0 @@
-{% extends "main/form/base.html" %}
-{% load i18n %}
-{% block buttons %}
-    <div class="buttons">
-        <input hidden value="{{ next }}" name="next" />
-        <input type="reset" />
-        <input type="submit" value="{% translate "Se connecter" %}" />
-    </div>
-{% endblock %}

nummi/main/templates/main/login.html

@@ -3,9 +3,6 @@
 {% load i18n %}
 {% block link %}
     {{ block.super }}
-    <link rel="stylesheet"
-          href="{% static 'main/css/table.css' %}"
-          type="text/css"/>
     <link rel="stylesheet"
           href="{% static 'main/css/form.css' %}"
           type="text/css"/>
@@ -14,6 +11,20 @@
     <h1>{% translate "Log In" %}</h1>
     <form action="{% url 'login' %}" method="post">
         {% csrf_token %}
-        {% include "main/form/login.html" %}
+        {% if form.non_field_errors %}
+            <ul class='errorlist'>
+                {% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
+            </ul>
+        {% endif %}
+        {% for field in form %}
+            {{ field.errors }}
+            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
+            <div>{{ field }}</div>
+        {% endfor %}
+        <div class="buttons">
+            <input hidden value="{{ next }}" name="next" />
+            <input type="reset" />
+            <input type="submit" value="{% translate "Log In" %}" />
+        </div>
     </form>
 {% endblock %}