Skip to content

Instantly share code, notes, and snippets.

View nfreear's full-sized avatar

Nick Freear nfreear

71 followers · 193 following
View GitHub Profile
@nfreear
nfreear / font-test.html
Created March 7, 2022 19:52
Icon fonts, Material icons, fonts for Simplified Chinese | https://fontsource.org/
<!doctype html><html lang="en"> <title> font-icon test </title>
<meta charset="utf-8" />
<style>
:root {
--my-font-face: OpenDyslexic;
--X-my-page-bg-color: black;
--my-page-color: #333;
}
@nfreear
nfreear / opendyslexic-font.html
Created March 2, 2022 21:44
"OpenDyslexic" font demo | https://opendyslexic.org/
<!doctype html>
<style>
/* opendyslexic-latin-400-normal*/
@font-face {
font-family: 'OpenDyslexic';
font-style: normal;
font-display: swap;
font-weight: 400;
src:
@nfreear
nfreear / details-dialogs-experiments.css.html
Created February 23, 2022 12:33
Details <details> experiments - dialogs etc. - CSS
<!doctype html> <title> Details experiments </title>
<style>
/*
https://stackoverflow.com/questions/38213329/how-to-add-css3-transition-with-html5-details-summary-tag-reveal
*/
details[open] summary ~ * {
animation: sweep 1s ease-in-out; /* Was: .5s */
}
@nfreear
nfreear / ckeditor-5-test.js.html
Last active February 16, 2022 11:15
CKEditor 5 — Accessibility test page
<!DOCTYPE html><html lang="html"><meta charset="utf-8"><title>CKEditor 5</title>
<style>
body { margin: 1rem auto; max-width: 32rem; }
.ck-editor__editable { min-height: 10rem; }
/* Accessibility fixes.
*/
.ck-editor .ck.ck-button .ck-button__label {
@nfreear
nfreear / dialog-element-test.html
Created February 13, 2022 16:13
<dialog> - Modal Dialog Element Test
<!doctype html> <title> Dialog element test </title>
<meta charset=utf-8 />
<style>
body { margin: 1rem auto; max-width: 30rem; }
button, select { font-size: inherit; }
button { padding: .4rem 2rem; margin-right: 1rem; }
select { padding: .2rem 1rem; }
@nfreear
nfreear / when-promise.js.html
Created December 16, 2021 08:53
When a time-dependent condition is met, resolve a promise. Reject on timeout.
<!doctype html> <title> when-condition </title>
<style>
body { margin: 1rem auto; max-width: 25rem; zoom: 120%; }
button, input { font-size: inherit; padding: .2rem 1rem; }
</style>
<h1> when-promise </h1>
@nfreear
nfreear / colour.css.html
Created December 12, 2021 09:22
Colours / CSS vars
<!doctype html> <title> Colour </title>
<style>
:root {
--hue-red : 0deg; /* 12 o'clock */
--hue-orange : 30deg; /* 1 o'clock, #ff8000, rgb(255, 128, 0) */
--hue-yellow : 60deg; /* 2 o'clock, #ffff00 */
--hue-green : 120deg; /* 4 o'clock, 'Lime' */
--hue-cyan : 180deg; /* 6 o'clock, #00ffff, alias: Aqua. */
--hue-blue : 240deg; /* 8 o'clock */
@nfreear
nfreear / browser-console-colors.js
Created December 4, 2021 11:13
Browser console colours | https://www.samanthaming.com/tidbits/40-colorful-console-message/
// https://www.samanthaming.com/tidbits/40-colorful-console-message/
const COLOR_1 = '#ff0088';
console.group('test', 2);
console.log(
`%c*%c:focus %c{
%coutline%c: 1px solid %c\u25A0%c${COLOR_1};
}`,
'color:purple',
@nfreear
nfreear / my-star-rating.web-component.js.html
Created December 4, 2021 08:09
Javascript Web Component to implement a star-rating widget as a set of radio buttons.
<!doctype html> <title> My radio star rating </title>
<style>
:root {
--star-rating-size: 4rem;
--no-star-url: url(https://upload.wikimedia.org/wikipedia/commons/e/e7/Empty_Star.svg);
--star-url: url(https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg);
}
/* Reset */
@nfreear
nfreear / star-rating.js.html
Created December 2, 2021 19:35
A star-rating widget.
<!doctype html> <title> Star-rating widget </title>
<h1> Star-rating widget </h1>
<p><label for="rating">You can give us a star rating</label></p>
<div class="star-rating" data-v="2">
<input id="rating" type="range" min="0" max="5" step=".5" value="2" />
<span class="no-star"></span>