Resolve footer overlapping contents

Fixes #4.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "0.0.21",
+    "version": "0.0.22",
     "description": "The base template for pages on fwdekker.com.",
     "author": "Felix W. Dekker (https://fwdekker.com)",
     "license": "MIT",
@@ -29,15 +29,15 @@
         "normalize.css": "^8.0.1"
     },
     "devDependencies": {
-        "css-loader": "^4.3.0",
+        "css-loader": "^5.1.3",
         "grunt": "^1.3.0",
         "grunt-cli": "^1.3.2",
         "grunt-contrib-clean": "^2.0.0",
         "grunt-contrib-watch": "^1.1.0",
         "grunt-focus": "^1.0.0",
         "grunt-webpack": "^4.0.2",
-        "style-loader": "^1.2.1",
+        "style-loader": "^2.0.0",
-        "webpack": "^4.44.1",
+        "webpack": "^5.27.1",
-        "webpack-cli": "^3.3.12"
+        "webpack-cli": "^4.5.0"
     }
 }

src/main/css/common.css

@@ -9,27 +9,19 @@
 
 
 /* Base elements */
-html {
+html, body {
     height: 100%;
-}
+    margin: 0;
-
+    padding: 0;
-body {
-    position: relative; /* Required for footer positioning */
-    min-height: 100%;
 }
 
 #contents {
-    padding-top: 5rem;
+    margin-top: 5rem;
-    padding-bottom: 9rem; /* Vertical footer paddings + 1 */
+    margin-bottom: 5rem;
 }
 
 .footer {
-    position: absolute;
+    margin-bottom: 3rem;
-    bottom: 0;
-
-    padding-top: 5rem;
-    padding-bottom: 3rem;
-    width: 100%;
 }
 
 

src/main/js/Template.js

@@ -162,3 +162,17 @@ const footerLink = function (prefix, text, url, suffix) {
         h("span", suffix)
     );
 };
+
+
+/**
+ * Unhides the main element on the page and applies default display styling.
+ */
+export const showPage = function () {
+    // Flex-based footer positioning, taken from https://stackoverflow.com/a/12253099
+    const main = $("main");
+    main.style.display = "flex";
+    main.style.flexDirection = "column";
+    main.style.minHeight = "100%";
+
+    $("#contents").style.flex = "1";
+}