Simplify code for visibility toggle

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "2.2.2",
+    "version": "2.2.3",
     "description": "The base template for pages on fwdekker.com.",
     "author": "Felix W. Dekker",
     "license": "MIT",
@@ -35,7 +35,7 @@
         "grunt-contrib-watch": "^1.1.0",
         "grunt-focus": "^1.0.0",
         "grunt-webpack": "^4.0.3",
-        "webpack": "^5.35.0",
+        "webpack": "^5.36.0",
         "webpack-cli": "^4.6.0"
     }
 }

src/main/css/snippets/common.css

@@ -9,7 +9,16 @@ body {
     color: black;
 }
 
+main {
+    /* Flex-based footer positioning, taken from https://stackoverflow.com/a/12253099 */
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+}
+
 #contents {
+    flex: 1;
+
     margin-top: 5rem;
     margin-bottom: 5rem;
 }
@@ -24,18 +33,6 @@ noscript p {
 }
 
 
-/* Main element display state */
-main.pageVisible {
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-}
-
-.pageContents.pageVisible {
-    flex: 1;
-}
-
-
 /* Header */
 header .container {
     text-align: center;

src/main/js/main.js

@@ -193,19 +193,10 @@ const footerLink = function(prefix, text, url, suffix) {
  * Unhides the main element on the page and applies default display styling.
  */
 const showPage = function() {
-    // Flex-based footer positioning, taken from https://stackoverflow.com/a/12253099
     const main = $("main");
-    // TODO: Remove .style commands once all pages are migrated
-    main.style.display = "flex";
-    main.style.flexDirection = "column";
-    main.style.minHeight = "100%";
+    // TODO: Remove .style command once all pages are migrated
+    main.style.display = null;
     main.classList.remove("hidden");
-    main.classList.add("pageVisible");
-
-    // TODO: Remove .style commands once all pages are migrated
-    const contents = $("#contents");
-    contents.style.flex = "1";
-    contents.classList.add("pageVisible");
 }