add search

assets/scripts/animations.js

@@ -14,7 +14,7 @@ function addEffect({ target }) {
     target == null ||
     !target["matches"] ||
     !target.matches(
-      "a[href],.nav-toggle-button,button,input,label:not(:has(input))",
+      "a[href],.nav-toggle-button,button,input[type='radio']",
     )
   ) {
     return;

site/_includes/-header.njk

@@ -49,10 +49,9 @@
       <a class="{{ 'nav-active' if '/recipes' in page.url }}" href="{{ "/recipes/" | url }}">/recipes</a>
       <a class="{{ 'nav-active' if '/music' in page.url }}" href="{{ "/music/" | url }}">/music</a>
       <a class="{{ 'nav-active' if '/books' in page.url }}" href="{{ "/books/" | url }}">/books</a>
-      <button id="search" type="button"><svg style="height:0.75em;margin-right:0.5ch" viewBox="0 0 12 13"><g stroke-width="1.5" stroke="currentcolor" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>search</button>
+      <a class="{{ 'nav-active' if '/search' in page.url }}" href="{{ "/search/" | url }}">/search</a>
     </div>
   </nav>
-  {% include "-search.njk" %}
   <h1>{{ tag | capitalize if tag else title }}</h1>
   <div class="header-meta">
     {%- if author -%}

site/_includes/-search.njk

@@ -1,4 +0,0 @@
-<div class="searchCard">
-  <div id="searchbox"></div>
-  <script src="/pagefind/pagefind-ui.js" onload="new PagefindUI({ element: '#searchbox', showImages: false, resetStyles: false });"></script>
-</div>

site/_includes/css/site.css

@@ -113,7 +113,7 @@ body {
 a {
   color: inherit;
 }
-a[href], button#search {
+a[href] {
   appearance: none;
   text-decoration-line: underline;
   box-decoration-break: clone;
@@ -121,16 +121,8 @@ a[href], button#search {
   margin: -0.1em;
   position: relative;
 }
-button#search {
-  background: transparent;
-  border: none;
-  color: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  margin-left: auto;
-}
-:is(a, nav label, button#search):hover,
-:is(a, nav label, button#search):focus-visible,
+:is(a, nav label):hover,
+:is(a, nav label):focus-visible,
 nav label:has(input:focus-visible),
 nav label:has(input:checked) {
   outline: none;
@@ -146,7 +138,7 @@ nav label:has(input:checked) {
       0 0 1rem var(--c-accent);
   }
 }
-:is(a[href], button, button#search, nav label):focus-visible,
+:is(a[href], button, nav label):focus-visible,
 nav label:has(input:focus-visible) {
   z-index: 1;
   outline: 2px solid var(--c-text-dark);
@@ -575,6 +567,7 @@ body .isso-input-wrapper label {
 }
 
 body .isso-input-wrapper input,
+input[type='text'],
 body .isso-textarea,
 body .isso-preview {
   color: inherit;
@@ -607,7 +600,7 @@ body .isso-preview {
     var(--c-text-background-light) 20px
   );
 }
-body .isso-post-action > input {
+body .isso-post-action > input, button {
   color: inherit;
   background-color: var(--c-text-background-light);
   font-size: 1rem;
@@ -674,3 +667,21 @@ body .isso-post-action {
   );
   animation: 1s ease normal forwards ripple;
 }
+.pagefind-ui__form {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: 1fr min-content;
+}
+.pagefind-ui__search-input {
+  margin-right: 0.5rem;
+  grid-column-start: 0;
+  grid-column-end: span 1;
+}
+.pagefind-ui__drawer {
+  grid-column-start: 0;
+  grid-column-end: span 2;
+  width: 100%;
+}
+.pagefind-ui__result-excerpt {
+  margin: 0.5rem 0;
+}

site/pages/search.njk

@@ -0,0 +1,9 @@
+---
+layout: base.njk
+permalink: search/index.html
+title: Search
+---
+<div class="searchCard">
+  <div id="searchbox"></div>
+  <script src="/pagefind/pagefind-ui.js" onload="new PagefindUI({ element: '#searchbox', showImages: false, resetStyles: false, autofocus: true });"></script>
+</div>