Start deprecating inline styles
This commit is contained in:
parent
45e06510da
commit
136904e783
|
@ -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",
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -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, ". ") +
|
||||
`<div style="float: right;">${version || ""}</div>` +
|
||||
`<div id="footerVersion">${version || ""}</div>` +
|
||||
`</section></footer>`,
|
||||
"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");
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -11,17 +11,18 @@
|
|||
<title>Tools | FWDekker</title>
|
||||
|
||||
<link rel="stylesheet" href="https://static.fwdekker.com/fonts/roboto/roboto.css" />
|
||||
<!--suppress HtmlUnknownTarget -->
|
||||
<link rel="stylesheet" href="../../dist/template.css" />
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<p style="color: red; font-weight: bold;">
|
||||
<p>
|
||||
This website does not function if JavaScript is disabled.
|
||||
Please check the <a href="https://www.enable-javascript.com/">
|
||||
instructions on how to enable JavaScript in your web browser</a>.
|
||||
</p>
|
||||
</noscript>
|
||||
<main style="display: none;">
|
||||
<main class="pageHidden">
|
||||
<div id="nav"></div>
|
||||
<div id="contents">
|
||||
<div id="header"></div>
|
||||
|
@ -35,6 +36,7 @@
|
|||
<div id="footer"></div>
|
||||
</main>
|
||||
|
||||
<!--suppress HtmlUnknownTarget -->
|
||||
<script src="../../dist/template.js"></script>
|
||||
<script>
|
||||
const {$, doAfterLoad, footer, header, nav, showPage} = window.fwdekker;
|
||||
|
|
Loading…
Reference in New Issue