Styling things on the front page

views/routes/components/_alphabet.gohtml

@@ -1,13 +1,48 @@
 {{ $model := . }}
 
 {{ if $model.letters }}
-	<div class="alphabet">
-		{{ range $id, $r := .letters }}
-			<a
-				href="?letter={{ $r }}"
-				{{ if eq $model.active $r }}aria-current="page"{{ end }}
-				>{{ $r }}</a
-			>
-		{{ end }}
+	<div class="flex flex-row border-b px-3 border-zinc-300 items-end min-h-14">
+		<div id="alphabet" class="alphabet flex flex-row items-end" hx-swap-oob="true" hx-boost="false">
+			{{ range $id, $r := .letters }}
+				<a
+					class="odd:bg-stone-100 even:bg-zinc-100 mr-1 border-zinc-300 border-x border-t [&>a[aria-current='page']]:font-bold
+				px-2 no-underline transition-all duration-75
+				{{ if not $model.active -}}inactive{{- end -}}"
+					href="?letter={{ $r }}"
+					{{ if eq $model.active $r }}aria-current="page"{{ end }}
+					hx-get="./?letter={{ $r }}"
+					hx-push-url="true"
+					hx-select="#searchcontent"
+					hx-target="#searchcontent"
+					>{{ $r }}</a
+				>
+			{{ end }}
+		</div>
+
+		<div class="flex-grow"></div>
+
+		<div>
+			<i class="ri-search-line"></i><i class="-ml-0.5 inline-block ri-arrow-right-s-line"></i>
+			<input
+				class="px-1.5 py-0.5 font-serif italic"
+				type="search"
+				name="search"
+				placeholder="Suchbegriff eingeben"
+				hx-get="./"
+				hx-trigger="input changed delay:=200ms, keyup[key=='Enter']"
+				hx-select="#searchcontent"
+				hx-target="#searchcontent"
+				autocomplete="off" />
+		</div>
+		<div id="permalink" class="font-serif ml-3 py-1" hx-swap-oob="true">
+			{{ if $model.search }}
+				<a
+					href="/reihen?search={{ $model.search }}"
+					class="inline-block px-1
+				text-white no-underline bg-stone-700 hover:bg-stone-900 rounded">
+					<i class="ri-links-line"></i
+				></a>
+			{{ end }}
+		</div>
 	</div>
 {{ end }}

views/routes/reihen/body.gohtml

@@ -1,19 +1,14 @@
 {{ $model := . }}
 
-{{ template "_alphabet" Dict "active" .letter "letters" .letters }}
 
+<div class="mt-4">
+	{{ template "_alphabet" Dict "active" .letter "letters" .letters "search" .search }}
+</div>
 
-<input
-	class="form-control"
-	type="search"
-	name="search"
-	placeholder="Suche"
-	hx-get="/reihen"
-	hx-trigger="input changed delay:=200ms, keyup[key=='Enter']"
-	hx-select="#series"
-	hx-target="#series" />
-
-<div id="series">
+<div id="searchcontent" class="pt-4 font-serif">
+	{{ if .search }}
+		<div class="mt-8">Reihen für {{ .search }} gefunden.</div>
+	{{ end }}
 	{{ if or .series .altseries }}
 		{{ range $id, $r := .series }}
 			<div class="mb-1.5">