From a292270b11e61d55fe1a0910284ed24065d1fb4b Mon Sep 17 00:00:00 2001
From: John Bowdre <john@bowdre.net>
Date: Mon, 15 Jan 2024 17:07:23 -0600
Subject: [PATCH] search styling work...

---
 assets/js/search.js               |  2 +-
 layouts/partials/search-form.html |  8 +++---
 static/css/custom.css             | 45 +++++++++++++++++++++++++++++++
 3 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/assets/js/search.js b/assets/js/search.js
index f7e7482..b89362e 100644
--- a/assets/js/search.js
+++ b/assets/js/search.js
@@ -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', {
diff --git a/layouts/partials/search-form.html b/layouts/partials/search-form.html
index 71cfa6e..847e55b 100644
--- a/layouts/partials/search-form.html
+++ b/layouts/partials/search-form.html
@@ -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>
\ No newline at end of file
diff --git a/static/css/custom.css b/static/css/custom.css
index dcc3109..c4cfff5 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -216,4 +216,49 @@ code,
 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);
 }
\ No newline at end of file