Improve category style

.prettierrc.toml

@@ -0,0 +1 @@
+end_of_line = "auto"

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

@@ -67,22 +67,6 @@ a {
   &:is(:hover, :focus) {
     text-decoration: underline;
   }
-
-  &.big-link {
-    margin-right: 1em;
-    padding: 0 0.5em;
-
-    color: white;
-    background: var(--green);
-    border-radius: var(--radius);
-    height: 1.5rem;
-    line-height: 1.5rem;
-
-    &.add {
-      color: var(--text-link);
-      background: var(--bg-01);
-    }
-  }
 }
 
 .red {
@@ -500,3 +484,14 @@ ul.statements {
     padding: var(--gap);
   }
 }
+
+.category {
+  padding: 0 var(--gap);
+  border: var(--gray) 1px solid;
+  margin-right: var(--gap);
+  margin-bottom: var(--gap);
+
+  &.add {
+    border-style: dashed;
+  }
+}

nummi/main/templates/main/index.html

@@ -7,7 +7,7 @@
   {% css "main/css/table.css" %}
   {% css "main/css/plot.css" %}
   {% js "main/js/index.js" %}
-{% endblock %}
+{% endblock link %}
 {% block body %}
   <div class="split">
     <section class="accounts">
@@ -50,9 +50,9 @@
     {% spaceless %}
       <p>
         {% for cat in categories %}
-          <a class="big-link" href="{{ cat.get_absolute_url }}">{{ cat.icon|remix }}{{ cat }}</a>
+          <a class="category" href="{{ cat.get_absolute_url }}">{{ cat.icon|remix }}{{ cat }}</a>
         {% endfor %}
-        <a class="big-link add" href="{% url "new_category" %}">{{ "add"|remix }}{% translate "Create category" %}</a>
+        <a class="category add" href="{% url "new_category" %}">{{ "add"|remix }}{% translate "Create category" %}</a>
       </p>
     {% endspaceless %}
   </section>
@@ -62,4 +62,4 @@
       {% include "history/plot.html" %}
     </section>
   {% endif %}
-{% endblock %}
+{% endblock body %}