Improve colour contrasts

See also picocss/pico#276 on GitHub.
This commit is contained in:
Florine W. Dekker 2022-11-23 01:10:43 +01:00
parent 4aa27c567a
commit df1198b361
Signed by: FWDekker
GPG Key ID: D3DCFAA8A4560BE0
3 changed files with 15 additions and 12 deletions

View File

@ -1,6 +1,6 @@
{
"name": "@fwdekker/template",
"version": "3.3.1",
"version": "3.3.2",
"description": "The base template for pages on fwdekker.com.",
"author": "Florine W. Dekker",
"license": "MIT",

View File

@ -1,3 +1,9 @@
/* pico.css: Improved text contrast (see also picocss/pico#276) */
:root {
--code-color: var(--color) !important;
--muted-color: hsl(205deg, 15%, 41%) !important;
}
/* pico.css: Bold labels */
:root {
--form-label-font-weight: bold;

View File

@ -48,6 +48,7 @@
<p>This <a href="./" target="_blank">is an external link</a> in a sentence.</p>
<p>These are some more contents.</p>
<p>These are the page contents.</p>
<p><code>This is a code block</code></p>
<article>
@ -63,19 +64,15 @@
<a class="close" href="#" aria-label="Close"></a>
</article>
<fieldset>
<label for="test-email">Email</label>
<input id="test-email" type="email" name="email" autocomplete="on" />
<small id="test-email-hint" data-hint-for="test-email" data-hint="Test hint"></small>
<label for="test-email">Email</label>
<input id="test-email" type="email" name="email" autocomplete="on" />
<small id="test-email-hint" data-hint-for="test-email" data-hint="Test hint"></small>
<label for="test-password">Password</label>
<input id="test-password" type="password" name="password" />
<small id="test-password-hint" data-hint-for="test-password"></small>
</fieldset>
<label for="test-password">Password</label>
<input id="test-password" type="password" name="password" />
<small id="test-password-hint" data-hint-for="test-password"></small>
<fieldset>
<button id="login-button">Log in</button>
</fieldset>
<button id="login-button">Log in</button>
</form>
</article>
</section>