chore: make search input consistent w/contact ones

This commit is contained in:
Cory Dransfeldt 2023-12-13 14:57:15 -08:00
parent 0b47dc7747
commit e7c51023dd
No known key found for this signature in database
3 changed files with 58 additions and 1 deletions

View file

@ -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": {

View file

@ -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);

View file

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