web-blog-prod/blog/fifthpost/index.html
2026-05-29 19:59:23 +01:00

766 lines
18 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>This is a fifth post (draft) ➟ 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;
}
/**
* okaidia theme for JavaScript, CSS and HTML
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
* @author ocodia
*/
code[class*="language-"],
pre[class*="language-"] {
color: #f8f8f2;
background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #272822;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #8292a2;
}
.token.punctuation {
color: #f8f8f2;
}
.token.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
color: #f92672;
}
.token.boolean,
.token.number {
color: #ae81ff;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #a6e22e;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: #f8f8f2;
}
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
color: #e6db74;
}
.token.keyword {
color: #66d9ef;
}
.token.regex,
.token.important {
color: #fd971f;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
/*
* New diff- syntax
*/
pre[class*="language-diff-"] {
--eleventy-code-padding: 1.25em;
padding-left: var(--eleventy-code-padding);
padding-right: var(--eleventy-code-padding);
}
.token.deleted {
background-color: hsl(0, 51%, 37%);
color: inherit;
}
.token.inserted {
background-color: hsl(126, 31%, 39%);
color: inherit;
}
/* Make the + and - characters unselectable for copy/paste */
.token.prefix.unchanged,
.token.prefix.inserted,
.token.prefix.deleted {
-webkit-user-select: none;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding-top: 2px;
padding-bottom: 2px;
}
.token.prefix.inserted,
.token.prefix.deleted {
width: var(--eleventy-code-padding);
background-color: rgba(0,0,0,.2);
}
/* Optional: full-width background color */
.token.inserted:not(.prefix),
.token.deleted:not(.prefix) {
display: block;
margin-left: calc(-1 * var(--eleventy-code-padding));
margin-right: calc(-1 * var(--eleventy-code-padding));
text-decoration: none; /* override del, ins, mark defaults */
color: inherit; /* override del, ins, mark defaults */
}</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="/.11ty/image/?src=content%2Fimages%2Fanthonyhughesdotart-hero.svg&width=960&format=avif&via=transform 960w"><source type="image/webp" srcset="/.11ty/image/?src=content%2Fimages%2Fanthonyhughesdotart-hero.svg&width=960&format=webp&via=transform 960w"><img loading="lazy" decoding="async" src="/.11ty/image/?src=content%2Fimages%2Fanthonyhughesdotart-hero.svg&width=960&format=svg&via=transform" 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>
<h1 id="this-is-a-fifth-post-draft">This is a fifth post (draft)</h1>
<ul class="post-metadata">
<li><time datetime="2023-01-23">23 January 2023</time></li>
</ul>
<p>This is a draft post</p>
<ul class="links-nextprev"><li class="links-nextprev-prev">← Previous<br> <a href="/blog/fourthpost/">This is my fourth post (draft)</a></li>
</ul>
</heading-anchors>
</main>
<footer style="margin-top:8rem;">
<div style="text-align:center">
<picture><source type="image/avif" srcset="/.11ty/image/?src=content%2Fimages%2Ffooter.svg&width=300&format=avif&via=transform 300w"><source type="image/webp" srcset="/.11ty/image/?src=content%2Fimages%2Ffooter.svg&width=300&format=webp&via=transform 300w"><img loading="lazy" decoding="async" src="/.11ty/image/?src=content%2Fimages%2Ffooter.svg&width=300&format=svg&via=transform" 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 `/blog/fifthpost/` was built on 2026-05-29T18:56:25.094Z -->
<script type="module" src="/dist/cC8wS6ZjFU.js"></script>
</body>
</html>