Better search

diff --git a/site/assets/styles.css b/site/assets/styles.css
index 52f742c4c1160fd49634a6f8d12f5576b810c981..1b9c72dcc8963e637cb7f140c7b66b7110145d85 100644 (file)
--- a/site/assets/styles.css
+++ b/site/assets/styles.css
@@ -90,22 +90,23 @@ header{
    ================= */
 .search{ width: 100%; margin: 18px 0 24px; }
 
-.search input{
+.search input {
   width: 100%;
   padding: 12px 14px;
   border-radius: 12px;
   border: 1px solid var(--ring);
-  background: var(--panel);
+  background: var(--panel);   /* reverted to original tile color */
   color: var(--fg);
   outline: none;
+  font-size: 1.1rem;          /* keep larger text */
   box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
 }
 
-.search input::placeholder{
+.search input::placeholder {
   color: color-mix(in oklab, var(--muted) 85%, transparent);
 }
 
-.search input:focus{
+.search input:focus {
   border-color: var(--accent);
   box-shadow:
     0 0 0 2px rgba(16,163,127,.40),

diff --git a/site/index.njk b/site/index.njk
index 518fac11a3156948dd99a28b1c7ab1b712dcac6e..4ad679f8676296a03a193f50ef35f3cd817f4209 100644 (file)
--- a/site/index.njk
+++ b/site/index.njk
@@ -3,8 +3,6 @@ layout: layouts/base.njk
 title: zndr.dk — Services
 ---
 
-<h2 style="margin:0 0 .5rem 0;">Services</h2>
-
 <div class="search" role="search">
   <input id="filter" placeholder="Filter services (press / to focus)" autocomplete="off" aria-label="Filter services" />
 </div>
@@ -35,7 +33,7 @@ title: zndr.dk — Services
   const grid = document.querySelector('.grid');
   grid.parentNode.insertBefore(empty, grid.nextSibling);
 
-  // Read initial query from ?q=
+  // read ?q= param
   const params = new URLSearchParams(location.search);
   const initial = params.get('q') || '';
   if (initial) input.value = initial;
@@ -43,11 +41,9 @@ title: zndr.dk — Services
   const norm = s => (s || '').toLowerCase().trim();
   const matches = (el, q) => {
     if (!q) return true;
-    // search name, description, tag, and any data-* attributes
     const name = el.querySelector('h3')?.textContent || '';
     const desc = el.querySelector('p')?.textContent || '';
-    const tag  = el.getAttribute('data-tag') || '';
-    const hay  = `${name}\n${desc}\n${tag}\n${el.textContent}`;
+    const hay = `${name}\n${desc}\n${el.textContent}`;
     return norm(hay).includes(q);
   };
 
@@ -61,20 +57,30 @@ title: zndr.dk — Services
       if (ok) shown++;
     });
     empty.style.display = shown ? 'none' : '';
-    // reflect in URL (so refresh/bookmark keeps query)
     const url = new URL(location);
-    if (q) { url.searchParams.set('q', q); }
-    else   { url.searchParams.delete('q'); }
+    if (q) url.searchParams.set('q', q);
+    else url.searchParams.delete('q');
     history.replaceState(null, '', url);
   };
 
   input.addEventListener('input', () => {
     clearTimeout(t);
-    t = setTimeout(apply, 80); // tiny debounce
+    t = setTimeout(apply, 80);
+  });
+
+  // Handle Enter → open first visible card
+  input.addEventListener('keydown', e => {
+    if (e.key !== 'Enter') return;
+    e.preventDefault();
+    const visible = cards.filter(
+      c => c.offsetParent !== null && c.style.display !== 'none'
+    );
+    if (visible.length) {
+      window.location.href = visible[0].href;
+    }
   });
 
-  // run once on load
-  apply();
+  apply(); // initial run
 })();
 </script>