mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-04-02 16:44:56 +02:00
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
24
podroll.njk
24
podroll.njk
@@ -6,7 +6,7 @@ permalink: /podroll/
|
||||
<div class="podroll-page" x-data="podrollApp()" x-init="init()">
|
||||
<header class="mb-6 sm:mb-8">
|
||||
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
|
||||
<svg class="w-8 h-8 inline-block mr-2 text-primary-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<svg class="w-8 h-8 inline-block mr-2 text-orange-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M12 6a6 6 0 0 0-6 6h2a4 4 0 0 1 4-4V6z"/>
|
||||
@@ -19,7 +19,7 @@ permalink: /podroll/
|
||||
</p>
|
||||
<p class="text-xs text-surface-500 mt-2" x-show="status?.episodes?.lastSync">
|
||||
Last synced: <span x-text="formatDate(status?.episodes?.lastSync, '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>
|
||||
@@ -32,7 +32,7 @@ permalink: /podroll/
|
||||
<div class="main-content">
|
||||
{# Loading State #}
|
||||
<div x-show="loading && episodes.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>
|
||||
@@ -50,7 +50,7 @@ permalink: /podroll/
|
||||
<div class="relative">
|
||||
<select
|
||||
x-model="filterPodcast"
|
||||
class="w-full sm:w-auto appearance-none bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg px-4 py-2 pr-10 text-sm text-surface-700 dark:text-surface-300 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
class="w-full sm:w-auto appearance-none bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg px-4 py-2 pr-10 text-sm text-surface-700 dark:text-surface-300 focus:outline-none focus:ring-2 focus:ring-accent-500"
|
||||
>
|
||||
<option value="all">All Podcasts</option>
|
||||
<template x-for="source in sortedSources" :key="source.title">
|
||||
@@ -66,18 +66,18 @@ permalink: /podroll/
|
||||
{# Episodes List #}
|
||||
<div x-show="episodes.length > 0" class="space-y-4">
|
||||
<template x-for="episode in filteredEpisodes" :key="episode.id">
|
||||
<article class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-6 hover:border-primary-400 dark:hover:border-primary-600 transition-colors">
|
||||
<article class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-6 hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
|
||||
{# Episode Header #}
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="flex-1 min-w-0">
|
||||
<h2 class="font-semibold text-lg text-surface-900 dark:text-surface-100 mb-1">
|
||||
<a :href="episode.url" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener" x-text="episode.title"></a>
|
||||
<a :href="episode.url" class="hover:text-accent-600 dark:hover:text-accent-400" target="_blank" rel="noopener" x-text="episode.title"></a>
|
||||
</h2>
|
||||
<div class="flex flex-wrap items-center gap-2 text-sm text-surface-500">
|
||||
<a
|
||||
x-show="episode.podcast"
|
||||
:href="episode.podcast?.url || '#'"
|
||||
class="inline-flex items-center gap-1 px-2 py-0.5 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400 rounded-full hover:bg-primary-200 dark:hover:bg-primary-900/50 transition-colors"
|
||||
class="inline-flex items-center gap-1 px-2 py-0.5 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400 rounded-full hover:bg-orange-200 dark:hover:bg-orange-900/50 transition-colors"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
@@ -121,7 +121,7 @@ permalink: /podroll/
|
||||
<div class="flex flex-wrap items-center gap-3 mt-4 pt-4 border-t border-surface-200 dark:border-surface-700">
|
||||
<a
|
||||
:href="episode.url"
|
||||
class="inline-flex items-center gap-2 text-sm text-primary-600 hover:text-primary-700 dark:text-primary-400"
|
||||
class="inline-flex items-center gap-2 text-sm text-accent-600 hover:text-accent-700 dark:text-accent-400"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
@@ -175,7 +175,7 @@ permalink: /podroll/
|
||||
<button
|
||||
@click="loadMore()"
|
||||
:disabled="loadingMore"
|
||||
class="px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
|
||||
class="px-6 py-3 bg-accent-600 hover:bg-accent-700 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
|
||||
>
|
||||
<span x-show="!loadingMore">Load More Episodes</span>
|
||||
<span x-show="loadingMore" class="flex items-center gap-2">
|
||||
@@ -202,7 +202,7 @@ permalink: /podroll/
|
||||
<aside class="sidebar">
|
||||
<div class="widget">
|
||||
<h3 class="widget-title flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-primary-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<svg class="w-5 h-5 text-orange-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<circle cx="6.18" cy="17.82" r="2.18"/>
|
||||
<path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/>
|
||||
</svg>
|
||||
@@ -223,7 +223,7 @@ permalink: /podroll/
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center flex-shrink-0">
|
||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-white text-xs font-bold" x-text="source.title.charAt(0).toUpperCase()"></span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
@@ -232,7 +232,7 @@ permalink: /podroll/
|
||||
</div>
|
||||
<a
|
||||
:href="source.xmlUrl"
|
||||
class="opacity-0 group-hover:opacity-100 text-surface-400 hover:text-primary-600 transition-opacity"
|
||||
class="opacity-0 group-hover:opacity-100 text-surface-400 hover:text-accent-600 transition-opacity"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
title="RSS Feed"
|
||||
|
||||
Reference in New Issue
Block a user