637 lines
15 KiB
HTML
637 lines
15 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;">
|
||
<img src="/images/anthonyhughesdotart-hero.svg" alt="Anthony Hughes dot Art Hero Image" style="max-width:50%;">
|
||
</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="/" aria-current="page">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="latest-1-post">Latest 1 Post</h1>
|
||
|
||
|
||
|
||
<ol reversed="" class="postlist" style="--postlist-index: 2">
|
||
<li class="postlist-item">
|
||
<a href="/blog/firstpost/" class="postlist-link">This is my first post.</a>
|
||
<time class="postlist-date" datetime="2018-05-01">May 2018</time>
|
||
</li>
|
||
</ol>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</heading-anchors>
|
||
</main>
|
||
|
||
<footer style="margin-top:8rem;">
|
||
<div style="text-align:center">
|
||
<img src="/images/footer.svg" alt="Anthony Hughes dot Art Footer Image" style="max-width:50%;">
|
||
|
||
<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 `/` was built on 2026-05-29T21:08:51.428Z -->
|
||
<script type="module" src="/dist/cC8wS6ZjFU.js"></script>
|
||
</body>
|
||
</html>
|