feat: replace all primary (blue) with contextual colors across entire theme
Eliminate monotonous blue by replacing ~290 primary- references in 60 files with semantically appropriate colors: - accent (teal): links, CTAs, buttons, tabs, focus rings, spinners - purple: Funkwhale/music, photos, Mastodon/fediverse - surface (neutral): GitHub, dates/metadata, info boxes - amber: bookmarks, blogroll categories - red: likes - green: reposts - sky: replies - orange: RSS/feeds, podcasts - #0085ff: Bluesky brand - #a730b8: Mastodon brand Also updates prose link colors in tailwind.config.js, pagefind UI primary color to teal, and client-side JS color references. Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
This commit is contained in:
Ricardo
@@ -20,18 +20,18 @@ permalink: /interactions/
|
||||
<div class="flex border-b border-surface-200 dark:border-surface-700 mb-6">
|
||||
<button
|
||||
@click="activeTab = 'outbound'"
|
||||
:class="activeTab === 'outbound' ? 'border-primary-500 text-primary-600 dark:text-primary-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
|
||||
:class="activeTab === 'outbound' ? 'border-accent-500 text-accent-600 dark:text-accent-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
|
||||
class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors">
|
||||
My Activity
|
||||
<span class="ml-1 text-xs text-surface-400">(outbound)</span>
|
||||
</button>
|
||||
<button
|
||||
@click="activeTab = 'inbound'"
|
||||
:class="activeTab === 'inbound' ? 'border-primary-500 text-primary-600 dark:text-primary-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
|
||||
:class="activeTab === 'inbound' ? 'border-accent-500 text-accent-600 dark:text-accent-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
|
||||
class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors">
|
||||
Received
|
||||
<span class="ml-1 text-xs text-surface-400">(inbound)</span>
|
||||
<span x-show="totalInbound > 0" x-text="totalInbound" class="ml-1 px-1.5 py-0.5 text-xs bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300 rounded-full"></span>
|
||||
<span x-show="totalInbound > 0" x-text="totalInbound" class="ml-1 px-1.5 py-0.5 text-xs bg-accent-100 dark:bg-accent-900 text-accent-700 dark:text-accent-300 rounded-full"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -49,7 +49,7 @@ permalink: /interactions/
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-primary-600 dark:group-hover:text-primary-400">Likes</h2>
|
||||
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-red-600 dark:group-hover:text-red-400">Likes</h2>
|
||||
<p class="text-sm text-surface-500">{{ collections.likes.length }} item{% if collections.likes.length != 1 %}s{% endif %}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -59,13 +59,13 @@ permalink: /interactions/
|
||||
{# Replies #}
|
||||
<a href="/replies/" class="block p-6 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="p-3 bg-primary-100 dark:bg-primary-900/30 rounded-full">
|
||||
<svg class="w-6 h-6 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="p-3 bg-sky-100 dark:bg-sky-900/30 rounded-full">
|
||||
<svg class="w-6 h-6 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-primary-600 dark:group-hover:text-primary-400">Replies</h2>
|
||||
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-sky-600 dark:group-hover:text-sky-400">Replies</h2>
|
||||
<p class="text-sm text-surface-500">{{ collections.replies.length }} item{% if collections.replies.length != 1 %}s{% endif %}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -81,7 +81,7 @@ permalink: /interactions/
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-primary-600 dark:group-hover:text-primary-400">Bookmarks</h2>
|
||||
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-amber-600 dark:group-hover:text-amber-400">Bookmarks</h2>
|
||||
<p class="text-sm text-surface-500">{{ collections.bookmarks.length }} item{% if collections.bookmarks.length != 1 %}s{% endif %}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -97,7 +97,7 @@ permalink: /interactions/
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-primary-600 dark:group-hover:text-primary-400">Reposts</h2>
|
||||
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-green-600 dark:group-hover:text-green-400">Reposts</h2>
|
||||
<p class="text-sm text-surface-500">{{ collections.reposts.length }} item{% if collections.reposts.length != 1 %}s{% endif %}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -113,7 +113,7 @@ permalink: /interactions/
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-primary-600 dark:group-hover:text-primary-400">Photos</h2>
|
||||
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-purple-600 dark:group-hover:text-purple-400">Photos</h2>
|
||||
<p class="text-sm text-surface-500">{{ collections.photos.length }} item{% if collections.photos.length != 1 %}s{% endif %}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -121,7 +121,7 @@ permalink: /interactions/
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 p-6 bg-primary-50 dark:bg-primary-900/20 rounded-lg">
|
||||
<div class="mt-12 p-6 bg-surface-100 dark:bg-surface-800/50 rounded-lg">
|
||||
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">About IndieWeb Interactions</h2>
|
||||
<p class="text-surface-600 dark:text-surface-400 text-sm mb-4">
|
||||
These pages show different types of IndieWeb interactions I've made. Each type uses specific microformat properties
|
||||
@@ -153,7 +153,7 @@ permalink: /interactions/
|
||||
|
||||
{# Loading state #}
|
||||
<div x-show="loading && !webmentions.length" class="text-center py-12">
|
||||
<div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500"></div>
|
||||
<div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-accent-500"></div>
|
||||
<p class="mt-4 text-surface-500">Loading webmentions...</p>
|
||||
</div>
|
||||
|
||||
@@ -181,7 +181,7 @@ permalink: /interactions/
|
||||
<div x-show="!notConfigured && (!loading || webmentions.length)" class="flex flex-wrap gap-2 mb-6">
|
||||
<button
|
||||
@click="filterType = 'all'"
|
||||
:class="filterType === 'all' ? 'bg-primary-500 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300'"
|
||||
:class="filterType === 'all' ? 'bg-accent-500 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300'"
|
||||
class="px-3 py-1.5 text-sm rounded-full transition-colors">
|
||||
All <span x-text="'(' + totalInbound + ')'" class="text-xs opacity-75"></span>
|
||||
</button>
|
||||
@@ -199,7 +199,7 @@ permalink: /interactions/
|
||||
</button>
|
||||
<button
|
||||
@click="filterType = 'in-reply-to'"
|
||||
:class="filterType === 'in-reply-to' ? 'bg-primary-500 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300'"
|
||||
:class="filterType === 'in-reply-to' ? 'bg-sky-500 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300'"
|
||||
class="px-3 py-1.5 text-sm rounded-full transition-colors">
|
||||
💬 Replies <span x-text="'(' + replies.length + ')'" class="text-xs opacity-75"></span>
|
||||
</button>
|
||||
@@ -239,7 +239,7 @@ permalink: /interactions/
|
||||
<span x-show="wm['wm-property'] === 'repost-of'" class="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-full">
|
||||
🔄 reposted
|
||||
</span>
|
||||
<span x-show="wm['wm-property'] === 'in-reply-to'" class="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full">
|
||||
<span x-show="wm['wm-property'] === 'in-reply-to'" class="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-sky-100 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300 rounded-full">
|
||||
💬 replied
|
||||
</span>
|
||||
<span x-show="wm['wm-property'] === 'mention-of'" class="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300 rounded-full">
|
||||
@@ -271,7 +271,7 @@ permalink: /interactions/
|
||||
{# Target URL - which of my posts this is about #}
|
||||
<div class="mt-2 text-xs text-surface-500">
|
||||
<span>on </span>
|
||||
<a :href="wm['wm-target']" class="text-primary-600 dark:text-primary-400 hover:underline" x-text="formatTargetUrl(wm['wm-target'])"></a>
|
||||
<a :href="wm['wm-target']" class="text-accent-600 dark:text-accent-400 hover:underline" x-text="formatTargetUrl(wm['wm-target'])"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -295,7 +295,7 @@ permalink: /interactions/
|
||||
</div>
|
||||
|
||||
{# Info box #}
|
||||
<div class="mt-12 p-6 bg-primary-50 dark:bg-primary-900/20 rounded-lg">
|
||||
<div class="mt-12 p-6 bg-surface-100 dark:bg-surface-800/50 rounded-lg">
|
||||
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">About Webmentions</h2>
|
||||
<p class="text-surface-600 dark:text-surface-400 text-sm mb-4">
|
||||
Webmentions are a W3C standard for cross-site communication. When someone likes, reposts, or replies to my content
|
||||
|
||||
Reference in New Issue
Block a user