From e7c51023dd5d3812ab8713d921bb2e340c0e594c Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cory.dransfeldt@gmail.com>
Date: Wed, 13 Dec 2023 14:57:15 -0800
Subject: [PATCH] chore: make search input consistent w/contact ones

---
 package.json                   |  2 +-
 src/assets/styles/tailwind.css | 32 ++++++++++++++++++++++++++++++++
 tailwind.css                   | 25 +++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0c23ef73..5d1fb8b3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "description": "The source for my personal site, blog and portfolio. Built using 11ty and hosted on Netlify.",
   "main": "index.html",
   "scripts": {
diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css
index 073db387..d58e1607 100644
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -2135,6 +2135,26 @@ pre {
   display: inline;
 }
 
+.pagefind-ui__search-input {
+  width: 100% !important;
+  outline: 2px solid transparent !important;
+  outline-offset: 2px !important;
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
+  border-radius: 0.125rem !important;
+  border-width: 1px !important;
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(37 99 235 / var(--tw-border-opacity)) !important;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
+  transition-duration: 300ms !important;
+}
+
+.pagefind-ui__search-input:focus {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(30 64 175 / var(--tw-border-opacity)) !important;
+}
+
 @media (prefers-color-scheme: dark) {
   body {
     --pagefind-ui-primary: #60a5fa;
@@ -2208,6 +2228,18 @@ pre {
     background: #bfdbfe;
   }
 
+  .pagefind-ui__search-input {
+    --tw-border-opacity: 1 !important;
+    border-color: rgb(96 165 250 / var(--tw-border-opacity)) !important;
+    --tw-bg-opacity: 1 !important;
+    background-color: rgb(17 24 39 / var(--tw-bg-opacity)) !important;
+  }
+
+  .pagefind-ui__search-input:focus {
+    --tw-border-opacity: 1 !important;
+    border-color: rgb(191 219 254 / var(--tw-border-opacity)) !important;
+  }
+
   .dark\:prose-invert {
     --tw-prose-body: var(--tw-prose-invert-body);
     --tw-prose-headings: var(--tw-prose-invert-headings);
diff --git a/tailwind.css b/tailwind.css
index 1f17da7d..6047ae17 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -158,6 +158,22 @@ pre {
   @apply inline;
 }
 
+.pagefind-ui__search-input {
+  @apply !w-full;
+  @apply !outline-none;
+  @apply !bg-white;
+  @apply !rounded-sm;
+  @apply !border;
+  @apply !border-blue-600;
+  @apply !transition-colors;
+  @apply !ease-in-out;
+  @apply !duration-300;
+}
+
+.pagefind-ui__search-input:focus {
+  @apply !border-blue-800;
+}
+
 @media (prefers-color-scheme: dark) {
   body {
     --pagefind-ui-primary: theme(colors.blue.400);
@@ -230,4 +246,13 @@ pre {
   .pill--button:focus {
     background: theme(colors.blue.200);
   }
+
+  .pagefind-ui__search-input {
+    @apply !border-blue-400;
+    @apply !bg-gray-900
+  }
+
+  .pagefind-ui__search-input:focus {
+    @apply !border-blue-200
+  }
 }