Browse Source

Resolve footer overlapping contents

Fixes #4.
master
F.W. Dekker 7 months ago
parent
commit
7e01e15379
Signed by: FWDekker GPG Key ID: B1B567AF58D6EE0F
  1. 2800
      package-lock.json
  2. 10
      package.json
  3. 20
      src/main/css/common.css
  4. 14
      src/main/js/Template.js

2800
package-lock.json

File diff suppressed because it is too large

10
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"
}
}

20
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;
}

14
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";
}

Loading…
Cancel
Save