fix: sparkline width regression, dark mode pill contrast, interaction icons

- Sparkline: change from fixed 120/180px to fluid width (flex-1 min-w-0)
  filling the content area next to page titles across all 8 post type pages
- Blog filter: fix dark mode active pill contrast (dark:bg-accent-700)
- Interactions: replace wrong share icon with correct ActivityPub logo
- Interactions: add IndieWeb webmention provenance badge (globe icon)
- Interactions: improve platform detection (Bridgy Fed, more Fediverse instances)

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
This commit is contained in:
Ricardo
2026-03-07 16:31:30 +01:00
parent c5cdbc2100
commit f5e6dfbc8a
10 changed files with 19 additions and 14 deletions

View File

@@ -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.posts | postingFrequency %}
{% if sparklineSvg %}
<span class="text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
<span class="flex-1 min-w-0 text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
{% endif %}
</div>
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
@@ -23,7 +23,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{% if paginatedPosts.length > 0 %}
<nav class="flex flex-wrap gap-2 mb-6" aria-label="Filter by post type">
<a href="/blog/" class="px-3 py-1.5 text-sm font-medium rounded-full bg-accent-600 text-white dark:bg-accent-500">All Posts <span class="opacity-75">({{ collections.posts.length }})</span></a>
<a href="/blog/" class="px-3 py-1.5 text-sm font-medium rounded-full bg-accent-600 text-white dark:bg-accent-700">All Posts <span class="opacity-75">({{ collections.posts.length }})</span></a>
{% for pt in enabledPostTypes %}
{% set collName = pt.label | lower %}
<a href="{{ pt.path }}" class="px-3 py-1.5 text-sm font-medium rounded-full bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700 border border-surface-200 dark:border-surface-700 transition-colors">{{ pt.label }}{% if collections[collName] %} <span class="text-surface-400 dark:text-surface-500">({{ collections[collName].length }})</span>{% endif %}</a>