diff --git a/package-lock.json b/package-lock.json index 0021d44..af17787 100644 Binary files a/package-lock.json and b/package-lock.json differ diff --git a/package.json b/package.json index 194fedf..0f5ef6d 100644 --- a/package.json +++ b/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", - "webpack": "^4.44.1", - "webpack-cli": "^3.3.12" + "style-loader": "^2.0.0", + "webpack": "^5.27.1", + "webpack-cli": "^4.5.0" } } diff --git a/src/main/css/common.css b/src/main/css/common.css index f3215d3..776e3c0 100644 --- a/src/main/css/common.css +++ b/src/main/css/common.css @@ -9,27 +9,19 @@ /* Base elements */ -html { +html, body { height: 100%; -} - -body { - position: relative; /* Required for footer positioning */ - min-height: 100%; + margin: 0; + padding: 0; } #contents { - padding-top: 5rem; - padding-bottom: 9rem; /* Vertical footer paddings + 1 */ + margin-top: 5rem; + margin-bottom: 5rem; } .footer { - position: absolute; - bottom: 0; - - padding-top: 5rem; - padding-bottom: 3rem; - width: 100%; + margin-bottom: 3rem; } diff --git a/src/main/js/Template.js b/src/main/js/Template.js index 5fc9662..114415e 100644 --- a/src/main/js/Template.js +++ b/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"; +}