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
This commit is contained in:
Bjørn Erik Pedersen 2025-02-12 09:30:56 +01:00
parent cf5e07b0f2
commit ecad978216
4 changed files with 7 additions and 8 deletions

View File

@ -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();
},
},

View File

@ -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">

View File

@ -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"

View File

@ -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 -}}