mirror of
https://github.com/jbowdre/runtimeterror.git
synced 2024-11-22 06:52:18 +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 params = new URLSearchParams(window.location.search);
|
||||||
const query = params.get('query');
|
const query = params.get('query');
|
||||||
if (query) {
|
if (query) {
|
||||||
document.getElementById('search-input').setAttribute('value', query);
|
document.getElementById('search-query').setAttribute('value', query);
|
||||||
const idx = lunr(function () {
|
const idx = lunr(function () {
|
||||||
this.ref('id')
|
this.ref('id')
|
||||||
this.field('title', {
|
this.field('title', {
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
<form id="search"
|
<form id="search"
|
||||||
action='{{ with .GetPage "/search" }}{{ .Permalink }}{{ end }}' method="get">
|
action='{{ with .GetPage "/search" }}{{ .Permalink }}{{ end }}' method="get">
|
||||||
<label hidden for="search-input">Search site</label>
|
<input type="search" id="search-query" name="query" placeholder="Looking for something?" aria-label="search text">
|
||||||
<input type="text" id="search-input" name="query"
|
<button type="submit" aria-label="search button"><i class="fa-solid fa-magnifying-glass"></i></button>
|
||||||
placeholder="Type here to search">
|
|
||||||
<input type="submit" value="search">
|
|
||||||
</form>
|
</form>
|
|
@ -217,3 +217,48 @@ kbd,
|
||||||
samp {
|
samp {
|
||||||
color: var(--code);
|
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