Merge pull request #30 from ryanmr/11ty-10-25

Adds branding changes

Author: BrianMitchL

src/css/tailwind.css

@@ -46,17 +46,21 @@ Call to action effects
 
 :root {
   /* Light Cornflower Blue */
-  --box-flap-color-1: #94cbe3;
+  --box-flap-color-1: theme('colors.jsmn-blue');
   /* English Red */
-  --box-flap-color-2: #b73f53;
+  --box-flap-color-2: theme('colors.jsmn-red');
   /* Old Mauve (not used yet) */
-  --box-flap-color-3: #6b334a;
+  --box-flap-color-3: theme('colors.jsmn-mauve');
 
   --box-flap-size: theme('spacing.16');
   --box-flap-offset: theme('spacing.8');
 }
 
 .box-flap {
+  /*
+    Box flap inspiration, by kang, 2019.
+    https://codepen.io/inyoung1/pen/gZVdeX
+  */
   position: relative;
 }
 

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 %}

tailwind.config.js

@@ -25,6 +25,10 @@ module.exports = {
       white: '#fff',
 
       'jsmn-yellow': '#e5cf5f',
+      'jsmn-black': '#242323',
+      'jsmn-blue': '#94cbe3',
+      'jsmn-red': '#b73f53',
+      'jsmn-mauve': '#6b334a',
 
       gray: {
         100: '#f7fafc',