From 2702e00880112900c6eb353e722c3c1f8a05df50 Mon Sep 17 00:00:00 2001 From: "Florine W. Dekker" Date: Sat, 19 Nov 2022 01:31:37 +0100 Subject: [PATCH] Experimentally sort-of migrate to pico.css First step towards fixing #21. --- package-lock.json | Bin 227469 -> 226679 bytes package.json | 3 +- src/main/css/main.css | 3 +- src/main/css/snippets/colors.css | 34 ++++++++-- src/main/css/snippets/common.css | 46 ++------------ src/main/css/snippets/nav.css | 61 ++++++++++-------- src/main/css/snippets/overrides.css | 93 ---------------------------- src/main/js/template.js | 56 ++++++++++------- src/test/index.html | 70 ++++----------------- 9 files changed, 117 insertions(+), 249 deletions(-) diff --git a/package-lock.json b/package-lock.json index a7a6e217cc29dedc4bedc984f9987604655b6ff4..5c6e49bd81120219aaa2ac9fb8714dd7a83b3b23 100644 GIT binary patch delta 395 zcmeDE$ou^j?*?T?afgD;w>lF0<}%v=%*EC8Kmu>QsP_ck(uS4Xzm#3?NpSPu5TEq@0?=nl;@h69_ba4 z>tEq%XyBTiXjJI#?viMdWROvsXc3wkS!!VD6jI`t>2Ge}ZSEXc>XDWfY7!aY?l}GZ zUnYsk57_x8`%3UN_ls=r7hzP;*sf;B_?BzCy%(dws=?;i?Rj4q9sX?>`NDLCV;U1P c+w}X(8M&tWdof;}Y@i|v64}oFpQ)`90E=OUmjD0& delta 752 zcmezVinsS8?*?T?{@l!*oXqs1#9SpS1*JH{=?70SN(krW7v(1AWLBl>B^MWiB`hXi z3{lz~!N?@sTr0Z0R+LdsgAJl_`ot(Eg~>%nt;FF*>Fesl*}8_)4_s%`2@P^i&(KfG z_sB?&2=@<7^Y#kQH4gF$$`4IVbWJbK&n$3BH^}ueHgq>AaZ4*pE(rGx&G9#k$|)=? zGBolw$##rLbIHlcNz6uv=ih-_1;pl3ib=|w=^y>j0`Oe%?L0uN-A;p z&o@raNG@}6D|AcDG71T*ObRe?@vX@A@OKW0EH5z5Gd4*}%`r(dHuMjQs5Hqnj3_j4 zuPiJ`GR-wMF7!;dwN;wj$f~q`h6kg;s_pkaGur0F4 h8luw$|1wEW*LP#)n!dt=@#3$|0s#332MGWG 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( - `
    ` + + `
    ` + (title !== undefined ? `

    ${title}

    ` : "") + - (description !== undefined ? `

    ${description}

    ` : "") + - `
    `, + (description !== undefined ? `

    ${description}

    ` : "") + + ``, "header" ); }; @@ -177,13 +178,13 @@ const footer = function( if (privacyPolicyURL === undefined) privacyPolicyURL = "https://fwdekker.com/privacy/"; return stringToHtml( - `
    ` + + `
    ` + 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, ". ") + `` + - `
    `, + ``, "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 - +
    -
    - -
    +
    +
    +
    -
    -
    -
    -

    This is an external link in a sentence.

    -

    These are the page contents.

    -

    These are some more contents.

    -

    These are the page contents.

    -

    These are some more contents.

    -

    These are the page contents.

    -

    These are some more contents.

    -

    These are the page contents.

    -

    These are some more contents.

    -

    These are the page contents.

    -

    These are some more contents.

    -

    These are the page contents.

    -

    These are some more contents.

    -

    These are the page contents.

    -

    These are some more contents.

    -

    These are the page contents.

    -

    These are some more contents.

    -

    These are the page contents.

    -

    These are some more contents.

    -

    These are the page contents.

    -

    These are some more contents.

    -

    These are the page contents.

    -

    These are some more contents.

    -

    These are the page contents.

    -

    These are some more contents.

    -

    These are the page contents.

    -

    These are some more contents.

    -

    These are the page contents.

    -

    These are some more contents.

    -

    These are the page contents.

    -

    These are some more contents.

    -

    These are the page contents.

    -

    These are some more contents.

    -

    These are the page contents.

    -

    These are some more contents.

    -

    These are the page contents.

    -

    These are some more contents.

    -

    These are the page contents.

    -

    These are some more contents.

    -

    These are the page contents.

    -

    These are some more contents.

    -
    -
    -
    -

    These are a TOC

    -
    -
    -
    -
    -
    -
    +

    This is an external link in a sentence.

    +

    These are some more contents.

    +

    These are the page contents.

    +
    +
    +