From a5f43c643684afb9a6199031adb83df77b83beea Mon Sep 17 00:00:00 2001 From: "Florine W. Dekker" Date: Fri, 18 Nov 2022 23:43:41 +0100 Subject: [PATCH 1/6] Add separate classes for template elements Fixes #23. --- README.md | 6 ++-- package-lock.json | Bin 227469 -> 227469 bytes package.json | 2 +- src/main/css/main.css | 1 - src/main/css/snippets/common.css | 28 +++++++++-------- src/main/css/snippets/nav.css | 51 ++++++++++++++++--------------- src/main/css/snippets/toc.css | 3 -- src/main/js/template.js | 31 ++++++------------- src/test/index.html | 8 ++--- 9 files changed, 60 insertions(+), 70 deletions(-) delete mode 100644 src/main/css/snippets/toc.css diff --git a/README.md b/README.md index e0f5ad3..13b3dda 100644 --- a/README.md +++ b/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 ``` diff --git a/package-lock.json b/package-lock.json index 577cc16dc7e18ed44cf41980f4438fccbc598b92..a7a6e217cc29dedc4bedc984f9987604655b6ff4 100644 GIT binary patch delta 32 ncmeDE$lLpocY?{}56wIi9r}QjXyfD7$BeCynYKP=UR4eN4oMJN delta 34 qcmeDE$lLpocY+DCk)Fjw^XZI6lM6jX8XvblW^8@TwDmFbs&WAD$_`ur diff --git a/package.json b/package.json index da2d3b7..1529fac 100644 --- a/package.json +++ b/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", diff --git a/src/main/css/main.css b/src/main/css/main.css index 6c42610..0926e4a 100644 --- a/src/main/css/main.css +++ b/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"; diff --git a/src/main/css/snippets/common.css b/src/main/css/snippets/common.css index 777c2dd..bfe2331 100644 --- a/src/main/css/snippets/common.css +++ b/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; } - -/* Header */ -header .container { - text-align: center; -} - -header h1 > a { - color: black; +#fwd-toc { + position: fixed; } /* Footer */ -footer { +.fwd-footer { margin-bottom: 3rem; } -#footerVersion { +.fwd-footer #fwd-footer-version { float: right; } diff --git a/src/main/css/snippets/nav.css b/src/main/css/snippets/nav.css index 8224a8e..e6bbbb9 100644 --- a/src/main/css/snippets/nav.css +++ b/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 { - width: 100%; /* Ensures whole li is clickable */ +.fwd-nav a, .fwd-nav a:link, .fwd-nav a:visited, .fwd-nav a:hover, +.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, -nav ul li:focus-within, -nav #nav-hamburger-label:hover, -nav #nav-hamburger-label:focus-within { +.fwd-nav ul li:hover, +.fwd-nav ul li:focus-within, +.fwd-nav #nav-hamburger-label:hover, +.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, -nav ul li:focus-within > ul, -nav ul li ul:hover { +.fwd-nav ul li:hover > ul, +.fwd-nav ul li:focus-within > ul, +.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; } } diff --git a/src/main/css/snippets/toc.css b/src/main/css/snippets/toc.css deleted file mode 100644 index afa2214..0000000 --- a/src/main/css/snippets/toc.css +++ /dev/null @@ -1,3 +0,0 @@ -#toc { - position: fixed; -} diff --git a/src/main/js/template.js b/src/main/js/template.js index 26afe16..1c4448e 100644 --- a/src/main/js/template.js +++ b/src/main/js/template.js @@ -82,7 +82,7 @@ const nav = function(highlightPath = "", cb = undefined) { }); const nav = stringToHtml( - `