anthonyhughes.art/index.html
2026-02-07 21:30:41 +00:00

458 lines
10 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anthony Hughes</title>
<meta name="description" content="dimfrent">
<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="Anthony Hughes">
<link rel="icon" type="image/x-icon" href="../img/favicon.ico">
<style>/* This is an arbitrary CSS string added to the bundle */
@font-face {
font-family: 'AtkinsonHyperlegibleNext-Regular';
src: url('/fonts/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2');
font-display: swap;
}
/* Defaults */
:root {
--font-family: AtkinsonHyperlegibleNext-Regular, -apple-system, system-ui, sans-serif;
--font-family-monospace: 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;
--background-color: #fff;
--text-color: var(--color-gray-90);
--text-color-link: #082840;
--text-color-link-active: #5f2b48;
--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;
}
/* Hallowquest list */
.hallowquestlist {
counter-reset: start-from var(--postlist-index);
list-style: none;
padding: 0;
padding-left: 1.5rem;
justify-content: center;
}
.hallowquest-item {
display: flex;
flex-wrap: wrap;
align-items: baseline;
counter-increment: start-from -1;
margin-bottom: 1em;
justify-content: space-between;
}
.hallowquest-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;
margin-right: 1.5rem;
}
.hallowquest-date,
.hallowquest-item:before {
font-size: 0.8125em; /* 13px /16 */
color: var(--color-gray-90);
}
.hallowquest-date {
word-spacing: -0.5px;
margin-left: 1.5rem;
}
.hallowquest-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;
}
.hallowquest-item-active .hallowquest-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>
<!-- <a href="/" class="home-link">Anthony Hughes</a> -->
<!-- UNCOMMENT TO SHOW NAVIGATION MENU
<nav>
<h2 class="visually-hidden">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="/blog/">Archive</a></li>
<li class="nav-item"><a href="/hallowquest/">Hallowquest</a></li>
<li class="nav-item"><a href="/about/">About</a></li>
<li class="nav-item"><a href="/feed/feed.xml">Feed</a></li>
</ul>
</nav> -->
</header>
<main id="main">
<heading-anchors>
<div style="text-align:center;">
<img src="img/anthonyhughesdotart-logo.png">
<p>Im a conservationist, photographer, artist, and a bit of a trickster. I am a long-time free and open source technology advocate with over a decade in the industry, but am now a burgeoning luddite toward the present direction so-called “thought leaders” in tech are taking us. I use photography, art and other creative work as an outlet for my frustrations and to advocate for change. From Canada, I currently live in Scotland.</p>
<h1 id="photography">Photography</h1>
<p>This is a new website Im building to showcase my work for those interested. Ill have more to share soon but in the meantime you can find my past work on <a href="https://flickr.com/photos/201213686@N04">flickr</a>:</p><p>
<!-- Embed Flickr Widget -->
<a data-flickr-embed="true" data-context="true" href="https://www.flickr.com/photos/lucidcocoon/54976324188/in/dateposted-public" title="CC4.4 Water"><img src="https://live.staticflickr.com/65535/54976324188_03371b065e.jpg" width="500" height="333" alt="CC4.4 Water"></a><script async="" src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
</p><h1 id="other-projects">Other Projects</h1>
<p><a href="https://buteconnected.lucidcocoon.scot">Bute Connected</a></p>
<p><a href="https://notchee.art">Notchee Comic</a></p>
<!-- Hallowquest -->
<h1 id="hallowquest">Hallowquest</h1>
<p><em>A journey of personal self-discovery<br>(2026)</em></p>
<ol reversed="" class="hallowquestlist" style="--postlist-index: 6;">
<li class="hallowquest-item">
<a href="/hallowquest/the-seeker-in-the-wasteland-4/" class="hallowquestlist-link">The Seeker in the Wasteland IV</a>
<time class="hallowquest-date" datetime="2026-01-19">19 January 2026</time>
</li>
<li class="hallowquest-item">
<a href="/hallowquest/the-seeker-in-the-wasteland-3/" class="hallowquestlist-link">The Seeker in the Wasteland III</a>
<time class="hallowquest-date" datetime="2026-01-18">18 January 2026</time>
</li>
<li class="hallowquest-item">
<a href="/hallowquest/preparation-3/" class="hallowquestlist-link">Preparation III</a>
<time class="hallowquest-date" datetime="2026-01-03">03 January 2026</time>
</li>
</ol>
<div style="text-align:center; margin-top:3rem;"><a href="/"> < return home</a></div>
<p>2 more journal logs can be found <a href="/hallowquest/">here</a>.</p>
</div>
</heading-anchors>
</main>
<footer style="text-align:center;">
<p>***</p>
<p>
<em>Designed and powered by <a href="https://anthonyhughes.art">me</a></em>
</p>
</footer>
<!-- This page `/` was built on 2026-01-20T23:03:25.821Z -->
<script type="module" src="/dist/cC8wS6ZjFU.js"></script>
</body>
</html>