Changes default tailwind gray to jsmn-black, tweaks hovers

Author: ryanmr

src/includes/header.njk

@@ -1,4 +1,4 @@
-<nav class="bg-gray-800 shadow-md relative">
+<nav class="bg-jsmn-black shadow-md relative">
   <div class="container mx-auto px-2 sm:px-6 lg:px-8">
     <div class="relative flex items-center justify-between h-16">
       <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
@@ -70,7 +70,7 @@
             {% for link in site.navigation %}
             <a
               href="{{ link.path | url }}"
-              class="ml-4 px-3 py-2 text-sm font-medium leading-5 text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out"
+              class="ml-4 px-3 py-2 text-sm font-medium leading-5 text-gray-300 hover:text-white border-b-2 border-transparent hover:border-jsmn-yellow focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out"
               >{{ link.text }}</a
             >
             {% endfor %}
@@ -84,7 +84,7 @@
       {% for link in site.navigation %}
       <a
         href="{{ link.path | url }}"
-        class="mt-1 block px-3 py-2 text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out"
+        class="mt-1 block px-3 py-2 text-base font-medium text-gray-300 hover:text-white border-l-4 border-transparent hover:border-jsmn-yellow focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out"
         >{{ link.text }}</a
       >
       {% endfor %}