cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: rewrite search

Browse source
This commit is contained in:
Cory Dransfeldt 2024-03-18 14:55:55 -07:00
parent ebcaa0d175
commit 6e81e47122
No known key found for this signature in database
13 changed files with 174 additions and 198 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/assets/styles/components/forms.css
View file

@ -1,26 +1,23 @@
::placeholder {
color: var(--text-color) !important;
opacity: .5 !important;
color: var(--text-color);
opacity: .5;
}
input[type="text"],
input[type="email"],
input[type="search"],
textarea {
/* necessary for pagefind overrides */
font-family: var(--font-sans) !important;
color: var(--text-color) !important;
background-color: var(--background-color) !important;
border: 1px solid var(--accent-color) !important;
font-family: var(--font-sans);
color: var(--text-color);
background-color: var(--background-color);
border: 1px solid var(--accent-color);
padding: var(--sizing-sm);
font-size: var(--font-size-base) !important;
width: 100% !important;
border-radius: var(--rounded-md) !important;
/* necessary for pagefind overrides */
font-size: var(--font-size-base);
width: 100%;
border-radius: var(--rounded-md);
outline: none;
margin-bottom: var(--sizing-base);
font-weight: var(--font-weight-base) !important;
font-weight: var(--font-weight-base);
line-height: var(--line-height-base);
transition-property: border-color;
transition-timing-function: var(--transition-ease-in-out);
@ -31,10 +28,10 @@ input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
border: 1px solid var(--accent-color-hover) !important;
border: 1px solid var(--accent-color-hover);
}
button:not(.theme__toggle, .share, .pagefind-ui__search-clear) {
button:not(.theme__toggle, .share) {
border-radius: var(--rounded-full);
padding: var(--sizing-sm) var(--sizing-lg);
margin: 0 var(--sizing-xs) var(--sizing-md) 0;
@ -52,11 +49,22 @@ button:not(.theme__toggle, .share, .pagefind-ui__search-clear) {
transition-property: background-color;
}
button:not(.theme__toggle, .share, .pagefind-ui__search-clear):hover,
button:not(.theme__toggle, .share, .pagefind-ui__search-clear):active,
button:not(.theme__toggle, .share, .pagefind-ui__search-clear):focus {
button:not(.theme__toggle, .share):hover,
button:not(.theme__toggle, .share):active,
button:not(.theme__toggle, .share):focus {
color: var(--color-lightest);
background-color: var(--accent-color-hover) !important;
background-color: var(--accent-color-hover);
transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default);
}
.search__results {
margin-top: 0;
padding: 0;
list-style: none;
}
.search__results li {
margin-top: var(--sizing-sm);
margin-bottom: var(--sizing-sm);
}

115
src/assets/styles/components/pagefind.css
View file

@ -1,115 +0,0 @@
.pagefind-ui {
margin-bottom: var(--sizing-base);
--pagefind-ui-primary: var(--accent-color);
--pagefind-ui-text: var(--text-color);
--pagefind-ui-background: var(--color-lightest);
--pagefind-ui-border: var(--gray-light);
--pagefind-ui-tag: var(--gray-light);
--pagefind-ui-border-width: 1px;
--pagefind-ui-border-radius: 0;
--pagefind-ui-image-border-radius: 0;
--pagefind-ui-image-box-ratio: 3 / 2;
--pagefind-ui-font: var(--font-sans);
}
.pagefind-ui,
.pagefind-ui__filter-name,
.pagefind-ui__filter-label,
.pagefind-ui__result-excerpt,
.pagefind-ui__message,
.pagefind-ui__button {
font-size: var(--font-size-base) !important;
}
.pagefind-ui__result-excerpt {
word-break: break-word !important;
}
.pagefind-ui__form:before {
opacity: 1 !important;
top: calc(19px * var(--pagefind-ui-scale)) !important;
}
.pagefind-ui__result-title {
color: var(--accent-color);
font-size: var(--font-size-2xl);
line-height: var(--line-height-2xl);
font-weight: var(--font-weight-heavy);
margin: 0;
transition-property: color;
transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default);
}
.pagefind-ui__result-title:hover,
.pagefind-ui__result-title:focus,
.pagefind-ui__result-title:active {
color: var(--accent-color-hover);
}
.pagefind-ui__results-area {
margin-bottom: var(--sizing-base);
}
:is(input[type="text"], input[type="search"]).pagefind-ui__search-input {
padding-left: 2.375rem !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
height: 42px !important;
}
.pagefind-ui__search-clear {
color: var(--text-color);
background-color: transparent !important;
}
.pagefind-ui__search-clear:hover,
.pagefind-ui__search-clear:focus,
.pagefind-ui__search-clear:active {
color: var(--accent-color-hover) !important;
}
.pagefind-ui__result-title {
margin-bottom: var(--sizing-xs) !important;
}
.pagefind-ui__result-link {
font-size: var(--font-size-2xl) !important;
color: var(--accent-color) !important;
}
.pagefind-ui__result-link:hover,
.pagefind-ui__result-link:focus,
.pagefind-ui__result-link:active {
color: var(--accent-color-hover) !important;
}
.pagefind-ui__button {
color: var(--color-lightest) !important;
line-height: var(--line-height-base);
border-radius: var(--rounded-full) !important;
padding: var(--sizing-sm) var(--sizing-lg) !important;
margin: 0 var(--sizing-xs) var(--sizing-md) 0;
cursor: pointer !important;
height: unset !important;
background-color: var(--accent-color) !important;
transition-property: background-color;
transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default);
}
.pagefind-ui__search-clear {
height: calc(48px * var(--pagefind-ui-scale)) !important;
}
.pagefind-ui__button:hover,
.pagefind-ui__button:active,
.pagefind-ui__button:focus {
color: var(--color-lightest) !important;
background-color: var(--accent-color-hover) !important;
}
.pagefind__placeholder {
height: 42px !important;
font-weight: var(--font-weight-heavy);
}