Pretty things up

assets/css/simple.css

@@ -119,6 +119,38 @@
     background-color: var(--dark-blue);
 }
 
+.search-body {
+  background-color: var(--light-warm-gray);
+  border: outset var(--light-warm-gray) 0.18rem;
+  padding: 0.5em 0.5em;
+  display: flex;
+  flex-flow: column;
+  gap: 1em;
+  margin-top: 0.25em;
+}
+
+.search-field {
+    display: flex;
+    flex-flow: row;
+    gap: 0;
+}
+
+#search { width: 100%; }
+
+.search-button {
+    border: outset var(--light-blue) 0.18rem;
+    background-color: var(--light-blue);
+    text-align: left;
+    color: black;
+}
+
+.search-button::first-letter { text-decoration: underline; }
+
+.search-button:active {
+    border: inset var(--dark-blue) 0.18rem;
+    background-color: var(--dark-blue);
+}
+
 .field-with-error {
     border: dashed var(--highlight-red);
     padding: 0.5em 0.25em;

t/search.t

@@ -18,15 +18,12 @@ subtest 'Search after CAPTCHA', sub {
         ->status_is(302)
         ->header_like(Location => qr{human/search});
 
-    $t->get_ok('/human/search')->status_is(200)
-        ->text_like(h2 => qr/Search Posts/);
+    $t->get_ok('/human/search?q=lmao')->status_is(200)
+        ->text_like(h2 => qr/Search Results/);
 
     $t->get_ok('/human/search?q=aaaaaaaaaa')->status_is(404)
         ->text_like(p => qr/No posts found/);
 
-    $t->get_ok('/human/search?q=lmao')->status_is(200)
-        ->text_like(h3 => qr/Results/);
-
     $t->get_ok("/human/search?q=$invalid_query")->status_is(400)
         ->text_like(p => qr/Must be between/);
 };

templates/layouts/default.html.ep

@@ -62,6 +62,21 @@
     <%= link_to Demote  => demote_admin => (class => 'click') %>
   </nav>
   <% } =%>
+  <%= form_for search_page => (class => 'search-body'), begin %>
+    <div class="search-field">
+      <% if (my $error = validation->error('q')) { =%>
+      <p class="field-with-error">Must be between <%= $error->[2] %>
+        and <%= $error->[3] %> characters.</p>
+      <% } =%>
+      <%= text_field q => (
+          id        => 'search',
+          maxlength => 2047,
+          minlength => 1,
+          required  => undef
+      ) %>
+      <button type="submit" class="search-button">Search</button>
+    </div>
+  <% end %>
 </header>
 <% if (flash 'error') { =%>
 <p class="stash-with-error" id="error"><%= flash 'error' %></p>

templates/page/search.html.ep

@@ -1,5 +1,5 @@
 % layout 'default';
-% title 'Search Posts';
+% title 'Search Results';
 <% content_for open_graph => begin %>
   <meta property="og:type" content="website">
   <meta property="og:title" content="<%= title %>">
@@ -10,26 +10,8 @@
   <meta name="twitter:description" content="Search for posts.">
 <% end %>
 <h2 class="page-title"><%= title %></h2>
-<form method="get" class="form-body">
-  <div class="form-field">
-    <% if (my $error = validation->error('q')) { =%>
-    <p class="field-with-error">Must be between <%= $error->[2] %>
-      and <%= $error->[3] %> characters.</p>
-    <% } =%>
-    <%= label_for search => 'Search' %>
-    <%= text_field q => (
-        id        => 'search',
-        maxlength => 2047,
-        minlength => 1,
-        required  => undef,
-        autofocus => undef
-    ) %>
-  </div>
-  <button type="submit" class="form-button">Search</button>
-</form>
 <% if (scalar @{$search_results}) { =%>
 <main class="pager" id="results">
-  <h3 class="pager__title">Results</h3>
   <% for my $result (@{$search_results}) { =%>
   <article class="post">
     <h4 class="post__title">

templates/thread/by_page.html.ep

@@ -12,22 +12,6 @@
 <h2 class="page-title"><%= title %></h2>
 <% if (scalar @{$threads}) { =%>
 <main class="pager">
-  <%= form_for search_page => (class => 'form-body'), begin %>
-    <div class="form-field">
-      <% if (my $error = validation->error('q')) { =%>
-      <p class="field-with-error">Must be between <%= $error->[2] %>
-        and <%= $error->[3] %> characters.</p>
-    <% } =%>
-    <%= label_for search => 'Search' %>
-    <%= text_field q => (
-        id        => 'search',
-        maxlength => 2047,
-        minlength => 1,
-        required  => undef
-    ) %>
-    </div>
-    <button type="submit" class="form-button">Search</button>
-  <% end %>
   <% for my $thread (@{$threads}) { =%>
   <article class="post">
     <h3 class="post__title">