diff --git a/package-lock.json b/package-lock.json
index a7a6e21..5c6e49b 100644
Binary files a/package-lock.json and b/package-lock.json differ
diff --git a/package.json b/package.json
index 1529fac..7071ee7 100644
--- a/package.json
+++ b/package.json
@@ -23,8 +23,7 @@
"deploy:server": "grunt deploy:server"
},
"dependencies": {
- "milligram": "^1.4.1",
- "normalize.css": "^8.0.1"
+ "@picocss/pico": "^1.5.6"
},
"devDependencies": {
"grunt": "^1.5.3",
diff --git a/src/main/css/main.css b/src/main/css/main.css
index 0926e4a..a6719b3 100644
--- a/src/main/css/main.css
+++ b/src/main/css/main.css
@@ -1,5 +1,4 @@
-@import "../../../node_modules/normalize.css/normalize.css";
-@import "../../../node_modules/milligram/dist/milligram.css";
+@import "../../../node_modules/@picocss/pico/css/pico.css";
@import "snippets/colors.css";
@import "snippets/common.css";
@import "snippets/nav.css";
diff --git a/src/main/css/snippets/colors.css b/src/main/css/snippets/colors.css
index a005be7..9da50d3 100644
--- a/src/main/css/snippets/colors.css
+++ b/src/main/css/snippets/colors.css
@@ -1,7 +1,31 @@
+/* Custom main colors */
:root {
- --fwdekker-theme-color: #0033cc;
- --fwdekker-theme-color-dark: #0029a3;
- --fwdekker-theme-color-very-dark: #001f7a;
- --fwdekker-theme-color-light: #003df5;
- --fwdekker-theme-color-very-light: #1f57ff;
+ --fwdekker-theme-color-triplet: 0, 51, 204;
+ --fwdekker-theme-color: rgb(var(--fwdekker-theme-color-triplet));
+
+ --fwdekker-theme-color-dark-triplet: 0, 41, 163;
+ --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;
}
diff --git a/src/main/css/snippets/common.css b/src/main/css/snippets/common.css
index b6eefe6..a268c9a 100644
--- a/src/main/css/snippets/common.css
+++ b/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;
- height: 1rem;
- margin-left: 0.5rem;
+ width: 0.7em;
+ height: 0.7em;
+ 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 {
- text-align: center;
-}
-
-header h1 > a {
+header.fwd-header h1 > a {
color: black;
}
@@ -90,10 +60,6 @@ header h1 > a {
/* Footer */
-.fwd-footer {
- margin-bottom: 3rem;
-}
-
-.fwd-footer #fwd-footer-version {
+footer.fwd-footer #fwd-footer-version {
float: right;
}
diff --git a/src/main/css/snippets/nav.css b/src/main/css/snippets/nav.css
index e6bbbb9..21f49e4 100644
--- a/src/main/css/snippets/nav.css
+++ b/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,
-.fwd-nav a:active {
+nav.fwd-nav a,
+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,
-.fwd-nav a:active, .fwd-nav #nav-hamburger-label {
+nav.fwd-nav a,
+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,
-.fwd-nav ul li:focus-within,
-.fwd-nav #nav-hamburger-label:hover,
-.fwd-nav #nav-hamburger-label:focus-within {
+nav.fwd-nav ul li:hover,
+nav.fwd-nav ul li:focus-within,
+nav.fwd-nav #nav-hamburger-label:hover,
+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,
-.fwd-nav ul li:focus-within > ul,
-.fwd-nav ul li ul:hover {
+nav.fwd-nav ul li:hover > ul,
+nav.fwd-nav ul li:focus-within > ul,
+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;
}
}
diff --git a/src/main/css/snippets/overrides.css b/src/main/css/snippets/overrides.css
index 6e423a3..72d25ee 100644
--- a/src/main/css/snippets/overrides.css
+++ b/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);
-}
diff --git a/src/main/js/template.js b/src/main/js/template.js
index 1c4448e..5f2d9a6 100644
--- a/src/main/js/template.js
+++ b/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 "" +
- `
${formattedName}`;
+ `` +
+ `${entry.name}` +
+ ``;
const depth = path.split("/").length - 2; // -1 because count parts, then another -1 because of leading `/`
const arrow = depth === 0 ? "▾" : "▸";
return "" +
`` +
- `${formattedName} ${arrow}` +
+ `${entry.name} ${arrow}` +
`${entry.entries.map(it => unpackEntry(it, `${path + entry.name}/`, highlightPath)).join("")}
` +
``;
};
@@ -133,10 +134,10 @@ const header = function({title, description}) {
return stringToHtml(``, "header");
return stringToHtml(
- ``,
+ (description !== undefined ? `${description}
` : "") +
+ ``,
"header"
);
};
@@ -177,13 +178,13 @@ const footer = function(
if (privacyPolicyURL === undefined) privacyPolicyURL = "https://fwdekker.com/privacy/";
return stringToHtml(
- ``,
+ ``,
"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({
- title: getMetaProperty("fwd:header:title"),
- description: getMetaProperty("fwd:header:description"),
- }));
+ headerTarget.parentElement.replaceChild(
+ header({
+ title: getMetaProperty("fwd:header:title"),
+ description: getMetaProperty("fwd:header:description"),
+ }),
+ headerTarget
+ );
}
const footerTarget = $(getMetaProperty("fwd:footer:target"));
if (footerTarget !== null) {
- footerTarget.appendChild(footer({
- author: getMetaProperty("fwd:footer:author"),
- authorURL: getMetaProperty("fwd:footer:author-url"),
- license: getMetaProperty("fwd:footer:license"),
- licenseURL: getMetaProperty("fwd:footer:license-url"),
- vcs: getMetaProperty("fwd:footer:vcs"),
- vcsURL: getMetaProperty("fwd:footer:vcs-url"),
- version: getMetaProperty("fwd:footer:version"),
- privacyPolicyURL: getMetaProperty("fwd:footer:privacy-policy-url"),
- }));
+ footerTarget.parentElement.replaceChild(
+ footer({
+ author: getMetaProperty("fwd:footer:author"),
+ authorURL: getMetaProperty("fwd:footer:author-url"),
+ license: getMetaProperty("fwd:footer:license"),
+ licenseURL: getMetaProperty("fwd:footer:license-url"),
+ vcs: getMetaProperty("fwd:footer:vcs"),
+ vcsURL: getMetaProperty("fwd:footer:vcs-url"),
+ version: getMetaProperty("fwd:footer:version"),
+ privacyPolicyURL: getMetaProperty("fwd:footer:privacy-policy-url"),
+ }),
+ footerTarget
+ );
}
});
diff --git a/src/test/index.html b/src/test/index.html
index ea2603f..ce4126b 100644
--- a/src/test/index.html
+++ b/src/test/index.html
@@ -1,5 +1,5 @@
-
+
@@ -19,11 +19,11 @@
Tools | FWDekker
-
+
+