Simplify search results

app/assets/stylesheets/cards.css

@@ -460,36 +460,4 @@
       margin-block-end: 0;
     }
   }
-
-  .card--search {
-    --card-color: var(--color-ink);
-    --card-padding-block: 0.75rem;
-    --card-padding-inline: 0.75rem;
-
-    background-color: var(--color-canvas);
-
-    &:not(&:hover) {
-      box-shadow: 0 0 0 1px var(--color-ink-lighter);
-    }
-
-    .card__collection {
-      background-color: var(--color-canvas);
-      color: var(--color-ink-medium);
-      font-size: var(--text-x-small);
-      font-weight: 600;
-      padding-block-end: 1ch;
-    }
-
-    .card__id {
-      margin: 0;
-    }
-
-    .card__body {
-      padding: 0;
-    }
-
-    .card__title {
-      font-size: var(--text-medium);
-    }
-  }
 }

app/assets/stylesheets/search.css

@@ -61,7 +61,7 @@
 
   .search__list {
     display: grid;
-    gap: 1ch;
+    gap: var(--block-space);
     list-style: none;
     margin: 0 auto;
     max-inline-size: 80ch;
@@ -70,15 +70,14 @@
   }
 
   .search__empty {
+    margin-block: 3em;
     opacity: 0.66;
-    border: 2px dashed var(--color-ink-light);
-    border-radius: 1ch;
-    padding: calc(var(--gap) / 2);
+    text-align: center;
   }
 
   .search__excerpt {
+    color: var(--color-ink);
     font-size: var(--text-small);
-    margin-block-start: 0.5ch;
   }
 
   .search__excerpt--comment {
@@ -86,15 +85,28 @@
     --comment-avatar-size: 32px;
     --padding: 1ch;
 
+    align-items: center;
     background-color: var(--color-ink-lightest);
     border-radius: 1ch;
     display: flex;
     gap: 1ch;
-    margin-left: calc(var(--comment-avatar-size) / 2);
+    margin-inline-start: calc(var(--comment-avatar-size) / 2);
     padding-block: 0.5ch;
 
     .avatar {
-      margin-left: calc(-0.5 * var(--comment-avatar-size));
+      margin-inline-start: calc(-0.5 * var(--comment-avatar-size));
     }
   }
+
+  .search__result {
+    color: var(--color-link);
+
+    &:not(&:hover) {
+      box-shadow: 0 0 0 1px var(--color-ink-lighter);
+    }
+  }
+
+  .search__title {
+    text-decoration: underline;
+  }
 }

app/views/searches/_result.html.erb

@@ -1,18 +1,8 @@
 <li>
-  <%= link_to result.source, class: "card card--search", data: { turbo_frame: "_top" } do %>
-    <header class="card__header">
-      <label class="card__collection flex align-center">
-        <span class="card__id"><%= result.card_id %></span>
-        <span class="card__collection-name">
-        <span class="overflow-ellipsis"><%= result.collection_name %></span>
-      </span>
-      </label>
-    </header>
-
-    <div class="card__body justify-space-between">
-      <div class="card__content">
-        <h3 class="card__title">
-          <%= result.card_title&.html_safe %>
+  <%= link_to result.source, class: "search__result", data: { turbo_frame: "_top" } do %>
+      <div>
+        <h3 class="search__title txt--medium margin-none">
+          # <%= result.card_id %> <%= result.card_title&.html_safe %>
         </h3>
 
         <% if result.card_description.present? %>
@@ -30,6 +20,6 @@
           <% end %>
         <% end %>
       </div>
-    </div>
+      <div class="overflow-ellipsis translucent txt-ink"><%= result.collection_name %></div>
   <% end %>
 </li>

app/views/searches/show.html.erb

@@ -10,7 +10,7 @@
     <div class="search__results">
       <% if @search_results.none? %>
         <div class="search__empty">
-          Nothing found
+          Not matches
         </div>
       <% end %>