style: Push the footer to the bottom regardless of the size of maincontent

app/static/css/container.css

@@ -1,4 +1,5 @@
 .container {
+  min-height: 88vh;
   margin-left: 110px;
 }
 @media screen and (max-width:849px) {

app/static/css/footer.css

@@ -1,5 +1,6 @@
 footer {
-  margin: 20px 0 0 0;
+  min-height: 10vh;
+  margin: 20px 0 0 110px;
   padding: 10px 10%;
   text-align: center;
   font-size: 11px;
@@ -10,4 +11,9 @@ footer {
 }
 footer p {
   margin: 3px 0;
+}
+@media screen and (max-width:849px) {
+  footer {
+    margin-left: 0;
+  }
 }

app/static/css/global.css

@@ -25,6 +25,8 @@
   transition: .15s ease;
 }
 body {
+  width: 100vw;
+  height: 100vh;
   margin: 0;
   background: var(--background);
   color: var(--text);

app/static/css/header.css

@@ -1,4 +1,5 @@
 header {
+  min-height: 5vh;
   margin: 0;
   padding: 8px 16px;
   background: var(--background);

app/static/less/container.less

@@ -1,6 +1,7 @@
 @import "vars";
 
 .container {
+    min-height: 88vh;
     margin-left: 110px;
 
     @media screen and (max-width: @tiny) {

app/static/less/footer.less

@@ -1,14 +1,24 @@
+@import "vars";
 /*
     Footer
 */
 
 footer {
-    margin: 20px 0 0 0; padding: 10px 10%;
-    text-align: center; font-size: 11px; font-style: italic;
-    background: var(--background); color: var(--text);
+    min-height: 10vh;
+    margin: 20px 0 0 110px;
+    padding: 10px 10%;
+    text-align: center;
+    font-size: 11px;
+    font-style: italic;
+    background: var(--background);
+    color: var(--text);
     border-top: var(--border);
 
     p {
-    	margin: 3px 0;
+        margin: 3px 0;
+    }
+
+    @media screen and (max-width: @tiny) {
+        margin-left: 0;
     }
 }

app/static/less/global.less

@@ -17,6 +17,8 @@
 }
 
 body {
+    width: 100vw;
+    height: 100vh;
     margin: 0;
     background: var(--background);
     color: var(--text);
@@ -156,7 +158,7 @@ button, .button, input[type="button"], input[type="submit"] {
     left: 50%;
     padding: 8px;
     position: absolute;
-    transform: translateY(-100%);
+    transform: translateY(-200%);
     transition: transform 0.3s;
     background: var(--links);
     color: var(--warn-text);

app/static/less/header.less

@@ -1,6 +1,7 @@
 @import "vars";
 
 header {
+    min-height: 5vh;
     margin: 0; padding: 8px 16px;
     background: var(--background); border-bottom: var(--border);
 

app/templates/base/base.html

@@ -17,10 +17,10 @@
 		{% block content %}
 		<div id="main-content"></div>
 		{% endblock %}
-
-		{% include "base/footer.html" %}
 	</div>
 
+	{% include "base/footer.html" %}
+
 	{% include "base/scripts.html" %}
 </body>
 </html>