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

772 lines
19 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>This is my second post with a much longer title. (draft) ➟ Anthony Hughes . art</title>
<meta name="description" content="This is a post on My Blog about leveraging agile frameworks.">
<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="Web Blog">
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<style>/* This is an arbitrary CSS string added to the bundle */
/* Fonts */
/* ===== Atkinson Hyperlegible Next ===== */
@font-face {
font-family: 'Atkinson Hyperlegible Next';
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-ExtraLight.woff2') format('woff2');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2') format('woff2');
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-LightItalic.woff2') format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-RegularItalic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-MediumItalic.woff2') format('woff2');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-SemiBoldItalic.woff2') format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-BoldItalic.woff2') format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-ExtraBold.woff2') format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2') format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
}
/* ===== Atkinson Hyperlegible Mono ===== */
@font-face {
font-family: 'Atkinson Hyperlegible Mono';
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-ExtraLight.woff2') format('woff2');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Mono';
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-ExtraLightItalic.woff2') format('woff2');
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Mono';
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Mono';
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-LightItalic.woff2') format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Mono';
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Mono';
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-RegularItalic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Mono';
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Mono';
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-MediumItalic.woff2') format('woff2');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Mono';
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Mono';
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-SemiBoldItalic.woff2') format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Mono';
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Mono';
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-BoldItalic.woff2') format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Mono';
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-ExtraBold.woff2') format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Mono';
src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-ExtraBoldItalic.woff2') format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
}
/* Defaults */
:root {
--font-family: Atkinson Hyperlegible Next, -apple-system, system-ui, sans-serif;
--font-family-monospace: Atkinson Hyperlegible Mono, Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
}
/* Theme colors */
:root {
--color-gray-20: #e0e0e0;
--color-gray-50: #C0C0C0;
--color-gray-90: #333;
--color-aha-text: #29294f;
--background-color: #fff8ef;
--text-color: var(--color-aha-text);
--text-color-link: #29294f;
--text-color-link-active: #29294f;
--text-color-link-visited: #17050F;
--syntax-tab-size: 2;
}
@media (prefers-color-scheme: dark) {
:root {
--color-gray-20: #e0e0e0;
--color-gray-50: #C0C0C0;
--color-gray-90: #dad8d8;
/* --text-color is assigned to --color-gray-_ above */
--text-color-link: #1493fb;
--text-color-link-active: #6969f7;
--text-color-link-visited: #a6a6f8;
--background-color: #15202b;
}
}
/* Global stylesheet */
* {
box-sizing: border-box;
}
@view-transition {
navigation: auto;
}
html,
body {
padding: 0;
margin: 0 auto;
font-family: var(--font-family);
color: var(--text-color);
background-color: var(--background-color);
}
html {
overflow-y: scroll;
}
body {
max-width: 40em;
}
/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
/* Fluid images via https://www.zachleat.com/web/fluid-images/ */
img{
max-width: 100%;
}
img[width][height] {
height: auto;
}
img[src$=".svg"] {
width: 100%;
height: auto;
max-width: none;
}
video,
iframe {
width: 100%;
height: auto;
}
iframe {
aspect-ratio: 16/9;
}
p:last-child {
margin-bottom: 0;
}
p {
line-height: 1.5;
}
li {
line-height: 1.5;
}
a[href] {
color: var(--text-color-link);
}
a[href]:visited {
color: var(--text-color-link-visited);
}
a[href]:hover,
a[href]:active {
color: var(--text-color-link-active);
}
main,
footer {
padding: 1rem;
}
main :first-child {
margin-top: 0;
}
header {
border-bottom: 1px dashed var(--color-gray-20);
}
#skip-link {
text-decoration: none;
background: var(--background-color);
color: var(--text-color);
padding: 0.5rem 1rem;
border: 1px solid var(--color-gray-90);
border-radius: 2px;
}
/* Prevent visually-hidden skip link fom pushing content around when focused */
#skip-link.visually-hidden:focus {
position: absolute;
top: 1rem;
left: 1rem;
/* Ensure it is positioned on top of everything else when it is shown */
z-index: 999;
}
.links-nextprev {
display: flex;
justify-content: space-between;
gap: .5em 1em;
list-style: "";
border-top: 1px dashed var(--color-gray-20);
padding: 1em 0;
}
.links-nextprev > * {
flex-grow: 1;
}
.links-nextprev-next {
text-align: right;
}
table {
margin: 1em 0;
}
table td,
table th {
padding-right: 1em;
}
pre,
code {
font-family: var(--font-family-monospace);
}
pre:not([class*="language-"]) {
margin: .5em 0;
line-height: 1.375; /* 22px /16 */
-moz-tab-size: var(--syntax-tab-size);
-o-tab-size: var(--syntax-tab-size);
tab-size: var(--syntax-tab-size);
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
overflow-x: auto;
}
code {
word-break: break-all;
}
/* Header */
header {
display: flex;
gap: 1em;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 1em;
}
.home-link {
flex-grow: 1;
font-size: 1em; /* 16px /16 */
font-weight: 700;
}
.home-link:link:not(:hover) {
text-decoration: none;
}
/* Nav */
.nav {
display: flex;
gap: .5em 1em;
padding: 0;
margin: 0;
list-style: none;
}
.nav-item {
display: inline-block;
}
.nav-item a[href]:not(:hover) {
text-decoration: none;
}
.nav a[href][aria-current="page"] {
text-decoration: underline;
}
/* Posts list */
.postlist {
counter-reset: start-from var(--postlist-index);
list-style: none;
padding: 0;
padding-left: 1.5rem;
}
.postlist-item {
display: flex;
flex-wrap: wrap;
align-items: baseline;
counter-increment: start-from -1;
margin-bottom: 1em;
}
.postlist-item:before {
display: inline-block;
pointer-events: none;
content: "" counter(start-from, decimal-leading-zero) ". ";
line-height: 100%;
text-align: right;
margin-left: -1.5rem;
}
.postlist-date,
.postlist-item:before {
font-size: 0.8125em; /* 13px /16 */
color: var(--color-gray-90);
}
.postlist-date {
word-spacing: -0.5px;
}
.postlist-link {
font-size: 1.1875em; /* 19px /16 */
font-weight: 700;
flex-basis: calc(100% - 1.5rem);
padding-left: .25em;
padding-right: .5em;
text-underline-position: from-font;
text-underline-offset: 0;
text-decoration-thickness: 1px;
}
.postlist-item-active .postlist-link {
font-weight: bold;
}
/* Tags */
.post-tag {
display: inline-flex;
align-items: center;
justify-content: center;
text-transform: capitalize;
font-style: italic;
}
.postlist-item > .post-tag {
align-self: center;
}
/* Tags list */
.post-metadata {
display: inline-flex;
flex-wrap: wrap;
gap: .5em;
list-style: none;
padding: 0;
margin: 0;
}
.post-metadata time {
margin-right: 1em;
}
/**
* okaidia theme for JavaScript, CSS and HTML
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
* @author ocodia
*/
code[class*="language-"],
pre[class*="language-"] {
color: #f8f8f2;
background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #272822;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #8292a2;
}
.token.punctuation {
color: #f8f8f2;
}
.token.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
color: #f92672;
}
.token.boolean,
.token.number {
color: #ae81ff;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #a6e22e;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: #f8f8f2;
}
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
color: #e6db74;
}
.token.keyword {
color: #66d9ef;
}
.token.regex,
.token.important {
color: #fd971f;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
/*
* New diff- syntax
*/
pre[class*="language-diff-"] {
--eleventy-code-padding: 1.25em;
padding-left: var(--eleventy-code-padding);
padding-right: var(--eleventy-code-padding);
}
.token.deleted {
background-color: hsl(0, 51%, 37%);
color: inherit;
}
.token.inserted {
background-color: hsl(126, 31%, 39%);
color: inherit;
}
/* Make the + and - characters unselectable for copy/paste */
.token.prefix.unchanged,
.token.prefix.inserted,
.token.prefix.deleted {
-webkit-user-select: none;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding-top: 2px;
padding-bottom: 2px;
}
.token.prefix.inserted,
.token.prefix.deleted {
width: var(--eleventy-code-padding);
background-color: rgba(0,0,0,.2);
}
/* Optional: full-width background color */
.token.inserted:not(.prefix),
.token.deleted:not(.prefix) {
display: block;
margin-left: calc(-1 * var(--eleventy-code-padding));
margin-right: calc(-1 * var(--eleventy-code-padding));
text-decoration: none; /* override del, ins, mark defaults */
color: inherit; /* override del, ins, mark defaults */
}</style>
</head>
<body>
<a href="#main" id="skip-link" class="visually-hidden">Skip to main content</a>
<header>
<div style="text-align:center;">
<picture><source type="image/avif" srcset="/.11ty/image/?src=content%2Fimages%2Fanthonyhughesdotart-hero.svg&width=960&format=avif&via=transform 960w"><source type="image/webp" srcset="/.11ty/image/?src=content%2Fimages%2Fanthonyhughesdotart-hero.svg&width=960&format=webp&via=transform 960w"><img loading="lazy" decoding="async" src="/.11ty/image/?src=content%2Fimages%2Fanthonyhughesdotart-hero.svg&width=960&format=svg&via=transform" alt="Anthony Hughes dot Art Hero Image" style="max-width:50%;" width="960" height="1277"></picture>
</div>
<h2 id="web-blog"><a href="/" class="home-link">Web Blog</a></h2>
<nav>
<h2 class="visually-hidden" id="top-level-navigation-menu">Top level navigation menu</h2>
<ul class="nav">
<li class="nav-item"><a href="/">Home</a></li>
<li class="nav-item"><a href="/about/">About</a></li>
<li class="nav-item"><a href="/blog/">Archive</a></li>
<li class="nav-item"><a href="/feed/feed.xml">Feed</a></li>
<li class="nav-item"><a href="" aria="">Subscribe</a></li>
</ul>
</nav>
</header>
<main id="main">
<heading-anchors>
<h1 id="this-is-my-second-post-with-a-much-longer-title-draft">This is my second post with a much longer title. (draft)</h1>
<ul class="post-metadata">
<li><time datetime="2018-07-04">04 July 2018</time></li>
<li><a href="/tags/number-2/" class="post-tag">number 2</a></li>
</ul>
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
<h2 id="section-header">Section Header</h2>
<p><a href="/blog/firstpost/">First post</a>
<a href="/blog/thirdpost/">Third post</a></p>
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>
<ul class="links-nextprev"><li class="links-nextprev-prev">← Previous<br> <a href="/blog/firstpost/">This is my first post.</a></li><li class="links-nextprev-next">Next →<br><a href="/blog/thirdpost/">This is my third post. (draft)</a></li>
</ul>
</heading-anchors>
</main>
<footer style="margin-top:8rem;">
<div style="text-align:center">
<picture><source type="image/avif" srcset="/.11ty/image/?src=content%2Fimages%2Ffooter.svg&width=300&format=avif&via=transform 300w"><source type="image/webp" srcset="/.11ty/image/?src=content%2Fimages%2Ffooter.svg&width=300&format=webp&via=transform 300w"><img loading="lazy" decoding="async" src="/.11ty/image/?src=content%2Fimages%2Ffooter.svg&width=300&format=svg&via=transform" alt="Anthony Hughes dot Art Footer Image" style="max-width:100%;" width="300" height="100"></picture>
<p style="text-align:center; font-size:small;"> Made in 🏴󠁧󠁢󠁳󠁣󠁴󠁿 <br>All content licensed <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons BY-NC-ND 4.0</a> unless otherwise indicated.</p>
</div>
</footer>
<!-- This page `/blog/secondpost/` was built on 2026-05-29T18:56:25.093Z -->
<script type="module" src="/dist/cC8wS6ZjFU.js"></script>
</body>
</html>