chore: Change default blue colour

assets/css/base.pcss

@@ -4,7 +4,7 @@
   }
 
   blockquote {
-    @apply pl-4 border-l-3 border-blue-800 dark:border-blue-400;
+    @apply pl-4 border-l-3 border-blue-primary dark:border-blue-400;
   }
 
   code {

assets/css/components.pcss

@@ -1,6 +1,6 @@
 @layer components {
   .link {
-    @apply underline text-blue-800 hover:text-blue-900 dark:text-blue-400 dark:hover:text-white;
+    @apply underline text-blue-primary hover:text-blue-900 dark:text-blue-400 dark:hover:text-white;
     text-decoration-thickness: 1px;
     text-underline-offset: 0.1em;
 

assets/css/utilities.pcss

@@ -4,7 +4,7 @@
       text-decoration-color: theme('colors.blue.400');
     }
 
-    .text-decoration-blue-800 {
+    .text-decoration-blue-primary {
       text-decoration-color: theme('colors.blue.800');
     }
 

source/_pages/talks.html.twig

@@ -11,7 +11,7 @@ use:
         {% for talk in data.talks|sort((a,b) => a.sortable_date < b.sortable_date) %}
             <article>
                 <h2>
-                    <a class="text-blue-800 dark:text-blue-400" href="{{ talk.url }}">
+                    <a class="text-blue-primary dark:text-blue-400" href="{{ talk.url }}">
                         {{ talk.title }}
                     </a>
                 </h2>

source/_partials/navbar.html.twig

@@ -5,7 +5,7 @@
                 <a href="/">
                     <svg
                       aria-hidden="true"
-                      class="w-16 h-16 text-blue-800 fill-current dark:text-blue-400 md:w-18 md:h-18"
+                      class="w-16 h-16 text-blue-primary fill-current dark:text-blue-400 md:w-18 md:h-18"
                       viewBox="0 0 706 504"
                       xmlns="http://www.w3.org/2000/svg"
                     >
@@ -21,7 +21,7 @@
                 <nav class="flex items-center mt-4 space-x-6 md:mt-0 md:flex-row">
                     {% for item in site.menus.main %}
                         {% set is_active = page.url matches '#' ~ item.is_active ~ '#' %}
-                        <a class="text-black dark:text-white border-b-3 py-2 hover:border-gray-300 {{ is_active ? 'border-blue-800 dark:border-blue-400' : 'border-transparent' }}" href="{{ item.href }}">{{ item.title }}</a>
+                        <a class="text-black dark:text-white border-b-3 py-2 hover:border-gray-300 {{ is_active ? 'border-blue-primary dark:border-blue-400' : 'border-transparent' }}" href="{{ item.href }}">{{ item.title }}</a>
                     {% endfor %}
                 </nav>
             </div>

source/_partials/post/post-teaser.html.twig

@@ -1,6 +1,6 @@
 <article>
     <h2>
-        <a class="text-blue-800 dark:text-blue-400" href="{{ post.url }}">
+        <a class="text-blue-primary dark:text-blue-400" href="{{ post.url }}">
             {{ post.title }}
         </a>
     </h2>

tools/tailwindcss/colours.js

@@ -2,6 +2,9 @@ let { gray } = require('tailwindcss/colors')
 
 module.exports = {
   black: '#000',
+  blue: {
+    primary: '#24608A',
+  },
   current: 'currentColor',
   gray,
   inherit: 'inherit',