Add general-purpose .hidden CSS class

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "2.2.0",
+    "version": "2.2.1",
     "description": "The base template for pages on fwdekker.com.",
     "author": "Felix W. Dekker",
     "license": "MIT",

src/main/css/snippets/common.css

@@ -19,12 +19,12 @@ noscript p {
     font-weight: bold;
 }
 
-
+.hidden {
-/* Main element display state */
-main.pageHidden {
     display: none;
 }
 
+
+/* Main element display state */
 main.pageVisible {
     display: flex;
     flex-direction: column;

src/main/js/main.js

@@ -199,7 +199,7 @@ const showPage = function() {
     main.style.display = "flex";
     main.style.flexDirection = "column";
     main.style.minHeight = "100%";
-    main.classList.remove("pageHidden");
+    main.classList.remove("hidden");
     main.classList.add("pageVisible");
 
     // TODO: Remove .style commands once all pages are migrated

src/test/index.html

@@ -22,7 +22,7 @@
         instructions on how to enable JavaScript in your web browser</a>.
     </p>
 </noscript>
-<main class="pageHidden">
+<main class="hidden">
     <div id="nav"></div>
     <div id="contents">
         <div id="header"></div>