make footer sticky

_includes/footer.html

@@ -1,7 +1,7 @@
-<footer class="footer-area">
-  <div class="container">
-    <div class="footer-area-wrapper text-center">
-        <a href="{{ site.baseurl }}/fdroid-webdash/">{% t view_all_apps %}</a> | <a href="https://gitlab.com/likebutter/butterapp">{% t built_on_fdroid %}</a>
-    </div>
-  </div>
-</footer>
+<footer class="push-footer">
+  <p>
+      <a href="https://gitlab.com/guardianproject/wind-fdroidclient">
+          The Butter App Store is built on F-Droid free software
+      </a>
+  </p>
+</footer>

_layouts/default.html

@@ -4,6 +4,4 @@ layout: basic
 
 {% include header.html %}
 
-{{ content }}
-
-{% include footer.html %}
+{{ content }}

_layouts/informational.html

@@ -8,4 +8,6 @@ layout: basic
 
 <div class="informational-container">
     {{ content }}
-</div>
+</div>
+
+{% include footer.html %}

_scss/helpers/utilities.scss

@@ -23,6 +23,9 @@ body {
 .main-area {
   margin: 0 auto;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
 
 

_scss/pages/home.scss

@@ -142,12 +142,15 @@ a:active {
 
 .top-nav {
   max-width: 860px;
+  width: -webkit-fill-available;
   margin: 0px auto;
   display: flex;
+  flex-direction: row;
   align-items: center;
 }
 
 .informational-container {
+  flex: 1;
   width: 100%;
   max-width: 680px;
   margin: 0 auto;
@@ -213,7 +216,6 @@ a:active {
   }
 }
 
-// TODO: Make this push to the bottom when the page isn't as tall as the viewport.
 .push-footer {
   font-size: 12px;
   text-align: center;

apps.html

@@ -16,12 +16,4 @@ breadcrumb: "App Store"
 </div>
 {% include sideload.html %}
 
-<a class="btn-secondary" href="{{ site.base_url }}/fdroid-webdash/">View in Browser</a>
-
-<footer class="push-footer">
-    <p>
-        <a href="https://gitlab.com/guardianproject/wind-fdroidclient">
-            The Butter App Store is built on F-Droid free software
-        </a>
-    </p>
-</footer>
+<a class="btn-secondary" href="{{ site.base_url }}/fdroid-webdash/">View in Browser</a>