Experimentally sort-of migrate to pico.css

First step towards fixing #21.

package.json

@@ -23,8 +23,7 @@
         "deploy:server": "grunt deploy:server"
     },
     "dependencies": {
-        "milligram": "^1.4.1",
+        "@picocss/pico": "^1.5.6"
-        "normalize.css": "^8.0.1"
     },
     "devDependencies": {
         "grunt": "^1.5.3",

src/main/css/main.css

@@ -1,5 +1,4 @@
-@import "../../../node_modules/normalize.css/normalize.css";
+@import "../../../node_modules/@picocss/pico/css/pico.css";
-@import "../../../node_modules/milligram/dist/milligram.css";
 @import "snippets/colors.css";
 @import "snippets/common.css";
 @import "snippets/nav.css";

src/main/css/snippets/colors.css

@@ -1,7 +1,31 @@
+/* Custom main colors */
 :root {
-    --fwdekker-theme-color: #0033cc;
+    --fwdekker-theme-color-triplet: 0, 51, 204;
-    --fwdekker-theme-color-dark: #0029a3;
+    --fwdekker-theme-color: rgb(var(--fwdekker-theme-color-triplet));
-    --fwdekker-theme-color-very-dark: #001f7a;
+
-    --fwdekker-theme-color-light: #003df5;
+    --fwdekker-theme-color-dark-triplet: 0, 41, 163;
-    --fwdekker-theme-color-very-light: #1f57ff;
+    --fwdekker-theme-color-dark: rgb(var(--fwdekker-theme-color-dark-triplet));
+
+    --fwdekker-theme-color-very-dark-triplet: 0, 31, 122;
+    --fwdekker-theme-color-very-dark: rgb(var(--fwdekker-theme-color-very-dark-triplet));
+
+    --fwdekker-theme-color-light-triplet: 0, 61, 245;
+    --fwdekker-theme-color-light: rgb(var(--fwdekker-theme-color-light-triplet));
+
+    --fwdekker-theme-color-very-light-triplet: 31, 87, 255;
+    --fwdekker-theme-color-very-light: rgb(var(--fwdekker-theme-color-very-light-triplet));
+}
+
+
+/* pico.css overrides, based on https://picocss.com/docs/customization.html */
+:root {
+    --primary: var(--fwdekker-theme-color) !important;
+    --primary-hover: var(--fwdekker-theme-color-light) !important;
+    --primary-focus: rgba(var(--fwdekker-theme-color-dark-triplet), 0.125) !important;
+    --primary-inverse: white !important;
+
+    --form-element-active-border-color: var(--primary) !important;
+    --form-element-focus-color: var(--primary-focus) !important;
+    --switch-color: var(--primary-inverse) !important;
+    --switch-checked-background-color: var(--primary) !important;
 }

src/main/css/snippets/common.css

@@ -1,36 +1,10 @@
-/* Base elements */
-html, body {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-}
-
-body {
-    color: black;
-}
-
-main {
-    /* Flex-based footer positioning, taken from https://stackoverflow.com/a/12253099 */
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-}
-
-#contents {
-    flex: 1;
-
-    margin-top: 5rem;
-    margin-bottom: 5rem;
-}
-
-
 /* External link icon */
 a.external::after {
     display: inline-block;
 
-    width: 1rem;
+    width: 0.7em;
-    height: 1rem;
+    height: 0.7em;
-    margin-left: 0.5rem;
+    margin-left: 0.25rem;
 
     /* Image from https://icons.getbootstrap.com/icons/box-arrow-up-right/. MIT License. */
     mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg fill='currentColor' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z' fill-rule='evenodd'/%3E%3Cpath d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z' fill-rule='evenodd'/%3E%3C/svg%3E%0A");
@@ -38,7 +12,7 @@ a.external::after {
     background-repeat: no-repeat no-repeat;
     background-position: center center;
     background-size: cover;
-    background-color: var(--fwdekker-theme-color);
+    background-color: var(--primary);
 
     content: "";
 }
@@ -56,11 +30,7 @@ noscript.fwd-jsNotice p {
 
 
 /* Header */
-header .container {
+header.fwd-header h1 > a {
-    text-align: center;
-}
-
-header h1 > a {
     color: black;
 }
 
@@ -90,10 +60,6 @@ header h1 > a {
 
 
 /* Footer */
-.fwd-footer {
+footer.fwd-footer #fwd-footer-version {
-    margin-bottom: 3rem;
-}
-
-.fwd-footer #fwd-footer-version {
     float: right;
 }

src/main/css/snippets/nav.css

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

src/main/css/snippets/overrides.css

@@ -4,96 +4,3 @@ select {
     -moz-appearance: menulist;
     appearance: auto;
 }
-
-
-/* Override Milligram color scheme, based on v1.4.1. */
-/* Replaces #9b4dca with `--fwdekker-theme-color`. */
-/* Simply look at latest unminimized Milligram release and Ctrl+F where #9b4dca occurs. */
-.button,
-button,
-input[type='button'],
-input[type='reset'],
-input[type='submit'] {
-    background-color: var(--fwdekker-theme-color);
-    border: 0.1rem solid var(--fwdekker-theme-color);
-}
-
-.button[disabled]:focus, .button[disabled]:hover,
-button[disabled]:focus,
-button[disabled]:hover,
-input[type='button'][disabled]:focus,
-input[type='button'][disabled]:hover,
-input[type='reset'][disabled]:focus,
-input[type='reset'][disabled]:hover,
-input[type='submit'][disabled]:focus,
-input[type='submit'][disabled]:hover {
-    background-color: var(--fwdekker-theme-color);
-    border-color: var(--fwdekker-theme-color);
-}
-
-.button.button-outline,
-button.button-outline,
-input[type='button'].button-outline,
-input[type='reset'].button-outline,
-input[type='submit'].button-outline {
-    color: var(--fwdekker-theme-color);
-}
-
-.button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
-button.button-outline[disabled]:focus,
-button.button-outline[disabled]:hover,
-input[type='button'].button-outline[disabled]:focus,
-input[type='button'].button-outline[disabled]:hover,
-input[type='reset'].button-outline[disabled]:focus,
-input[type='reset'].button-outline[disabled]:hover,
-input[type='submit'].button-outline[disabled]:focus,
-input[type='submit'].button-outline[disabled]:hover {
-    color: var(--fwdekker-theme-color);
-}
-
-.button.button-clear,
-button.button-clear,
-input[type='button'].button-clear,
-input[type='reset'].button-clear,
-input[type='submit'].button-clear {
-    color: var(--fwdekker-theme-color);
-}
-
-.button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
-button.button-clear[disabled]:focus,
-button.button-clear[disabled]:hover,
-input[type='button'].button-clear[disabled]:focus,
-input[type='button'].button-clear[disabled]:hover,
-input[type='reset'].button-clear[disabled]:focus,
-input[type='reset'].button-clear[disabled]:hover,
-input[type='submit'].button-clear[disabled]:focus,
-input[type='submit'].button-clear[disabled]:hover {
-    color: var(--fwdekker-theme-color);
-}
-
-pre {
-    border-left: 0.3rem solid var(--fwdekker-theme-color);
-}
-
-input[type='color']:focus,
-input[type='date']:focus,
-input[type='datetime']:focus,
-input[type='datetime-local']:focus,
-input[type='email']:focus,
-input[type='month']:focus,
-input[type='number']:focus,
-input[type='password']:focus,
-input[type='search']:focus,
-input[type='tel']:focus,
-input[type='text']:focus,
-input[type='url']:focus,
-input[type='week']:focus,
-input:not([type]):focus,
-textarea:focus,
-select:focus {
-    border-color: var(--fwdekker-theme-color);
-}
-
-a {
-    color: var(--fwdekker-theme-color);
-}

src/main/js/template.js

@@ -104,18 +104,19 @@ const nav = function(highlightPath = "", cb = undefined) {
 const unpackEntry = function(entry, path = "/", highlightPath = "") {
     const shouldHighlight = highlightPath.startsWith(`${path + entry.name}/`);
     const isExternalLink = !(/^https:\/\/.*fwdekker.com/.test(entry.link)) && entry.link !== "#";
-    const formattedName = (isExternalLink ? "⎋ " : "") + entry.name;
 
     if (entry.entries.length === 0)
         return "" +
-            `<li ${shouldHighlight ? "class=\"currentPage\"" : ""}><a href="${entry.link}">${formattedName}</a></li>`;
+            `<li ${shouldHighlight ? "class=\"currentPage\"" : ""}>` +
+            `<a href="${entry.link}" ${isExternalLink ? "class=\"external\"" : ""}>${entry.name}</a>` +
+            `</li>`;
 
     const depth = path.split("/").length - 2;  // -1 because count parts, then another -1 because of leading `/`
     const arrow = depth === 0 ? "&#9662;" : "&#9656;";
 
     return "" +
         `<li class="${shouldHighlight ? "currentPage" : ""}">` +
-        `<a href="${entry.link}">${formattedName} ${arrow}</a>` +
+        `<a href="${entry.link}">${entry.name} ${arrow}</a>` +
         `<ul>${entry.entries.map(it => unpackEntry(it, `${path + entry.name}/`, highlightPath)).join("")}</ul>` +
         `</li>`;
 };
@@ -133,10 +134,10 @@ const header = function({title, description}) {
         return stringToHtml(`<header></header>`, "header");
 
     return stringToHtml(
-        `<header><section class="container">` +
+        `<header class="fwd-header"><hgroup>` +
         (title !== undefined ? `<h1><a href="./">${title}</a></h1>` : "") +
-        (description !== undefined ? `<p><em>${description}</em></p>` : "") +
+        (description !== undefined ? `<h2>${description}</h2>` : "") +
-        `</section></header>`,
+        `</hgroup></header>`,
         "header"
     );
 };
@@ -177,13 +178,13 @@ const footer = function(
     if (privacyPolicyURL === undefined) privacyPolicyURL = "https://fwdekker.com/privacy/";
 
     return stringToHtml(
-        `<footer class="fwd-footer"><section class="container">` +
+        `<footer class="fwd-footer container"><hr />` +
         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="fwd-footer-version">${version || ""}</div>` +
-        `</section></footer>`,
+        `</footer>`,
         "footer");
 };
 
@@ -220,29 +221,38 @@ doAfterLoad(() => {
 
     const navTarget = $(getMetaProperty("fwd:nav:target"));
     if (navTarget !== null) {
-        navTarget.appendChild(nav(getMetaProperty("fwd:nav:highlight-path")));
+        navTarget.parentElement.replaceChild(
+            nav(getMetaProperty("fwd:nav:highlight-path")),
+            navTarget
+        );
     }
 
     const headerTarget = $(getMetaProperty("fwd:header:target"));
     if (headerTarget !== null) {
-        headerTarget.appendChild(header({
+        headerTarget.parentElement.replaceChild(
-            title: getMetaProperty("fwd:header:title"),
+            header({
-            description: getMetaProperty("fwd:header:description"),
+                title: getMetaProperty("fwd:header:title"),
-        }));
+                description: getMetaProperty("fwd:header:description"),
+            }),
+            headerTarget
+        );
     }
 
     const footerTarget = $(getMetaProperty("fwd:footer:target"));
     if (footerTarget !== null) {
-        footerTarget.appendChild(footer({
+        footerTarget.parentElement.replaceChild(
-            author: getMetaProperty("fwd:footer:author"),
+            footer({
-            authorURL: getMetaProperty("fwd:footer:author-url"),
+                author: getMetaProperty("fwd:footer:author"),
-            license: getMetaProperty("fwd:footer:license"),
+                authorURL: getMetaProperty("fwd:footer:author-url"),
-            licenseURL: getMetaProperty("fwd:footer:license-url"),
+                license: getMetaProperty("fwd:footer:license"),
-            vcs: getMetaProperty("fwd:footer:vcs"),
+                licenseURL: getMetaProperty("fwd:footer:license-url"),
-            vcsURL: getMetaProperty("fwd:footer:vcs-url"),
+                vcs: getMetaProperty("fwd:footer:vcs"),
-            version: getMetaProperty("fwd:footer:version"),
+                vcsURL: getMetaProperty("fwd:footer:vcs-url"),
-            privacyPolicyURL: getMetaProperty("fwd:footer:privacy-policy-url"),
+                version: getMetaProperty("fwd:footer:version"),
-        }));
+                privacyPolicyURL: getMetaProperty("fwd:footer:privacy-policy-url"),
+            }),
+            footerTarget
+        );
     }
 });
 

src/test/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="light">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -19,11 +19,11 @@
 
     <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>
+<div id="notFooter">
 <noscript class="fwd-jsNotice">
     <p>
         This website does not function if JavaScript is disabled.
@@ -31,66 +31,18 @@
         instructions on how to enable JavaScript in your web browser</a>.
     </p>
 </noscript>
-<main>
+<section><nav id="nav"></nav></section>
-    <nav id="nav"></nav>
+<main class="container">
-    <div id="contents">
+    <section>
         <header id="header"></header>
 
-        <section class="container">
+        <p>This <a href="./" class="external">is an external link</a> in a sentence.</p>
-            <div class="row">
+        <p>These are some more contents.</p>
-                <div class="column column-75">
+        <p>These are the page contents.</p>
-                    <p>This <a href="./" class="external">is an external link</a> in a sentence.</p>
+    </section>
-                    <p>These are the page contents.</p>
-                    <p>These are some more contents.</p>
-                    <p>These are the page contents.</p>
-                    <p>These are some more contents.</p>
-                    <p>These are the page contents.</p>
-                    <p>These are some more contents.</p>
-                    <p>These are the page contents.</p>
-                    <p>These are some more contents.</p>
-                    <p>These are the page contents.</p>
-                    <p>These are some more contents.</p>
-                    <p>These are the page contents.</p>
-                    <p>These are some more contents.</p>
-                    <p>These are the page contents.</p>
-                    <p>These are some more contents.</p>
-                    <p>These are the page contents.</p>
-                    <p>These are some more contents.</p>
-                    <p>These are the page contents.</p>
-                    <p>These are some more contents.</p>
-                    <p>These are the page contents.</p>
-                    <p>These are some more contents.</p>
-                    <p>These are the page contents.</p>
-                    <p>These are some more contents.</p>
-                    <p>These are the page contents.</p>
-                    <p>These are some more contents.</p>
-                    <p>These are the page contents.</p>
-                    <p>These are some more contents.</p>
-                    <p>These are the page contents.</p>
-                    <p>These are some more contents.</p>
-                    <p>These are the page contents.</p>
-                    <p>These are some more contents.</p>
-                    <p>These are the page contents.</p>
-                    <p>These are some more contents.</p>
-                    <p>These are the page contents.</p>
-                    <p>These are some more contents.</p>
-                    <p>These are the page contents.</p>
-                    <p>These are some more contents.</p>
-                    <p>These are the page contents.</p>
-                    <p>These are some more contents.</p>
-                    <p>These are the page contents.</p>
-                    <p>These are some more contents.</p>
-                </div>
-                <div class="column column-25">
-                    <div id="toc">
-                        <p>These are a TOC</p>
-                    </div>
-                </div>
-            </div>
-        </section>
-    </div>
-    <footer id="footer"></footer>
 </main>
+</div>
+<footer id="footer"></footer>
 
 <!--suppress HtmlUnknownTarget -->
 <script src="../../dist/template.js"></script>