From 057e0ecf742cccfa059b91a2d501866a62fea815 Mon Sep 17 00:00:00 2001
From: "Edgar P. Burkhart" <git@edgarpierre.fr>
Date: Tue, 18 Apr 2023 13:46:07 +0200
Subject: [PATCH] Update design

---
 nummi/main/static/main/css/index.css | 14 ----
 nummi/main/static/main/css/main.css  | 48 +++++++++++---
 nummi/main/static/main/css/nav.css   | 66 -------------------
 nummi/main/templates/main/base.html  | 95 ++++++++++++++++++----------
 4 files changed, 100 insertions(+), 123 deletions(-)
 delete mode 100644 nummi/main/static/main/css/nav.css

diff --git a/nummi/main/static/main/css/index.css b/nummi/main/static/main/css/index.css
index ae42038..1694153 100644
--- a/nummi/main/static/main/css/index.css
+++ b/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;
 }
diff --git a/nummi/main/static/main/css/main.css b/nummi/main/static/main/css/main.css
index 9c85c75..54eec0d 100644
--- a/nummi/main/static/main/css/main.css
+++ b/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;
 }
diff --git a/nummi/main/static/main/css/nav.css b/nummi/main/static/main/css/nav.css
deleted file mode 100644
index f488b03..0000000
--- a/nummi/main/static/main/css/nav.css
+++ /dev/null
@@ -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;
-}
diff --git a/nummi/main/templates/main/base.html b/nummi/main/templates/main/base.html
index 31c3a5d..3f2c56a 100644
--- a/nummi/main/templates/main/base.html
+++ b/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>