Update design

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

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

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

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

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

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

nummi/main/templates/main/base.html

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

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

@@ -0,0 +1,9 @@
+{% 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,6 +3,9 @@
 {% 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"/>
@@ -11,20 +14,6 @@
     <h1>{% translate "Log In" %}</h1>
     <form action="{% url 'login' %}" method="post">
         {% csrf_token %}
-        {% 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>
+        {% include "main/form/login.html" %}
     </form>
 {% endblock %}