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

34
starred.njk
View File

@@ -8,7 +8,7 @@ eleventyExcludeFromCollections: true
<div class="starred-page" x-data="starredPage" x-cloak>
<header class="mb-6 sm:mb-8">
<div class="flex items-center gap-2 mb-4">
<a href="/github/" class="text-sm text-primary-600 dark:text-primary-400 hover:underline">&larr; GitHub Activity</a>
<a href="/github/" class="text-sm text-accent-600 dark:text-accent-400 hover:underline">&larr; GitHub Activity</a>
</div>
<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2 flex items-center gap-3">
<svg class="w-8 h-8 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
@@ -37,7 +37,7 @@ eleventyExcludeFromCollections: true
{# Loading state #}
<template x-if="loading">
<div class="text-center py-12">
<div class="inline-block w-8 h-8 border-4 border-primary-200 border-t-primary-600 rounded-full animate-spin"></div>
<div class="inline-block w-8 h-8 border-4 border-accent-200 border-t-accent-600 rounded-full animate-spin"></div>
<p class="mt-4 text-surface-500">Loading starred repositories&hellip;</p>
</div>
</template>
@@ -58,7 +58,7 @@ eleventyExcludeFromCollections: true
<button
@click="activeTab = 'all'; resetView()"
:class="activeTab === 'all'
? 'border-primary-600 text-primary-700 dark:text-primary-400'
? 'border-accent-600 text-accent-700 dark:text-accent-400'
: 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 hover:border-surface-300'"
class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors"
>
@@ -71,7 +71,7 @@ eleventyExcludeFromCollections: true
<button
@click="activeTab = list.slug; resetView()"
:class="activeTab === list.slug
? 'border-primary-600 text-primary-700 dark:text-primary-400'
? 'border-accent-600 text-accent-700 dark:text-accent-400'
: 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 hover:border-surface-300'"
class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors"
>
@@ -84,7 +84,7 @@ eleventyExcludeFromCollections: true
<button
@click="activeTab = 'uncategorized'; resetView()"
:class="activeTab === 'uncategorized'
? 'border-primary-600 text-primary-700 dark:text-primary-400'
? 'border-accent-600 text-accent-700 dark:text-accent-400'
: 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 hover:border-surface-300'"
class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors"
>
@@ -108,7 +108,7 @@ eleventyExcludeFromCollections: true
x-model="searchQuery"
@input="resetView()"
placeholder="Search by name, description, topic, or language..."
class="w-full pl-10 pr-10 py-2 rounded-lg border border-surface-300 dark:border-surface-600 bg-white dark:bg-surface-800 text-surface-900 dark:text-surface-100 placeholder-surface-400 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
class="w-full pl-10 pr-10 py-2 rounded-lg border border-surface-300 dark:border-surface-600 bg-white dark:bg-surface-800 text-surface-900 dark:text-surface-100 placeholder-surface-400 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-transparent"
>
<template x-if="searchQuery">
<button @click="searchQuery = ''; resetView()" class="absolute right-3 top-1/2 -translate-y-1/2 text-surface-400 hover:text-surface-600">
@@ -123,7 +123,7 @@ eleventyExcludeFromCollections: true
<select
x-model="sortBy"
@change="resetView()"
class="px-3 py-2 rounded-lg border border-surface-300 dark:border-surface-600 bg-white dark:bg-surface-800 text-surface-900 dark:text-surface-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
class="px-3 py-2 rounded-lg border border-surface-300 dark:border-surface-600 bg-white dark:bg-surface-800 text-surface-900 dark:text-surface-100 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500"
>
<option value="stars">Sort: Stars</option>
<option value="starredAt">Sort: Recently Starred</option>
@@ -138,7 +138,7 @@ eleventyExcludeFromCollections: true
<select
x-model="languageFilter"
@change="resetView()"
class="px-2 py-1.5 rounded border border-surface-300 dark:border-surface-600 bg-white dark:bg-surface-800 text-surface-900 dark:text-surface-100 text-xs focus:outline-none focus:ring-2 focus:ring-primary-500"
class="px-2 py-1.5 rounded border border-surface-300 dark:border-surface-600 bg-white dark:bg-surface-800 text-surface-900 dark:text-surface-100 text-xs focus:outline-none focus:ring-2 focus:ring-accent-500"
>
<option value="">All Languages</option>
<template x-for="lang in availableLanguages" :key="lang">
@@ -152,7 +152,7 @@ eleventyExcludeFromCollections: true
<button
@click="starCountMin = opt.value; resetView()"
:class="starCountMin === opt.value
? 'bg-primary-600 text-white'
? 'bg-accent-600 text-white'
: 'bg-white dark:bg-surface-800 text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700'"
class="px-2.5 py-1 text-xs font-medium transition-colors"
x-text="opt.label"
@@ -162,7 +162,7 @@ eleventyExcludeFromCollections: true
{# Archived toggle #}
<label class="flex items-center gap-1.5 text-xs text-surface-600 dark:text-surface-400 cursor-pointer">
<input type="checkbox" x-model="showArchived" @change="resetView()" class="rounded border-surface-300 text-primary-600 focus:ring-primary-500">
<input type="checkbox" x-model="showArchived" @change="resetView()" class="rounded border-surface-300 text-accent-600 focus:ring-accent-500">
Show archived
</label>
@@ -170,7 +170,7 @@ eleventyExcludeFromCollections: true
<template x-if="hasActiveFilters">
<button
@click="clearFilters()"
class="text-xs text-primary-600 dark:text-primary-400 hover:underline"
class="text-xs text-accent-600 dark:text-accent-400 hover:underline"
>Clear filters</button>
</template>
</div>
@@ -184,13 +184,13 @@ eleventyExcludeFromCollections: true
{# ===== REPO GRID ===== #}
<div class="grid gap-3 sm:gap-4 md:grid-cols-2" id="starred-grid">
<template x-for="repo in visibleStars" :key="repo.fullName">
<article class="starred-card 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="starred-card p-4 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-surface-400 dark:hover:border-surface-500 transition-colors">
<div class="flex items-center gap-2 mb-1">
<template x-if="repo.ownerAvatar">
<img :src="repo.ownerAvatar" :alt="repo.ownerLogin" class="w-5 h-5 rounded-full" loading="lazy">
</template>
<h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate">
<a :href="repo.url" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener" x-text="repo.fullName"></a>
<a :href="repo.url" class="hover:text-surface-600 dark:hover:text-surface-400" target="_blank" rel="noopener" x-text="repo.fullName"></a>
</h3>
<template x-if="repo.archived">
<span class="text-xs px-1.5 py-0.5 bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 rounded">Archived</span>
@@ -204,7 +204,7 @@ eleventyExcludeFromCollections: true
<template x-if="repo.topics && repo.topics.length">
<div class="flex flex-wrap gap-1.5 mb-2">
<template x-for="topic in repo.topics.slice(0, 5)" :key="topic">
<span class="text-xs px-2 py-0.5 bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 rounded" x-text="topic"></span>
<span class="text-xs px-2 py-0.5 bg-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300 rounded" x-text="topic"></span>
</template>
<template x-if="repo.topics.length > 5">
<span class="text-xs px-2 py-0.5 bg-surface-100 dark:bg-surface-700 text-surface-500 rounded" x-text="'+' + (repo.topics.length - 5)"></span>
@@ -244,7 +244,7 @@ eleventyExcludeFromCollections: true
<template x-if="sortedStars.length === 0">
<div class="text-center py-12">
<p class="text-surface-500">No repos match your current filters.</p>
<button @click="clearFilters()" class="mt-2 text-sm text-primary-600 dark:text-primary-400 hover:underline">Clear all filters</button>
<button @click="clearFilters()" class="mt-2 text-sm text-accent-600 dark:text-accent-400 hover:underline">Clear all filters</button>
</div>
</template>
@@ -253,10 +253,10 @@ eleventyExcludeFromCollections: true
<div class="mt-6 text-center">
<button
@click="visibleCount = Math.min(visibleCount + 50, sortedStars.length)"
class="px-6 py-2.5 bg-primary-600 hover:bg-primary-700 text-white rounded-lg transition-colors"
class="px-6 py-2.5 bg-accent-600 hover:bg-accent-700 text-white rounded-lg transition-colors"
>
Load More
<span class="text-primary-200" x-text="'(' + (sortedStars.length - visibleCount) + ' remaining)'"></span>
<span class="text-accent-200" x-text="'(' + (sortedStars.length - visibleCount) + ' remaining)'"></span>
</button>
</div>
</template>