feat: rework color scheme

src/_includes/base.liquid

@@ -15,7 +15,7 @@
     <meta property="og:type" content="article" />
     <meta property="og:url" content="https://coryd.dev{{ page.url }}" />
     <meta property="og:image" content="{{ post | getFirstAttachment }}">
-    <meta name="theme-color" content="#bd93f9" />
+    <meta name="theme-color" content="#a855f7" />
     <link
       rel="icon"
       type="image/x-icon"

src/_includes/footer.liquid

@@ -9,8 +9,8 @@
     {% include "icons/oku.liquid" %}
   </div>
   <p class="text-sm text-gray-500 dark:text-gray-100 text-center pb-8">
-    <a class="text-gray-700 hover:text-primary-400 dark:text-gray-200{% if page.url == '/uses/' %} active{% endif %}" href="/uses">Uses</a>
+    <a class="text-gray-700 hover:text-purple-400 dark:text-gray-200{% if page.url == '/uses/' %} active{% endif %}" href="/uses">Uses</a>
     •
-    <a class="text-gray-700 hover:text-primary-400 dark:text-gray-200{% if page.url == '/referrals/' %} active{% endif %}" href="/referrals">Referrals</a>
+    <a class="text-gray-700 hover:text-purple-400 dark:text-gray-200{% if page.url == '/referrals/' %} active{% endif %}" href="/referrals">Referrals</a>
     • Cory Dransfeldt • © {{ "now" | date: "%Y" }}</p>
 </footer>

src/_includes/nav.liquid

@@ -1,10 +1,10 @@
 <nav>
   <ul class="flex">
     <li class="mr-6">
-      <a class="text-gray-700 hover:text-primary-400 dark:text-gray-200{% if page.url == '/now/' %} active{% endif %}" href="/now">Now</a>
+      <a class="text-gray-700 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400{% if page.url == '/now/' %} active{% endif %}" href="/now">Now</a>
     </li>
     <li class="mr-6">
-      <a class="text-gray-700 hover:text-primary-400 dark:text-gray-200{% if page.url == '/about/' %} active{% endif %}" href="/about">About</a>
+      <a class="text-gray-700 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400{% if page.url == '/about/' %} active{% endif %}" href="/about">About</a>
     </li>
     <li class="mr-6">
       {% include "icons/coffee.liquid" %}

src/_includes/now-topper.liquid

@@ -1,6 +1,6 @@
 <div class="border-b border-gray-200 pb-8 dark:border-gray-700 mb-8 pb-8 dark:text-white text-gray-800">
   <a class="no-underline" href="/now">
-    <h2 class="m-0 text-xl font-black leading-tight tracking-normal md:text-2xl text-primary-500 hover:text-primary-400 mb-4">Now</h2>
+    <h2 class="m-0 text-xl font-black leading-tight tracking-normal md:text-2xl text-purple-500 hover:text-purple-400 mb-4">Now</h2>
   </a>
   <p>I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, music, writing, reading and tv and movies.</p>
   <p class="mb-0">{{ status.emoji }} {{ status.content }}</p>

src/_includes/now.liquid

@@ -48,7 +48,7 @@ layout: main
         {% 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-primary-500 bg-cover-gradient dark:border-gray-500"></div>
+              <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-500 hover:border-purple-400 bg-cover-gradient dark:border-gray-500 dark:hover:border-purple-400"></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">
@@ -78,7 +78,7 @@ layout: main
         {% 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-primary-500 bg-cover-gradient dark:border-gray-500"></div>
+              <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-500 hover:border-purple-400 bg-cover-gradient dark:border-gray-500 dark:hover:border-purple-400"></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">
@@ -140,7 +140,7 @@ layout: main
         {% for movie in movies %}
           <a href="{{movie.link}}" title="{{movie.title | escape}}">
             <div class="relative block" style="max-width:226px">
-              <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-primary-500 bg-cover-gradient dark:border-gray-500"></div>
+              <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-500 hover:border-purple-400 bg-cover-gradient dark:border-gray-500 dark:hover:border-purple-400"></div>
               <div class="absolute left-1 bottom-2 drop-shadow-md">
                 <div class="px-1 text-xs font-bold text-white">{{ movie.title }}</div>
               </div>

src/_includes/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 text-primary-500 hover:text-primary-400" aria-label="Previous page">
+      <button class="py-2 pr-4 text-purple-500 hover:text-purple-400" aria-label="Previous page">
         {% heroicon "solid" "arrow-left" "Prevous" "width=20 height=20" %}
       </button>
     </a>
@@ -17,7 +17,7 @@
   <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-primary-500 hover:bg-primary-500 dark:hover:bg-primary-300 mr-1 focus-visible:outline-none focus-visible:bg-primary-400 appearance-none text-center"
+      class="block cursor-pointer 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"
       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>
@@ -30,7 +30,7 @@
 
   {% if pagination.href.next %}
     <a href="{{ pagination.href.next }}">
-      <button class="py-2 pl-4 text-primary-500 hover:text-primary-400" aria-label="Next page">
+      <button class="py-2 pl-4 text-purple-500 hover:text-purple-400" aria-label="Next page">
         {% heroicon "solid" "arrow-right" "Next" "width=20 height=20" %}
       </button>
     </a>

src/_includes/webmentions.liquid

@@ -11,7 +11,7 @@
                 <img
                   src={{mention.author.photo}}
                   alt={{mention.author.name}}
-                  class="bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-primary-500 dark:hover:border-primary-300"
+                  class="bg-gray-900 dark:bg-white 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"
                   loading="lazy" />
               </a>
             </li>
@@ -29,7 +29,7 @@
                 <img
                   src={{mention.author.photo}}
                   alt={{mention.author.name}}
-                  class="bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-primary-500 dark:hover:border-primary-300"
+                  class="bg-gray-900 dark:bg-white 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"
                   loading="lazy" />
               </a>
             </li>
@@ -46,11 +46,11 @@
               <img
                 src={{mention.author.photo}}
                 alt={{mention.author.name}}
-                class="bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all group-hover:border-primary-500 dark:group-hover:border-primary-300"
+                class="bg-gray-900 dark:bg-white 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"
                 loading="lazy" />
               <div class="ml-3">
-                <p class="text-sm group-hover:text-primary-500 dark:group-hover:text-primary-300">{{ mention.content.text }}</p>
-                <p class="mt-1 text-xs group-hover:text-primary-500 dark:group-hover:text-primary-300">{{ mention.published | isoDateOnly }}</p>
+                <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>
               </div>
             </a>
           </div>

src/assets/atom-feed-links.xsl

@@ -69,7 +69,7 @@ xmlns:atom="http://www.w3.org/2005/Atom">
 </xsl:template>
 <xsl:template match="atom:feed/atom:entry">
 <li>
-<a class="no-underline text-gray-800 dark:text-gray-200 leading-tight m-0 cursor-pointer">
+<a class="no-underline text-gray-800 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400 leading-tight m-0 cursor-pointer">
     <xsl:attribute name="href">
     <xsl:value-of select="atom:link/@href"/>
     </xsl:attribute>

src/assets/atom-feed.xsl

@@ -73,7 +73,7 @@ xmlns:atom="http://www.w3.org/2005/Atom">
 <xsl:template match="atom:feed/atom:entry">
 <div class="pb-4 border-b border-gray-200 dark:border-gray-700 mb-8">
     <h3 class="mb-0">
-    <a class="no-underline text-gray-800 dark:text-gray-200 leading-tight m-0 md:text-2xl text-xl tracking-normal font-black">
+    <a class="no-underline text-gray-800 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400 leading-tight m-0 cursor-pointer">
         <xsl:attribute name="href">
         <xsl:value-of select="atom:link/@href"/>
         </xsl:attribute>

src/assets/styles/prism.css

@@ -1,375 +1,133 @@
-:root {
-  --background: #282a36;
-  --comment: #6272a4;
-  --foreground: #f8f8f2;
-  --selection: #44475a;
-  --cyan: #8be9fd;
-  --green: #50fa7b;
-  --orange: #ffb86c;
-  --pink: #ff79c6;
-  --purple: #bd93f9;
-  --red: #ff5555;
-  --yellow: #f1fa8c;
-  --background-30: #282a3633;
-  --comment-30: #6272a433;
-  --foreground-30: #f8f8f233;
-  --selection-30: #44475a33;
-  --cyan-30: #8be9fd33;
-  --green-30: #50fa7b33;
-  --orange-30: #ffb86c33;
-  --pink-30: #ff79c633;
-  --purple-30: #bd93f933;
-  --red-30: #ff555533;
-  --yellow-30: #f1fa8c33;
-  --background-40: #282a3666;
-  --comment-40: #6272a466;
-  --foreground-40: #f8f8f266;
-  --selection-40: #44475a66;
-  --cyan-40: #8be9fd66;
-  --green-40: #50fa7b66;
-  --orange-40: #ffb86c66;
-  --pink-40: #ff79c666;
-  --purple-40: #bd93f966;
-  --red-40: #ff555566;
-  --yellow-40: #f1fa8c66;
-}
-pre::-webkit-scrollbar {
-  width: 14px;
-}
-pre::-webkit-scrollbar-track {
-  background-color: var(--comment);
-  border-radius: 0;
-}
-pre::-webkit-scrollbar-thumb {
-  background-color: var(--purple);
-  border-radius: 0;
-}
-code[class*='language-'] ::-moz-selection,
-code[class*='language-']::-moz-selection,
-pre[class*='language-'] ::-moz-selection,
-pre[class*='language-']::-moz-selection {
-  text-shadow: none;
-  background-color: var(--selection);
-}
-code[class*='language-'] ::selection,
-code[class*='language-']::selection,
-pre[class*='language-'] ::selection,
-pre[class*='language-']::selection {
-  text-shadow: none;
-  background-color: var(--selection);
-}
-pre.line-numbers {
-  position: relative;
-  padding-left: 3.8em;
-  counter-reset: linenumber;
-}
-pre.line-numbers > code {
-  position: relative;
-  white-space: inherit;
-}
-.line-numbers .line-numbers-rows {
-  position: absolute;
-  pointer-events: none;
-  top: 0;
-  font-size: 100%;
-  left: -3.8em;
-  width: 3em;
-  letter-spacing: -1px;
-  border-right: 1px solid #999;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.line-numbers-rows > span {
-  pointer-events: none;
-  display: block;
-  counter-increment: linenumber;
-}
-.line-numbers-rows > span:before {
-  content: counter(linenumber);
-  color: #999;
-  display: block;
-  padding-right: 0.8em;
-  text-align: right;
-}
-div.code-toolbar {
-  position: relative;
-}
-div.code-toolbar > .toolbar {
-  position: absolute;
-  top: 0.3em;
-  right: 0.2em;
-  transition: opacity 0.3s ease-in-out;
-  opacity: 0;
-}
-div.code-toolbar:hover > .toolbar {
-  opacity: 1;
-}
-div.code-toolbar > .toolbar .toolbar-item {
-  display: inline-block;
-  padding-right: 20px;
-}
-div.code-toolbar > .toolbar a {
-  cursor: pointer;
-}
-div.code-toolbar > .toolbar button {
-  background: 0 0;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  overflow: visible;
-  padding: 0;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
-div.code-toolbar > .toolbar a,
-div.code-toolbar > .toolbar button,
-div.code-toolbar > .toolbar span {
-  color: var(--foreground);
-  font-size: 0.8em;
-  padding: 0.5em;
-  background: var(--comment);
-  border-radius: 0.5em;
-}
-div.code-toolbar > .toolbar a:focus,
-div.code-toolbar > .toolbar a:hover,
-div.code-toolbar > .toolbar button:focus,
-div.code-toolbar > .toolbar button:hover,
-div.code-toolbar > .toolbar span:focus,
-div.code-toolbar > .toolbar span:hover {
-  color: inherit;
-  text-decoration: none;
-  background-color: var(--green);
-}
-@media print {
-  code[class*='language-'],
-  pre[class*='language-'] {
-    text-shadow: none;
-  }
-}
+/*
+ * Laserwave Theme originally by Jared Jones for Visual Studio Code
+ * https://github.com/Jaredk3nt/laserwave
+ *
+ * Ported for PrismJS by Simon Jespersen [https://github.com/simjes]
+ */
+
 code[class*='language-'],
 pre[class*='language-'] {
-  color: var(--foreground);
-  background: var(--background);
-  text-shadow: none;
-  font-family: PT Mono, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  background: #27212e;
+  color: #ffffff;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; /* this is the default */
+  /* The following properties are standard, please leave them as they are */
+  font-size: 1em;
+  direction: ltr;
   text-align: left;
   white-space: pre;
   word-spacing: normal;
   word-break: normal;
-  word-wrap: normal;
   line-height: 1.5;
   -moz-tab-size: 2;
   -o-tab-size: 2;
   tab-size: 2;
+  /* The following properties are also standard */
   -webkit-hyphens: none;
   -moz-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;
 }
+
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection,
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection {
+  background: #eb64b927;
+  color: inherit;
+}
+
+code[class*='language-']::selection,
+code[class*='language-'] ::selection,
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection {
+  background: #eb64b927;
+  color: inherit;
+}
+
+/* Properties specific to code blocks */
 pre[class*='language-'] {
-  background: var(--background);
+  padding: 1em; /* this is standard */
+  margin: 0.5em 0; /* this is the default */
+  overflow: auto; /* this is standard */
   border-radius: 0.5em;
-  padding: 1em;
-  margin: 0.5em 0;
-  overflow: auto;
-  height: auto;
-}
-:not(pre) > code[class*='language-'],
-pre[class*='language-'] {
-  background: var(--background);
 }
+
+/* Properties specific to inline code */
 :not(pre) > code[class*='language-'] {
-  padding: 4px 7px;
-  border-radius: 0.3em;
-  white-space: normal;
+  padding: 0.2em 0.3em;
+  border-radius: 0.5rem;
+  white-space: normal; /* this is standard */
 }
-.limit-300 {
-  height: 300px !important;
+
+.token.comment,
+.token.prolog,
+.token.cdata {
+  color: #91889b;
 }
-.limit-300 {
-  height: 400px !important;
+
+.token.punctuation {
+  color: #7b6995;
 }
-.limit-500 {
-  height: 500px !important;
+
+.token.builtin,
+.token.constant,
+.token.boolean {
+  color: #ffe261;
 }
-.limit-600 {
-  height: 600px !important;
+
+.token.number {
+  color: #b381c5;
 }
-.limit-700 {
-  height: 700px !important;
+
+.token.important,
+.token.atrule,
+.token.property,
+.token.keyword {
+  color: #40b4c4;
 }
-.limit-800 {
-  height: 800px !important;
+
+.token.doctype,
+.token.operator,
+.token.inserted,
+.token.tag,
+.token.class-name,
+.token.symbol {
+  color: #74dfc4;
 }
-.language-css {
-  color: var(--purple);
+
+.token.attr-name,
+.token.function,
+.token.deleted,
+.token.selector {
+  color: #eb64b9;
 }
-.token {
-  color: var(--pink);
+
+.token.attr-value,
+.token.regex,
+.token.char,
+.token.string {
+  color: #b4dce7;
 }
-.language-css .token {
-  color: var(--pink);
-}
-.token.script {
-  color: var(--foreground);
+
+.token.entity,
+.token.url,
+.token.variable {
+  color: #ffffff;
 }
+
+/* The following rules are pretty similar across themes, but feel free to adjust them */
 .token.bold {
-  font-weight: 700;
+  font-weight: bold;
 }
+
 .token.italic {
   font-style: italic;
 }
-.token.atrule,
-.token.attr-name,
-.token.attr-value {
-  color: var(--green);
-}
-.language-css .token.atrule {
-  color: var(--purple);
-}
-.language-html .token.attr-value,
-.language-markup .token.attr-value {
-  color: var(--yellow);
-}
-.token.boolean {
-  color: var(--purple);
-}
-.token.builtin,
-.token.class-name {
-  color: var(--cyan);
-}
-.token.comment {
-  color: var(--comment);
-}
-.token.constant {
-  color: var(--purple);
-}
-.language-javascript .token.constant {
-  color: var(--orange);
-  font-style: italic;
-}
+
 .token.entity {
-  color: var(--pink);
-}
-.language-css .token.entity {
-  color: var(--green);
-}
-.language-html .token.entity.named-entity {
-  color: var(--purple);
-}
-.language-html .token.entity:not(.named-entity) {
-  color: var(--pink);
-}
-.language-markup .token.entity.named-entity {
-  color: var(--purple);
-}
-.language-markup .token.entity:not(.named-entity) {
-  color: var(--pink);
-}
-.token.function {
-  color: var(--green);
-}
-.language-css .token.function {
-  color: var(--cyan);
-}
-.token.important,
-.token.keyword {
-  color: var(--pink);
-}
-.token.prolog {
-  color: var(--foreground);
-}
-.token.property {
-  color: var(--orange);
-}
-.language-css .token.property {
-  color: var(--cyan);
-}
-.token.punctuation {
-  color: var(--pink);
-}
-.language-css .token.punctuation {
-  color: var(--orange);
-}
-.language-html .token.punctuation,
-.language-markup .token.punctuation {
-  color: var(--foreground);
-}
-.token.selector {
-  color: var(--pink);
-}
-.language-css .token.selector {
-  color: var(--green);
-}
-.token.regex {
-  color: var(--red);
-}
-.language-css .token.rule:not(.atrule) {
-  color: var(--foreground);
-}
-.token.string {
-  color: var(--yellow);
-}
-.token.tag {
-  color: var(--pink);
-}
-.token.url {
-  color: var(--cyan);
-}
-.language-css .token.url {
-  color: var(--orange);
-}
-.token.variable {
-  color: var(--comment);
-}
-.token.number {
-  color: rgba(189, 147, 249, 1);
-}
-.token.operator {
-  color: rgba(139, 233, 253, 1);
-}
-.token.char {
-  color: rgba(255, 135, 157, 1);
-}
-.token.symbol {
-  color: rgba(255, 184, 108, 1);
-}
-.token.deleted {
-  color: #e2777a;
+  cursor: help;
 }
+
 .token.namespace {
-  color: #e2777a;
-}
-.highlight-line {
-  color: inherit;
-  display: inline-block;
-  text-decoration: none;
-  border-radius: 4px;
-  padding: 2px 10px;
-}
-.highlight-line:empty:before {
-  content: ' ';
-}
-.highlight-line:not(:last-child) {
-  min-width: 100%;
-}
-.highlight-line .highlight-line:not(:last-child) {
-  min-width: 0;
-}
-.highlight-line-isdir {
-  color: var(--foreground);
-  background-color: var(--selection-30);
-}
-.highlight-line-active {
-  background-color: var(--comment-30);
-}
-.highlight-line-add {
-  background-color: var(--green-30);
-}
-.highlight-line-remove {
-  background-color: var(--red-30);
+  opacity: 0.7;
 }

src/index.html

@@ -14,7 +14,7 @@ pagination:
   >
     <a class="no-underline" href="{{ post.url }}">
       <h2
-        class="p-name m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl"
+        class="p-name m-0 text-xl font-black leading-tight tracking-normal hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400 md:text-2xl"
       >
         {{ post.data.title }}
       </h2>

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-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+                className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-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-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+                className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-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-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+                className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-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-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+              className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-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-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+              className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-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-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+      className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-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-primary-500 bg-cover-gradient dark:border-gray-500"></div>
+        <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-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">

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-primary-500 bg-cover-gradient dark:border-gray-500"></div>
+                        <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-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-primary-500 bg-cover-gradient dark:border-gray-500"></div>
+                        <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-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">

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-primary-500 dark:border-gray-500"
+                      className="h-10 w-10 rounded-full border border-purple-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-primary-500 dark:border-gray-500"
+                  className="h-12 w-12 rounded-full border border-purple-500 dark:border-gray-500"
                   src={mention.author.photo}
                   alt={mention.author.name}
                   width="48"

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-primary-500 hover:bg-primary-500 dark:hover:bg-primary-300 mr-1 focus-visible:outline-none focus-visible:bg-primary-400 appearance-none text-center"
+      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"
       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>

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-primary-500 dark:hover:border-primary-300"
+                        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"
                         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-primary-500 dark:hover:border-primary-300"
+                        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"
                         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-primary-500 dark:group-hover:border-primary-300"
+                    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"
                     loading="lazy"
                 />
                 <div class="ml-3">
-                    <p class="text-sm group-hover:text-primary-500 dark:group-hover:text-primary-300">{{mention.content.text}}</p>
-                    <p class="mt-1 text-xs group-hover:text-primary-500 dark:group-hover:text-primary-300">{{mention.published | isoDateOnly}}</p>
+                    <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>
                 </div>
             </a>
         </div>

src/tags.md

@@ -7,7 +7,7 @@ title: Tags
 
 <span>
   <a href="/tags/{{ tag }}" class="no-underline">
-    <button class="font-semibold py-2 px-4 mr-4 mb-4 rounded-full text-white dark:text-gray-900 bg-primary-400 hover:bg-primary-500 dark:hover:bg-primary-300">
+    <button class="font-semibold py-2 px-4 mr-4 mb-4 rounded-full text-white dark:text-gray-900 bg-purple-400 hover:bg-purple-500 dark:hover:bg-purple-300">
       {{ tag }}
     </button>
   </a>