Initial commit
This commit is contained in:
parent
e5dd70cc4d
commit
e23e4de215
64 changed files with 10071 additions and 0 deletions
631
404.html
Normal file
631
404.html
Normal file
|
|
@ -0,0 +1,631 @@
|
|||
<!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="/.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>
|
||||
<!--
|
||||
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="/.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 `/404.html` was built on 2026-05-29T18:56:25.094Z -->
|
||||
<script type="module" src="/dist/cC8wS6ZjFU.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
619
about/index.html
Normal file
619
about/index.html
Normal file
|
|
@ -0,0 +1,619 @@
|
|||
<!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="/.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/" aria-current="page">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="about">About</h1>
|
||||
<p>I am a person that writes stuff.</p>
|
||||
|
||||
|
||||
</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 `/about/` was built on 2026-05-29T18:56:25.094Z -->
|
||||
<script type="module" src="/dist/cC8wS6ZjFU.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
android-chrome-192x192.png
Normal file
BIN
android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
android-chrome-512x512.png
Normal file
BIN
android-chrome-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
apple-touch-icon.png
Normal file
BIN
apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
766
blog/fifthpost/index.html
Normal file
766
blog/fifthpost/index.html
Normal file
|
|
@ -0,0 +1,766 @@
|
|||
<!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>
|
||||
780
blog/firstpost/index.html
Normal file
780
blog/firstpost/index.html
Normal file
|
|
@ -0,0 +1,780 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>This is my first post. ➟ Anthony Hughes . art</title>
|
||||
<meta name="description" content="This is a post on My Blog about agile frameworks.">
|
||||
<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-my-first-post">This is my first post.</h1>
|
||||
|
||||
<ul class="post-metadata">
|
||||
<li><time datetime="2018-05-01">01 May 2018</time></li>
|
||||
<li><a href="/tags/another-tag/" class="post-tag">another tag</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
|
||||
<h2 id="section-header">Section Header</h2>
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>
|
||||
<pre class="language-diff-js" tabindex="0"><code class="language-diff-js"><span class="token unchanged language-js"><span class="token prefix unchanged"> </span><span class="token comment">// this is a command</span>
|
||||
<span class="token prefix unchanged"> </span><span class="token keyword">function</span> <span class="token function">myCommand</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="token inserted-sign inserted language-js"><span class="token prefix inserted">+</span> <span class="token keyword">let</span> counter <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||||
</span><span class="token deleted-sign deleted language-js"><span class="token prefix deleted">-</span> <span class="token keyword">let</span> counter <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||||
</span><span class="token unchanged language-js"><span class="token prefix unchanged"> </span> counter<span class="token operator">++</span><span class="token punctuation">;</span>
|
||||
<span class="token prefix unchanged"> </span><span class="token punctuation">}</span>
|
||||
</span>
|
||||
<span class="token unchanged language-js"><span class="token prefix unchanged"> </span><span class="token comment">// Test with a line break above this line.</span>
|
||||
<span class="token prefix unchanged"> </span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
|
||||
<ul class="links-nextprev"><li class="links-nextprev-next">Next →<br><a href="/blog/secondpost/">This is my second post with a much longer title. (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/firstpost/` was built on 2026-05-29T18:56:25.093Z -->
|
||||
<script type="module" src="/dist/cC8wS6ZjFU.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
771
blog/fourthpost/index.html
Normal file
771
blog/fourthpost/index.html
Normal file
|
|
@ -0,0 +1,771 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>This is my fourth post (draft) ➟ Anthony Hughes . art</title>
|
||||
<meta name="description" content="This is a post on My Blog about touchpoints and circling wagons.">
|
||||
<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-my-fourth-post-draft">This is my fourth post (draft)</h1>
|
||||
|
||||
<ul class="post-metadata">
|
||||
<li><time datetime="2018-09-30">30 September 2018</time></li>
|
||||
<li><a href="/tags/second-tag/" class="post-tag">second tag</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
|
||||
<picture><source type="image/avif" srcset="/.11ty/image/?src=content%2Fblog%2Ffourthpost%2Fpossum.png&width=350&format=avif&via=transform 350w"><source type="image/webp" srcset="/.11ty/image/?src=content%2Fblog%2Ffourthpost%2Fpossum.png&width=350&format=webp&via=transform 350w"><img loading="lazy" decoding="async" src="/.11ty/image/?src=content%2Fblog%2Ffourthpost%2Fpossum.png&width=350&format=png&via=transform" alt="A possum parent and two possum kids hanging from the iconic red balloon" width="350" height="685"></picture>
|
||||
<h2 id="section-header">Section Header</h2>
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>
|
||||
|
||||
<ul class="links-nextprev"><li class="links-nextprev-prev">← Previous<br> <a href="/blog/thirdpost/">This is my third post. (draft)</a></li><li class="links-nextprev-next">Next →<br><a href="/blog/fifthpost/">This is a fifth 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/fourthpost/` was built on 2026-05-29T18:56:25.093Z -->
|
||||
<script type="module" src="/dist/cC8wS6ZjFU.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
blog/fourthpost/xbVnp_hAou-350.avif
Normal file
BIN
blog/fourthpost/xbVnp_hAou-350.avif
Normal file
Binary file not shown.
BIN
blog/fourthpost/xbVnp_hAou-350.png
Normal file
BIN
blog/fourthpost/xbVnp_hAou-350.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
BIN
blog/fourthpost/xbVnp_hAou-350.webp
Normal file
BIN
blog/fourthpost/xbVnp_hAou-350.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
643
blog/index.html
Normal file
643
blog/index.html
Normal file
|
|
@ -0,0 +1,643 @@
|
|||
<!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="/.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/" aria-current="page">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="archive">Archive</h1>
|
||||
|
||||
|
||||
<ol reversed="" class="postlist" style="--postlist-index: 6">
|
||||
<li class="postlist-item">
|
||||
<a href="/blog/fifthpost/" class="postlist-link">This is a fifth post (draft)</a>
|
||||
<time class="postlist-date" datetime="2023-01-23">January 2023</time>
|
||||
</li>
|
||||
<li class="postlist-item">
|
||||
<a href="/blog/fourthpost/" class="postlist-link">This is my fourth post (draft)</a>
|
||||
<time class="postlist-date" datetime="2018-09-30">September 2018</time>
|
||||
</li>
|
||||
<li class="postlist-item">
|
||||
<a href="/blog/thirdpost/" class="postlist-link">This is my third post. (draft)</a>
|
||||
<time class="postlist-date" datetime="2018-08-24">August 2018</time>
|
||||
</li>
|
||||
<li class="postlist-item">
|
||||
<a href="/blog/secondpost/" class="postlist-link">This is my second post with a much longer title. (draft)</a>
|
||||
<time class="postlist-date" datetime="2018-07-04">July 2018</time>
|
||||
</li>
|
||||
<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">
|
||||
<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/` was built on 2026-05-29T18:56:25.094Z -->
|
||||
<script type="module" src="/dist/cC8wS6ZjFU.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
772
blog/secondpost/index.html
Normal file
772
blog/secondpost/index.html
Normal file
|
|
@ -0,0 +1,772 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>This is my second post with a much longer title. (draft) ➟ Anthony Hughes . art</title>
|
||||
<meta name="description" content="This is a post on My Blog about leveraging agile frameworks.">
|
||||
<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-my-second-post-with-a-much-longer-title-draft">This is my second post with a much longer title. (draft)</h1>
|
||||
|
||||
<ul class="post-metadata">
|
||||
<li><time datetime="2018-07-04">04 July 2018</time></li>
|
||||
<li><a href="/tags/number-2/" class="post-tag">number 2</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
|
||||
<h2 id="section-header">Section Header</h2>
|
||||
<p><a href="/blog/firstpost/">First post</a>
|
||||
<a href="/blog/thirdpost/">Third post</a></p>
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>
|
||||
|
||||
<ul class="links-nextprev"><li class="links-nextprev-prev">← Previous<br> <a href="/blog/firstpost/">This is my first post.</a></li><li class="links-nextprev-next">Next →<br><a href="/blog/thirdpost/">This is my third 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/secondpost/` was built on 2026-05-29T18:56:25.093Z -->
|
||||
<script type="module" src="/dist/cC8wS6ZjFU.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
792
blog/thirdpost/index.html
Normal file
792
blog/thirdpost/index.html
Normal file
|
|
@ -0,0 +1,792 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>This is my third post. (draft) ➟ Anthony Hughes . art</title>
|
||||
<meta name="description" content="This is a post on My Blog about win-win survival strategies.">
|
||||
<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-my-third-post-draft">This is my third post. (draft)</h1>
|
||||
|
||||
<ul class="post-metadata">
|
||||
<li><time datetime="2018-08-24">24 August 2018</time></li>
|
||||
<li><a href="/tags/second-tag/" class="post-tag">second tag</a>, </li>
|
||||
<li><a href="/tags/posts-with-two-tags/" class="post-tag">posts with two tags</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
|
||||
<h2 id="code">Code</h2>
|
||||
<h3 id="this-is-a-very-long-heading-that-i-want-to-wrap-this-is-a-very-long-heading-that-i-want-to-wrap-this-is-a-very-long-heading-that-i-want-to-wrap-this-is-a-very-long-heading-that-i-want-to-wrap">This is a very long heading that I want to wrap This is a very long heading that I want to wrap This is a very long heading that I want to wrap This is a very long heading that I want to wrap</h3>
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
|
||||
<pre class="language-js" tabindex="0"><code class="language-js"><span class="token comment">// this is a command</span>
|
||||
<span class="token keyword">function</span> <span class="token function">myCommand</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">let</span> counter <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||||
counter<span class="token operator">++</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token comment">// Test with a line break above this line.</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
|
||||
<h3 id="heading-with-a-link">Heading with a <a href="#code">link</a></h3>
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
|
||||
<pre><code>// this is a command
|
||||
function myCommand() {
|
||||
let counter = 0;
|
||||
counter++;
|
||||
}
|
||||
|
||||
// Test with a line break above this line.
|
||||
console.log('Test');
|
||||
</code></pre>
|
||||
<h2 id="section-header">Section Header</h2>
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>
|
||||
|
||||
<ul class="links-nextprev"><li class="links-nextprev-prev">← Previous<br> <a href="/blog/secondpost/">This is my second post with a much longer title. (draft)</a></li><li class="links-nextprev-next">Next →<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/thirdpost/` was built on 2026-05-29T18:56:25.093Z -->
|
||||
<script type="module" src="/dist/cC8wS6ZjFU.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
231
dist/cC8wS6ZjFU.js
vendored
Normal file
231
dist/cC8wS6ZjFU.js
vendored
Normal file
|
|
@ -0,0 +1,231 @@
|
|||
// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
let globalInstanceIndex = 0;
|
||||
|
||||
class HeadingAnchors extends HTMLElement {
|
||||
static register(tagName = "heading-anchors", registry = window.customElements) {
|
||||
if(registry && !registry.get(tagName)) {
|
||||
registry.define(tagName, this);
|
||||
}
|
||||
}
|
||||
|
||||
static attributes = {
|
||||
exclude: "data-ha-exclude",
|
||||
prefix: "prefix",
|
||||
content: "content",
|
||||
}
|
||||
|
||||
static classes = {
|
||||
anchor: "ha",
|
||||
placeholder: "ha-placeholder",
|
||||
srOnly: "ha-visualhide",
|
||||
}
|
||||
|
||||
static defaultSelector = "h2,h3,h4,h5,h6";
|
||||
|
||||
static css = `
|
||||
.${HeadingAnchors.classes.srOnly} {
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
.${HeadingAnchors.classes.anchor} {
|
||||
position: absolute;
|
||||
left: var(--ha_offsetx);
|
||||
top: var(--ha_offsety);
|
||||
text-decoration: none;
|
||||
opacity: 0;
|
||||
}
|
||||
.${HeadingAnchors.classes.placeholder} {
|
||||
opacity: .3;
|
||||
}
|
||||
.${HeadingAnchors.classes.anchor}:is(:focus-within, :hover) {
|
||||
opacity: 1;
|
||||
}
|
||||
.${HeadingAnchors.classes.anchor},
|
||||
.${HeadingAnchors.classes.placeholder} {
|
||||
display: inline-block;
|
||||
padding: 0 .25em;
|
||||
|
||||
/* Disable selection of visually hidden label */
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@supports (anchor-name: none) {
|
||||
.${HeadingAnchors.classes.anchor} {
|
||||
position: absolute;
|
||||
left: anchor(left);
|
||||
top: anchor(top);
|
||||
}
|
||||
}`;
|
||||
|
||||
get supports() {
|
||||
return "replaceSync" in CSSStyleSheet.prototype;
|
||||
}
|
||||
|
||||
get supportsAnchorPosition() {
|
||||
return CSS.supports("anchor-name: none");
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
if(!this.supports) {
|
||||
return;
|
||||
}
|
||||
|
||||
let sheet = new CSSStyleSheet();
|
||||
sheet.replaceSync(HeadingAnchors.css);
|
||||
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
|
||||
|
||||
this.headingStyles = {};
|
||||
this.instanceIndex = globalInstanceIndex++;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
if (!this.supports) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.headings.forEach((heading, index) => {
|
||||
if(!heading.hasAttribute(HeadingAnchors.attributes.exclude)) {
|
||||
let anchor = this.getAnchorElement(heading);
|
||||
let placeholder = this.getPlaceholderElement();
|
||||
|
||||
// Prefers anchor position approach for better accessibility
|
||||
// https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
if(this.supportsAnchorPosition) {
|
||||
let anchorName = `--ha_${this.instanceIndex}_${index}`;
|
||||
placeholder.style.setProperty("anchor-name", anchorName);
|
||||
anchor.style.positionAnchor = anchorName;
|
||||
}
|
||||
|
||||
heading.appendChild(placeholder);
|
||||
heading.after(anchor);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Polyfill-only
|
||||
positionAnchorFromPlaceholder(placeholder) {
|
||||
if(!placeholder) {
|
||||
return;
|
||||
}
|
||||
|
||||
let heading = placeholder.closest("h1,h2,h3,h4,h5,h6");
|
||||
if(!heading.nextElementSibling) {
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO next element could be more defensive
|
||||
this.positionAnchor(heading.nextElementSibling);
|
||||
}
|
||||
|
||||
// Polyfill-only
|
||||
positionAnchor(anchor) {
|
||||
if(!anchor || !anchor.previousElementSibling) {
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO previous element could be more defensive
|
||||
let heading = anchor.previousElementSibling;
|
||||
this.setFontProp(heading, anchor);
|
||||
|
||||
if(this.supportsAnchorPosition) {
|
||||
// quit early
|
||||
return;
|
||||
}
|
||||
|
||||
let placeholder = heading.querySelector(`.${HeadingAnchors.classes.placeholder}`);
|
||||
if(placeholder) {
|
||||
anchor.style.setProperty("--ha_offsetx", `${placeholder.offsetLeft}px`);
|
||||
anchor.style.setProperty("--ha_offsety", `${placeholder.offsetTop}px`);
|
||||
}
|
||||
}
|
||||
|
||||
setFontProp(heading, anchor) {
|
||||
let placeholder = heading.querySelector(`.${HeadingAnchors.classes.placeholder}`);
|
||||
if(placeholder) {
|
||||
let style = getComputedStyle(placeholder);
|
||||
let props = ["font-weight", "font-size", "line-height", "font-family"];
|
||||
let [weight, size, lh, family] = props.map(name => style.getPropertyValue(name));
|
||||
anchor.style.setProperty("font", `${weight} ${size}/${lh} ${family}`);
|
||||
let vars = style.getPropertyValue("font-variation-settings");
|
||||
if(vars) {
|
||||
anchor.style.setProperty("font-variation-settings", vars);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getAccessibleTextPrefix() {
|
||||
// Useful for i18n
|
||||
return this.getAttribute(HeadingAnchors.attributes.prefix) || "Jump to section titled";
|
||||
}
|
||||
|
||||
getContent() {
|
||||
if(this.hasAttribute(HeadingAnchors.attributes.content)) {
|
||||
return this.getAttribute(HeadingAnchors.attributes.content);
|
||||
}
|
||||
return "#";
|
||||
}
|
||||
|
||||
// Placeholder nests inside of heading
|
||||
getPlaceholderElement() {
|
||||
let ph = document.createElement("span");
|
||||
ph.setAttribute("aria-hidden", true);
|
||||
ph.classList.add(HeadingAnchors.classes.placeholder);
|
||||
let content = this.getContent();
|
||||
if(content) {
|
||||
ph.textContent = content;
|
||||
}
|
||||
|
||||
ph.addEventListener("mouseover", (e) => {
|
||||
let placeholder = e.target.closest(`.${HeadingAnchors.classes.placeholder}`);
|
||||
if(placeholder) {
|
||||
this.positionAnchorFromPlaceholder(placeholder);
|
||||
}
|
||||
});
|
||||
|
||||
return ph;
|
||||
}
|
||||
|
||||
getAnchorElement(heading) {
|
||||
let anchor = document.createElement("a");
|
||||
anchor.href = `#${heading.id}`;
|
||||
anchor.classList.add(HeadingAnchors.classes.anchor);
|
||||
|
||||
let content = this.getContent();
|
||||
anchor.innerHTML = `<span class="${HeadingAnchors.classes.srOnly}">${this.getAccessibleTextPrefix()}: ${heading.textContent}</span>${content ? `<span aria-hidden="true">${content}</span>` : ""}`;
|
||||
|
||||
anchor.addEventListener("focus", e => {
|
||||
let anchor = e.target.closest(`.${HeadingAnchors.classes.anchor}`);
|
||||
if(anchor) {
|
||||
this.positionAnchor(anchor);
|
||||
}
|
||||
});
|
||||
|
||||
anchor.addEventListener("mouseover", (e) => {
|
||||
// when CSS anchor positioning is supported, this is only used to set the font
|
||||
let anchor = e.target.closest(`.${HeadingAnchors.classes.anchor}`);
|
||||
this.positionAnchor(anchor);
|
||||
});
|
||||
|
||||
return anchor;
|
||||
}
|
||||
|
||||
get headings() {
|
||||
return this.querySelectorAll(this.selector.split(",").map(entry => `${entry.trim()}[id]`));
|
||||
}
|
||||
|
||||
get selector() {
|
||||
return this.getAttribute("selector") || HeadingAnchors.defaultSelector;
|
||||
}
|
||||
}
|
||||
|
||||
HeadingAnchors.register();
|
||||
|
||||
export { HeadingAnchors }
|
||||
BIN
favicon-16x16.png
Normal file
BIN
favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 753 B |
BIN
favicon-32x32.png
Normal file
BIN
favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
100
feed/feed.xml
Normal file
100
feed/feed.xml
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<?xml-stylesheet href="pretty-atom-feed.xsl" type="text/xsl"?>
|
||||
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
|
||||
|
||||
<title>Web Blog</title>
|
||||
<subtitle>Musings of a neurodivergent cynic.</subtitle>
|
||||
<link href="https://webblog.anthonyhughes.art/feed/feed.xml" rel="self" />
|
||||
<link href="https://webblog.anthonyhughes.art/" />
|
||||
<updated>2023-01-23T00:00:00Z</updated>
|
||||
<id>https://webblog.anthonyhughes.art/</id>
|
||||
<author>
|
||||
<name>Anthony Hughes</name>
|
||||
</author>
|
||||
<entry>
|
||||
<title>This is a fifth post (draft)</title>
|
||||
<link href="https://webblog.anthonyhughes.art/blog/fifthpost/" />
|
||||
<updated>2023-01-23T00:00:00Z</updated>
|
||||
<id>https://webblog.anthonyhughes.art/blog/fifthpost/</id>
|
||||
<content type="html"><p>This is a draft post</p>
|
||||
</content>
|
||||
</entry>
|
||||
<entry>
|
||||
<title>This is my fourth post (draft)</title>
|
||||
<link href="https://webblog.anthonyhughes.art/blog/fourthpost/" />
|
||||
<updated>2018-09-30T00:00:00Z</updated>
|
||||
<id>https://webblog.anthonyhughes.art/blog/fourthpost/</id>
|
||||
<content type="html"><p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
|
||||
<picture><source type="image/avif" srcset="https://webblog.anthonyhughes.art/.11ty/image/?src=content%2Fblog%2Ffourthpost%2Fpossum.png&width=350&format=avif&via=transform 350w"><source type="image/webp" srcset="https://webblog.anthonyhughes.art/.11ty/image/?src=content%2Fblog%2Ffourthpost%2Fpossum.png&width=350&format=webp&via=transform 350w"><img loading="lazy" decoding="async" src="https://webblog.anthonyhughes.art/.11ty/image/?src=content%2Fblog%2Ffourthpost%2Fpossum.png&width=350&format=png&via=transform" alt="A possum parent and two possum kids hanging from the iconic red balloon" width="350" height="685"></picture>
|
||||
<h2 id="section-header">Section Header</h2>
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>
|
||||
</content>
|
||||
</entry>
|
||||
<entry>
|
||||
<title>This is my third post. (draft)</title>
|
||||
<link href="https://webblog.anthonyhughes.art/blog/thirdpost/" />
|
||||
<updated>2018-08-24T00:00:00Z</updated>
|
||||
<id>https://webblog.anthonyhughes.art/blog/thirdpost/</id>
|
||||
<content type="html"><p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
|
||||
<h2 id="code">Code</h2>
|
||||
<h3 id="this-is-a-very-long-heading-that-i-want-to-wrap-this-is-a-very-long-heading-that-i-want-to-wrap-this-is-a-very-long-heading-that-i-want-to-wrap-this-is-a-very-long-heading-that-i-want-to-wrap">This is a very long heading that I want to wrap This is a very long heading that I want to wrap This is a very long heading that I want to wrap This is a very long heading that I want to wrap</h3>
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
|
||||
<pre class="language-js" tabindex="0"><code class="language-js"><span class="token comment">// this is a command</span>
|
||||
<span class="token keyword">function</span> <span class="token function">myCommand</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">let</span> counter <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||||
counter<span class="token operator">++</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token comment">// Test with a line break above this line.</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
|
||||
<h3 id="heading-with-a-link">Heading with a <a href="https://webblog.anthonyhughes.art/blog/thirdpost/#code">link</a></h3>
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
|
||||
<pre><code>// this is a command
|
||||
function myCommand() {
|
||||
let counter = 0;
|
||||
counter++;
|
||||
}
|
||||
|
||||
// Test with a line break above this line.
|
||||
console.log('Test');
|
||||
</code></pre>
|
||||
<h2 id="section-header">Section Header</h2>
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>
|
||||
</content>
|
||||
</entry>
|
||||
<entry>
|
||||
<title>This is my second post with a much longer title. (draft)</title>
|
||||
<link href="https://webblog.anthonyhughes.art/blog/secondpost/" />
|
||||
<updated>2018-07-04T00:00:00Z</updated>
|
||||
<id>https://webblog.anthonyhughes.art/blog/secondpost/</id>
|
||||
<content type="html"><p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
|
||||
<h2 id="section-header">Section Header</h2>
|
||||
<p><a href="https://webblog.anthonyhughes.art/blog/firstpost/">First post</a>
|
||||
<a href="https://webblog.anthonyhughes.art/blog/thirdpost/">Third post</a></p>
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>
|
||||
</content>
|
||||
</entry>
|
||||
<entry>
|
||||
<title>This is my first post.</title>
|
||||
<link href="https://webblog.anthonyhughes.art/blog/firstpost/" />
|
||||
<updated>2018-05-01T00:00:00Z</updated>
|
||||
<id>https://webblog.anthonyhughes.art/blog/firstpost/</id>
|
||||
<content type="html"><p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
|
||||
<h2 id="section-header">Section Header</h2>
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>
|
||||
<pre class="language-diff-js" tabindex="0"><code class="language-diff-js"><span class="token unchanged language-js"><span class="token prefix unchanged"> </span><span class="token comment">// this is a command</span>
|
||||
<span class="token prefix unchanged"> </span><span class="token keyword">function</span> <span class="token function">myCommand</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="token inserted-sign inserted language-js"><span class="token prefix inserted">+</span> <span class="token keyword">let</span> counter <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||||
</span><span class="token deleted-sign deleted language-js"><span class="token prefix deleted">-</span> <span class="token keyword">let</span> counter <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||||
</span><span class="token unchanged language-js"><span class="token prefix unchanged"> </span> counter<span class="token operator">++</span><span class="token punctuation">;</span>
|
||||
<span class="token prefix unchanged"> </span><span class="token punctuation">}</span>
|
||||
</span>
|
||||
<span class="token unchanged language-js"><span class="token prefix unchanged"> </span><span class="token comment">// Test with a line break above this line.</span>
|
||||
<span class="token prefix unchanged"> </span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</content>
|
||||
</entry>
|
||||
</feed>
|
||||
89
feed/pretty-atom-feed.xsl
Normal file
89
feed/pretty-atom-feed.xsl
Normal file
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
0
img/.gitkeep
Normal file
0
img/.gitkeep
Normal file
BIN
img/57mU09TOH6-960.avif
Normal file
BIN
img/57mU09TOH6-960.avif
Normal file
Binary file not shown.
1
img/57mU09TOH6-960.svg
Normal file
1
img/57mU09TOH6-960.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 433 KiB |
BIN
img/57mU09TOH6-960.webp
Normal file
BIN
img/57mU09TOH6-960.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
img/7PK01HM_My-300.avif
Normal file
BIN
img/7PK01HM_My-300.avif
Normal file
Binary file not shown.
1
img/7PK01HM_My-300.svg
Normal file
1
img/7PK01HM_My-300.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 170 KiB |
BIN
img/7PK01HM_My-300.webp
Normal file
BIN
img/7PK01HM_My-300.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
1
img/anthonyhughesdotart-hero.svg
Normal file
1
img/anthonyhughesdotart-hero.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 433 KiB |
646
index.html
Normal file
646
index.html
Normal file
|
|
@ -0,0 +1,646 @@
|
|||
<!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="/.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="/" 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-3-posts">Latest 3 Posts</h1>
|
||||
|
||||
|
||||
|
||||
<ol reversed="" class="postlist" style="--postlist-index: 6">
|
||||
<li class="postlist-item">
|
||||
<a href="/blog/fifthpost/" class="postlist-link">This is a fifth post (draft)</a>
|
||||
<time class="postlist-date" datetime="2023-01-23">January 2023</time>
|
||||
</li>
|
||||
<li class="postlist-item">
|
||||
<a href="/blog/fourthpost/" class="postlist-link">This is my fourth post (draft)</a>
|
||||
<time class="postlist-date" datetime="2018-09-30">September 2018</time>
|
||||
</li>
|
||||
<li class="postlist-item">
|
||||
<a href="/blog/thirdpost/" class="postlist-link">This is my third post. (draft)</a>
|
||||
<time class="postlist-date" datetime="2018-08-24">August 2018</time>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>2 more posts can be found in <a href="/blog/">the archive</a>.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</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 `/` was built on 2026-05-29T18:56:25.094Z -->
|
||||
<script type="module" src="/dist/cC8wS6ZjFU.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1
site.webmanifest
Normal file
1
site.webmanifest
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
||||
73
sitemap.xml
Normal file
73
sitemap.xml
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
|
||||
|
||||
|
||||
<url>
|
||||
<loc>https://webblog.anthonyhughes.art/blog/firstpost/</loc>
|
||||
<lastmod>2018-05-01</lastmod>
|
||||
</url>
|
||||
|
||||
|
||||
|
||||
<url>
|
||||
<loc>https://webblog.anthonyhughes.art/blog/secondpost/</loc>
|
||||
<lastmod>2018-07-04</lastmod>
|
||||
</url>
|
||||
|
||||
|
||||
|
||||
<url>
|
||||
<loc>https://webblog.anthonyhughes.art/blog/thirdpost/</loc>
|
||||
<lastmod>2018-08-24</lastmod>
|
||||
</url>
|
||||
|
||||
|
||||
|
||||
<url>
|
||||
<loc>https://webblog.anthonyhughes.art/blog/fourthpost/</loc>
|
||||
<lastmod>2018-09-30</lastmod>
|
||||
</url>
|
||||
|
||||
|
||||
|
||||
<url>
|
||||
<loc>https://webblog.anthonyhughes.art/blog/fifthpost/</loc>
|
||||
<lastmod>2023-01-23</lastmod>
|
||||
</url>
|
||||
|
||||
|
||||
|
||||
<url>
|
||||
<loc>https://webblog.anthonyhughes.art/about/</loc>
|
||||
<lastmod>2026-05-29</lastmod>
|
||||
</url>
|
||||
|
||||
|
||||
|
||||
<url>
|
||||
<loc>https://webblog.anthonyhughes.art/blog/</loc>
|
||||
<lastmod>2026-05-29</lastmod>
|
||||
</url>
|
||||
|
||||
|
||||
|
||||
<url>
|
||||
<loc>https://webblog.anthonyhughes.art/</loc>
|
||||
<lastmod>2026-05-29</lastmod>
|
||||
</url>
|
||||
|
||||
|
||||
|
||||
<url>
|
||||
<loc>https://webblog.anthonyhughes.art/tags/</loc>
|
||||
<lastmod>2026-05-29</lastmod>
|
||||
</url>
|
||||
|
||||
|
||||
|
||||
<url>
|
||||
<loc>https://webblog.anthonyhughes.art/feed/feed.xml</loc>
|
||||
<lastmod>2026-05-29</lastmod>
|
||||
</url>
|
||||
|
||||
</urlset>
|
||||
629
tags/another-tag/index.html
Normal file
629
tags/another-tag/index.html
Normal file
|
|
@ -0,0 +1,629 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tagged 'another tag' ➟ 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="/.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>
|
||||
<!--
|
||||
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="tagged-another-tag">Tagged “another tag”</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>
|
||||
|
||||
|
||||
<p>See <a href="/tags/">all tags</a>.</p>
|
||||
|
||||
|
||||
</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 `/tags/another-tag/` was built on 2026-05-29T18:56:25.094Z -->
|
||||
<script type="module" src="/dist/cC8wS6ZjFU.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
634
tags/index.html
Normal file
634
tags/index.html
Normal file
|
|
@ -0,0 +1,634 @@
|
|||
<!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="/.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>
|
||||
<!--
|
||||
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="tags">Tags</h1>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="/tags/another-tag/" class="post-tag">another tag</a></li>
|
||||
|
||||
|
||||
<li><a href="/tags/number-2/" class="post-tag">number 2</a></li>
|
||||
|
||||
|
||||
<li><a href="/tags/posts-with-two-tags/" class="post-tag">posts with two tags</a></li>
|
||||
|
||||
|
||||
<li><a href="/tags/second-tag/" class="post-tag">second tag</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 `/tags/` was built on 2026-05-29T18:56:25.094Z -->
|
||||
<script type="module" src="/dist/cC8wS6ZjFU.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
629
tags/number-2/index.html
Normal file
629
tags/number-2/index.html
Normal file
|
|
@ -0,0 +1,629 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tagged 'number 2' ➟ 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="/.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>
|
||||
<!--
|
||||
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="tagged-number-2">Tagged “number 2”</h1>
|
||||
|
||||
|
||||
<ol reversed="" class="postlist" style="--postlist-index: 2">
|
||||
<li class="postlist-item">
|
||||
<a href="/blog/secondpost/" class="postlist-link">This is my second post with a much longer title. (draft)</a>
|
||||
<time class="postlist-date" datetime="2018-07-04">July 2018</time>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<p>See <a href="/tags/">all tags</a>.</p>
|
||||
|
||||
|
||||
</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 `/tags/number-2/` was built on 2026-05-29T18:56:25.137Z -->
|
||||
<script type="module" src="/dist/cC8wS6ZjFU.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
629
tags/posts-with-two-tags/index.html
Normal file
629
tags/posts-with-two-tags/index.html
Normal file
|
|
@ -0,0 +1,629 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tagged 'posts with two tags' ➟ 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="/.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>
|
||||
<!--
|
||||
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="tagged-posts-with-two-tags">Tagged “posts with two tags”</h1>
|
||||
|
||||
|
||||
<ol reversed="" class="postlist" style="--postlist-index: 2">
|
||||
<li class="postlist-item">
|
||||
<a href="/blog/thirdpost/" class="postlist-link">This is my third post. (draft)</a>
|
||||
<time class="postlist-date" datetime="2018-08-24">August 2018</time>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<p>See <a href="/tags/">all tags</a>.</p>
|
||||
|
||||
|
||||
</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 `/tags/posts-with-two-tags/` was built on 2026-05-29T18:56:25.142Z -->
|
||||
<script type="module" src="/dist/cC8wS6ZjFU.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
633
tags/second-tag/index.html
Normal file
633
tags/second-tag/index.html
Normal file
|
|
@ -0,0 +1,633 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tagged 'second tag' ➟ 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="/.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>
|
||||
<!--
|
||||
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="tagged-second-tag">Tagged “second tag”</h1>
|
||||
|
||||
|
||||
<ol reversed="" class="postlist" style="--postlist-index: 3">
|
||||
<li class="postlist-item">
|
||||
<a href="/blog/fourthpost/" class="postlist-link">This is my fourth post (draft)</a>
|
||||
<time class="postlist-date" datetime="2018-09-30">September 2018</time>
|
||||
</li>
|
||||
<li class="postlist-item">
|
||||
<a href="/blog/thirdpost/" class="postlist-link">This is my third post. (draft)</a>
|
||||
<time class="postlist-date" datetime="2018-08-24">August 2018</time>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<p>See <a href="/tags/">all tags</a>.</p>
|
||||
|
||||
|
||||
</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 `/tags/second-tag/` was built on 2026-05-29T18:56:25.140Z -->
|
||||
<script type="module" src="/dist/cC8wS6ZjFU.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue