Start deprecating inline styles

This commit is contained in:
Florine W. Dekker 2021-04-24 16:22:39 +02:00
parent 45e06510da
commit 136904e783
Signed by: FWDekker
GPG Key ID: B1B567AF58D6EE0F
4 changed files with 44 additions and 9 deletions

View File

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

View File

@ -14,14 +14,41 @@ body {
margin-bottom: 5rem; 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 { footer {
margin-bottom: 3rem; margin-bottom: 3rem;
} }
#footerVersion {
/* Override Milligram */ float: right;
header .container {
text-align: center;
} }

View File

@ -168,7 +168,7 @@ const footer = function(
footerLink("Licensed under the ", license, licenseURL, ". ") + footerLink("Licensed under the ", license, licenseURL, ". ") +
footerLink("Source code available on ", vcs, vcsURL, ". ") + footerLink("Source code available on ", vcs, vcsURL, ". ") +
footerLink("Consider reading the ", privacyPolicyURL && "privacy policy", privacyPolicyURL, ". ") + footerLink("Consider reading the ", privacyPolicyURL && "privacy policy", privacyPolicyURL, ". ") +
`<div style="float: right;">${version || ""}</div>` + `<div id="footerVersion">${version || ""}</div>` +
`</section></footer>`, `</section></footer>`,
"footer"); "footer");
}; };
@ -195,11 +195,17 @@ const footerLink = function(prefix, text, url, suffix) {
const showPage = function() { const showPage = function() {
// Flex-based footer positioning, taken from https://stackoverflow.com/a/12253099 // Flex-based footer positioning, taken from https://stackoverflow.com/a/12253099
const main = $("main"); const main = $("main");
// TODO: Remove .style commands once all pages are migrated
main.style.display = "flex"; main.style.display = "flex";
main.style.flexDirection = "column"; main.style.flexDirection = "column";
main.style.minHeight = "100%"; 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");
} }

View File

@ -11,17 +11,18 @@
<title>Tools | FWDekker</title> <title>Tools | FWDekker</title>
<link rel="stylesheet" href="https://static.fwdekker.com/fonts/roboto/roboto.css" /> <link rel="stylesheet" href="https://static.fwdekker.com/fonts/roboto/roboto.css" />
<!--suppress HtmlUnknownTarget -->
<link rel="stylesheet" href="../../dist/template.css" /> <link rel="stylesheet" href="../../dist/template.css" />
</head> </head>
<body> <body>
<noscript> <noscript>
<p style="color: red; font-weight: bold;"> <p>
This website does not function if JavaScript is disabled. This website does not function if JavaScript is disabled.
Please check the <a href="https://www.enable-javascript.com/"> Please check the <a href="https://www.enable-javascript.com/">
instructions on how to enable JavaScript in your web browser</a>. instructions on how to enable JavaScript in your web browser</a>.
</p> </p>
</noscript> </noscript>
<main style="display: none;"> <main class="pageHidden">
<div id="nav"></div> <div id="nav"></div>
<div id="contents"> <div id="contents">
<div id="header"></div> <div id="header"></div>
@ -35,6 +36,7 @@
<div id="footer"></div> <div id="footer"></div>
</main> </main>
<!--suppress HtmlUnknownTarget -->
<script src="../../dist/template.js"></script> <script src="../../dist/template.js"></script>
<script> <script>
const {$, doAfterLoad, footer, header, nav, showPage} = window.fwdekker; const {$, doAfterLoad, footer, header, nav, showPage} = window.fwdekker;