Merge pull request #1976 from syeopite/fixfooter

Fix footer position to bottom of page

assets/css/default.css

@@ -5,6 +5,12 @@ body {
     Arial, sans-serif;
 }
 
+#contents {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
 .deleted {
   background-color: rgb(255, 0, 0, 0.5);
 }
@@ -280,14 +286,16 @@ input[type="search"]::-webkit-search-cancel-button {
  * Footer
  */
 
-.footer {
-  color: #666666;
-  margin: 2em 0;
+footer {
+  color: #919191;
+  margin-top: auto;
+  padding: 1.5em 0;
   text-align: center;
+  max-height: 30vh;
 }
 
-body .footer a {
-  color: inherit;
+footer a {
+  color: #919191 !important;
   text-decoration: underline;
 }
 
@@ -654,3 +662,10 @@ body.dark-theme {
   content: "[ - ]";
   font-size: 1.5em;
 }
+
+/*With commit d9528f5 all contents of the page is now within a flexbox. However,
+the hr element is rendered improperly within one.
+See https://stackoverflow.com/a/34372979 for more info */
+hr {
+  margin: auto 0 auto 0;
+}

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,7 @@
 
             <%= content %>
 
-            <div class="footer">
+            <footer>
                 <div class="pure-g">
                     <div class="pure-u-1 pure-u-md-1-3">
                         <a href="https://github.com/iv-org/invidious">
@@ -140,7 +140,7 @@
                         <%= translate(locale, "Current version: ") %> <%= CURRENT_VERSION %>-<%= CURRENT_COMMIT %> @ <%= CURRENT_BRANCH %>
                     </div>
                 </div>
-            </div>
+            </footer>
         </div>
         <div class="pure-u-1 pure-u-md-2-24"></div>
     </div>