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
20
slashes.njk
20
slashes.njk
@@ -10,7 +10,7 @@ eleventyImport:
|
||||
<div class="h-feed">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Slash Pages</h1>
|
||||
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
|
||||
Root-level pages on this site. Inspired by <a href="https://slashpages.net" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">slashpages.net</a>.
|
||||
Root-level pages on this site. Inspired by <a href="https://slashpages.net" class="text-accent-600 dark:text-accent-400 hover:underline" target="_blank" rel="noopener">slashpages.net</a>.
|
||||
</p>
|
||||
|
||||
{# Dynamic pages (created via Indiekit) #}
|
||||
@@ -22,7 +22,7 @@ eleventyImport:
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="{{ page.url }}" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">
|
||||
<a href="{{ page.url }}" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">
|
||||
/{{ page.fileSlug }}
|
||||
</a>
|
||||
</h3>
|
||||
@@ -72,7 +72,7 @@ eleventyImport:
|
||||
<li class="post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/blogroll/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/blogroll</a>
|
||||
<a href="/blogroll/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/blogroll</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">Sites I follow</p>
|
||||
@@ -82,7 +82,7 @@ eleventyImport:
|
||||
<li class="post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/funkwhale/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/funkwhale</a>
|
||||
<a href="/funkwhale/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/funkwhale</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">Funkwhale activity</p>
|
||||
@@ -92,7 +92,7 @@ eleventyImport:
|
||||
<li class="post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/github/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/github</a>
|
||||
<a href="/github/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/github</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">GitHub activity</p>
|
||||
@@ -102,7 +102,7 @@ eleventyImport:
|
||||
<li class="post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/listening/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/listening</a>
|
||||
<a href="/listening/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/listening</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">Last.fm scrobbles</p>
|
||||
@@ -112,7 +112,7 @@ eleventyImport:
|
||||
<li class="post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/news/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/news</a>
|
||||
<a href="/news/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/news</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">RSS feed aggregator</p>
|
||||
@@ -122,7 +122,7 @@ eleventyImport:
|
||||
<li class="post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/podroll/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/podroll</a>
|
||||
<a href="/podroll/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/podroll</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">Podcasts I listen to</p>
|
||||
@@ -132,7 +132,7 @@ eleventyImport:
|
||||
<li class="post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/youtube/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/youtube</a>
|
||||
<a href="/youtube/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/youtube</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">YouTube channel</p>
|
||||
@@ -146,7 +146,7 @@ eleventyImport:
|
||||
<div class="mt-8 p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
|
||||
<h2 class="text-lg font-semibold text-surface-800 dark:text-surface-200 mb-2">Want more slash pages?</h2>
|
||||
<p class="text-surface-600 dark:text-surface-400 text-sm">
|
||||
Check out <a href="https://slashpages.net" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">slashpages.net</a>
|
||||
Check out <a href="https://slashpages.net" class="text-accent-600 dark:text-accent-400 hover:underline" target="_blank" rel="noopener">slashpages.net</a>
|
||||
for inspiration on pages like <code>/now</code>, <code>/uses</code>, <code>/colophon</code>, <code>/blogroll</code>, and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user