mirror of
https://github.com/jbowdre/runtimeterror.git
synced 2024-11-09 17:42:19 +00:00
search styling work...
This commit is contained in:
parent
4fb8039ba0
commit
a292270b11
3 changed files with 49 additions and 6 deletions
|
@ -15,7 +15,7 @@ function displayResults (results, store) {
|
|||
const params = new URLSearchParams(window.location.search);
|
||||
const query = params.get('query');
|
||||
if (query) {
|
||||
document.getElementById('search-input').setAttribute('value', query);
|
||||
document.getElementById('search-query').setAttribute('value', query);
|
||||
const idx = lunr(function () {
|
||||
this.ref('id')
|
||||
this.field('title', {
|
||||
|
|
|
@ -1,7 +1,5 @@
|
|||
<form id="search"
|
||||
action='{{ with .GetPage "/search" }}{{.Permalink}}{{end}}' method="get">
|
||||
<label hidden for="search-input">Search site</label>
|
||||
<input type="text" id="search-input" name="query"
|
||||
placeholder="Type here to search">
|
||||
<input type="submit" value="search">
|
||||
action='{{ with .GetPage "/search" }}{{ .Permalink }}{{ end }}' method="get">
|
||||
<input type="search" id="search-query" name="query" placeholder="Looking for something?" aria-label="search text">
|
||||
<button type="submit" aria-label="search button"><i class="fa-solid fa-magnifying-glass"></i></button>
|
||||
</form>
|
|
@ -217,3 +217,48 @@ kbd,
|
|||
samp {
|
||||
color: var(--code);
|
||||
}
|
||||
|
||||
/* search box styling */
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-radius: 0.25rem;
|
||||
margin: 0.25rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
input {
|
||||
flex-grow: 2;
|
||||
border: none;
|
||||
background-color: var(--off-bg);
|
||||
/* border-radius: 0.25rem; */
|
||||
color: var(--off-fg);
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input:placeholder-shown {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
form:focus-within {
|
||||
outline: 1px solid var(--logo);
|
||||
/* border-radius: 0.25rem; */
|
||||
}
|
||||
|
||||
/* form input {
|
||||
border-radius: 0.25rem;
|
||||
margin: 0.25rem;
|
||||
background-color: var(--off-bg);
|
||||
} */
|
||||
|
||||
form button {
|
||||
/* border-radius: 0.25rem;
|
||||
margin: 0.25rem; */
|
||||
outline: none;
|
||||
border: none;
|
||||
background-color: var(--off-bg);
|
||||
color: var(--logo);
|
||||
}
|
Loading…
Reference in a new issue