css: make footer sticky.

app/helpers/application_helper.rb

@@ -266,7 +266,7 @@ module ApplicationHelper
 
     {
       lang: "en",
-      class: "c-#{controller_param} a-#{action_param}",
+      class: "c-#{controller_param} a-#{action_param} flex flex-col",
       spellcheck: "false",
       data: {
         controller: controller_param,

app/javascript/src/styles/base/010_reset.scss

@@ -6,6 +6,10 @@ html {
   text-size-adjust: none;
 }
 
+html, body {
+  height: 100%;
+}
+
 *, ::before, ::after {
   box-sizing: border-box;
 }

app/javascript/src/styles/common/utilities.scss

@@ -95,7 +95,9 @@ $spacer: 0.25rem; /* 4px */
 
 .flex-1 { flex: 1 1 0%; }
 .flex-auto { flex: 1 1 auto; }
+.flex-initial { flex: 0 1 auto; }
 .flex-grow-1 { flex-grow: 1; }
+.flex-col { flex-direction: column; }
 .items-center { align-items: center; }
 .justify-center { justify-content: center; }
 

app/views/layouts/default.html.erb

@@ -78,7 +78,7 @@
     </nav>
   </header>
 
-  <div id="page">
+  <div id="page" class="flex-1">
     <%= render "users/verification_notice" %>
 
     <% if Danbooru.config.is_promotion? && cookies[:hide_winter_sale_notice].blank? %>

app/views/static/_footer.html.erb

@@ -1,4 +1,4 @@
-<footer id="page-footer" class="text-sm">
+<footer id="page-footer" class="text-sm flex-initial">
   <span class="page-footer-app-name"><%= Danbooru.config.app_name %></span>
   / <%= link_to "Rules", terms_of_service_path %>
   / <%= link_to "Contact", contact_path %>