<div id="search-wrapper" class="invisible fixed inset-0 z-50 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh]" data-url="{{ "" | absLangURL }}" > <div id="search-modal" class="flex flex-col w-full max-w-3xl min-h-0 mx-auto border rounded-md shadow-lg top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800" > <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-2 focus:outline-transparent" placeholder="{{ i18n "search.input_placeholder" }}" tabindex="0" /> </form> <button id="close-search-button" class="flex items-center justify-center w-8 h-8 text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400" title="{{ i18n "search.close_button_title" }}" > {{ partial "icon.html" "xmark" }} </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>