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

feat: warm palette overhaul — cold zinc/teal to warm stone/amber

Browse Source 
Replace the entire color system with a design-driven warm palette:

- Surface tokens: cold zinc grays → warm stone (#faf8f5 to #0f0e0d)
- Accent tokens: cold teal → warm amber (#fffbeb to #451a03)
- All bg-white → bg-surface-50 across templates (warm cream instead of pure white)
- Critical CSS: all hardcoded hex values updated to warm palette
- Prism code blocks: cold gray backgrounds → warm stone
- Pagefind search UI: blue buttons/links → amber interactive colors
- Dark mode: warm dark surfaces with amber accents throughout

Design system documented in .interface-design/system.md

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
This commit is contained in:
Ricardo
2026-03-04 14:02:59 +01:00
parent 155816a0bc
commit 8e393e215d
32 changed files with 272 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
listening.njk
View File

@@ -179,7 +179,7 @@ withSidebar: true
<div class="grid gap-4 sm:gap-6 md:grid-cols-2">
{# Funkwhale Stats #}
{% if funkwhaleActivity.stats %}
<div x-show="activeSource === 'all' || activeSource === 'funkwhale'" class="bg-white dark:bg-surface-800 rounded-xl p-6 border border-purple-200 dark:border-purple-800">
<div x-show="activeSource === 'all' || activeSource === 'funkwhale'" class="bg-surface-50 dark:bg-surface-800 rounded-xl p-6 border border-purple-200 dark:border-purple-800">
<h3 class="text-lg font-semibold text-purple-700 dark:text-purple-400 mb-4 flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-purple-500"></span>
Funkwhale
@@ -217,7 +217,7 @@ withSidebar: true
{# Last.fm Stats #}
{% if lastfmActivity.stats %}
<div x-show="activeSource === 'all' || activeSource === 'lastfm'" class="bg-white dark:bg-surface-800 rounded-xl p-6 border border-red-200 dark:border-red-800">
<div x-show="activeSource === 'all' || activeSource === 'lastfm'" class="bg-surface-50 dark:bg-surface-800 rounded-xl p-6 border border-red-200 dark:border-red-800">
<h3 class="text-lg font-semibold text-red-700 dark:text-red-400 mb-4 flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
Last.fm
@@ -270,7 +270,7 @@ withSidebar: true
{% if funkwhaleActivity.listenings.length %}
<div x-show="activeSource === 'all' || activeSource === 'funkwhale'">
{% for listening in funkwhaleActivity.listenings | head(10) %}
<div class="flex items-center gap-4 p-3 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-purple-400 dark:hover:border-purple-600 transition-colors mb-2">
<div class="flex items-center gap-4 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-purple-400 dark:hover:border-purple-600 transition-colors mb-2">
{% if listening.coverUrl %}
<img src="{{ listening.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
{% else %}
@@ -324,7 +324,7 @@ withSidebar: true
{% if lastfmActivity.scrobbles.length %}
<div x-show="activeSource === 'all' || activeSource === 'lastfm'">
{% for scrobble in lastfmActivity.scrobbles | head(10) %}
<div class="flex items-center gap-4 p-3 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-red-400 dark:hover:border-red-600 transition-colors mb-2">
<div class="flex items-center gap-4 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-red-400 dark:hover:border-red-600 transition-colors mb-2">
{% if scrobble.coverUrl %}
<img src="{{ scrobble.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
{% else %}
@@ -396,7 +396,7 @@ withSidebar: true
<div class="grid gap-3 sm:gap-4 md:grid-cols-2">
{% for track in lastfmActivity.loved | head(10) %}
<div class="flex items-center gap-3 p-3 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
<div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
{% if track.coverUrl %}
<img src="{{ track.coverUrl }}" alt="" class="w-14 h-14 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
{% else %}
@@ -457,7 +457,7 @@ withSidebar: true
<div class="grid gap-3 sm:gap-4 md:grid-cols-2">
{% for favorite in funkwhaleActivity.favorites | head(10) %}
<div class="flex items-center gap-3 p-3 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
<div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
{% if favorite.coverUrl %}
<img src="{{ favorite.coverUrl }}" alt="" class="w-14 h-14 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
{% else %}