From c6170acdfad184a540fb2a3b07bcc8289cc4ca6f Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Tue, 14 Apr 2026 15:45:48 +0200
Subject: [PATCH] feat(posts): iconify icons + constrain search width on
 desktop

- Search input limited to sm:max-w-sm (full width only on mobile)
- mdi:magnify prefix, mdi:close clear, mdi:calendar-clock on events,
  mdi:rss next to RSS link
---
 src/components/BlogOverview.svelte | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/BlogOverview.svelte b/src/components/BlogOverview.svelte
index 3da3cf3..fb59cfb 100644
--- a/src/components/BlogOverview.svelte
+++ b/src/components/BlogOverview.svelte
@@ -2,6 +2,7 @@
   import PostCard from "./PostCard.svelte";
   import Tag from "./Tag.svelte";
   import Pagination from "./Pagination.svelte";
+  import Ico from "./Ico.svelte";
   import type { PostEntry } from "../lib/cms";
   import { postHref } from "../lib/blog-utils";
   import { t as tStatic, T } from "../lib/translations";
@@ -95,21 +96,26 @@
 <div class="blog-overview">
   {#if searchIndex}
     <div class="mb-4">
-      <label class="relative block">
+      <label class="relative block w-full sm:max-w-sm">
         <span class="sr-only">Suche</span>
+        <span class="pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-zinc-500">
+          <Ico icon="mdi:magnify" class="h-4 w-4" />
+        </span>
         <input
           type="search"
           bind:value={query}
           placeholder="Beiträge durchsuchen…"
-          class="w-full rounded-sm border border-zinc-300 bg-white px-3 py-2 pr-10 text-sm focus:border-zinc-500 focus:outline-none"
+          class="w-full rounded-sm border border-zinc-300 bg-white py-2 pr-9 pl-8 text-sm focus:border-zinc-500 focus:outline-none"
         />
         {#if query}
           <button
             type="button"
             onclick={() => (query = "")}
-            class="absolute top-1/2 right-2 -translate-y-1/2 text-zinc-500 hover:text-zinc-900"
+            class="absolute top-1/2 right-1.5 -translate-y-1/2 rounded-sm p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"
             aria-label="Suche leeren"
-          >×</button>
+          >
+            <Ico icon="mdi:close" class="h-4 w-4" />
+          </button>
         {/if}
       </label>
     </div>
@@ -117,7 +123,10 @@
 
   {#if !isSearching && upcomingEvents.length > 0}
     <section class="mb-6 rounded-sm border border-zinc-200 bg-zinc-50 p-4">
-      <h2 class="mb-3 text-sm font-semibold tracking-wide text-zinc-700 uppercase">Nächste Termine</h2>
+      <h2 class="mb-3 flex items-center gap-1.5 text-sm font-semibold tracking-wide text-zinc-700 uppercase">
+        <Ico icon="mdi:calendar-clock" class="h-4 w-4" />
+        Nächste Termine
+      </h2>
       <ul class="space-y-2">
         {#each upcomingEvents as ev}
           <li>
@@ -232,7 +241,10 @@
   </div>
 
   <div class="mt-4 text-xs text-zinc-600">
-    <a href="/posts/rss.xml" class="hover:underline">RSS-Feed abonnieren</a>
+    <a href="/posts/rss.xml" class="inline-flex items-center gap-1 hover:underline">
+      <Ico icon="mdi:rss" class="h-3.5 w-3.5" />
+      RSS-Feed abonnieren
+    </a>
   </div>
   {/if}
 </div>