Remove unnecessary element classes

package.json

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

src/main/css/common.css

@@ -24,12 +24,12 @@ body {
     margin-bottom: 5rem;
 }
 
-.footer {
+footer {
     margin-bottom: 3rem;
 }
 
 
-/* Custom styling */
+/* Override Milligram */
 header .container {
     text-align: center;
 }

src/main/css/nav.css

@@ -1,4 +1,4 @@
-.nav {
+nav {
     margin: 0;
     width: 100%;
 
@@ -8,12 +8,12 @@
     --padding: calc(2em / 3);
 }
 
-.nav * {
+nav * {
     z-index: 10;
     vertical-align: middle;
 }
 
-.nav a {
+nav a {
     display: inline-block;
     margin: 0;
     padding: calc(var(--padding)) calc(var(--padding));
@@ -23,27 +23,27 @@
 }
 
 
-.nav .logo {
+nav .logo {
     width: calc(1em + var(--padding));
     height: calc(1em + var(--padding));
 
     vertical-align: middle;
     filter: brightness(0) invert(1);
 }
-.nav div.logo {
+nav div.logo {
     display: inline-block;
     margin-right: calc(1em / 3);
 }
 
 
-.nav ul {
+nav ul {
     margin: 0;
     padding: 0;
 
     list-style: none;
 }
 
-.nav ul li {
+nav ul li {
     display: inline-block;
     margin: 0;
     padding: 0;
@@ -52,35 +52,35 @@
     background-color: var(--fwdekker-theme-color);
 }
 
-.nav ul li:hover,
-.nav ul li:focus-within {
+nav ul li:hover,
+nav ul li:focus-within {
     cursor: pointer;
     background-color: var(--fwdekker-theme-color-very-dark);
 }
 
-.nav li.currentPage {
+nav li.currentPage {
     background-color: var(--fwdekker-theme-color-dark);
 }
 
 
-.nav ul li ul {
+nav ul li ul {
     display: none;
     position: absolute;
     left: 0;
 }
 
-.nav ul li ul li ul {
+nav ul li ul li ul {
     left: 100%;
     top: 0;
 }
 
-.nav ul li:hover > ul,
-.nav ul li:focus-within > ul,
-.nav ul li ul:hover {
+nav ul li:hover > ul,
+nav ul li:focus-within > ul,
+nav ul li ul:hover {
     display: block;
 }
 
-.nav ul li ul li {
+nav ul li ul li {
     min-width: 7em;
     width: 100%;
     white-space: nowrap;

src/main/js/main.js

@@ -5,8 +5,8 @@
  * @param query the type of element to return
  * @returns {HTMLElement} the HTML element described by the given string
  */
-const stringToHtml = function (string, query) {
-    return new DOMParser().parseFromString(string, "text/html").body.querySelector(query);
+const stringToHtml = function(string, 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
  */
-const doAfterLoad = function (fun) {
+const doAfterLoad = function(fun) {
     if (document.readyState === "complete") {
         fun();
         return;
@@ -49,7 +49,7 @@ const doAfterLoad = function (fun) {
  * @param [highlightPath] {String} the path to highlight together with its parents
  * @returns {HTMLElement} a base navigation element that will eventually be filled with contents
  */
-const nav = function (highlightPath = "") {
+const nav = function(highlightPath = "") {
     const base = stringToHtml(
         `<ul><li><a href="https://fwdekker.com/">` +
         `<div class="logo"><img class="logo" src="https://fwdekker.com/favicon.png" alt="FWDekker" /></div>` +
@@ -68,7 +68,7 @@ const nav = function (highlightPath = "") {
             return [];
         });
 
-    const nav = stringToHtml(`<nav class="nav"></nav>`, "nav");
+    const nav = stringToHtml(`<nav></nav>`, "nav");
     nav.appendChild(base);
     return nav;
 };
@@ -82,7 +82,7 @@ const nav = function (highlightPath = "") {
  * @param [highlightPath] {String} the path to highlight together with its parents
  * @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 isExternalLink = !entry.link.startsWith("https://fwdekker.com/") && entry.link !== "#";
     const formattedName = (isExternalLink ? "&#9099; " : "") + entry.name;
@@ -108,12 +108,12 @@ const unpackEntry = function (entry, path = "/", highlightPath = "") {
  * @param [description] {string} the description to display, possibly including HTML
  * @returns {HTMLElement} a header element
  */
-const header = function ({title, description}) {
+const header = function({title, description}) {
     if (title === undefined && description === undefined)
-        return stringToHtml(`<header class="header"></header>`, "header");
+        return stringToHtml(`<header></header>`, "header");
 
     return stringToHtml(
-        `<header class="header"><section class="container">` +
+        `<header><section class="container">` +
         (title !== undefined ? `<h1>${title}</h1>` : "") +
         (description !== undefined ? `<p><em>${description}</em></p>` : "") +
         `</section></header>`,
@@ -138,7 +138,7 @@ const header = function ({title, description}) {
  * @param [privacyPolicyURL] {string|null|undefined} the URL to the privacy policy
  * @returns {HTMLElement} a footer element
  */
-const footer = function (
+const footer = function(
     {
         author = undefined,
         authorURL = undefined,
@@ -157,7 +157,7 @@ const footer = function (
     if (privacyPolicyURL === undefined) privacyPolicyURL = "https://fwdekker.com/privacy/";
 
     return stringToHtml(
-        `<footer class="footer"><section class="container">` +
+        `<footer><section class="container">` +
         footerLink("Made by ", author, authorURL, ". ") +
         footerLink("Licensed under the ", license, licenseURL, ". ") +
         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
  * @returns {string} a footer link element
  */
-const footerLink = function (prefix, text, url, suffix) {
+const footerLink = function(prefix, text, url, suffix) {
     if (text === null) return "";
 
     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.
  */
-const showPage = function () {
+const showPage = function() {
     // Flex-based footer positioning, taken from https://stackoverflow.com/a/12253099
     const main = $("main");
     main.style.display = "flex";