631 lines
16 KiB
HTML
631 lines
16 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Web Blog ➟ Anthony Hughes . art</title>
|
||
<meta name="description" content="Musings of a neurodivergent cynic.">
|
||
<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="Web Blog">
|
||
|
||
<!-- Favicons -->
|
||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||
<link rel="manifest" href="/site.webmanifest">
|
||
|
||
|
||
|
||
<style>/* This is an arbitrary CSS string added to the bundle */
|
||
/* Fonts */
|
||
|
||
/* ===== Atkinson Hyperlegible Next ===== */
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Next';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-ExtraLight.woff2') format('woff2');
|
||
font-weight: 200;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Next';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2') format('woff2');
|
||
font-weight: 200;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Next';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-Light.woff2') format('woff2');
|
||
font-weight: 300;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Next';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-LightItalic.woff2') format('woff2');
|
||
font-weight: 300;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Next';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2');
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Next';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-RegularItalic.woff2') format('woff2');
|
||
font-weight: 400;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Next';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-Medium.woff2') format('woff2');
|
||
font-weight: 500;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Next';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-MediumItalic.woff2') format('woff2');
|
||
font-weight: 500;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Next';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-SemiBold.woff2') format('woff2');
|
||
font-weight: 600;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Next';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-SemiBoldItalic.woff2') format('woff2');
|
||
font-weight: 600;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Next';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2');
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Next';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-BoldItalic.woff2') format('woff2');
|
||
font-weight: 700;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Next';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-ExtraBold.woff2') format('woff2');
|
||
font-weight: 800;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Next';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2') format('woff2');
|
||
font-weight: 800;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
|
||
/* ===== Atkinson Hyperlegible Mono ===== */
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Mono';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-ExtraLight.woff2') format('woff2');
|
||
font-weight: 200;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Mono';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-ExtraLightItalic.woff2') format('woff2');
|
||
font-weight: 200;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Mono';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-Light.woff2') format('woff2');
|
||
font-weight: 300;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Mono';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-LightItalic.woff2') format('woff2');
|
||
font-weight: 300;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Mono';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-Regular.woff2') format('woff2');
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Mono';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-RegularItalic.woff2') format('woff2');
|
||
font-weight: 400;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Mono';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-Medium.woff2') format('woff2');
|
||
font-weight: 500;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Mono';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-MediumItalic.woff2') format('woff2');
|
||
font-weight: 500;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Mono';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-SemiBold.woff2') format('woff2');
|
||
font-weight: 600;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Mono';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-SemiBoldItalic.woff2') format('woff2');
|
||
font-weight: 600;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Mono';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-Bold.woff2') format('woff2');
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Mono';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-BoldItalic.woff2') format('woff2');
|
||
font-weight: 700;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Mono';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-ExtraBold.woff2') format('woff2');
|
||
font-weight: 800;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Atkinson Hyperlegible Mono';
|
||
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-ExtraBoldItalic.woff2') format('woff2');
|
||
font-weight: 800;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
/* Defaults */
|
||
:root {
|
||
--font-family: Atkinson Hyperlegible Next, -apple-system, system-ui, sans-serif;
|
||
--font-family-monospace: Atkinson Hyperlegible Mono, Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
|
||
}
|
||
|
||
/* Theme colors */
|
||
:root {
|
||
--color-gray-20: #e0e0e0;
|
||
--color-gray-50: #C0C0C0;
|
||
--color-gray-90: #333;
|
||
--color-aha-text: #29294f;
|
||
|
||
--background-color: #fff8ef;
|
||
|
||
--text-color: var(--color-aha-text);
|
||
--text-color-link: #29294f;
|
||
--text-color-link-active: #29294f;
|
||
--text-color-link-visited: #17050F;
|
||
|
||
--syntax-tab-size: 2;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--color-gray-20: #e0e0e0;
|
||
--color-gray-50: #C0C0C0;
|
||
--color-gray-90: #dad8d8;
|
||
|
||
/* --text-color is assigned to --color-gray-_ above */
|
||
--text-color-link: #1493fb;
|
||
--text-color-link-active: #6969f7;
|
||
--text-color-link-visited: #a6a6f8;
|
||
|
||
--background-color: #15202b;
|
||
}
|
||
}
|
||
|
||
|
||
/* Global stylesheet */
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
@view-transition {
|
||
navigation: auto;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
padding: 0;
|
||
margin: 0 auto;
|
||
font-family: var(--font-family);
|
||
color: var(--text-color);
|
||
background-color: var(--background-color);
|
||
}
|
||
html {
|
||
overflow-y: scroll;
|
||
}
|
||
body {
|
||
max-width: 40em;
|
||
}
|
||
|
||
/* https://www.a11yproject.com/posts/how-to-hide-content/ */
|
||
.visually-hidden:not(:focus):not(:active) {
|
||
clip: rect(0 0 0 0);
|
||
clip-path: inset(50%);
|
||
height: 1px;
|
||
overflow: hidden;
|
||
position: absolute;
|
||
white-space: nowrap;
|
||
width: 1px;
|
||
}
|
||
|
||
/* Fluid images via https://www.zachleat.com/web/fluid-images/ */
|
||
img{
|
||
max-width: 100%;
|
||
}
|
||
img[width][height] {
|
||
height: auto;
|
||
}
|
||
img[src$=".svg"] {
|
||
width: 100%;
|
||
height: auto;
|
||
max-width: none;
|
||
}
|
||
video,
|
||
iframe {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
iframe {
|
||
aspect-ratio: 16/9;
|
||
}
|
||
|
||
p:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
p {
|
||
line-height: 1.5;
|
||
}
|
||
|
||
li {
|
||
line-height: 1.5;
|
||
}
|
||
|
||
a[href] {
|
||
color: var(--text-color-link);
|
||
}
|
||
a[href]:visited {
|
||
color: var(--text-color-link-visited);
|
||
}
|
||
a[href]:hover,
|
||
a[href]:active {
|
||
color: var(--text-color-link-active);
|
||
}
|
||
|
||
main,
|
||
footer {
|
||
padding: 1rem;
|
||
}
|
||
main :first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
header {
|
||
border-bottom: 1px dashed var(--color-gray-20);
|
||
}
|
||
|
||
#skip-link {
|
||
text-decoration: none;
|
||
background: var(--background-color);
|
||
color: var(--text-color);
|
||
padding: 0.5rem 1rem;
|
||
border: 1px solid var(--color-gray-90);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
/* Prevent visually-hidden skip link fom pushing content around when focused */
|
||
#skip-link.visually-hidden:focus {
|
||
position: absolute;
|
||
top: 1rem;
|
||
left: 1rem;
|
||
/* Ensure it is positioned on top of everything else when it is shown */
|
||
z-index: 999;
|
||
}
|
||
|
||
.links-nextprev {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: .5em 1em;
|
||
list-style: "";
|
||
border-top: 1px dashed var(--color-gray-20);
|
||
padding: 1em 0;
|
||
}
|
||
.links-nextprev > * {
|
||
flex-grow: 1;
|
||
}
|
||
.links-nextprev-next {
|
||
text-align: right;
|
||
}
|
||
|
||
table {
|
||
margin: 1em 0;
|
||
}
|
||
table td,
|
||
table th {
|
||
padding-right: 1em;
|
||
}
|
||
|
||
pre,
|
||
code {
|
||
font-family: var(--font-family-monospace);
|
||
}
|
||
pre:not([class*="language-"]) {
|
||
margin: .5em 0;
|
||
line-height: 1.375; /* 22px /16 */
|
||
-moz-tab-size: var(--syntax-tab-size);
|
||
-o-tab-size: var(--syntax-tab-size);
|
||
tab-size: var(--syntax-tab-size);
|
||
-webkit-hyphens: none;
|
||
-ms-hyphens: none;
|
||
hyphens: none;
|
||
direction: ltr;
|
||
text-align: left;
|
||
white-space: pre;
|
||
word-spacing: normal;
|
||
word-break: normal;
|
||
overflow-x: auto;
|
||
}
|
||
code {
|
||
word-break: break-all;
|
||
}
|
||
|
||
/* Header */
|
||
header {
|
||
display: flex;
|
||
gap: 1em;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 1em;
|
||
}
|
||
.home-link {
|
||
flex-grow: 1;
|
||
font-size: 1em; /* 16px /16 */
|
||
font-weight: 700;
|
||
}
|
||
.home-link:link:not(:hover) {
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* Nav */
|
||
.nav {
|
||
display: flex;
|
||
gap: .5em 1em;
|
||
padding: 0;
|
||
margin: 0;
|
||
list-style: none;
|
||
}
|
||
.nav-item {
|
||
display: inline-block;
|
||
}
|
||
.nav-item a[href]:not(:hover) {
|
||
text-decoration: none;
|
||
}
|
||
.nav a[href][aria-current="page"] {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Posts list */
|
||
.postlist {
|
||
counter-reset: start-from var(--postlist-index);
|
||
list-style: none;
|
||
padding: 0;
|
||
padding-left: 1.5rem;
|
||
}
|
||
.postlist-item {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: baseline;
|
||
counter-increment: start-from -1;
|
||
margin-bottom: 1em;
|
||
}
|
||
.postlist-item:before {
|
||
display: inline-block;
|
||
pointer-events: none;
|
||
content: "" counter(start-from, decimal-leading-zero) ". ";
|
||
line-height: 100%;
|
||
text-align: right;
|
||
margin-left: -1.5rem;
|
||
}
|
||
.postlist-date,
|
||
.postlist-item:before {
|
||
font-size: 0.8125em; /* 13px /16 */
|
||
color: var(--color-gray-90);
|
||
}
|
||
.postlist-date {
|
||
word-spacing: -0.5px;
|
||
}
|
||
.postlist-link {
|
||
font-size: 1.1875em; /* 19px /16 */
|
||
font-weight: 700;
|
||
flex-basis: calc(100% - 1.5rem);
|
||
padding-left: .25em;
|
||
padding-right: .5em;
|
||
text-underline-position: from-font;
|
||
text-underline-offset: 0;
|
||
text-decoration-thickness: 1px;
|
||
}
|
||
.postlist-item-active .postlist-link {
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* Tags */
|
||
.post-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-transform: capitalize;
|
||
font-style: italic;
|
||
}
|
||
.postlist-item > .post-tag {
|
||
align-self: center;
|
||
}
|
||
|
||
/* Tags list */
|
||
.post-metadata {
|
||
display: inline-flex;
|
||
flex-wrap: wrap;
|
||
gap: .5em;
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.post-metadata time {
|
||
margin-right: 1em;
|
||
}</style>
|
||
|
||
</head>
|
||
<body>
|
||
<a href="#main" id="skip-link" class="visually-hidden">Skip to main content</a>
|
||
|
||
<header>
|
||
<div style="text-align:center;">
|
||
<picture><source type="image/avif" srcset="/img/57mU09TOH6-960.avif 960w"><source type="image/webp" srcset="/img/57mU09TOH6-960.webp 960w"><img loading="lazy" decoding="async" src="/img/57mU09TOH6-960.svg" alt="Anthony Hughes dot Art Hero Image" style="max-width:50%;" width="960" height="1277"></picture>
|
||
</div>
|
||
|
||
<h2 id="web-blog"><a href="/" class="home-link">Web Blog</a></h2>
|
||
<nav>
|
||
<h2 class="visually-hidden" id="top-level-navigation-menu">Top level navigation menu</h2>
|
||
<ul class="nav">
|
||
<li class="nav-item"><a href="/">Home</a></li>
|
||
<li class="nav-item"><a href="/about/">About</a></li>
|
||
<li class="nav-item"><a href="/blog/">Archive</a></li>
|
||
<li class="nav-item"><a href="/feed/feed.xml">Feed</a></li>
|
||
<li class="nav-item"><a href="" aria="">Subscribe</a></li>
|
||
</ul>
|
||
</nav>
|
||
</header>
|
||
|
||
<main id="main">
|
||
<heading-anchors>
|
||
<!--
|
||
Delete this block, which will also remove the component CSS from the bundle
|
||
<style>/* Message Box */
|
||
.message-box {
|
||
--color-message-box: #ffc;
|
||
|
||
display: block;
|
||
background-color: var(--color-message-box);
|
||
color: var(--color-gray-90);
|
||
padding: 1em 0.625em; /* 16px 10px /16 */
|
||
}
|
||
.message-box ol {
|
||
margin-top: 0;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
.message-box {
|
||
--color-message-box: #082840;
|
||
}
|
||
}
|
||
</style>
|
||
<div class="message-box">
|
||
<ol>
|
||
<li>Edit <code>_data/metadata.js</code> with your blog’s information.</li>
|
||
<li>(Optional) Edit <code>eleventy.config.js</code> with your <a href="https://www.11ty.dev/docs/config/">configuration preferences</a>.</li>
|
||
<li>Delete this message from <code>_includes/layouts/home.njk</code>.</li>
|
||
</ol>
|
||
<p><em>This is an <a href="https://www.11ty.dev/">Eleventy project</a> created from the <a href="https://github.com/11ty/eleventy-base-blog"><code>eleventy-base-blog</code> repo</a>.</em></p>
|
||
</div>
|
||
-->
|
||
|
||
<h1 id="content-not-found">Content not found.</h1>
|
||
<p>Go <a href="/">home</a>.</p>
|
||
<!--
|
||
|
||
Read more: https://www.11ty.dev/docs/quicktips/not-found/
|
||
|
||
This is compatible with:
|
||
|
||
- GitHub Pages: https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/
|
||
- GitLab Pages: https://docs.gitlab.com/ee/user/project/pages/introduction.html#custom-error-codes-pages
|
||
- Netlify: https://www.netlify.com/docs/redirects/#custom-404
|
||
- Cloudflare Pages: https://developers.cloudflare.com/pages/platform/serving-pages/#not-found-behavior
|
||
- Vercel: https://vercel.com/guides/custom-404-page#static-site-generator-ssg
|
||
-->
|
||
|
||
|
||
</heading-anchors>
|
||
</main>
|
||
|
||
<footer style="margin-top:8rem;">
|
||
<div style="text-align:center">
|
||
<picture><source type="image/avif" srcset="/img/7PK01HM_My-300.avif 300w"><source type="image/webp" srcset="/img/7PK01HM_My-300.webp 300w"><img loading="lazy" decoding="async" src="/img/7PK01HM_My-300.svg" alt="Anthony Hughes dot Art Footer Image" style="max-width:100%;" width="300" height="100"></picture>
|
||
<p style="text-align:center; font-size:small;"> Made in 🏴 <br>All content licensed <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons BY-NC-ND 4.0</a> unless otherwise indicated.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- This page `/404.html` was built on 2026-05-29T18:06:16.079Z -->
|
||
<script type="module" src="/dist/cC8wS6ZjFU.js"></script>
|
||
</body>
|
||
</html>
|