fix(a11y): improve colour contrast and fix semantic heading elements
- Bump all post-type label colours from -600 to -700 (light) and -400 to -300 (dark) in blog.njk to meet WCAG AA/AAA contrast ratios (green/teal/sky labels were failing AA at ~3-4:1) - Replace four <p role="heading" aria-level="2"> in footer with real <h2> elements for robust screen-reader support - Bump footer link text from surface-600 to surface-700 (light) and surface-400 to surface-300 (dark) - Update hero.njk accent job-title and "Read more" link from accent-600 to accent-700 / accent-400 to accent-300 - Update Tailwind typography prose link token from accent-600/400 to accent-700/300 - Tighten .p-category and .post-meta base styles in tailwind.css (surface-600→700 light, surface-300→200 / surface-400→300) - Bump hashtag link colours in tailwind.css (accent-600→700) - Fix sparkline colour in notes.njk (teal-600→700 / teal-400→300) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
svemagie
@@ -39,7 +39,7 @@
|
||||
<a href="{{ authorUrl }}" class="p-name u-url u-uid hover:text-accent-600 dark:hover:text-accent-400" rel="me">{{ authorName }}</a>
|
||||
</h1>
|
||||
{% if authorTitle %}
|
||||
<p class="p-job-title text-lg sm:text-xl text-accent-600 dark:text-accent-400 mb-3 sm:mb-4">
|
||||
<p class="p-job-title text-lg sm:text-xl text-accent-700 dark:text-accent-300 mb-3 sm:mb-4">
|
||||
{{ authorTitle }}
|
||||
</p>
|
||||
{% endif %}
|
||||
@@ -51,7 +51,7 @@
|
||||
{% if siteDescription %}
|
||||
<p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4 sm:mb-6">
|
||||
{{ siteDescription }}
|
||||
<a href="/about/" class="text-accent-600 dark:text-accent-400 hover:underline font-medium">Read more →</a>
|
||||
<a href="/about/" class="text-accent-700 dark:text-accent-300 hover:underline font-medium">Read more →</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
|
||||
@@ -333,45 +333,45 @@
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
|
||||
{# Navigate #}
|
||||
<div>
|
||||
<p class="text-sm font-semibold uppercase tracking-wider text-surface-600 dark:text-surface-400 mb-3" role="heading" aria-level="2">Navigate</p>
|
||||
<h2 class="text-sm font-semibold uppercase tracking-wider text-surface-700 dark:text-surface-300 mb-3">Navigate</h2>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Home</a></li>
|
||||
<li><a href="/about/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">About</a></li>
|
||||
<li><a href="/cv/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">CV</a></li>
|
||||
<li x-data="{ show: false }" x-show="show" x-cloak @indiekit:auth.window="show = $event.detail.loggedIn"><a href="/posts" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Dashboard</a></li>
|
||||
<li><a href="/" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Home</a></li>
|
||||
<li><a href="/about/" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">About</a></li>
|
||||
<li><a href="/cv/" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">CV</a></li>
|
||||
<li x-data="{ show: false }" x-show="show" x-cloak @indiekit:auth.window="show = $event.detail.loggedIn"><a href="/posts" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Dashboard</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{# Content #}
|
||||
<div>
|
||||
<p class="text-sm font-semibold uppercase tracking-wider text-surface-600 dark:text-surface-400 mb-3" role="heading" aria-level="2">Content</p>
|
||||
<h2 class="text-sm font-semibold uppercase tracking-wider text-surface-700 dark:text-surface-300 mb-3">Content</h2>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="/blog/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Blog</a></li>
|
||||
<li><a href="/blog/" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Blog</a></li>
|
||||
{% for pt in enabledPostTypes %}
|
||||
<li><a href="{{ pt.path }}" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">{{ pt.label }}</a></li>
|
||||
<li><a href="{{ pt.path }}" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">{{ pt.label }}</a></li>
|
||||
{% endfor %}
|
||||
<li><a href="/digest/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Digest</a></li>
|
||||
<li><a href="/digest/" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Digest</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{# Connect #}
|
||||
<div>
|
||||
<p class="text-sm font-semibold uppercase tracking-wider text-surface-600 dark:text-surface-400 mb-3" role="heading" aria-level="2">Connect</p>
|
||||
<h2 class="text-sm font-semibold uppercase tracking-wider text-surface-700 dark:text-surface-300 mb-3">Connect</h2>
|
||||
<ul class="space-y-2">
|
||||
{% for social in site.social %}
|
||||
<li><a href="{{ social.url }}" rel="{{ social.rel }}" target="_blank" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline" aria-label="{{ social.name }} (opens in new tab)">{{ social.name }}</a></li>
|
||||
<li><a href="{{ social.url }}" rel="{{ social.rel }}" target="_blank" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline" aria-label="{{ social.name }} (opens in new tab)">{{ social.name }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{# Meta #}
|
||||
<div>
|
||||
<p class="text-sm font-semibold uppercase tracking-wider text-surface-600 dark:text-surface-400 mb-3" role="heading" aria-level="2">Meta</p>
|
||||
<h2 class="text-sm font-semibold uppercase tracking-wider text-surface-700 dark:text-surface-300 mb-3">Meta</h2>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="/feed.xml" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">RSS Feed</a></li>
|
||||
<li><a href="/feed.json" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">JSON Feed</a></li>
|
||||
<li><a href="/changelog/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Changelog</a></li>
|
||||
<li><a href="/feed.xml" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">RSS Feed</a></li>
|
||||
<li><a href="/feed.json" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">JSON Feed</a></li>
|
||||
<li><a href="/changelog/" class="text-sm text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center text-sm text-surface-600 dark:text-surface-400">Powered by <a href="https://getindiekit.com" class="hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Indiekit</a> + <a href="https://11ty.dev" class="hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Eleventy</a></p>
|
||||
<p class="text-center text-sm text-surface-700 dark:text-surface-300">Powered by <a href="https://getindiekit.com" class="hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Indiekit</a> + <a href="https://11ty.dev" class="hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Eleventy</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
|
||||
34
blog.njk
34
blog.njk
@@ -13,7 +13,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
|
||||
<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Blog</h1>
|
||||
{% set sparklineSvg = collections.listedPosts | postingFrequency %}
|
||||
{% if sparklineSvg %}
|
||||
<div class="flex-1 min-w-0 text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</div>
|
||||
<div class="flex-1 min-w-0 text-amber-700 dark:text-amber-300">{{ sparklineSvg | safe }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
|
||||
@@ -65,7 +65,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="post-meta">
|
||||
<span class="font-medium text-red-600 dark:text-red-400">Liked</span>
|
||||
<span class="font-medium text-red-700 dark:text-red-300">Liked</span>
|
||||
<time-difference><time class="dt-published font-mono text-sm" datetime="{{ post.date | isoDate }}">
|
||||
{{ post.date | dateDisplay }}
|
||||
</time></time-difference>
|
||||
@@ -90,7 +90,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
|
||||
{{ post.templateContent | safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<a class="u-url text-sm text-red-600 dark:text-red-400 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Like from ' + (post.date | dateDisplay)) }}">Permalink</a>
|
||||
<a class="u-url text-sm text-red-700 dark:text-red-300 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Like from ' + (post.date | dateDisplay)) }}">Permalink</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -104,7 +104,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="post-meta">
|
||||
<span class="font-medium text-amber-600 dark:text-amber-400">Bookmarked</span>
|
||||
<span class="font-medium text-amber-700 dark:text-amber-300">Bookmarked</span>
|
||||
<time-difference><time class="dt-published font-mono text-sm" datetime="{{ post.date | isoDate }}">
|
||||
{{ post.date | dateDisplay }}
|
||||
</time></time-difference>
|
||||
@@ -134,7 +134,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
|
||||
{{ post.templateContent | safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<a class="u-url text-sm text-amber-600 dark:text-amber-400 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Bookmark from ' + (post.date | dateDisplay)) }}">Permalink</a>
|
||||
<a class="u-url text-sm text-amber-700 dark:text-amber-300 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Bookmark from ' + (post.date | dateDisplay)) }}">Permalink</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -148,7 +148,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="post-meta">
|
||||
<span class="font-medium text-green-600 dark:text-green-400">Reposted</span>
|
||||
<span class="font-medium text-green-700 dark:text-green-300">Reposted</span>
|
||||
<time-difference><time class="dt-published font-mono text-sm" datetime="{{ post.date | isoDate }}">
|
||||
{{ post.date | dateDisplay }}
|
||||
</time></time-difference>
|
||||
@@ -173,7 +173,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
|
||||
{{ post.templateContent | safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<a class="u-url text-sm text-green-600 dark:text-green-400 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Repost from ' + (post.date | dateDisplay)) }}">Permalink</a>
|
||||
<a class="u-url text-sm text-green-700 dark:text-green-300 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Repost from ' + (post.date | dateDisplay)) }}">Permalink</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -187,7 +187,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="post-meta">
|
||||
<span class="font-medium text-sky-600 dark:text-sky-400">In reply to</span>
|
||||
<span class="font-medium text-sky-700 dark:text-sky-300">In reply to</span>
|
||||
<time-difference><time class="dt-published font-mono text-sm" datetime="{{ post.date | isoDate }}">
|
||||
{{ post.date | dateDisplay }}
|
||||
</time></time-difference>
|
||||
@@ -210,7 +210,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
|
||||
<div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
|
||||
{{ post.templateContent | safe }}
|
||||
</div>
|
||||
<a class="u-url text-sm text-sky-600 dark:text-sky-400 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Reply from ' + (post.date | dateDisplay)) }}">Permalink</a>
|
||||
<a class="u-url text-sm text-sky-700 dark:text-sky-300 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Reply from ' + (post.date | dateDisplay)) }}">Permalink</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -225,7 +225,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="post-meta">
|
||||
<span class="font-medium text-purple-600 dark:text-purple-400">Photo</span>
|
||||
<span class="font-medium text-purple-700 dark:text-purple-300">Photo</span>
|
||||
<time-difference><time class="dt-published font-mono text-sm" datetime="{{ post.date | isoDate }}">
|
||||
{{ post.date | dateDisplay }}
|
||||
</time></time-difference>
|
||||
@@ -257,7 +257,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
|
||||
{{ post.templateContent | safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<a class="u-url text-sm text-purple-600 dark:text-purple-400 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Photo from ' + (post.date | dateDisplay)) }}">Permalink</a>
|
||||
<a class="u-url text-sm text-purple-700 dark:text-purple-300 hover:underline mt-3 inline-block" href="{{ post.url }}" aria-label="Permalink: {{ post.data.title or ('Photo from ' + (post.date | dateDisplay)) }}">Permalink</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -265,7 +265,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
|
||||
{# ── Article card (unchanged) ── #}
|
||||
<div class="post-header">
|
||||
<h2 class="text-xl font-semibold mb-1">
|
||||
<a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-indigo-600 dark:hover:text-indigo-400" href="{{ post.url }}">
|
||||
<a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-indigo-700 dark:hover:text-indigo-300" href="{{ post.url }}">
|
||||
{{ post.data.title }}
|
||||
</a>
|
||||
</h2>
|
||||
@@ -289,7 +289,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
|
||||
<p class="p-summary text-surface-700 dark:text-surface-300 mt-3">
|
||||
{{ post.templateContent | striptags | truncate(250) }}
|
||||
</p>
|
||||
<a href="{{ post.url }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline mt-3 inline-block">
|
||||
<a href="{{ post.url }}" class="text-sm text-indigo-700 dark:text-indigo-300 hover:underline mt-3 inline-block">
|
||||
Read more →
|
||||
</a>
|
||||
|
||||
@@ -317,7 +317,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
|
||||
{{ post.templateContent | safe }}
|
||||
</div>
|
||||
<div class="post-footer mt-3">
|
||||
<a href="{{ post.url }}" class="text-sm text-teal-600 dark:text-teal-400 hover:underline" aria-label="Permalink: {{ post.data.title or ('Note from ' + (post.date | dateDisplay)) }}">
|
||||
<a href="{{ post.url }}" class="text-sm text-teal-700 dark:text-teal-300 hover:underline" aria-label="Permalink: {{ post.data.title or ('Note from ' + (post.date | dateDisplay)) }}">
|
||||
Permalink
|
||||
</a>
|
||||
</div>
|
||||
@@ -377,9 +377,9 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
|
||||
<p class="text-surface-600 dark:text-surface-400">No posts yet. Create your first post using a Micropub client!</p>
|
||||
<p class="mt-4 text-surface-600 dark:text-surface-400">Some popular Micropub clients:</p>
|
||||
<ul class="list-disc list-inside mt-2 text-surface-700 dark:text-surface-300 space-y-1">
|
||||
<li><a href="https://quill.p3k.io" class="text-accent-600 dark:text-accent-400 hover:underline">Quill</a> - Web-based</li>
|
||||
<li><a href="https://indiepass.app" class="text-accent-600 dark:text-accent-400 hover:underline">IndiePass</a> - Mobile app</li>
|
||||
<li><a href="https://micropublish.net" class="text-accent-600 dark:text-accent-400 hover:underline">Micropublish</a> - Web-based</li>
|
||||
<li><a href="https://quill.p3k.io" class="text-accent-700 dark:text-accent-300 hover:underline">Quill</a> - Web-based</li>
|
||||
<li><a href="https://indiepass.app" class="text-accent-700 dark:text-accent-300 hover:underline">IndiePass</a> - Mobile app</li>
|
||||
<li><a href="https://micropublish.net" class="text-accent-700 dark:text-accent-300 hover:underline">Micropublish</a> - Web-based</li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -327,18 +327,18 @@
|
||||
|
||||
/* Post meta */
|
||||
.post-meta {
|
||||
@apply text-sm text-surface-600 dark:text-surface-400 flex flex-wrap gap-2 items-center;
|
||||
@apply text-sm text-surface-700 dark:text-surface-300 flex flex-wrap gap-2 items-center;
|
||||
}
|
||||
|
||||
/* Category tags (post metadata pills) */
|
||||
.p-category {
|
||||
@apply inline-block px-3 py-1.5 text-xs bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 rounded border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors;
|
||||
@apply inline-block px-3 py-1.5 text-xs bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-200 rounded border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors;
|
||||
}
|
||||
|
||||
/* Inline hashtags in post content — styled as subtle links, not pills */
|
||||
.e-content a.hashtag,
|
||||
.prose a.hashtag {
|
||||
@apply text-accent-600 dark:text-accent-400 no-underline hover:underline font-medium;
|
||||
@apply text-accent-700 dark:text-accent-300 no-underline hover:underline font-medium;
|
||||
/* Override prose default link styling (no border-bottom, no color shift) */
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ permalink: "notes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
|
||||
<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Notes</h1>
|
||||
{% set sparklineSvg = collections.listedNotes | postingFrequency %}
|
||||
{% if sparklineSvg %}
|
||||
<div class="flex-1 min-w-0 text-teal-600 dark:text-teal-400">{{ sparklineSvg | safe }}</div>
|
||||
<div class="flex-1 min-w-0 text-teal-700 dark:text-teal-300">{{ sparklineSvg | safe }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
|
||||
|
||||
@@ -70,13 +70,13 @@ export default {
|
||||
typography: (theme) => ({
|
||||
DEFAULT: {
|
||||
css: {
|
||||
"--tw-prose-links": theme("colors.accent.600"),
|
||||
"--tw-prose-links": theme("colors.accent.700"),
|
||||
maxWidth: "none",
|
||||
},
|
||||
},
|
||||
invert: {
|
||||
css: {
|
||||
"--tw-prose-links": theme("colors.accent.400"),
|
||||
"--tw-prose-links": theme("colors.accent.300"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
Reference in New Issue
Block a user