Compare commits
10 Commits
Author | SHA1 | Date |
---|---|---|
Florine W. Dekker | 164a76d9fd | |
Florine W. Dekker | a6faa1ebe8 | |
Florine W. Dekker | a1d3384e32 | |
Florine W. Dekker | eb12f0473a | |
Florine W. Dekker | 09cacd241f | |
Florine W. Dekker | c495714867 | |
Florine W. Dekker | 080c1f852c | |
Florine W. Dekker | 7ecd9ec165 | |
Florine W. Dekker | e5e6a0d347 | |
Florine W. Dekker | cba23b4911 |
Binary file not shown.
18
package.json
18
package.json
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@fwdekker/template",
|
"name": "@fwdekker/template",
|
||||||
"version": "3.5.3",
|
"version": "3.6.5",
|
||||||
"description": "The base template for pages on fwdekker.com.",
|
"description": "The base template for pages on fwdekker.com.",
|
||||||
"author": "Florine W. Dekker",
|
"author": "Florine W. Dekker",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
@ -24,20 +24,20 @@
|
||||||
"deploy": "grunt deploy"
|
"deploy": "grunt deploy"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@picocss/pico": "^1.5.6"
|
"@picocss/pico": "^1.5.10"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"grunt": "^1.5.3",
|
"grunt": "^1.6.1",
|
||||||
"grunt-cli": "^1.4.3",
|
"grunt-cli": "^1.4.3",
|
||||||
"grunt-contrib-clean": "^2.0.1",
|
"grunt-contrib-clean": "^2.0.1",
|
||||||
"grunt-contrib-cssmin": "^4.0.0",
|
"grunt-contrib-cssmin": "^5.0.0",
|
||||||
"grunt-contrib-watch": "^1.1.0",
|
"grunt-contrib-watch": "^1.1.0",
|
||||||
"grunt-focus": "^1.0.0",
|
"grunt-focus": "^1.0.0",
|
||||||
"grunt-webpack": "^5.0.0",
|
"grunt-webpack": "^6.0.0",
|
||||||
"ts-loader": "^9.4.2",
|
"ts-loader": "^9.5.1",
|
||||||
"ts-node": "^10.9.1",
|
"ts-node": "^10.9.1",
|
||||||
"typescript": "^4.9.4",
|
"typescript": "^5.3.2",
|
||||||
"webpack": "^5.75.0",
|
"webpack": "^5.89.0",
|
||||||
"webpack-cli": "^5.0.1"
|
"webpack-cli": "^5.1.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,5 +4,5 @@
|
||||||
@import "snippets/colors.css";
|
@import "snippets/colors.css";
|
||||||
|
|
||||||
@import "snippets/common.css";
|
@import "snippets/common.css";
|
||||||
|
@import "snippets/forms.css";
|
||||||
@import "snippets/nav.css";
|
@import "snippets/nav.css";
|
||||||
@import "snippets/validation.css";
|
|
||||||
|
|
|
@ -1,27 +1,39 @@
|
||||||
/* pico.css overrides, based on https://picocss.com/docs/customization.html */
|
/* pico.css overrides, based on https://picocss.com/docs/customization.html */
|
||||||
|
|
||||||
|
/* Light (default) */
|
||||||
.fwd-nav,
|
.fwd-nav,
|
||||||
:root:not([data-theme]),
|
[data-theme="light"],
|
||||||
:root[data-theme="light"] {
|
:root:not([data-theme="dark"]) {
|
||||||
--primary: rgb(0, 51, 204) !important;
|
--primary: rgb(0, 51, 204) !important;
|
||||||
--primary-hover: rgb(0, 61, 245) !important;
|
--primary-hover: rgb(0, 61, 245) !important;
|
||||||
--primary-focus: rgba(0, 41, 163, 0.125) !important;
|
--primary-focus: rgba(0, 41, 163, 0.125) !important;
|
||||||
--primary-focus-opaque: rgb(0, 41, 163) !important;
|
--primary-focus-opaque: rgb(0, 41, 163) !important;
|
||||||
--primary-focus-dark: rgb(0, 29, 114) !important;
|
--primary-focus-dark: rgb(0, 29, 114) !important;
|
||||||
--primary-inverse: white !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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Dark (auto) */
|
||||||
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
|
:root:not([data-theme="light"]):not(.fwd-nav) {
|
||||||
|
--primary: #1e88e5 !important;
|
||||||
|
--primary-hover: #2196f3 !important;
|
||||||
|
--primary-focus: rgba(30, 136, 229, 0.25) !important;
|
||||||
|
--primary-focus-opaque: rgb(30, 136, 229) !important;
|
||||||
|
--primary-inverse: white !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark (forced) */
|
||||||
:root[data-theme="dark"]:not(.fwd-nav) {
|
:root[data-theme="dark"]:not(.fwd-nav) {
|
||||||
--primary: #1e88e5 !important;
|
--primary: #1e88e5 !important;
|
||||||
--primary-hover: #2196f3 !important;
|
--primary-hover: #2196f3 !important;
|
||||||
--primary-focus: rgba(30, 136, 229, 0.25) !important;
|
--primary-focus: rgba(30, 136, 229, 0.25) !important;
|
||||||
--primary-focus-opaque: rgb(30, 136, 229) !important;
|
--primary-focus-opaque: rgb(30, 136, 229) !important;
|
||||||
--primary-inverse: white !important;
|
--primary-inverse: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Common */
|
||||||
|
:root {
|
||||||
--form-element-active-border-color: var(--primary) !important;
|
--form-element-active-border-color: var(--primary) !important;
|
||||||
--form-element-focus-color: var(--primary-focus) !important;
|
--form-element-focus-color: var(--primary-focus) !important;
|
||||||
--switch-color: var(--primary-inverse) !important;
|
--switch-color: var(--primary-inverse) !important;
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
/* Status card */
|
||||||
.status-card {
|
.status-card {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -52,6 +53,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Input validation */
|
||||||
label.invalid,
|
label.invalid,
|
||||||
*[data-label-for].invalid,
|
*[data-label-for].invalid,
|
||||||
input.invalid,
|
input.invalid,
|
||||||
|
@ -65,3 +67,21 @@ input.valid,
|
||||||
*[data-hint-for].valid {
|
*[data-hint-for].valid {
|
||||||
color: var(--form-element-valid-border-color) !important;
|
color: var(--form-element-valid-border-color) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Enable hint-like styling on any element */
|
||||||
|
.input-hint {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
/*noinspection CssUnresolvedCustomProperty*/
|
||||||
|
margin-top: calc(var(--spacing) * -.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Custom components */
|
||||||
|
.inline-button {
|
||||||
|
display: inline-block;
|
||||||
|
width: unset;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.3em;
|
||||||
|
}
|
|
@ -11,11 +11,15 @@
|
||||||
--muted-color: hsl(205deg, 12%, 59%) !important;
|
--muted-color: hsl(205deg, 12%, 59%) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* pico.css: Bold labels, except for checkbox/radio labels */
|
/* pico.css: Bold <label> and <th>, except for checkbox/radio labels */
|
||||||
:root {
|
:root {
|
||||||
--form-label-font-weight: bold;
|
--form-label-font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
tr th {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
input:where([type="checkbox"], [type="radio"]) + label {
|
input:where([type="checkbox"], [type="radio"]) + label {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
@ -65,8 +69,12 @@ article > header {
|
||||||
}
|
}
|
||||||
|
|
||||||
article > footer {
|
article > footer {
|
||||||
margin-bottom: calc(var(--block-spacing-vertical) / -2);
|
|
||||||
margin-top: calc(var(--block-spacing-vertical) / 2);
|
margin-top: calc(var(--block-spacing-vertical) / 2);
|
||||||
|
margin-bottom: calc(var(--block-spacing-vertical) / -2);
|
||||||
|
}
|
||||||
|
|
||||||
|
article > footer > form > article {
|
||||||
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
article > header > hgroup,
|
article > header > hgroup,
|
||||||
|
|
|
@ -199,7 +199,7 @@ function footer(
|
||||||
if (author === undefined) author = "Florine W. Dekker";
|
if (author === undefined) author = "Florine W. Dekker";
|
||||||
if (authorURL === undefined) authorURL = "https://fwdekker.com/";
|
if (authorURL === undefined) authorURL = "https://fwdekker.com/";
|
||||||
if (license === undefined) license = "MIT";
|
if (license === undefined) license = "MIT";
|
||||||
if (licenseURL === undefined && vcsURL !== undefined) licenseURL = `${vcsURL}src/branch/master/LICENSE`;
|
if (licenseURL === undefined && vcsURL !== undefined) licenseURL = `${vcsURL}src/branch/main/LICENSE`;
|
||||||
if (vcs === undefined && vcsURL !== undefined) vcs = "git";
|
if (vcs === undefined && vcsURL !== undefined) vcs = "git";
|
||||||
if (privacyPolicyURL === undefined) privacyPolicyURL = "https://fwdekker.com/privacy/";
|
if (privacyPolicyURL === undefined) privacyPolicyURL = "https://fwdekker.com/privacy/";
|
||||||
|
|
||||||
|
|
|
@ -27,7 +27,9 @@ export function showMessageType(card: HTMLElement | HTMLFormElement,
|
||||||
message?: string,
|
message?: string,
|
||||||
type?: "busy" | "error" | "info" | "success" | "warning"): void {
|
type?: "busy" | "error" | "info" | "success" | "warning"): void {
|
||||||
if (card instanceof HTMLFormElement) {
|
if (card instanceof HTMLFormElement) {
|
||||||
const formCard = $(`article[data-status-for="${card.id}"]`);
|
if (card.dataset.statusCard == null) return;
|
||||||
|
|
||||||
|
const formCard = $(`#${card.dataset.statusCard}`);
|
||||||
if (formCard == null) return;
|
if (formCard == null) return;
|
||||||
|
|
||||||
card = formCard;
|
card = formCard;
|
||||||
|
@ -200,7 +202,7 @@ doAfterLoad(() => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
$a("input + small[data-hint]").forEach((hint: Element) => {
|
$a("small[data-hint]").forEach((hint: Element) => {
|
||||||
if (!(hint instanceof HTMLElement)) return;
|
if (!(hint instanceof HTMLElement)) return;
|
||||||
|
|
||||||
hint.innerHTML = hint.dataset["hint"] ?? "";
|
hint.innerHTML = hint.dataset["hint"] ?? "";
|
||||||
|
|
|
@ -61,8 +61,8 @@
|
||||||
<h3>Already have an account? Welcome back!</h3>
|
<h3>Already have an account? Welcome back!</h3>
|
||||||
</hgroup>
|
</hgroup>
|
||||||
</header>
|
</header>
|
||||||
<form id="test-form" novalidate>
|
<form id="test-form" data-status-card="test-status-card" novalidate>
|
||||||
<article class="status-card hidden" data-status-for="test-form">
|
<article id="test-status-card" class="status-card hidden">
|
||||||
<output>Congrats!</output>
|
<output>Congrats!</output>
|
||||||
<a class="close" href="#" aria-label="Close"></a>
|
<a class="close" href="#" aria-label="Close"></a>
|
||||||
</article>
|
</article>
|
||||||
|
|
Loading…
Reference in New Issue