fwdekker.com
/
template
1
0
Fork 0
Code Issues 2 Pull Requests Releases 90 Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

35
src/main/css/snippets/common.css
View File

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

10
src/main/js/main.js
View File

@ -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");
}

6
src/test/index.html
View File

@ -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;