Start deprecating inline styles
This commit is contained in:
parent
45e06510da
commit
136904e783
|
@ -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",
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue