From ecad9782167412f4b63f42d70ac2e56e4b80fc95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B8rn=20Erik=20Pedersen?=
 <bjorn.erik.pedersen@gmail.com>
Date: Wed, 12 Feb 2025 09:30:56 +0100
Subject: [PATCH] theme: Misc fixes

* Prevent meta-k shortcut from also opening Firefox's native search.
* Speed up the search drawer transition a little.
* Don't hide the search input/button when search is open.
* Fix some dark mode issues

Closes #2883
---
 assets/js/alpinejs/data/search.js            | 2 +-
 layouts/partials/layouts/search/button.html  | 3 +--
 layouts/partials/layouts/search/results.html | 6 +++---
 layouts/shortcodes/code.html                 | 4 ++--
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/assets/js/alpinejs/data/search.js b/assets/js/alpinejs/data/search.js
index 99bf31d7e..9be42617e 100644
--- a/assets/js/alpinejs/data/search.js
+++ b/assets/js/alpinejs/data/search.js
@@ -102,7 +102,7 @@ export const search = (Alpine, cfg) => ({
 		['@search-toggle.window']() {
 			this.toggleOpen();
 		},
-		['@keydown.meta.k.window']() {
+		['@keydown.meta.k.window.prevent']() {
 			this.toggleOpen();
 		},
 	},
diff --git a/layouts/partials/layouts/search/button.html b/layouts/partials/layouts/search/button.html
index 8572ce304..1fc29b04c 100644
--- a/layouts/partials/layouts/search/button.html
+++ b/layouts/partials/layouts/search/button.html
@@ -1,9 +1,8 @@
 <button
   {{ if .standalone }}
     x-data @click="$dispatch('search-toggle')"
-  {{ else }}
-    type="button" x-show="!open" x-transition.opacity.duration.500ms
   {{ 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">
   <svg
     class="pointer-events-none -ml-0.5 size-5 sm:size-4 fill-slate-400 dark:fill-slate-500">
diff --git a/layouts/partials/layouts/search/results.html b/layouts/partials/layouts/search/results.html
index 487f5b24c..6ef519615 100644
--- a/layouts/partials/layouts/search/results.html
+++ b/layouts/partials/layouts/search/results.html
@@ -17,10 +17,10 @@
       <div
         class="pointer-events-auto w-screen max-w-md"
         x-show="open"
-        x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
+        x-transition:enter="transform transition ease-in-out duration-300 sm:duration-500"
         x-transition:enter-start="translate-x-full"
         x-transition:enter-end="translate-x-0"
-        x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
+        x-transition:leave="transform transition ease-in-out duration-300 sm:duration-500"
         x-transition:leave-start="translate-x-0"
         x-transition:leave-end="translate-x-full">
         <div
@@ -49,7 +49,7 @@
                     x-text="group"></div>
                   <template x-for="entry in entries" :key="entry.objectID">
                     <a
-                      class="flex flex-nowrap space-x-4 py-2 text-sm leading-5 text-gray-900 dark:text-gray-500 hover:dark:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:bg-gray-50 cursor-pointer transition duration-150 ease-in-out"
+                      class="flex flex-nowrap space-x-4 py-2 text-sm leading-5 text-gray-900 dark:text-gray-500 hover:dark:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:bg-gray-50 dark:focus:bg-gray-800 cursor-pointer transition duration-150 ease-in-out"
                       :href="entry.url">
                       <span
                         class="w-1/3 text-xs text-right text-gray-500 dark:text-gray-300"
diff --git a/layouts/shortcodes/code.html b/layouts/shortcodes/code.html
index cdc867ee4..f64cda224 100644
--- a/layouts/shortcodes/code.html
+++ b/layouts/shortcodes/code.html
@@ -1,7 +1,7 @@
 {{- $codeLang := or (.Get "lang") "" }}
 <div
   x-data
-  class="shortcode-code font-mono not-prose relative mt-6 mb-8 border-1 border-gray-200 bg-light">
+  class="shortcode-code font-mono not-prose relative mt-6 mb-8 border-1 border-gray-200 dark:border-gray-800 bg-light dark:bg-dark">
   {{ if (.Get "copy") }}
     <svg
       class="absolute right-2 top-2 z-30 text-blue-600 hover:text-blue-500 cursor-pointer w-6 h-6"
@@ -15,7 +15,7 @@
       {{- $codeLang = cond (eq $ext "html") "go-html-template" $ext }}
     {{- end }}
     <div
-      class="san-serif text-sm inline-block leading-none pl-2 py-3 bg-gray-100 w-full">
+      class="san-serif text-sm inline-block leading-none pl-2 py-3 bg-slate-700 dark: w-full">
       {{ . }}
     </div>
   {{- end -}}