Add style for Pagefind

This commit is contained in:
Korbs 2024-11-14 23:53:30 -05:00
parent d48c752d31
commit 0202b451de

53
src/styles/search.scss Normal file
View file

@ -0,0 +1,53 @@
input {
background: #0a0a0a;
color: white;
border: 1px #2d2d2d solid;
border-radius: 6px;
padding: 12px 16px;
font-size: 14px;
&:focus {
outline: none;
}
}
mark {
background: gainsboro;
padding: 2px 4px;
border-radius: 4px;
margin: -2px -4px;
}
.pagefind-ui__message {
font-size: 18px;
font-weight: bold;
}
.pagefind-ui__results {
padding: 0px 18px;
}
.pagefind-ui__drawer {
position: absolute;
top: 79px;
max-width: 620px;
background: rgba(22, 22, 22, 0.75);
border-radius: 6px;
border: 1px #2d2d2d solid;
backdrop-filter: blur(24px);
padding: 12px 24px;
}
.pagefind-ui__search-clear, .pagefind-ui__hidden {
display: none !important;
}
@media screen and (max-width: 916px){
.pagefind-ui__drawer {
left: 12px;
width: 100%;
max-width: calc(100% - 74px);
}
}
@media screen and (max-width: 650px){
.pagefind-ui__drawer {
top: 122px !important;
}
}