2022-01-13 04:56:30 +00:00
|
|
|
<div
|
|
|
|
|
id="search-wrapper"
|
|
|
|
|
class="fixed inset-0 z-50 flex flex-col p-4 sm:p-6 md:p-[10vh] lg:p-[12vh] w-screen h-screen cursor-default bg-neutral-500/50 backdrop-blur-sm dark:bg-neutral-900/50 invisible"
|
2022-01-19 01:13:42 +00:00
|
|
|
data-url="{{ .Site.BaseURL }}"
|
2022-01-13 04:56:30 +00:00
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
id="search-modal"
|
|
|
|
|
class="flex flex-col w-full max-w-3xl min-h-0 mx-auto border rounded-md shadow-lg border-neutral-200 top-20 bg-neutral dark:bg-neutral-800 dark:border-neutral-700"
|
|
|
|
|
>
|
|
|
|
|
<header class="relative z-10 flex items-center justify-between flex-none px-2">
|
|
|
|
|
<form class="flex items-center flex-auto min-w-0">
|
|
|
|
|
<div class="flex items-center justify-center w-8 h-8 text-neutral-400">
|
|
|
|
|
{{ partial "icon.html" "search" }}
|
|
|
|
|
</div>
|
|
|
|
|
<input
|
|
|
|
|
type="search"
|
|
|
|
|
id="search-query"
|
|
|
|
|
class="flex flex-auto h-12 mx-1 bg-transparent appearance-none focus:outline-dotted focus:outline-transparent focus:outline-2"
|
|
|
|
|
placeholder="{{ i18n "search.input_placeholder" }}"
|
|
|
|
|
tabindex="0"
|
|
|
|
|
/>
|
|
|
|
|
</form>
|
|
|
|
|
<button
|
|
|
|
|
id="close-search-button"
|
2022-01-18 23:25:48 +00:00
|
|
|
class="flex items-center justify-center w-8 h-8 text-neutral-700 dark:text-neutral hover:text-primary-600 dark:hover:text-primary-400"
|
2022-01-13 04:56:30 +00:00
|
|
|
title="{{ i18n "search.close_button_title" }}"
|
|
|
|
|
>
|
|
|
|
|
{{ partial "icon.html" "times" }}
|
|
|
|
|
</button>
|
|
|
|
|
</header>
|
|
|
|
|
<section class="flex-auto px-2 overflow-auto">
|
|
|
|
|
<ul id="search-results">
|
|
|
|
|
<!-- <li class="mb-2">
|
|
|
|
|
<a class="flex items-center px-3 py-2 rounded-md appearance-none bg-neutral-100 dark:bg-neutral-700 focus:bg-primary-100 hover:bg-primary-100 dark:hover:bg-primary-900 dark:focus:bg-primary-900 focus:outline-dotted focus:outline-transparent focus:outline-2" href="${value.item.permalink}" tabindex="0">
|
|
|
|
|
<div class="grow">
|
|
|
|
|
<div class="-mb-1 text-lg font-bold">${value.item.title}</div>
|
|
|
|
|
<div class="text-sm text-neutral-500 dark:text-neutral-400">${value.item.section}<span class="px-2 text-primary-500">·</span>${value.item.date}</span></div>
|
|
|
|
|
<div class="text-sm italic">${value.item.summary}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ml-2 ltr:block rtl:hidden text-neutral-500">→</div>
|
|
|
|
|
<div class="mr-2 ltr:hidden rtl:block text-neutral-500">←</div>
|
|
|
|
|
</a>
|
|
|
|
|
</li> -->
|
|
|
|
|
</ul>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
