From e7cab9534eada970cf4202370a8d4486c42a47df Mon Sep 17 00:00:00 2001
From: Konstantin <konstantin@headbright.be>
Date: Thu, 13 Feb 2025 10:53:55 +0100
Subject: [PATCH] Improve search look and feel

---
 search/templates/search/search.html | 10 +++++-----
 theme/static_src/src/styles.css     | 10 +++++++++-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/search/templates/search/search.html b/search/templates/search/search.html
index 0a067f5..75556cb 100644
--- a/search/templates/search/search.html
+++ b/search/templates/search/search.html
@@ -13,13 +13,11 @@
             <form action="{% url 'search' %}" method="get" class="container">
                 <div class="flex flex-col space-y-4">
                     <label for="query" class="sr-only block text-sm font-medium leading-6">Search</label>
-                    <div class="mt-2">
+                    <div class="mt-2 flex space-x-4">
                         <input type="text" placeholder="Type search keywords..."
-                               class="block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-klavender sm:text-sm sm:leading-6"
+                               class="block w-full rounded-xl border-0 py-1.5 px-2 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-klavender sm:text-sm sm:leading-6"
                                id="query" name="query"{% if search_query %} value="{{ search_query }}"{% endif %}>
-                    </div>
 
-                    <div>
                         <input type="submit" class="primary-button" value="Search">
                     </div>
                 </div>
@@ -30,7 +28,7 @@
         </div>
     </section>
 
-    <section class="h-full px-0 md:px-4 lg:px-8">
+    <section class="h-full px-0 md:px-4 lg:px-8 search">
         <div class="px-0 md:px-4 lg:px-8">
             <h2 class="sr-only">Search results</h2>
 
@@ -48,6 +46,8 @@
                             <h4><a href="{% pageurl result %}">{{ result }}</a></h4>
                             {% if result.search_description %}
                                 {{ result.search_description }}
+                            {% elif result.post.intro %}
+                                {{ result.post.intro }}
                             {% endif %}
                         </li>
                     {% endfor %}
diff --git a/theme/static_src/src/styles.css b/theme/static_src/src/styles.css
index ec1481d..32a2042 100644
--- a/theme/static_src/src/styles.css
+++ b/theme/static_src/src/styles.css
@@ -60,11 +60,19 @@
         @apply my-2 text-lg;
     }
 
+    .search li {
+        @apply my-6;
+    }
+
+    .search li h4 {
+        @apply inline;
+    }
+
     .blog-content ul, .home-content ul {
         @apply list-none list-inside;
     }
 
-    .blog-content ul li::before, .home-content ul li::before {
+    .blog-content ul li::before, .home-content ul li::before, .search li::before {
         content: "👉";
         font-family: NotoEmoji;
         @apply inline-block mr-2 py-1;