Remove unnecessary element classes
This commit is contained in:
parent
68b5d33f54
commit
b7c21ad319
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@fwdekker/template",
|
"name": "@fwdekker/template",
|
||||||
"version": "1.0.2",
|
"version": "1.0.3",
|
||||||
"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",
|
||||||
|
|
|
@ -24,12 +24,12 @@ body {
|
||||||
margin-bottom: 5rem;
|
margin-bottom: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
footer {
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Custom styling */
|
/* Override Milligram */
|
||||||
header .container {
|
header .container {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
.nav {
|
nav {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
@ -8,12 +8,12 @@
|
||||||
--padding: calc(2em / 3);
|
--padding: calc(2em / 3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav * {
|
nav * {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav a {
|
nav a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: calc(var(--padding)) calc(var(--padding));
|
padding: calc(var(--padding)) calc(var(--padding));
|
||||||
|
@ -23,27 +23,27 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.nav .logo {
|
nav .logo {
|
||||||
width: calc(1em + var(--padding));
|
width: calc(1em + var(--padding));
|
||||||
height: calc(1em + var(--padding));
|
height: calc(1em + var(--padding));
|
||||||
|
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
filter: brightness(0) invert(1);
|
filter: brightness(0) invert(1);
|
||||||
}
|
}
|
||||||
.nav div.logo {
|
nav div.logo {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: calc(1em / 3);
|
margin-right: calc(1em / 3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.nav ul {
|
nav ul {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav ul li {
|
nav ul li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -52,35 +52,35 @@
|
||||||
background-color: var(--fwdekker-theme-color);
|
background-color: var(--fwdekker-theme-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav ul li:hover,
|
nav ul li:hover,
|
||||||
.nav ul li:focus-within {
|
nav ul li:focus-within {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: var(--fwdekker-theme-color-very-dark);
|
background-color: var(--fwdekker-theme-color-very-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav li.currentPage {
|
nav li.currentPage {
|
||||||
background-color: var(--fwdekker-theme-color-dark);
|
background-color: var(--fwdekker-theme-color-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.nav ul li ul {
|
nav ul li ul {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav ul li ul li ul {
|
nav ul li ul li ul {
|
||||||
left: 100%;
|
left: 100%;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav ul li:hover > ul,
|
nav ul li:hover > ul,
|
||||||
.nav ul li:focus-within > ul,
|
nav ul li:focus-within > ul,
|
||||||
.nav ul li ul:hover {
|
nav ul li ul:hover {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav ul li ul li {
|
nav ul li ul li {
|
||||||
min-width: 7em;
|
min-width: 7em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
|
@ -5,8 +5,8 @@
|
||||||
* @param query the type of element to return
|
* @param query the type of element to return
|
||||||
* @returns {HTMLElement} the HTML element described by the given string
|
* @returns {HTMLElement} the HTML element described by the given string
|
||||||
*/
|
*/
|
||||||
const stringToHtml = function (string, query) {
|
const stringToHtml = function(string, query) {
|
||||||
return new DOMParser().parseFromString(string, "text/html").body.querySelector(query);
|
return (new DOMParser()).parseFromString(string, "text/html").body.querySelector(query);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -25,7 +25,7 @@ const $ = q => document.querySelector(q);
|
||||||
*
|
*
|
||||||
* @param fun {function(...*): *} the function to run
|
* @param fun {function(...*): *} the function to run
|
||||||
*/
|
*/
|
||||||
const doAfterLoad = function (fun) {
|
const doAfterLoad = function(fun) {
|
||||||
if (document.readyState === "complete") {
|
if (document.readyState === "complete") {
|
||||||
fun();
|
fun();
|
||||||
return;
|
return;
|
||||||
|
@ -49,7 +49,7 @@ const doAfterLoad = function (fun) {
|
||||||
* @param [highlightPath] {String} the path to highlight together with its parents
|
* @param [highlightPath] {String} the path to highlight together with its parents
|
||||||
* @returns {HTMLElement} a base navigation element that will eventually be filled with contents
|
* @returns {HTMLElement} a base navigation element that will eventually be filled with contents
|
||||||
*/
|
*/
|
||||||
const nav = function (highlightPath = "") {
|
const nav = function(highlightPath = "") {
|
||||||
const base = stringToHtml(
|
const base = stringToHtml(
|
||||||
`<ul><li><a href="https://fwdekker.com/">` +
|
`<ul><li><a href="https://fwdekker.com/">` +
|
||||||
`<div class="logo"><img class="logo" src="https://fwdekker.com/favicon.png" alt="FWDekker" /></div>` +
|
`<div class="logo"><img class="logo" src="https://fwdekker.com/favicon.png" alt="FWDekker" /></div>` +
|
||||||
|
@ -68,7 +68,7 @@ const nav = function (highlightPath = "") {
|
||||||
return [];
|
return [];
|
||||||
});
|
});
|
||||||
|
|
||||||
const nav = stringToHtml(`<nav class="nav"></nav>`, "nav");
|
const nav = stringToHtml(`<nav></nav>`, "nav");
|
||||||
nav.appendChild(base);
|
nav.appendChild(base);
|
||||||
return nav;
|
return nav;
|
||||||
};
|
};
|
||||||
|
@ -82,7 +82,7 @@ const nav = function (highlightPath = "") {
|
||||||
* @param [highlightPath] {String} the path to highlight together with its parents
|
* @param [highlightPath] {String} the path to highlight together with its parents
|
||||||
* @returns {string} the navigation list entry as HTML, described by its children
|
* @returns {string} the navigation list entry as HTML, described by its children
|
||||||
*/
|
*/
|
||||||
const unpackEntry = function (entry, path = "/", highlightPath = "") {
|
const unpackEntry = function(entry, path = "/", highlightPath = "") {
|
||||||
const shouldHighlight = highlightPath.startsWith(`${path + entry.name}/`);
|
const shouldHighlight = highlightPath.startsWith(`${path + entry.name}/`);
|
||||||
const isExternalLink = !entry.link.startsWith("https://fwdekker.com/") && entry.link !== "#";
|
const isExternalLink = !entry.link.startsWith("https://fwdekker.com/") && entry.link !== "#";
|
||||||
const formattedName = (isExternalLink ? "⎋ " : "") + entry.name;
|
const formattedName = (isExternalLink ? "⎋ " : "") + entry.name;
|
||||||
|
@ -108,12 +108,12 @@ const unpackEntry = function (entry, path = "/", highlightPath = "") {
|
||||||
* @param [description] {string} the description to display, possibly including HTML
|
* @param [description] {string} the description to display, possibly including HTML
|
||||||
* @returns {HTMLElement} a header element
|
* @returns {HTMLElement} a header element
|
||||||
*/
|
*/
|
||||||
const header = function ({title, description}) {
|
const header = function({title, description}) {
|
||||||
if (title === undefined && description === undefined)
|
if (title === undefined && description === undefined)
|
||||||
return stringToHtml(`<header class="header"></header>`, "header");
|
return stringToHtml(`<header></header>`, "header");
|
||||||
|
|
||||||
return stringToHtml(
|
return stringToHtml(
|
||||||
`<header class="header"><section class="container">` +
|
`<header><section class="container">` +
|
||||||
(title !== undefined ? `<h1>${title}</h1>` : "") +
|
(title !== undefined ? `<h1>${title}</h1>` : "") +
|
||||||
(description !== undefined ? `<p><em>${description}</em></p>` : "") +
|
(description !== undefined ? `<p><em>${description}</em></p>` : "") +
|
||||||
`</section></header>`,
|
`</section></header>`,
|
||||||
|
@ -138,7 +138,7 @@ const header = function ({title, description}) {
|
||||||
* @param [privacyPolicyURL] {string|null|undefined} the URL to the privacy policy
|
* @param [privacyPolicyURL] {string|null|undefined} the URL to the privacy policy
|
||||||
* @returns {HTMLElement} a footer element
|
* @returns {HTMLElement} a footer element
|
||||||
*/
|
*/
|
||||||
const footer = function (
|
const footer = function(
|
||||||
{
|
{
|
||||||
author = undefined,
|
author = undefined,
|
||||||
authorURL = undefined,
|
authorURL = undefined,
|
||||||
|
@ -157,7 +157,7 @@ const footer = function (
|
||||||
if (privacyPolicyURL === undefined) privacyPolicyURL = "https://fwdekker.com/privacy/";
|
if (privacyPolicyURL === undefined) privacyPolicyURL = "https://fwdekker.com/privacy/";
|
||||||
|
|
||||||
return stringToHtml(
|
return stringToHtml(
|
||||||
`<footer class="footer"><section class="container">` +
|
`<footer><section class="container">` +
|
||||||
footerLink("Made by ", author, authorURL, ". ") +
|
footerLink("Made by ", author, authorURL, ". ") +
|
||||||
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, ". ") +
|
||||||
|
@ -176,7 +176,7 @@ const footer = function (
|
||||||
* @param suffix {string} the text to display after the text if the text is not undefined
|
* @param suffix {string} the text to display after the text if the text is not undefined
|
||||||
* @returns {string} a footer link element
|
* @returns {string} a footer link element
|
||||||
*/
|
*/
|
||||||
const footerLink = function (prefix, text, url, suffix) {
|
const footerLink = function(prefix, text, url, suffix) {
|
||||||
if (text === null) return "";
|
if (text === null) return "";
|
||||||
|
|
||||||
return `${prefix}${url !== null ? `<a href="${url}">${text}</a>` : text}${suffix}`;
|
return `${prefix}${url !== null ? `<a href="${url}">${text}</a>` : text}${suffix}`;
|
||||||
|
@ -186,7 +186,7 @@ const footerLink = function (prefix, text, url, suffix) {
|
||||||
/**
|
/**
|
||||||
* Unhides the main element on the page and applies default display styling.
|
* Unhides the main element on the page and applies default display styling.
|
||||||
*/
|
*/
|
||||||
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");
|
||||||
main.style.display = "flex";
|
main.style.display = "flex";
|
||||||
|
|
Loading…
Reference in New Issue