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