From 136904e783a63d2ad10d42fc521ffa786f72feb8 Mon Sep 17 00:00:00 2001 From: "Felix W. Dekker" Date: Sat, 24 Apr 2021 16:22:39 +0200 Subject: [PATCH] Start deprecating inline styles --- package.json | 2 +- src/main/css/snippets/common.css | 35 ++++++++++++++++++++++++++++---- src/main/js/main.js | 10 +++++++-- src/test/index.html | 6 ++++-- 4 files changed, 44 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 6f71493..148acbc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@fwdekker/template", - "version": "2.1.3", + "version": "2.2.0", "description": "The base template for pages on fwdekker.com.", "author": "Felix W. Dekker", "license": "MIT", diff --git a/src/main/css/snippets/common.css b/src/main/css/snippets/common.css index 9b58734..5a96446 100644 --- a/src/main/css/snippets/common.css +++ b/src/main/css/snippets/common.css @@ -14,14 +14,41 @@ body { margin-bottom: 5rem; } +noscript p { + color: red; + font-weight: bold; +} + + +/* Main element display state */ +main.pageHidden { + display: none; +} + +main.pageVisible { + display: flex; + flex-direction: column; + min-height: 100%; +} + +.pageContents.pageVisible { + flex: 1; +} + + +/* Header */ +header .container { + text-align: center; +} + + +/* Footer */ footer { margin-bottom: 3rem; } - -/* Override Milligram */ -header .container { - text-align: center; +#footerVersion { + float: right; } diff --git a/src/main/js/main.js b/src/main/js/main.js index 0d74454..706c792 100644 --- a/src/main/js/main.js +++ b/src/main/js/main.js @@ -168,7 +168,7 @@ const footer = function( footerLink("Licensed under the ", license, licenseURL, ". ") + footerLink("Source code available on ", vcs, vcsURL, ". ") + footerLink("Consider reading the ", privacyPolicyURL && "privacy policy", privacyPolicyURL, ". ") + - `
${version || ""}
` + + `
${version || ""}
` + ``, "footer"); }; @@ -195,11 +195,17 @@ const footerLink = function(prefix, text, url, suffix) { 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%"; + main.classList.remove("pageHidden"); + main.classList.add("pageVisible"); - $("#contents").style.flex = "1"; + // TODO: Remove .style commands once all pages are migrated + const contents = $("#contents"); + contents.style.flex = "1"; + contents.classList.add("pageVisible"); } diff --git a/src/test/index.html b/src/test/index.html index c587269..9e20d16 100644 --- a/src/test/index.html +++ b/src/test/index.html @@ -11,17 +11,18 @@ Tools | FWDekker + -
+
@@ -35,6 +36,7 @@
+