Change positioning of footer to use flexbox

assets/css/default.css

@@ -3,8 +3,12 @@ body {
   font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen,
     Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica,
     Arial, sans-serif;
-  position: relative;
-  min-height: 100vh;
+}
+
+#contents {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
 }
 
 .deleted {
@@ -284,12 +288,9 @@ input[type="search"]::-webkit-search-cancel-button {
 
 footer {
   color: #919191;
-  margin: 1.5em 0;
+  margin-top: auto;
+  padding: 1.5em 0;
   text-align: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
   max-height: 30vh;
 }
 

src/invidious/views/template.ecr

@@ -26,7 +26,7 @@
     <span style="display:none" id="dark_mode_pref"><%= env.get("preferences").as(Preferences).dark_mode %></span>
     <div class="pure-g">
         <div class="pure-u-1 pure-u-md-2-24"></div>
-        <div class="pure-u-1 pure-u-md-20-24">
+        <div class="pure-u-1 pure-u-md-20-24", id="contents">
             <div class="pure-g navbar h-box">
                 <div class="pure-u-1 pure-u-md-4-24">
                     <a href="/" class="index-link pure-menu-heading">Invidious</a>
@@ -106,7 +106,6 @@
 
             <%= content %>
 
-            <div id="placeholder" style="padding: 6em;"></div>
             <footer>
                 <div class="pure-g">
                     <div class="pure-u-1 pure-u-md-1-3">