Add separate classes for template elements

Fixes #23.

README.md

@@ -22,10 +22,8 @@ $> npm ci
 
 ### Building
 ```shell script
-# Build the template in `dist/` for development
-$> npm run dev
-# Run the `dev` task and automatically rerun it whenever files are changed
-$> npm run dev:server
 # Build the template in `dist/` for deployment
 $> npm run deploy
+# Run the `deploy` task and automatically rerun it whenever files are changed
+$> npm run deploy:server
 ```

package.json

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

src/main/css/main.css

@@ -3,5 +3,4 @@
 @import "snippets/colors.css";
 @import "snippets/common.css";
 @import "snippets/nav.css";
-@import "snippets/toc.css";
 @import "snippets/overrides.css";

src/main/css/snippets/common.css

@@ -25,16 +25,26 @@ main {
 
 
 /* Noscript */
-noscript img {
+noscript.fwd-jsNotice img {
     position: absolute;
 }
 
-noscript p {
+noscript.fwd-jsNotice p {
     font-weight: bold;
     text-align: center;
 }
 
 
+/* Header */
+header .container {
+    text-align: center;
+}
+
+header h1 > a {
+    color: black;
+}
+
+
 /* Generic classes */
 .hidden {
     display: none !important;
@@ -54,22 +64,16 @@ noscript p {
     border-bottom-left-radius: 0;
 }
 
-
+#fwd-toc {
-/* Header */
+    position: fixed;
-header .container {
-    text-align: center;
-}
-
-header h1 > a {
-    color: black;
 }
 
 
 /* Footer */
-footer {
+.fwd-footer {
     margin-bottom: 3rem;
 }
 
-#footerVersion {
+.fwd-footer #fwd-footer-version {
     float: right;
 }

src/main/css/snippets/nav.css

@@ -1,5 +1,5 @@
 /* Base elements */
-nav {
+.fwd-nav {
     z-index: 10;
 
     margin: 0;
@@ -12,15 +12,18 @@ nav {
     --padding: calc(2em / 3);
 }
 
-nav * {
+.fwd-nav * {
     vertical-align: middle;
 }
 
-nav a, nav a:link, nav a:visited, nav a:hover, nav a:active {
+.fwd-nav a, .fwd-nav a:link, .fwd-nav a:visited, .fwd-nav a:hover,
-    width: 100%;  /* Ensures whole li is clickable */
+.fwd-nav a:active {
+    /* Ensures whole li is clickable */
+    width: 100%;
 }
 
-nav a, nav a:link, nav a:visited, nav a:hover, nav a:active, nav #nav-hamburger-label {
+.fwd-nav a, .fwd-nav a:link, .fwd-nav a:visited, .fwd-nav a:hover,
+.fwd-nav a:active, .fwd-nav #nav-hamburger-label {
     display: inline-block;
     margin: 0;
     padding: calc(var(--padding)) calc(var(--padding));
@@ -29,7 +32,7 @@ nav a, nav a:link, nav a:visited, nav a:hover, nav a:active, nav #nav-hamburger-
     color: white;
 }
 
-nav #nav-hamburger-label {
+.fwd-nav #nav-hamburger-label {
     float: right;
     font-size: unset;
     cursor: pointer;
@@ -37,7 +40,7 @@ nav #nav-hamburger-label {
 
 
 /* Logo */
-nav .logo {
+.fwd-nav .logo {
     width: calc(1em + var(--padding));
     height: calc(1em + var(--padding));
 
@@ -45,21 +48,21 @@ nav .logo {
     filter: brightness(0) invert(1);
 }
 
-nav div.logo {
+.fwd-nav div.logo {
     display: inline-block;
     margin-right: calc(1em / 3);
 }
 
 
 /* First level nesting */
-nav ul {
+.fwd-nav ul {
     margin: 0;
     padding: 0;
 
     list-style: none;
 }
 
-nav ul li {
+.fwd-nav ul li {
     display: inline-block;
     margin: 0;
     padding: 0;
@@ -68,21 +71,21 @@ nav ul li {
     background-color: var(--fwdekker-theme-color);
 }
 
-nav ul li:hover,
+.fwd-nav ul li:hover,
-nav ul li:focus-within,
+.fwd-nav ul li:focus-within,
-nav #nav-hamburger-label:hover,
+.fwd-nav #nav-hamburger-label:hover,
-nav #nav-hamburger-label:focus-within {
+.fwd-nav #nav-hamburger-label:focus-within {
     cursor: pointer;
     background-color: var(--fwdekker-theme-color-very-dark);
 }
 
-nav li.currentPage {
+.fwd-nav li.currentPage {
     background-color: var(--fwdekker-theme-color-dark);
 }
 
 
 /* Second level nesting */
-nav ul li ul {
+.fwd-nav ul li ul {
     z-index: 11;
 
     display: none;
@@ -90,18 +93,18 @@ nav ul li ul {
     left: 0;
 }
 
-nav ul li ul li ul {
+.fwd-nav ul li ul li ul {
     left: 100%;
     top: 0;
 }
 
-nav ul li:hover > ul,
+.fwd-nav ul li:hover > ul,
-nav ul li:focus-within > ul,
+.fwd-nav ul li:focus-within > ul,
-nav ul li ul:hover {
+.fwd-nav ul li ul:hover {
     display: block;
 }
 
-nav ul li ul li {
+.fwd-nav ul li ul li {
     min-width: 7em;
     width: 100%;
     white-space: nowrap;
@@ -109,18 +112,18 @@ nav ul li ul li {
 
 
 /* Hide hamburger-related elements */
-nav input[type="checkbox"] {
+.fwd-nav input[type="checkbox"] {
     display: none;
 }
 
 @media (min-width: 600px) {
-    nav #nav-hamburger-label {
+    .fwd-nav #nav-hamburger-label {
         display: none;
     }
 }
 
 @media (max-width: 600px) {
-    nav input[type="checkbox"]:not(:checked) ~ ul li:not(:first-child) {
+    .fwd-nav input[type="checkbox"]:not(:checked) ~ ul li:not(:first-child) {
         display: none;
     }
 }

src/main/css/snippets/toc.css

@@ -1,3 +0,0 @@
-#toc {
-    position: fixed;
-}

src/main/js/template.js

@@ -82,7 +82,7 @@ const nav = function(highlightPath = "", cb = undefined) {
         });
 
     const nav = stringToHtml(
-        `<nav>` +
+        `<nav class="fwd-nav">` +
         `<input id="nav-hamburger-checkbox" type="checkbox" hidden />` +
         `<label id="nav-hamburger-label" for="nav-hamburger-checkbox">&#9776;</label>` +
         `</nav>`,
@@ -177,12 +177,12 @@ const footer = function(
     if (privacyPolicyURL === undefined) privacyPolicyURL = "https://fwdekker.com/privacy/";
 
     return stringToHtml(
-        `<footer><section class="container">` +
+        `<footer class="fwd-footer"><section class="container">` +
         footerLink("Made by ", author, authorURL, ". ") +
         footerLink("Licensed under the ", license, licenseURL, ". ") +
         footerLink("Source code and issue tracker on ", vcs, vcsURL, ". ") +
         footerLink("Consider reading the ", privacyPolicyURL && "privacy policy", privacyPolicyURL, ". ") +
-        `<div id="footerVersion">${version || ""}</div>` +
+        `<div id="fwd-footer-version">${version || ""}</div>` +
         `</section></footer>`,
         "footer");
 };
@@ -204,24 +204,13 @@ const footerLink = function(prefix, text, url, suffix) {
 
 
 /**
- * Runs the functions `nav`, `header`, and `footer` after the page has loaded using properties defined in the meta tags.
+ * Runs the functions `nav` and `footer` after the page has loaded using properties defined in the meta tags.
  *
- * The remaining functions are invoked only if the corresponding `target` meta property is set to select an existing
+ * Meta tags are read as interpreted as `<meta name="fwd:<function>:<property>" content="<value>" />` from the
- * element. The HTML element returned by the function is then added as a child to the element specified by the query
+ * document's head. Given a `function` of `nav`, `header`, or `footer`, if the `value` of `fwd:<function>:target` is the
- * selector in the `target` property. The parameters to the function invocation can be set using other meta properties.
+ * ID of an element in the page, that element is replaced by the output of `function`. The `function` is invoked with
- * The format of meta properties is `fwd:<function>:<property>`, where `property` is the same as the name of the
+ * parameters also read from meta elements, where each `property` is the same as the name of the parameter of that
- * parameter of that function, except that instead of camelcase words are separated by dashes. For example, `vcsURL`
+ * function, except that instead of camelcase words are separated by dashes. For example, `vcsURL` becomes `vcs-url`.
- * becomes `vcs-url`.
- *
- * Meta properties can be set by including `<meta name="fwd:<function>:<property>" content="<value>" />` in the HTML
- * page on which this module is included. The `<value>` is then passed without modification as a parameter to the
- * function. Leaving out the `<value>` by writing `<meta name="fwd:<function>:property" />` instead results in passing
- * `null` as the value. Not including the meta tag at all corresponds to passing `undefined` to the function. See the
- * documentation of the respective functions for more details on the parameters that they accept.
- *
- * Note that the function is invoked only if `fwd:<function>:target` is a query selector for an existing element. This
- * means that it is possible to mix how the functions are invoked; for example, one can use meta properties to pass
- * parameters to `nav`, but also invoke `header` in a separate function manually.
  */
 doAfterLoad(() => {
     const getMetaProperty = (name) => {
@@ -259,4 +248,4 @@ doAfterLoad(() => {
 
 
 // Export to namespace
-window.fwdekker = {stringToHtml, $, $a, doAfterLoad, nav, header, footer};
+window.fwdekker = {stringToHtml, $, $a, doAfterLoad, nav, footer};

src/test/index.html

@@ -24,7 +24,7 @@
     <link rel="stylesheet" href="../../dist/template.css" />
 </head>
 <body>
-<noscript>
+<noscript class="fwd-jsNotice">
     <p>
         This website does not function if JavaScript is disabled.
         Please check the <a href="https://www.enable-javascript.com/">
@@ -32,9 +32,9 @@
     </p>
 </noscript>
 <main>
-    <div id="nav"></div>
+    <nav id="nav"></nav>
     <div id="contents">
-        <div id="header"></div>
+        <header id="header"></header>
 
         <section class="container">
             <div class="row">
@@ -88,7 +88,7 @@
             </div>
         </section>
     </div>
-    <div id="footer"></div>
+    <footer id="footer"></footer>
 </main>
 
 <!--suppress HtmlUnknownTarget -->