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

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>
+                    <h1>
+                        <img src="{% static 'main/svg/logo.svg' %}" alt="" />
+                        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">
-                        <img src="{% static 'main/svg/logo.svg' %}" alt="" />
+                                    {% translate "Home" %}
-                        <h1>Nummi</h1>
                                 </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>
-                    <a href="{% url 'logout' %}" class="logout" accesskey="l">{% translate "Log out" %}</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 %}
+        </main>
     </body>
 </html>