Compare commits

...

8 Commits
v3.5.4 ... main

8 changed files with 60 additions and 22 deletions

BIN
package-lock.json generated

Binary file not shown.

View File

@ -1,6 +1,6 @@
{
"name": "@fwdekker/template",
"version": "3.5.4",
"version": "3.6.4",
"description": "The base template for pages on fwdekker.com.",
"author": "Florine W. Dekker",
"license": "MIT",
@ -24,20 +24,20 @@
"deploy": "grunt deploy"
},
"dependencies": {
"@picocss/pico": "^1.5.6"
"@picocss/pico": "^1.5.10"
},
"devDependencies": {
"grunt": "^1.5.3",
"grunt": "^1.6.1",
"grunt-cli": "^1.4.3",
"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-focus": "^1.0.0",
"grunt-webpack": "^5.0.0",
"ts-loader": "^9.4.2",
"grunt-webpack": "^6.0.0",
"ts-loader": "^9.5.1",
"ts-node": "^10.9.1",
"typescript": "^4.9.4",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
"typescript": "^5.3.2",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4"
}
}

View File

@ -4,5 +4,5 @@
@import "snippets/colors.css";
@import "snippets/common.css";
@import "snippets/forms.css";
@import "snippets/nav.css";
@import "snippets/validation.css";

View File

@ -1,27 +1,39 @@
/* pico.css overrides, based on https://picocss.com/docs/customization.html */
/* Light (default) */
.fwd-nav,
:root:not([data-theme]),
:root[data-theme="light"] {
[data-theme="light"],
:root:not([data-theme="dark"]) {
--primary: rgb(0, 51, 204) !important;
--primary-hover: rgb(0, 61, 245) !important;
--primary-focus: rgba(0, 41, 163, 0.125) !important;
--primary-focus-opaque: rgb(0, 41, 163) !important;
--primary-focus-dark: rgb(0, 29, 114) !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) {
--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;
}
/* Common */
:root {
--form-element-active-border-color: var(--primary) !important;
--form-element-focus-color: var(--primary-focus) !important;
--switch-color: var(--primary-inverse) !important;

View File

@ -1,3 +1,4 @@
/* Status card */
.status-card {
font-weight: bold;
position: relative;
@ -52,6 +53,7 @@
}
/* Input validation */
label.invalid,
*[data-label-for].invalid,
input.invalid,
@ -65,3 +67,21 @@ input.valid,
*[data-hint-for].valid {
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;
}

View File

@ -11,11 +11,15 @@
--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 {
--form-label-font-weight: bold;
}
tr th {
font-weight: bold;
}
input:where([type="checkbox"], [type="radio"]) + label {
font-weight: normal;
}

View File

@ -27,7 +27,9 @@ export function showMessageType(card: HTMLElement | HTMLFormElement,
message?: string,
type?: "busy" | "error" | "info" | "success" | "warning"): void {
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;
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;
hint.innerHTML = hint.dataset["hint"] ?? "";

View File

@ -61,8 +61,8 @@
<h3>Already have an account? Welcome back!</h3>
</hgroup>
</header>
<form id="test-form" novalidate>
<article class="status-card hidden" data-status-for="test-form">
<form id="test-form" data-status-card="test-status-card" novalidate>
<article id="test-status-card" class="status-card hidden">
<output>Congrats!</output>
<a class="close" href="#" aria-label="Close"></a>
</article>