giersig.eu/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

feat: replace all primary (blue) with contextual colors across entire theme

Browse Source 
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
2026-03-04 12:50:19 +01:00
parent 2ca3e047a4
commit 155816a0bc
60 changed files with 298 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
news.njk
View File

@@ -12,7 +12,7 @@ withSidebar: true
</p>
<p class="text-xs text-surface-500 mt-2" x-show="lastUpdated">
Last updated: <span x-text="formatDate(lastUpdated, 'full')"></span>
<button @click="refresh()" class="ml-2 text-primary-600 hover:text-primary-700 dark:text-primary-400" :disabled="loading">
<button @click="refresh()" class="ml-2 text-accent-600 hover:text-accent-700 dark:text-accent-400" :disabled="loading">
<svg class="w-3 h-3 inline" :class="{ 'animate-spin': loading }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
</svg>
@@ -22,7 +22,7 @@ withSidebar: true
{# Loading State #}
<div x-show="loading && items.length === 0" class="text-center py-12">
<svg class="w-8 h-8 mx-auto text-primary-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24">
<svg class="w-8 h-8 mx-auto text-accent-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
@@ -44,7 +44,7 @@ withSidebar: true
<div class="flex gap-2">
<button
@click="viewMode = 'list'"
:class="viewMode === 'list' ? 'bg-primary-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
:class="viewMode === 'list' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
title="List view"
>
@@ -55,7 +55,7 @@ withSidebar: true
</button>
<button
@click="viewMode = 'card'"
:class="viewMode === 'card' ? 'bg-primary-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
:class="viewMode === 'card' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
title="Card view"
>
@@ -66,7 +66,7 @@ withSidebar: true
</button>
<button
@click="viewMode = 'full'"
:class="viewMode === 'full' ? 'bg-primary-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
:class="viewMode === 'full' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
title="Expanded view"
>
@@ -81,7 +81,7 @@ withSidebar: true
<div class="relative" x-show="feeds.length > 1">
<select
x-model="filterFeed"
class="appearance-none bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg px-4 py-2 pr-8 text-sm text-surface-700 dark:text-surface-300 focus:outline-none focus:ring-2 focus:ring-primary-500"
class="appearance-none bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg px-4 py-2 pr-8 text-sm text-surface-700 dark:text-surface-300 focus:outline-none focus:ring-2 focus:ring-accent-500"
>
<option value="all">All Sources (<span x-text="feeds.length"></span>)</option>
<template x-for="feed in feeds" :key="feed.id">
@@ -111,7 +111,7 @@ withSidebar: true
</svg>
Syncing...
</div>
<div x-show="loading && items.length > 0" class="flex items-center gap-2 text-primary-600 dark:text-primary-400 ml-auto">
<div x-show="loading && items.length > 0" class="flex items-center gap-2 text-accent-600 dark:text-accent-400 ml-auto">
<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
@@ -125,7 +125,7 @@ withSidebar: true
{# List View #}
<div x-show="viewMode === 'list'" class="space-y-3">
<template x-for="item in filteredItems" :key="item.id">
<article class="flex items-start gap-4 p-4 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-primary-400 dark:hover:border-primary-600 transition-colors">
<article class="flex items-start gap-4 p-4 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
<img
x-show="item.imageUrl"
:src="item.imageUrl"
@@ -137,7 +137,7 @@ withSidebar: true
<h2 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
<a
:href="item.link"
class="hover:text-primary-600 dark:hover:text-primary-400"
class="hover:text-accent-600 dark:hover:text-accent-400"
target="_blank"
rel="noopener"
x-text="item.title"
@@ -157,7 +157,7 @@ withSidebar: true
<time :datetime="item.pubDate" x-text="formatDate(item.pubDate)"></time>
<span class="hidden sm:inline" x-show="item.categories?.length">
<template x-for="cat in item.categories.slice(0, 3)" :key="cat">
<span class="text-primary-600 dark:text-primary-400" x-text="'#' + cat"></span>
<span class="text-accent-600 dark:text-accent-400" x-text="'#' + cat"></span>
</template>
</span>
<button
@@ -203,7 +203,7 @@ withSidebar: true
<h2 class="font-semibold text-surface-900 dark:text-surface-100 mb-2 line-clamp-2">
<a
:href="item.link"
class="hover:text-primary-600 dark:hover:text-primary-400"
class="hover:text-accent-600 dark:hover:text-accent-400"
target="_blank"
rel="noopener"
x-text="item.title"
@@ -270,7 +270,7 @@ withSidebar: true
<h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4">
<a
:href="item.link"
class="hover:text-primary-600 dark:hover:text-primary-400"
class="hover:text-accent-600 dark:hover:text-accent-400"
target="_blank"
rel="noopener"
x-text="item.title"
@@ -282,7 +282,7 @@ withSidebar: true
<div class="flex flex-wrap items-center gap-3">
<a
:href="item.link"
class="inline-flex items-center gap-2 px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg text-sm font-medium transition-colors"
class="inline-flex items-center gap-2 px-4 py-2 bg-accent-600 hover:bg-accent-700 text-white rounded-lg text-sm font-medium transition-colors"
target="_blank"
rel="noopener"
>
@@ -314,7 +314,7 @@ withSidebar: true
</button>
<div x-show="item.categories?.length" class="flex flex-wrap gap-2">
<template x-for="cat in item.categories" :key="cat">
<span class="px-2 py-1 text-xs bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400 rounded-full" x-text="cat"></span>
<span class="px-2 py-1 text-xs bg-accent-100 dark:bg-accent-900/30 text-accent-700 dark:text-accent-400 rounded-full" x-text="cat"></span>
</template>
</div>
</div>