john/runtimeterror
1
0
Fork 0
mirror of https://github.com/jbowdre/runtimeterror.git synced 2024-11-26 17:02:17 +00:00
Code Issues Projects Releases Packages Wiki Activity

search styling work...

Browse source
This commit is contained in:
John Bowdre 2024-01-15 17:07:23 -06:00
parent 34fc5b5d6e
commit 9223c6ca9e
3 changed files with 49 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/js/search.js
View file

@ -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', {

8
layouts/partials/search-form.html
View file

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

45
static/css/custom.css
View file

@ -216,4 +216,49 @@ code,
kbd, 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);
} }