Show app title above form during connection

4 files changed, 27 insertions, 14 deletions

diff --git a/README.md b/README.md
index c4b243b..3905ef2 100644
--- a/README.md
+++ b/README.md
@@ -9,9 +9,9 @@
 
 1. Use `nix develop` to download dependencies.
 
-2. Initialize the database with `bin/db init`.
+2. Initialize the database with `bin/db init` if required.
 
-3. Start the application with `bin/watch run`.
+3. Start the application with `bin/dev-server`.
 
 4. Connect with either:
 
diff --git a/assets/main.css b/assets/main.css
index 6eb3018..52dc3f0 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -327,7 +327,15 @@ body {
 /* Login */
 
 .g-Login {
-    margin-top: var(--size-elephant);
+    display: flex;
+    width: 100%;
+    align-items: center;
+    margin-top: 20vh;
+    flex-direction: column;
+}
+
+.g-Login__Title {
+    margin-bottom: var(--size-lion);
 }
 
 .g-Login__Button {
diff --git a/templates/base.html b/templates/base.html
index 4787ae7..c7dc9f0 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -7,15 +7,16 @@
 <link rel="stylesheet" href="{{ assets | get(key="main.css") }}">
 <link rel="icon" href="{{ assets | get(key="icon.png") }}">
 
-<header class="g-Header">
-  <div class="g-Header__Title">Budget</div>
-  {% if connected_user %}
-    <form action="/logout" method="POST">
-      {{ connected_user.name }}
-      <input class="g-Header__Logout" type="submit" value="(Déconnexion)" />
-    </form>
-  {% endif %}
-</header>
+{% if connected_user %}
+  <header class="g-Header">
+    <div class="g-Header__Title">Budget</div>
+      <form action="/logout" method="POST">
+        {{ connected_user.name }}
+        <input class="g-Header__Logout" type="submit" value="(Déconnexion)" />
+      </form>
+    </div>
+  </header>
+{% endif %}
 
 {% if connected_user %}
   <nav class="g-Nav">
diff --git a/templates/login.html b/templates/login.html
index a2673a2..48a7410 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -6,8 +6,12 @@
 
 {% block main %}
 
-  <section class="g-Section">
-    <form class="g-Login g-Form" action="/login" method="POST">
+  <section class="g-Login">
+    <header>
+      <h1 class="g-Login__Title g-Header__Title">Budget</h1>
+    </header>
+
+    <form class="g-Form" action="/login" method="POST">
 
       {% if error %}
         <div class="g-Form__Error">{{ error }}</div>