styling for login dialog

frontend/src/main.less

@@ -340,3 +340,20 @@ main {
 		opacity: 1;
 	}
 }
+
+.login-providers {
+	max-width: 50rem;
+	margin: 1rem auto;
+
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+
+	.provider + .provider {
+		margin-top: 0.5rem;
+	}
+
+	button {
+		width: 100%;
+	}
+}

schilder2000/templates/login.html.j2

@@ -10,6 +10,8 @@
 			{{ render_field(field) }}
 		{%- endfor -%}
 
+		<div class="buttons">
 			<input type="submit" value="Anmelden" />
+		</div>
 	</form>
 {%- endblock main %}

schilder2000/templates/login_select.html.j2

@@ -5,10 +5,11 @@
 {%- endblock title %}
 
 {% block main -%}
-    Available login providers:
-    <ul>
+    <div class="login-providers">
         {% for provider in providers|sort(attribute='title') %}
-            <li><a href="{{ url_for(login_endpoint, provider=provider.name, next=next) }}">{{ provider.title }}</a></li>
+            <a class="provider" href="{{ url_for(login_endpoint, provider=provider.name, next=next) }}">
+                <button>Log In with {{ provider.title }}</button>
+            </a>
         {% endfor %}
-    </ul>
+    </div>
 {%- endblock %}