Reshape home page

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

@@ -94,9 +94,27 @@ main {
   grid-column: 2;
   grid-row: 1;
   overflow-x: hidden;
+
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  grid-gap: var(--gap);
+
   h2.new {
     opacity: 0.8;
   }
+
+  & > * {
+    grid-column: 1 / -1;
+  }
+
+  & > section {
+    &.accounts {
+      grid-column: 1;
+    }
+    &.categories {
+      grid-column: 2;
+    }
+  }
 }
 nav {
   grid-column: 1;
@@ -139,7 +157,7 @@ nav {
   }
 }
 :is(nav, main) > :first-child,
-main > section:first-child > :first-child {
+main > section > :first-child {
   margin-top: 0;
 }
 footer {
@@ -211,7 +229,7 @@ h1,
 h2,
 h3 {
   font-weight: 300;
-  margin-top: 1em;
+  margin-top: var(--gap);
   margin-bottom: 0.5em;
   line-height: 1cap;
 }

nummi/main/templates/main/index.html

@@ -8,7 +8,7 @@
     {% css "main/css/plot.css" %}
 {% endblock %}
 {% block body %}
-    <section>
+    <section class="accounts">
         <h2>{% translate "Accounts" %}</h2>
         <table>
             <thead>
@@ -41,14 +41,8 @@
             </tfoot>
         </table>
     </section>
-    {% if transactions %}
-        <section>
-            <h2>{% translate "Transactions" %}</h2>
-            {% include "transaction/transaction_table.html" %}
-        </section>
-    {% endif %}
     {% if categories %}
-        <section>
+        <section class="categories">
             <h2>{% translate "Categories" %}</h2>
             {% spaceless %}
                 <p>
@@ -61,12 +55,6 @@
             {% endspaceless %}
         </section>
     {% endif %}
-    {% if statements %}
-        <section>
-            <h2>{% translate "Statements" %}</h2>
-            {% include "statement/statement_table.html" %}
-        </section>
-    {% endif %}
     {% if history %}
         <section>
             <h2>{% translate "History" %}</h2>