Move footer to the bottom if content is not larger than viewport

snikket_web/scss/app.scss

@@ -26,10 +26,20 @@ body {
 	margin: 0;
 	padding: 0;
 	background-color: $gray-900;
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
 }
 
-body > main {
+main {
 	padding: $w-l1;
+	margin-left: auto;
+	max-width: 60rem;
+	margin-right: auto;
+}
+
+#mwrap {
+	flex: 1;
 }
 
 /* top bar */
@@ -85,14 +95,6 @@ div#topbar {
 	}
 }
 
-/* main content */
-
-main {
-	max-width: 60rem;
-	margin-left: auto;
-	margin-right: auto;
-}
-
 /* standard elevations */
 
 .el-1, .box.el-1, div.form.el-1 {

snikket_web/templates/app.html

@@ -15,7 +15,7 @@
 	{% block topbar_right %}{% endblock %}
 	<nav class="usermenu">{{ user_info.display_name }}{% call avatar(user_info.address, user_info.avatar_hash ) %}{% endcall %}</nav>
 </div>
-<main>{% block content %}{% endblock %}</main>
+<div id="mwrap"><main>{% block content %}{% endblock %}</main></div>
 <footer>
 	<ul><li>{% trans about_url=url_for('main.about') %}A <a href="{{ about_url }}">Snikket</a> server{% endtrans %}</li></ul>
 </footer>

snikket_web/templates/login.html

@@ -9,7 +9,7 @@
 {{ super() }}
 {% endblock %}
 {% block body %}
-<main><div class="form layout-expanded">
+<div id="mwrap"><main><div class="form layout-expanded">
 	<h1 class="form-title">{{ config["SNIKKET_DOMAIN"] }}</h1>
 	<p class="form-desc">{{ _("Enter your Snikket address and password to manage your account.") }}</p>
 	<form method="POST" action="{{ url_for('.login') }}" name="login">
@@ -31,7 +31,7 @@
 			<button type="submit" class="primary">{{ _("Log in") }}</button>
 		</div>
 	</from>
-</div></main>
+</div></main></div>
 <footer>
 	<ul><li>{% trans about_url=url_for('.about') %}A <a href="{{ about_url }}">Snikket</a> server{% endtrans %}</li></ul>
 </footer>