blogs/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2026-08-24 23:38:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

theme: Move search button in navbar to the right on smaller screens

Browse Source 
Closes #2886
This commit is contained in:
Bjørn Erik Pedersen
2025-02-12 13:34:38 +01:00
parent b03b96082d
commit 7d6e6184b1
3 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/partials/layouts/header/header.html
+3 -2
View File
@@ -24,11 +24,12 @@
</div>
<div class="-my-5 pl-2 sm:mr-8">
<div class="-my-5 pl-2 grow-0">
{{/* Search. */}}
{{ partial "layouts/search/input.html" . }}
</div>
<div class="relative flex basis-0 justify-end gap-6 sm:gap-1 md:flex-grow">
<div
class="relative ml-0 md:ml-8 flex basis-0 justify-end gap-0 sm:gap-1 xl:grow-1">
{{/* QR code. */}}
{{ partial "layouts/header/qr.html" . }}
{{/* Theme selector. */}}
layouts/partials/layouts/header/qr.html
+1 -1
View File
@@ -6,7 +6,7 @@
{{ $qrBig := partial "partials/_inline/qr" (dict "page" $ "img_class" "w-64 p-4") }}
{{ $t.Stop }}
<div
class="hidden lg:block cursor-pointer outline-2 hover:outline-3 outline-blue-500">
class="hidden lg:block cursor-pointer outline-2 hover:outline-3 outline-blue-500 w-10 h-10">
{{ partial "layouts/blocks/modal.html" (dict "modal_button" $qr "modal_content" $qrBig "modal_title" (printf "QR code linking to %s" $.Permalink )) }}
</div>
layouts/partials/layouts/search/button.html
+3 -3
View File
@@ -3,12 +3,12 @@
x-data @click="$dispatch('search-toggle')"
{{ end }}
type="button"
class="grid cursor-pointer w-full text-gray-500 sm:w-40 lg:w-56 grid-cols-[auto_1fr_auto] items-center gap-3 rounded-md px-2 sm:px-4 py-2 text-left text-xs/6 lg:text-sm/6 outline-0 sm:outline-1 -outline-offset-1 outline-gray-600">
class="grid cursor-pointer w-full text-gray-500 lg:w-56 grid-cols-[auto_1fr_auto] items-center rounded-md px-2 sm:px-4 py-2 text-left text-xs/6 lg:text-sm/6 outline-0 sm:outline-1 -outline-offset-1 outline-gray-600">
<svg
class="pointer-events-none -ml-0.5 size-5 sm:size-4 fill-slate-400 dark:fill-slate-500">
class="pointer-events-none -ml-0.5 mr-2 size-5 sm:size-4 fill-slate-400 dark:fill-slate-500">
<use href="#icon--search"></use>
</svg>
<span class="hidden sm:inline">Search docs</span
<span class="hidden lg:inline">Search docs</span
><kbd
class="hidden font-sans text-xs/4 text-gray-400 dark:text-gray-400 sm:[.os-macos_&amp;]:block"
><span class="text-gray-400/70 ">⌘</span>K</kbd