site: update Ask AI callout on search page

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson 2024-09-20 17:33:17 +02:00
parent 77858d9066
commit acf8cc7f66
2 changed files with 14 additions and 8 deletions

View File

@ -272,6 +272,7 @@
"flex-wrap",
"focus:ring-blue-light",
"font-medium",
"font-semibold",
"footnote-backref",
"footnote-ref",
"footnotes",
@ -344,6 +345,7 @@
"left-0",
"lg:block",
"lg:flex",
"lg:flex-row",
"lg:gap-4",
"lg:gap-8",
"lg:grid-cols-2",
@ -391,6 +393,7 @@
"min-h-screen",
"min-w-0",
"min-w-52",
"min-w-fit",
"ml-3",
"ml-auto",
"mt-1",

View File

@ -7,16 +7,19 @@
<h1 class="py-4">{{ .Title }}</h1>
{{ .Content }}
<div class="not-prose">
<div class="flex gap-4">
<div class="flex flex-col lg:flex-row justify-between gap-8">
<input type="search" id="search-page-input"
class="ring-[1.5px] ring-gray-light-200 dark:ring-gray-dark-400 w-full max-w-xl rounded px-4 py-2 outline-none bg-white dark:bg-background-dark focus:ring-blue-light dark:focus:ring-blue-dark"
class="min-w-0 ring-[1.5px] ring-gray-light-200 dark:ring-gray-dark-400 w-full max-w-xl rounded px-4 py-2 outline-none bg-white dark:bg-background-dark focus:ring-blue-light dark:focus:ring-blue-dark"
placeholder="Search…" tabindex="0" />
<button
class="py-1 px-4 rounded open-kapa-widget flex w-fit gap-2 items-center hover:bg-gray-light-200 dark:hover:bg-gray-dark-200">
<span>Ask&nbsp;AI</span>
<img height="24px" width="24px" src="{{ (resources.Get "images/ai-stars.svg").Permalink }}"
alt="AI sparkles!" />
</button>
<div class="flex min-w-fit flex-col flex-grow items-center">
<p>Not finding what you're looking for?</p>
<button
class="px-2 py-1 font-semibold rounded open-kapa-widget flex w-fit gap-2 items-center hover:bg-gray-light-200 dark:hover:bg-gray-dark-200">
<span>Try Ask AI</span>
<img height="24px" width="24px" src="{{ (resources.Get "images/ai-stars.svg").Permalink }}"
alt="AI sparkles!" />
</button>
</div>
</div>
<hr class="border-divider-light dark:border-divider-dark">
<div id="search-page-results">