svemagie/blog-eleventy-indiekit
1
0
Fork 0
mirror of https://github.com/svemagie/blog-eleventy-indiekit.git synced 2026-04-02 16:44:56 +02:00
Code Issues Packages Projects Releases Wiki 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

26
readlater.njk
View File

@@ -6,7 +6,7 @@ permalink: /readlater/
<div class="readlater-page" x-data="readlaterApp()" 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="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-8 h-8 inline-block mr-2 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
</svg>
Reading List
@@ -21,7 +21,7 @@ permalink: /readlater/
<div class="main-content">
{# Loading State #}
<div x-show="loading" 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>
@@ -41,7 +41,7 @@ permalink: /readlater/
<select
x-model="selectedSource"
@change="fetchData()"
class="appearance-none bg-white dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg pl-3 pr-8 py-2 text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
class="appearance-none bg-white dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg pl-3 pr-8 py-2 text-sm focus:ring-2 focus:ring-accent-500 focus:border-accent-500"
>
<option value="">All sources</option>
<template x-for="src in sources" :key="src">
@@ -58,7 +58,7 @@ permalink: /readlater/
x-model.debounce.300ms="searchQuery"
@input="fetchData()"
placeholder="Search..."
class="w-full bg-white dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg pl-9 pr-3 py-2 text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
class="w-full bg-white dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg pl-9 pr-3 py-2 text-sm focus:ring-2 focus:ring-accent-500 focus:border-accent-500"
/>
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
@@ -80,16 +80,16 @@ permalink: /readlater/
{# Items List #}
<div x-show="!loading" class="space-y-4">
<template x-for="item in items" :key="item.id">
<article class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-5 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-5 hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
<div class="flex items-start gap-4">
<div class="flex-shrink-0 w-10 h-10 rounded-lg bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center">
<div class="flex-shrink-0 w-10 h-10 rounded-lg bg-gradient-to-br from-accent-400 to-accent-600 flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
</svg>
</div>
<div class="flex-1 min-w-0">
<h2 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
<a :href="item.url" class="hover:text-primary-600 dark:hover:text-primary-400 transition-colors" target="_blank" rel="noopener" x-text="item.title"></a>
<a :href="item.url" class="hover:text-accent-600 dark:hover:text-accent-400 transition-colors" target="_blank" rel="noopener" x-text="item.title"></a>
</h2>
<div class="flex flex-wrap items-center gap-2 text-sm text-surface-500">
<span
@@ -106,7 +106,7 @@ permalink: /readlater/
<div class="flex flex-wrap items-center gap-3 mt-3 pt-3 border-t border-surface-200 dark:border-surface-700">
<a
:href="item.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"
>
@@ -147,11 +147,11 @@ permalink: /readlater/
<h3 class="widget-title">Stats</h3>
<div class="grid grid-cols-2 gap-3 text-center">
<div class="p-3 bg-surface-50 dark:bg-surface-800 rounded-lg">
<span class="text-2xl font-bold text-primary-600 dark:text-primary-400 block" x-text="items.length"></span>
<span class="text-2xl font-bold text-accent-600 dark:text-accent-400 block" x-text="items.length"></span>
<span class="text-xs text-surface-500 uppercase">Saved</span>
</div>
<div class="p-3 bg-surface-50 dark:bg-surface-800 rounded-lg">
<span class="text-2xl font-bold text-primary-600 dark:text-primary-400 block" x-text="sources.length"></span>
<span class="text-2xl font-bold text-accent-600 dark:text-accent-400 block" x-text="sources.length"></span>
<span class="text-xs text-surface-500 uppercase">Sources</span>
</div>
</div>
@@ -160,7 +160,7 @@ permalink: /readlater/
{# Sources Quick Filter #}
<div class="widget" x-show="sources.length > 0">
<h3 class="widget-title flex items-center gap-2">
<svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-5 h-5 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
</svg>
Sources
@@ -169,7 +169,7 @@ permalink: /readlater/
<li>
<button
@click="selectedSource = ''; fetchData()"
:class="selectedSource === '' ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400' : 'hover:bg-surface-100 dark:hover:bg-surface-700'"
:class="selectedSource === '' ? 'bg-accent-100 dark:bg-accent-900/30 text-accent-700 dark:text-accent-400' : 'hover:bg-surface-100 dark:hover:bg-surface-700'"
class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors"
>
All
@@ -179,7 +179,7 @@ permalink: /readlater/
<li>
<button
@click="selectedSource = src; fetchData()"
:class="selectedSource === src ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400' : 'hover:bg-surface-100 dark:hover:bg-surface-700'"
:class="selectedSource === src ? 'bg-accent-100 dark:bg-accent-900/30 text-accent-700 dark:text-accent-400' : 'hover:bg-surface-100 dark:hover:bg-surface-700'"
class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors"
x-text="src"
></button>