docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

search: fix responsiveness issue on md screens 

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson 2024-09-17 10:15:59 +02:00
parent 2f50130831
commit 52f9c17066
2 changed files with 20 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
hugo_stats.json
View File

@ -350,7 +350,6 @@
"lg:pb-2",
"lg:scale-100",
"lg:text-base",
"lg:w-[1200px]",
"link",
"lntable",
"lntd",
@ -432,7 +431,6 @@
"placeholder:text-white",
"pr-2",
"prose",
"pt-0",
"pt-4",
"px-1",
"px-2",
@ -529,7 +527,6 @@
"w-[32px]",
"w-fit",
"w-full",
"w-lvw",
"w-screen",
"xl:grid-cols-3",
"xl:grid-cols-4",

42
layouts/_default/search.html
View File

@ -3,29 +3,27 @@
{{ end }}
{{ define "main" }}
<div class="w-lvw overflow-clip p-6 pt-0 lg:w-[1200px]">
<article class="prose max-w-none dark:prose-invert">
<h1 class="py-4">{{ .Title }}</h1>
{{ .Content }}
<div class="not-prose">
<div class="flex gap-4">
<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"
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>
<hr class="border-divider-light dark:border-divider-dark">
<div id="search-page-results">
<!-- results -->
</div>
<article class="prose max-w-none dark:prose-invert">
<h1 class="py-4">{{ .Title }}</h1>
{{ .Content }}
<div class="not-prose">
<div class="flex gap-4">
<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"
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>
</article>
</div>
<hr class="border-divider-light dark:border-divider-dark">
<div id="search-page-results">
<!-- results -->
</div>
</div>
</article>
<script type="module">
// Global variable to hold the pagefind module
let pagefind;