diff --git a/src/404.html b/src/404.html
index 383ae2fc..cd58430a 100644
--- a/src/404.html
+++ b/src/404.html
@@ -4,7 +4,7 @@ layout: default
permalink: 404.html
---
-{% image './src/assets/img/404.jpg', title, 'border border-purple-600 dark:border-purple-400 rounded-lg overflow-hidden [&>*]:w-full' %}
+{% image './src/assets/img/404.jpg', title, 'border border-blue-500 dark:border-blue-200 rounded-lg overflow-hidden [&>*]:w-full' %}
{% tablericon "receipt-2" "Receipt" %} Skip out on the room service bill
diff --git a/src/_includes/base.liquid b/src/_includes/base.liquid
index 463be006..88e512e5 100644
--- a/src/_includes/base.liquid
+++ b/src/_includes/base.liquid
@@ -1,7 +1,7 @@
{%- capture fullUrl %}
{{ site.url }}{{ page.url }}{% endcapture -%}
-
+
{% if title %}
@@ -17,7 +17,7 @@
<meta property="og:type" content="article" />
<meta property="og:url" content="{{ fullUrl }}" />
<meta property="og:image" content="{{ image | getPostImage }}">
- <meta name="theme-color" content="#a855f7" />
+ <meta name="theme-color" content="#3b82f6" />
<meta name="generator" content="{{ eleventy.generator }}">
<meta name="robots" content="noai, noimageai">
<link
@@ -66,7 +66,7 @@
</style>
</noscript>
</head>
- <body class="dark:text-white bg-white dark:bg-gray-900 font-sans text-gray-800 scrollbar-thin scrollbar-thumb-purple-500 scrollbar-track-purple-100">
+ <body class="dark:text-white bg-white dark:bg-gray-900 font-sans text-gray-800 scrollbar-thin scrollbar-thumb-blue-500 scrollbar-track-blue-100">
{{ content }}
{% capture js %}
{% render "../assets/scripts/script.js" %}
diff --git a/src/_includes/partials/author.liquid b/src/_includes/partials/author.liquid
index d0272ff6..f7c03040 100644
--- a/src/_includes/partials/author.liquid
+++ b/src/_includes/partials/author.liquid
@@ -1,6 +1,6 @@
<div class="mt-12 py-8 border-t-2 flex flex-col md:flex-row justify-between items-center">
<div class="flex flex-col mb-4 md:mb-0 md:flex-row items-center flex-1">
- <div class="border border-teal-700 dark:border-teal-300 bg-white rounded-full overflow-hidden mb-4 md:mb-0 md:mr-4 [&>*]:h-20 [&>*]:w-20 flex flex-col items-center">
+ <div class="border border-blue-500 dark:border-blue-200 bg-white rounded-full overflow-hidden mb-4 md:mb-0 md:mr-4 [&>*]:h-20 [&>*]:w-20 flex flex-col items-center">
{% image './src/assets/img/avatar.webp', site.name, 'inline-block' %}
</div>
<span class="text-lg font-medium">{{ site.name }}</span>
diff --git a/src/_includes/partials/nav/link.liquid b/src/_includes/partials/nav/link.liquid
index c7be742b..fe970bdf 100644
--- a/src/_includes/partials/nav/link.liquid
+++ b/src/_includes/partials/nav/link.liquid
@@ -1,6 +1,6 @@
{%- capture pageUrl %}/{{ link | downcase }}/{% endcapture -%}
{% if page.url != pageUrl %}
- <a class="text-gray-700 hover:text-pink-500 dark:text-gray-200 dark:hover:text-pink-500 !no-underline" href="/{{ link | downcase }}">
+ <a class="text-gray-700 hover:text-blue-800 dark:text-gray-200 dark:hover:text-blue-200 !no-underline" href="/{{ link | downcase }}">
{% if icon %}
{% tablericon icon link %}
{% else %}
diff --git a/src/_includes/partials/now/media-grid.liquid b/src/_includes/partials/now/media-grid.liquid
index fae7b1cf..a3d1eaa2 100644
--- a/src/_includes/partials/now/media-grid.liquid
+++ b/src/_includes/partials/now/media-grid.liquid
@@ -9,7 +9,7 @@
{% assign alt = item.alt | strip %}
<a href="{{ item.url | stripUtm }}" title="{{ alt | escape }}">
<div class="relative block h-full rounded-lg overflow-hidden"{% if shape != 'square' %} style="max-width:226px"{% endif %}>
- <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-pink-500 dark:border-purple-400 dark:hover:border-pink-500 ease-in-out duration-300{% if item.title %} bg-cover-gradient{% endif %}"></div>
+ <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-blue-600 hover:border-blue-800 dark:border-blue-400 dark:hover:border-blue-200 ease-in-out duration-300{% if item.title %} bg-cover-gradient{% endif %}"></div>
<div class="absolute left-1 bottom-2 drop-shadow-md">
{% if item.title %}
<div class="px-1 text-xs font-bold text-white line-clamp-2">{{ item.title }}</div>
diff --git a/src/_includes/partials/paginator.liquid b/src/_includes/partials/paginator.liquid
index 155d9f85..dbf10f44 100644
--- a/src/_includes/partials/paginator.liquid
+++ b/src/_includes/partials/paginator.liquid
@@ -1,7 +1,7 @@
<nav class="flex justify-between mt-8 items-center">
{% if pagination.href.previous %}
<a href="{{ pagination.href.previous }}">
- <button class="py-2 pr-4 dark:text-purple-400 text-purple-600" aria-label="Previous page [&>svg]:h-5 [&>svg]:w-5">
+ <button class="py-2 pr-4 dark:text-blue-400 text-blue-600" aria-label="Previous page [&>svg]:h-5 [&>svg]:w-5">
{% tablericon "arrow-left" "Previous" %}
</button>
</a>
@@ -18,7 +18,7 @@
</div>
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}">
- <button class="py-2 pl-4 dark:text-purple-400 text-purple-600 [&>svg]:h-5 [&>svg]:w-5" aria-label="Next page">
+ <button class="py-2 pl-4 dark:text-blue-400 text-blue-600 [&>svg]:h-5 [&>svg]:w-5" aria-label="Next page">
{% tablericon "arrow-right" "Next" %}
</button>
</a>
diff --git a/src/_includes/partials/webmentions/comments.liquid b/src/_includes/partials/webmentions/comments.liquid
index bd471a95..d098b83c 100644
--- a/src/_includes/partials/webmentions/comments.liquid
+++ b/src/_includes/partials/webmentions/comments.liquid
@@ -5,14 +5,14 @@
<div class="border-bottom flex flex-row items-center border-gray-100 pb-4 w-full">
<div class="group flex flex-row space-between items-center">
<a href={{mention.url}}>
- <div class="bg-gray-900 dark:bg-white h-14 w-14 border-4 border-white dark:border-gray-900 transition-all ease-in-out duration-300 group-hover:border-pink-500 dark:group-hover:border-pink-500 rounded-full overflow-hidden">
+ <div class="bg-gray-900 dark:bg-white h-14 w-14 border-4 border-white dark:border-gray-200 transition-all ease-in-out duration-300 group-hover:border-blue-800 dark:group-hover:border-blue-200 rounded-full overflow-hidden">
{% image mention.author.photo, mention.author.name %}
</div>
</a>
<div class="ml-3">
<a class="text-gray-700 dark:text-gray-200" href={{mention.url}}>
- <p class="text-sm group-hover:text-pink-500 dark:group-hover:text-pink-500">{{ mention.content.text }}</p>
- <p class="mt-1 text-xs group-hover:text-pink-500 dark:group-hover:text-pink-500">{{ mention.published | isoDateOnly }}</p>
+ <p class="text-sm group-hover:text-blue-800 dark:group-hover:text-blue-200">{{ mention.content.text }}</p>
+ <p class="mt-1 text-xs group-hover:text-blue-800 dark:group-hover:text-blue-200">{{ mention.published | isoDateOnly }}</p>
</a>
</div>
</div>
diff --git a/src/_includes/partials/webmentions/interaction.liquid b/src/_includes/partials/webmentions/interaction.liquid
index 4507ffa0..2b98e628 100644
--- a/src/_includes/partials/webmentions/interaction.liquid
+++ b/src/_includes/partials/webmentions/interaction.liquid
@@ -12,7 +12,7 @@
{% for mention in mentions[type] %}
<li class="-ml-3 inline">
<a href={{mention.url}}>
- <div class="bg-gray-900 dark:bg-white h-14 w-14 border-4 border-white dark:border-gray-900 transition-all ease-in-out duration-300 hover:border-pink-500 dark:hover:border-pink-500 rounded-full overflow-hidden">
+ <div class="bg-gray-900 dark:bg-white h-14 w-14 border-4 border-white dark:border-gray-900 transition-all ease-in-out duration-300 hover:border-blue-800 dark:hover:border-blue-200 rounded-full overflow-hidden">
{% image mention.author.photo, mention.author.name %}
</div>
</a>
diff --git a/src/_includes/partials/webmentions/links.liquid b/src/_includes/partials/webmentions/links.liquid
index b24ace65..fbe80ca6 100644
--- a/src/_includes/partials/webmentions/links.liquid
+++ b/src/_includes/partials/webmentions/links.liquid
@@ -4,7 +4,7 @@
<ul class="list-inside list-disc pl-5 md:pl-10">
{% for mention in mentions['link-to'] %}
<li class="mt-1.5 mb-2">
- <a href="{{ mention.url }}" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300">
+ <a href="{{ mention.url }}" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-200">
{{ mention.name }}
</a>
</li>
diff --git a/src/_includes/post.liquid b/src/_includes/post.liquid
index e1effbc4..52c4f09e 100644
--- a/src/_includes/post.liquid
+++ b/src/_includes/post.liquid
@@ -5,7 +5,7 @@ layout: main
<article class="h-entry" data-pagefind-body>
{% if link %}
<a class="no-underline" href="{{ link }}">
- <h2 class="[&>svg]:h-5 [&>svg]:w-5 [&>svg]:md:h-7 [&>svg]:md:w-7 [&>svg]:-mt-1 [&>svg]:md:-mt-1.5 [&>svg]:inline icon--bold p-name m-0 text-xl font-black leading-tight tracking-normal hover:text-pink-500 text-gray-800 dark:text-gray-200 dark:hover:text-pink-500 md:text-2xl ease-in-out duration-300 pt-8" data-pagefind-meta="title">
+ <h2 class="[&>svg]:h-5 [&>svg]:w-5 [&>svg]:md:h-7 [&>svg]:md:w-7 [&>svg]:-mt-1 [&>svg]:md:-mt-1.5 [&>svg]:inline icon--bold p-name m-0 text-xl font-black leading-tight tracking-normal hover:text-blue-800 text-gray-800 dark:text-gray-200 dark:hover:text-blue-200 md:text-2xl ease-in-out duration-300 pt-8" data-pagefind-meta="title">
{% tablericon 'link' title %}
{{ title }}
</h2>
diff --git a/src/_includes/webrings/css-joy.liquid b/src/_includes/webrings/css-joy.liquid
index 1a85d1f0..e6b57d35 100644
--- a/src/_includes/webrings/css-joy.liquid
+++ b/src/_includes/webrings/css-joy.liquid
@@ -9,7 +9,7 @@
{% tablericon "arrow-left" "Previous site" %}
</a>
<div class="flex justify-center">
- <a href="https://webri.ng/webring/cssjoy/random?via=https://coryd.dev/webrings" class="[&>svg]:h-6 [&>svg]:w-6 icon--bold mx-4 flex flex-row items-center font-semibold p-2 rounded-full !no-underline !text-white dark:text-gray-900 bg-purple-600 dark:bg-purple-400 hover:bg-pink-500">
+ <a href="https://webri.ng/webring/cssjoy/random?via=https://coryd.dev/webrings" class="[&>svg]:h-6 [&>svg]:w-6 icon--bold mx-4 flex flex-row items-center font-semibold p-2 rounded-full !no-underline !text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 hover:bg-pink-500">
{% tablericon "dice-3" "Random site" %}
</a>
</div>
diff --git a/src/_includes/webrings/the-claw.liquid b/src/_includes/webrings/the-claw.liquid
index a14d5d71..a6860fe9 100644
--- a/src/_includes/webrings/the-claw.liquid
+++ b/src/_includes/webrings/the-claw.liquid
@@ -6,7 +6,7 @@
The Claw Webring
</h3>
<div class="flex justify-center">
- <a href="https://github.com/whitep4nth3r/the-claw-webring" class="flex flex-row items-start md:items-center font-semibold py-2 px-4 rounded-full !no-underline !text-white dark:text-gray-900 bg-purple-600 dark:bg-purple-400 hover:bg-pink-500">
+ <a href="https://github.com/whitep4nth3r/the-claw-webring" class="flex flex-row items-start md:items-center font-semibold py-2 px-4 rounded-full !no-underline !text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 hover:bg-pink-500">
<span class="[&>svg]:h-5 [&>svg]:w-5 icon--bold pt-1 md:pt-0 mr-1">
{% tablericon "user-plus" "Join!" %}
</span>
diff --git a/src/about.md b/src/about.md
index 4c1f12e3..522c8b21 100644
--- a/src/about.md
+++ b/src/about.md
@@ -19,7 +19,7 @@ meta:
---
<div class="flex items-center justify-center w-full not-prose mb-6">
- <div class="border border-teal-700 dark:border-teal-300 bg-white rounded-full overflow-hidden p-4 [&>*]:max-w-xs">
+ <div class="border border-blue-500 dark:border-blue-200 bg-white rounded-full overflow-hidden p-4 [&>*]:max-w-xs">
{% capture about_alt %}{{ site.name }} - image by David Neal / @reverentgeek{% endcapture %}
{% image './src/assets/img/avatar.webp', about_alt, 'w-full h-auto' %}
</div>
diff --git a/src/index.html b/src/index.html
index 930ce68f..65fe0435 100644
--- a/src/index.html
+++ b/src/index.html
@@ -29,13 +29,13 @@ meta:
>
<a class="no-underline" href="{% if post.data.link %}{{ post.data.link }}{% else %}{{ post.url }}{% endif %}">
{% if post.data.link %}
- <h2 class="[&>svg]:h-5 [&>svg]:w-5 [&>svg]:md:h-7 [&>svg]:md:w-7 [&>svg]:-mt-1 [&>svg]:md:-mt-1.5 [&>svg]:inline icon--bold p-name m-0 text-xl font-black leading-tight tracking-normal hover:text-pink-500 dark:text-gray-200 dark:hover:text-pink-500 md:text-2xl ease-in-out duration-300">
+ <h2 class="[&>svg]:h-5 [&>svg]:w-5 [&>svg]:md:h-7 [&>svg]:md:w-7 [&>svg]:-mt-1 [&>svg]:md:-mt-1.5 [&>svg]:inline icon--bold p-name m-0 text-xl font-black leading-tight tracking-normal hover:text-blue-800 dark:text-gray-200 dark:hover:text-blue-200 md:text-2xl ease-in-out duration-300">
{% tablericon 'link' post.data.title %}
{{ post.data.title }}
</h2>
{% else %}
<h2
- class="p-name m-0 text-xl font-black leading-tight tracking-normal hover:text-pink-500 dark:text-gray-200 dark:hover:text-pink-500 md:text-2xl ease-in-out duration-300"
+ class="p-name m-0 text-xl font-black leading-tight tracking-normal hover:text-blue-800 dark:text-gray-200 dark:hover:text-blue-200 md:text-2xl ease-in-out duration-300"
>
{{ post.data.title }}
</h2>
diff --git a/src/posts/2023/building-a-now-page-using-nextjs-and-social-apis.md b/src/posts/2023/building-a-now-page-using-nextjs-and-social-apis.md
index 762bfff3..1d52178d 100644
--- a/src/posts/2023/building-a-now-page-using-nextjs-and-social-apis.md
+++ b/src/posts/2023/building-a-now-page-using-nextjs-and-social-apis.md
@@ -69,7 +69,7 @@ export default function Now(props) {
<p className="mt-2 text-lg leading-7 text-gray-500 dark:text-gray-100">
<CodeBracketIcon className="mr-1 inline h-6 w-6" />
Working at <Link
- className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-400"
+ className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
href="https://hashicorp.com"
target="_blank"
rel="noopener noreferrer"
@@ -81,7 +81,7 @@ export default function Now(props) {
<MegaphoneIcon className="mr-1 inline h-6 w-6" />
Rooting for the{` `}
<Link
- className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-400"
+ className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
href="https://lakers.com"
target="_blank"
rel="noopener noreferrer"
@@ -98,7 +98,7 @@ export default function Now(props) {
<p className="mt-2 text-lg leading-7 text-gray-500 dark:text-gray-100">
<CommandLineIcon className="mr-1 inline h-6 w-6" />
Hacking away on random projects like this page, my <Link
- className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-400"
+ className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
href="/blog"
passHref
>
@@ -114,7 +114,7 @@ export default function Now(props) {
<p className="pt-8 text-center text-xs text-gray-900 dark:text-gray-100">
(This is a{' '}
<Link
- className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-400"
+ className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
href="https://nownownow.com/about"
target="_blank"
rel="noopener noreferrer"
@@ -122,7 +122,7 @@ export default function Now(props) {
now page
</Link>
, and if you have your own site, <Link
- className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-400"
+ className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
href="https://nownownow.com/about"
target="_blank"
rel="noopener noreferrer"
@@ -309,14 +309,14 @@ const Cover = (props: { media: Media; type: 'artist' | 'album' }) => {
return (
<Link
- className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-400"
+ className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
href={media.url}
target="_blank"
rel="noopener noreferrer"
title={media.name}
>
<div className="relative">
- <div className="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-500 bg-cover-gradient dark:border-gray-500"></div>
+ <div className="absolute left-0 top-0 h-full w-full rounded-lg border border-blue-500 bg-cover-gradient dark:border-gray-500"></div>
<div className="absolute left-1 bottom-2 drop-shadow-md">
<div className="px-1 text-xs font-bold text-white">{media.name}</div>
<div className="px-1 text-xs text-white">
diff --git a/src/posts/2023/building-my-now-page-using-eleventy.md b/src/posts/2023/building-my-now-page-using-eleventy.md
index 9fae18f9..726b026f 100644
--- a/src/posts/2023/building-my-now-page-using-eleventy.md
+++ b/src/posts/2023/building-my-now-page-using-eleventy.md
@@ -56,7 +56,7 @@ The **Listening: albums** call is quite similar, swapping the `user.gettopartist
{% for artist in artists %}
<a href="{{artist.url}}" title="{{artist.name | escape}}">
<div class="relative block">
- <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-500 bg-cover-gradient dark:border-gray-500"></div>
+ <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-blue-500 bg-cover-gradient dark:border-gray-500"></div>
<div class="absolute left-1 bottom-2 drop-shadow-md">
<div class="px-1 text-xs font-bold text-white">{{artist.name}}</div>
<div class="px-1 text-xs text-white">
@@ -106,7 +106,7 @@ These images are all cropped to `350x350` and hosted over on <a href="https://bu
{% for album in albums %}
<a href="{{album.url}}" title="{{album.name | escape}}">
<div class="relative block">
- <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-500 bg-cover-gradient dark:border-gray-500"></div>
+ <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-blue-500 bg-cover-gradient dark:border-gray-500"></div>
<div class="absolute left-1 bottom-2 drop-shadow-md">
<div class="px-1 text-xs font-bold text-white">{{album.name}}</div>
<div class="px-1 text-xs text-white">
diff --git a/src/posts/2023/client-side-webmentions-in-nextjs.md b/src/posts/2023/client-side-webmentions-in-nextjs.md
index 11aaf0de..3fe680f6 100644
--- a/src/posts/2023/client-side-webmentions-in-nextjs.md
+++ b/src/posts/2023/client-side-webmentions-in-nextjs.md
@@ -76,7 +76,7 @@ const WebmentionsCore = () => {
<li key={mention['wm-id']} className="-ml-2">
<Link href={mention.url} target="_blank" rel="noopener noreferrer">
<Image
- className="h-10 w-10 rounded-full border border-purple-500 dark:border-gray-500"
+ className="h-10 w-10 rounded-full border border-blue-500 dark:border-gray-500"
src={mention.author.photo}
alt={mention.author.name}
width="40"
@@ -105,7 +105,7 @@ const WebmentionsCore = () => {
rel="noopener noreferrer"
>
<Image
- className="h-12 w-12 rounded-full border border-purple-500 dark:border-gray-500"
+ className="h-12 w-12 rounded-full border border-blue-500 dark:border-gray-500"
src={mention.author.photo}
alt={mention.author.name}
width="48"
diff --git a/src/posts/2023/displaying-listening-data-from-apple-music-using-musickit.md b/src/posts/2023/displaying-listening-data-from-apple-music-using-musickit.md
index 9e4211ba..0797303f 100644
--- a/src/posts/2023/displaying-listening-data-from-apple-music-using-musickit.md
+++ b/src/posts/2023/displaying-listening-data-from-apple-music-using-musickit.md
@@ -160,7 +160,7 @@ The templating for my site is all written in [liquid.js](https://liquidjs.com) a
{% for artist in recentTracks.artists %}
<a href="https://rateyourmusic.com/search?searchterm={{ artist.name | escape }}" title="{{artist.name | escape}}">
<div class="relative block">
- <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-purple-500"></div>
+ <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-blue-600 hover:border-blue-500 bg-cover-gradient dark:border-blue-400 dark:hover:border-blue-500"></div>
<div class="absolute left-1 bottom-2 drop-shadow-md">
<div class="px-1 text-xs font-bold text-white">{{ artist.name }}</div>
<div class="px-1 text-xs text-white">
@@ -184,7 +184,7 @@ The templating for my site is all written in [liquid.js](https://liquidjs.com) a
{% for album in recentTracks.albums %}
<a href="https://rateyourmusic.com/search?searchtype=l&searchterm={{album.name | escape}}" title="{{album.name | escape}}">
<div class="relative block">
- <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-purple-500"></div>
+ <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-blue-600 hover:border-blue-500 bg-cover-gradient dark:border-blue-400 dark:hover:border-blue-500"></div>
<div class="absolute left-1 bottom-2 drop-shadow-md">
<div class="px-1 text-xs font-bold text-white">{{ album.name }}</div>
<div class="px-1 text-xs text-white">
@@ -204,7 +204,7 @@ The templating for my site is all written in [liquid.js](https://liquidjs.com) a
We have an object containing arrays of objects — we iterate through each object for the appropriate section (tracks aren't displayed at the moment) and build the resulting display[^3]. This isn't perfect by any means, but, it does provide a nice little visualization of what I'm listening to and `240` tracks feels adequate as a rolling window into that activity.
-{% image 'https://cdn.coryd.dev/blog/albums-artists.jpg', 'Albums and artists', 'border border-purple-600 dark:border-purple-400 rounded-lg overflow-hidden [&>*]:w-full' %}
+{% image '<https://cdn.coryd.dev/blog/albums-artists.jpg>', 'Albums and artists', 'border border-blue-500 dark:border-blue-200 rounded-lg overflow-hidden [&>*]:w-full' %}
[^1]: There are some good options to do this, but there aren't a _ton_ and the age of some of the apps is concerning. [Marvis](https://appaddy.wixsite.com/marvis) is far and away your best choice here.
[^2]: Making sure that you update the values you obtained, including the path to your downloaded `.p8` file.
diff --git a/src/posts/2023/drying-up-now-page-templates-eleventy.md b/src/posts/2023/drying-up-now-page-templates-eleventy.md
index 67fe05fd..5523a41e 100644
--- a/src/posts/2023/drying-up-now-page-templates-eleventy.md
+++ b/src/posts/2023/drying-up-now-page-templates-eleventy.md
@@ -26,7 +26,7 @@ If you want to skip all the reading, the diff for this [is here](https://github.
{% assign alt = item.alt | strip %}
<a href="{{ item.url | stripUtm }}" title="{{ alt | escape }}">
<div class="relative block h-full"{% if shape != 'square' %} style="max-width:226px"{% endif %}>
- <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-pink-500 dark:border-purple-400 dark:hover:border-pink-500 ease-in-out duration-300{% if item.title %} bg-cover-gradient{% endif %}"></div>
+ <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-blue-600 hover:border-blue-800 dark:border-blue-400 dark:hover:border-blue-200 ease-in-out duration-300{% if item.title %} bg-cover-gradient{% endif %}"></div>
<div class="absolute left-1 bottom-2 drop-shadow-md">
{% if item.title %}
<div class="px-1 text-xs font-bold text-white line-clamp-2">{{ item.title }}</div>
diff --git a/src/posts/2023/fastmail-handling-inbound-email-with-regex-filters-now-with-chatgpt.md b/src/posts/2023/fastmail-handling-inbound-email-with-regex-filters-now-with-chatgpt.md
index 0651ca14..547cc41d 100644
--- a/src/posts/2023/fastmail-handling-inbound-email-with-regex-filters-now-with-chatgpt.md
+++ b/src/posts/2023/fastmail-handling-inbound-email-with-regex-filters-now-with-chatgpt.md
@@ -10,7 +10,7 @@ I've been using Fastmail for years now and have explored a number of different a
For now, I've approached filtering my mail by applying regular expressions to reasonably broad categories of incoming mail[^2]. My thinking with this approach is that will scale better over the long term by applying heuristics to common phrases and patterns in incoming mail without the need to apply rules to senders on a per address or domain basis.
-{% image 'https://cdn.coryd.dev/blog/fastmail-workflow.jpg', 'A diagram of my Fastmail workflow', 'border border-purple-600 dark:border-purple-400 rounded-lg overflow-hidden [&>*]:w-full' %}
+{% image '<https://cdn.coryd.dev/blog/fastmail-workflow.jpg>', 'A diagram of my Fastmail workflow', 'border border-blue-500 dark:border-blue-200 rounded-lg overflow-hidden [&>*]:w-full' %}
## Alias-specific rules
diff --git a/src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md b/src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md
index 0a88462b..05aff432 100644
--- a/src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md
+++ b/src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md
@@ -65,6 +65,6 @@ Rendering the output is as simple as:
{% endraw %}
Leaving us with:
-{% image 'https://cdn.coryd.dev/blog/album-releases.jpg', 'Albums I\'m looking forward to', 'border border-purple-600 dark:border-purple-400 rounded-lg overflow-hidden [&>*]:w-full' %}
+{% image '<https://cdn.coryd.dev/blog/album-releases.jpg>', 'Albums I\'m looking forward to', 'border border-blue-500 dark:border-blue-200 rounded-lg overflow-hidden [&>*]:w-full' %}
[^1]: At this point, a dev playground.
diff --git a/src/posts/2023/lazy-select-based-pagination-eleventy.md b/src/posts/2023/lazy-select-based-pagination-eleventy.md
index 4642b432..6c5444bd 100644
--- a/src/posts/2023/lazy-select-based-pagination-eleventy.md
+++ b/src/posts/2023/lazy-select-based-pagination-eleventy.md
@@ -15,7 +15,7 @@ Given that I was already iterating through all pages in my posts collection, my
<div class="flex flex-row items-center">
<select
id="pagination"
- class="block w-12 h-12 rounded-full text-white dark:text-gray-900 bg-purple-500 hover:bg-purple-500 dark:hover:bg-purple-300 mr-1 focus-visible:outline-none focus-visible:bg-purple-400 appearance-none text-center"
+ class="block w-12 h-12 rounded-full text-white dark:text-gray-900 bg-blue-500 hover:bg-blue-500 dark:hover:bg-blue-300 mr-1 focus-visible:outline-none focus-visible:bg-blue-400 appearance-none text-center"
style="text-align-last:center">
{% for pageEntry in pagination.pages %}
<option {% if page.url == pagination.hrefs[forloop.index0] %}selected{% endif %} value="{{ forloop.index }}">{{ forloop.index }}</option>
diff --git a/src/posts/2023/now-page-grouping-episodes-of-same-show.md b/src/posts/2023/now-page-grouping-episodes-of-same-show.md
index abfe2f94..1404211b 100644
--- a/src/posts/2023/now-page-grouping-episodes-of-same-show.md
+++ b/src/posts/2023/now-page-grouping-episodes-of-same-show.md
@@ -13,7 +13,7 @@ I made a minor update to how I'm normalizing TV data for display on my now page.
By _minor_ I mean one of those things that may well break inexplicably depending on where the data lands. Instead of returning a normalized array based directly off the data returned by [Trakt](https://trakt.tv)'s API I'm instead collecting episodes in an array, checking as I iterate through the response to see if an episode of the same show exists and replacing that object with a mutated object designed to display the range of episodes watched for the show.
-{% image 'https://cdn.coryd.dev/blog/grouped-tv.jpg', 'Grouped TV episodes', 'border border-purple-600 dark:border-purple-400 rounded-lg overflow-hidden [&>*]:w-full' %}
+{% image '<https://cdn.coryd.dev/blog/grouped-tv.jpg>', 'Grouped TV episodes', 'border border-blue-500 dark:border-blue-200 rounded-lg overflow-hidden [&>*]:w-full' %}
{% raw %}
diff --git a/src/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji.md b/src/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji.md
index 09de513b..c151e3a5 100644
--- a/src/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji.md
+++ b/src/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji.md
@@ -168,6 +168,6 @@ Finally, if the page this all lives on is loaded by a client without JavaScript
All of this, yields the single line at the bottom of this image — updated on each visit.
-{% image 'https://cdn.coryd.dev/blog/now-playing.jpg', 'Now playing', 'border border-purple-600 dark:border-purple-400 rounded-lg overflow-hidden [&>*]:w-full' %}
+{% image '<https://cdn.coryd.dev/blog/now-playing.jpg>', 'Now playing', 'border border-blue-500 dark:border-blue-200 rounded-lg overflow-hidden [&>*]:w-full' %}
[^1]: Plus explicit conditions matching David Bowie and Minor Threat.
diff --git a/src/posts/2023/optimizing-for-performance-with-eleventy.md b/src/posts/2023/optimizing-for-performance-with-eleventy.md
index db6dcbbe..9ee5092d 100644
--- a/src/posts/2023/optimizing-for-performance-with-eleventy.md
+++ b/src/posts/2023/optimizing-for-performance-with-eleventy.md
@@ -140,6 +140,6 @@ For this page in particular, the images that are rendered above the fold are set
All of these boilerplate steps leave us with a quick to load, accessible and resilient site:
-{% image 'https://cdn.coryd.dev/blog/page-speed.jpg', 'Pagespeed scores for coryd.dev/now', 'border border-purple-600 dark:border-purple-400 rounded-lg overflow-hidden [&>*]:w-full' %}
+{% image '<https://cdn.coryd.dev/blog/page-speed.jpg>', 'Pagespeed scores for coryd.dev/now', 'border border-blue-500 dark:border-blue-200 rounded-lg overflow-hidden [&>*]:w-full' %}
[^1]: It's easy, flexible and helps mitigate my lack of an eye for design by providing safe baselines.
diff --git a/src/posts/2023/road-to-madness-apple-music-charts.md b/src/posts/2023/road-to-madness-apple-music-charts.md
index 486cfa7c..a30f8086 100644
--- a/src/posts/2023/road-to-madness-apple-music-charts.md
+++ b/src/posts/2023/road-to-madness-apple-music-charts.md
@@ -133,7 +133,7 @@ _Cool_[^4]. GitHub triggers a rebuild of the site every hour, Netlify builds it,
There are some significant issues with this approach: it doesn't capture listens to an album in a loop (like me playing the new Outer Heaven record today — hails 🤘). It can get wonky when my diff function hits a track order that elicits a false positive return value.
-{% image 'https://cdn.coryd.dev/blog/charlie.jpg', 'Charlie Day standing in front of charts', 'border border-purple-600 dark:border-purple-400 rounded-lg overflow-hidden [&>*]:w-full' %}
+{% image '<https://cdn.coryd.dev/blog/charlie.jpg>', 'Charlie Day standing in front of charts', 'border border-blue-500 dark:border-blue-200 rounded-lg overflow-hidden [&>*]:w-full' %}
"But Cory there's last.fm." I hear this, I love last.fm, but I've got concerns about its age, ownership and maintenance. I don't want to be on the wrong end of a scream test when the wrong (right?) server rack gets decommissioned.
diff --git a/src/posts/2023/webmentions-in-eleventy.md b/src/posts/2023/webmentions-in-eleventy.md
index 858e4c08..c12b566a 100644
--- a/src/posts/2023/webmentions-in-eleventy.md
+++ b/src/posts/2023/webmentions-in-eleventy.md
@@ -79,7 +79,7 @@ When the build runs, it renders any mentions of a given post via a [liquid.js](h
<img
src={{mention.author.photo}}
alt={{mention.author.name}}
- class="h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-purple-500 dark:hover:border-purple-300"
+ class="h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-blue-500 dark:hover:border-blue-300"
loading="lazy"
/>
</a>
@@ -98,7 +98,7 @@ When the build runs, it renders any mentions of a given post via a [liquid.js](h
<img
src={{mention.author.photo}}
alt={{mention.author.name}}
- class="h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-purple-500 dark:hover:border-purple-300"
+ class="h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-blue-500 dark:hover:border-blue-300"
loading="lazy"
/>
</a>
@@ -116,12 +116,12 @@ When the build runs, it renders any mentions of a given post via a [liquid.js](h
<img
src={{mention.author.photo}}
alt={{mention.author.name}}
- class="h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all group-hover:border-purple-500 dark:group-hover:border-purple-300"
+ class="h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all group-hover:border-blue-500 dark:group-hover:border-blue-300"
loading="lazy"
/>
<div class="ml-3">
- <p class="text-sm group-hover:text-purple-500 dark:group-hover:text-purple-300">{{mention.content.text}}</p>
- <p class="mt-1 text-xs group-hover:text-purple-500 dark:group-hover:text-purple-300">{{mention.published | isoDateOnly}}</p>
+ <p class="text-sm group-hover:text-blue-500 dark:group-hover:text-blue-300">{{mention.content.text}}</p>
+ <p class="mt-1 text-xs group-hover:text-blue-500 dark:group-hover:text-blue-300">{{mention.published | isoDateOnly}}</p>
</div>
</a>
</div>
diff --git a/src/uses.md b/src/uses.md
index dbe1eca0..551bfeed 100644
--- a/src/uses.md
+++ b/src/uses.md
@@ -26,7 +26,7 @@ meta:
Software and services that I use for work and my own enjoyment.
-{% image 'https://coryd.dev/assets/img/pages/uses.jpg', 'My desk', 'border border-purple-600 dark:border-purple-400 rounded-lg overflow-hidden [&>*]:w-full', 'eager' %}
+{% image '<https://coryd.dev/assets/img/pages/uses.jpg>', 'My desk', 'border border-blue-500 dark:border-blue-200 rounded-lg overflow-hidden [&>*]:w-full', 'eager' %}
<h3 className="text-xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-2xl sm:leading-10 md:text-4xl md:leading-14">Computer setup</h3>
diff --git a/tailwind.css b/tailwind.css
index 9f8d6eb0..6e0547e7 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -3,7 +3,7 @@
@tailwind utilities;
body {
- --pagefind-ui-primary: theme(colors.purple.600);
+ --pagefind-ui-primary: theme(colors.blue.500);
--pagefind-ui-text: theme(colors.gray.800);
--pagefind-ui-background: theme(colors.white);
--pagefind-ui-border: theme(colors.gray.200);
@@ -23,11 +23,11 @@ html {
.pagefind-ui__form mark {
color: theme(colors.white) !important;
- background: theme(colors.pink.500) !important;
+ background: theme(colors.blue.500) !important;
}
.pagefind-ui__form .pagefind-ui__result-link {
- color: theme(colors.purple.600) !important;
+ color: theme(colors.blue.500) !important;
@apply !ease-in-out;
@apply !duration-300;
}
@@ -35,22 +35,22 @@ html {
.pagefind-ui__form .pagefind-ui__result-link:hover,
.pagefind-ui__form .pagefind-ui__result-link:focus,
.pagefind-ui__form .pagefind-ui__result-link:active {
- color: theme(colors.pink.500) !important;
+ color: theme(colors.blue.500) !important;
}
::-moz-selection {
color: theme(colors.white);
- background: theme(colors.pink.500);
+ background: theme(colors.blue.500);
}
::selection {
color: theme(colors.white);
- background: theme(colors.pink.500);
+ background: theme(colors.blue.500);
}
.active,
.active svg {
- color: theme(colors.teal.700);
+ color: theme(colors.blue.500);
}
.header-anchor {
@@ -67,7 +67,7 @@ h2 > a.header-anchor {
a,
.prose a {
- color: theme(colors.purple.600);
+ color: theme(colors.blue.500);
@apply ease-in-out;
@apply duration-300;
}
@@ -78,7 +78,7 @@ a:active,
.prose a:hover,
.prose a:focus,
.prose a:active {
- color: theme(colors.pink.500);
+ color: theme(colors.blue.800);
}
p > a,
@@ -97,8 +97,8 @@ pre {
border: 1px solid theme(colors.gray.700);
border-radius: 0 !important;
@apply scrollbar-thin;
- @apply scrollbar-thumb-pink-500;
- @apply scrollbar-track-pink-100;
+ @apply scrollbar-thumb-blue-500;
+ @apply scrollbar-track-blue-100;
}
.tag--button {
@@ -111,7 +111,7 @@ pre {
@apply text-white;
@apply ease-in-out;
@apply duration-300;
- background: theme(colors.purple.600);
+ background: theme(colors.blue.500);
}
.tag--button.tag--button__small {
@@ -126,7 +126,7 @@ pre {
.tag--button:hover,
.tag--button:active,
.tag--button:focus {
- background: theme(colors.pink.500);
+ background: theme(colors.blue.800);
}
code[class*='language-'],
@@ -150,7 +150,7 @@ pre[class*='language-'] {
}
.link--icon:hover > svg {
- color: theme(colors.pink.500);
+ color: theme(colors.blue.500);
}
.icon--spin > svg {
@@ -163,25 +163,24 @@ pre[class*='language-'] {
@media (prefers-color-scheme: dark) {
body {
- --pagefind-ui-primary: theme(colors.purple.400);
+ --pagefind-ui-primary: theme(colors.blue.400);
--pagefind-ui-text: theme(colors.white);
--pagefind-ui-background: theme(colors.gray.900);
--pagefind-ui-border: theme(colors.gray.700);
--pagefind-ui-tag: theme(colors.gray.700);
}
- .active,
- .active svg {
- color: theme(colors.teal.300);
- }
-
.pagefind-ui__form .pagefind-ui__result-link {
- color: theme(colors.purple.400) !important;
+ color: theme(colors.blue.400) !important;
}
- a,
- .prose a {
- color: theme(colors.purple.400);
+ a:hover,
+ a:focus,
+ a:active,
+ .prose a:hover,
+ .prose a:focus,
+ .prose a:active {
+ color: theme(colors.blue.200);
}
.link--icon svg {
@@ -189,11 +188,16 @@ pre[class*='language-'] {
}
.link--icon:hover svg {
- color: theme(colors.pink.500);
+ color: theme(colors.blue.200);
}
.tag--button {
color: theme(colors.gray.900);
- background: theme(colors.purple.400);
+ }
+
+ .tag--button:hover,
+ .tag--button:active,
+ .tag--button:focus {
+ background: theme(colors.blue.200);
}
}