mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-04-02 08:44:56 +02:00
e236b4bf65
- Add skip-to-main-content link and main content ID target - Add prefers-reduced-motion media queries for all animations - Enhance visible focus indicators (2px offset, high-contrast ring) - Replace ~160 text-surface-500 instances with text-surface-600/dark:text-surface-400 for 4.5:1+ contrast ratio compliance - Add aria-hidden="true" to ~30+ decorative SVG icons across sidebars/widgets - Convert facepile containers from div to semantic ul/li with role="list" - Add aria-label to icon-only buttons (share, sort controls) - Add sr-only labels to form inputs (webmention, search) - Add aria-live="polite" to dynamically loaded webmentions - Add aria-label with relative+absolute date to time-difference component - Add keyboard handlers (Enter/Space) to custom interactive elements - Add aria-label to nav landmarks (table of contents) - Fix modal focus trap and dialog accessibility - Fix lightbox keyboard navigation and screen reader announcements Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
31 lines
1.5 KiB
Plaintext
31 lines
1.5 KiB
Plaintext
{# Author Compact Card - h-card microformat (compact version for blog sidebars) #}
|
|
<is-land on:visible>
|
|
<div class="widget">
|
|
<div class="h-card p-author flex items-center gap-3">
|
|
{# Hidden u-photo for reliable microformat parsing #}
|
|
<data class="u-photo hidden" value="{{ site.author.avatar }}"></data>
|
|
<a href="{{ site.author.url }}" class="u-url u-uid" rel="me" itemprop="url" aria-label="{{ site.author.name }}">
|
|
<img
|
|
src="{{ site.author.avatar }}"
|
|
alt=""
|
|
class="w-12 h-12 rounded-full object-cover shadow-lg"
|
|
loading="lazy"
|
|
>
|
|
</a>
|
|
<div>
|
|
<a href="{{ site.author.url }}" class="u-url p-name font-medium text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400 transition-colors">
|
|
{{ site.author.name }}
|
|
</a>
|
|
<p class="p-job-title text-xs text-surface-600 dark:text-surface-400">{{ site.author.title }}</p>
|
|
{% if site.author.locality %}
|
|
<p class="p-locality text-xs text-surface-600 dark:text-surface-400">{{ site.author.locality }}{% if site.author.country %}, <span class="p-country-name">{{ site.author.country }}</span>{% endif %}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{# Hidden but present for microformat completeness #}
|
|
<p class="p-note hidden">{{ site.author.bio }}</p>
|
|
{% if site.author.email %}<data class="u-email hidden" value="{{ site.author.email }}"></data>{% endif %}
|
|
{% if site.author.org %}<data class="p-org hidden" value="{{ site.author.org }}"></data>{% endif %}
|
|
</div>
|
|
</is-land>
|