Stub out search page

app/assets/stylesheets/cards.css

@@ -66,7 +66,7 @@
     font-weight: 800;
     max-inline-size: 100%;
     min-inline-size: 0;
-    padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--inline-space-double);
+    padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--card-padding-inline);
   }
 
   .card__collection-name {
@@ -425,4 +425,19 @@
       }
     }
   }
+
+  .card--search {
+    --card-color: var(--color-ink);
+
+    background-color: var(--color-canvas);
+
+    .card__collection {
+      background-color: var(--color-canvas);
+      color: var(--color-ink-medium);
+    }
+
+    .card__title {
+      font-size: var(--text-medium);
+    }
+  }
 }

app/assets/stylesheets/circled-text.css

@@ -0,0 +1,40 @@
+@layer components {
+  .circled-text {
+    --circled-color: oklch(var(--lch-blue-dark));
+    --circled-padding: -0.5ch;
+
+    background: none;
+    color: var(--circled-color);
+    position: relative;
+
+    span {
+      opacity: 0.5;
+      mix-blend-mode: multiply;
+
+      @media (prefers-color-scheme: dark) {
+        mix-blend-mode: screen;
+      }
+    }
+
+    span::before,
+    span::after {
+      border: 2px solid var(--circled-color);
+      content: "";
+      inset: var(--circled-padding);
+      position: absolute;
+    }
+
+    span::before {
+      border-inline-end: none;
+      border-radius: 100% 0 0 75% / 50% 0 0 50%;
+      inset-block-start: calc(var(--circled-padding) / 2);
+      inset-inline-end: 50%;
+    }
+
+    span::after {
+      border-inline-start: none;
+      border-radius: 0 100% 75% 0 / 0 50% 50% 0;
+      inset-inline-start: 30%;
+    }
+  }
+}

app/assets/stylesheets/search.css

@@ -0,0 +1,8 @@
+@layer components {
+  .search-results {
+    display: grid;
+    gap: 1ch;
+    max-inline-size: 640px;
+    margin-inline: auto;
+  }
+}

app/controllers/search_controller.rb

@@ -0,0 +1,4 @@
+class SearchController < ApplicationController
+  def index
+  end
+end

app/views/search/index.html.erb

@@ -0,0 +1,32 @@
+
+<ul class="search-results list-style-none">
+  <% 7.times do %>
+    <li>
+      <div class="card card--search">
+        <header class="card__header">
+          <label class="card__collection flex align-center">
+            <span class="card__id">864</span>
+            <span class="card__collection-name">
+              <span class="overflow-ellipsis">[BC4] New Hey! menu</span>
+            </span>
+          </label>
+        </header>
+
+        <div class="card__body justify-space-between">
+          <div class="card__content">
+            <h3 class="card__title overflow-line-clamp">
+              Ping will land on placeholder page if previous ping is exited by tapping Hey! menu
+            </h3>
+            <div>
+              <mark class="circled-text">
+                Fugiat proident ex
+                <span aria-hidden></span>
+              </mark>
+              occaecat labore tempor Proident sit anim id laboris ipsum proident.
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>
+  <% end %>
+</ul>

config/routes.rb

@@ -63,6 +63,8 @@ Rails.application.routes.draw do
     end
   end
 
+  resources :search, only: :index
+
   resources :filters
 
   resources :events, only: :index