From 58aa02924d8d83f91aa92b1da094ff16fd7612f9 Mon Sep 17 00:00:00 2001 From: David Karlsson <35727626+dvdksn@users.noreply.github.com> Date: Thu, 29 Aug 2024 15:50:54 +0200 Subject: [PATCH] site: improve search ux, add /search page Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com> --- assets/css/global.css | 19 ++- assets/images/ai-stars.svg | 14 ++ assets/images/search-ai.svg | 9 ++ content/search.md | 5 + hugo_stats.json | 52 ++++--- layouts/_default/baseof.html | 3 +- layouts/_default/search.html | 185 +++++++++++++++++++++++ layouts/partials/breadcrumbs.html | 8 +- layouts/partials/head.html | 60 ++++---- layouts/partials/header.html | 13 +- layouts/partials/search-bar.html | 124 +++++++++++++++ layouts/partials/search.html | 112 -------------- static/assets/images/logo-icon-white.svg | 25 ++- 13 files changed, 446 insertions(+), 183 deletions(-) create mode 100644 assets/images/ai-stars.svg create mode 100644 assets/images/search-ai.svg create mode 100644 content/search.md create mode 100644 layouts/_default/search.html create mode 100644 layouts/partials/search-bar.html delete mode 100644 layouts/partials/search.html diff --git a/assets/css/global.css b/assets/css/global.css index 1644831ce7..77dad503fc 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -16,7 +16,24 @@ } mark { - @apply bg-amber-light-200 dark:bg-amber-dark-600/25 dark:text-white; + @apply bg-transparent font-bold text-blue-light dark:text-blue-dark; + } + + /* Hide the clear (X) button for search inputs */ + /* Chrome, Safari, Edge, and Opera */ + input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; + appearance: none; + } + + /* Firefox */ + input[type="search"]::-moz-search-cancel-button { + display: none; + } + + /* Internet Explorer and Edge (legacy) */ + input[type="search"]::-ms-clear { + display: none; } } diff --git a/assets/images/ai-stars.svg b/assets/images/ai-stars.svg new file mode 100644 index 0000000000..b7c6a9085c --- /dev/null +++ b/assets/images/ai-stars.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/images/search-ai.svg b/assets/images/search-ai.svg new file mode 100644 index 0000000000..a898a28113 --- /dev/null +++ b/assets/images/search-ai.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/content/search.md b/content/search.md new file mode 100644 index 0000000000..dcadc3428f --- /dev/null +++ b/content/search.md @@ -0,0 +1,5 @@ +--- +sitemap: false +title: Search +layout: search +--- diff --git a/hugo_stats.json b/hugo_stats.json index ee9b99de61..e1f6337048 100644 --- a/hugo_stats.json +++ b/hugo_stats.json @@ -6,6 +6,7 @@ "--mount", "--tmpfs", "-mb-3", + "-mt-0.5", "-mt-1", "-mt-4", "-top-16", @@ -136,13 +137,11 @@ "Without-packages", "Without-systemd", "absolute", - "appearance-none", "aspect-video", "bake-action", "bg-accent-light", "bg-amber-light", "bg-amber-light-200", - "bg-background-dark/70", "bg-background-light", "bg-black/70", "bg-blue-light", @@ -165,10 +164,12 @@ "bg-transparent", "bg-violet-light", "bg-white", + "bg-white/10", "block", "border", "border-0", "border-amber-light", + "border-b", "border-b-2", "border-b-4", "border-b-gray-light-400", @@ -183,7 +184,9 @@ "border-l-4", "border-l-magenta-light", "border-red-light", + "border-transparent", "border-violet-light", + "border-white", "bottom-0", "box-content", "build-push-action", @@ -200,7 +203,6 @@ "dark:bg-blue-dark-400", "dark:bg-blue-dark-500", "dark:bg-gray-dark-100", - "dark:bg-gray-dark-100/70", "dark:bg-gray-dark-200", "dark:bg-gray-dark-300", "dark:bg-gray-dark-300/50", @@ -224,17 +226,18 @@ "dark:border-violet-dark", "dark:decoration-blue-dark", "dark:fill-blue-dark", - "dark:focus:outline-blue-dark", + "dark:focus:ring-blue-dark", "dark:from-accent-dark", "dark:from-background-dark", "dark:from-blue-dark-400", "dark:hidden", "dark:hover:bg-blue-dark", "dark:hover:bg-blue-dark-500", + "dark:hover:bg-gray-dark-200", "dark:hover:bg-gray-dark-500", "dark:hover:text-white", - "dark:outline-gray-dark", "dark:prose-invert", + "dark:ring-gray-dark-400", "dark:syntax-dark", "dark:text-amber-dark", "dark:text-blue-dark", @@ -262,12 +265,11 @@ "fixed", "flex", "flex-1", - "flex-auto", "flex-col", "flex-col-reverse", "flex-grow", "flex-wrap", - "focus:outline-blue-light", + "focus:ring-blue-light", "font-medium", "footnote-backref", "footnote-ref", @@ -290,7 +292,6 @@ "grid-cols-2", "group", "group-hover:block'", - "h-12", "h-16", "h-2", "h-32", @@ -306,8 +307,10 @@ "highlight", "hover:bg-blue-light-400", "hover:bg-gray-light-100", + "hover:bg-gray-light-200", "hover:bg-gray-light-300", "hover:border-gray-light-200", + "hover:border-white/20", "hover:dark:bg-gray-dark-300", "hover:dark:border-gray-dark", "hover:dark:text-blue-dark", @@ -316,6 +319,7 @@ "hover:opacity-90", "hover:text-black", "hover:text-blue-light", + "hover:text-white", "hover:underline", "icon-lg", "icon-sm", @@ -329,6 +333,7 @@ "items-stretch", "justify-between", "justify-center", + "justify-end", "justify-evenly", "justify-self-end", "leading-snug", @@ -344,21 +349,19 @@ "lg:scale-100", "lg:text-base", "lg:w-[1200px]", - "lg:w-[600px]", "link", "lntable", "lntd", - "m-2", "m-4", "m-auto", "macOS", - "max-h-[80vh]", "max-h-full", "max-w-56", "max-w-[1400px]", "max-w-[840px]", "max-w-full", "max-w-none", + "max-w-xl", "mb-4", "mb-8", "md:block", @@ -374,16 +377,14 @@ "md:max-w-[66%]", "md:px-20", "md:scale-100", - "min-h-0", "min-h-screen", "min-w-0", "ml-3", "ml-auto", "mt-1", + "mt-2", "mt-20", "mt-auto", - "mx-1", - "mx-8", "mx-auto", "my-0", "my-2", @@ -394,15 +395,13 @@ "no-wrap", "not-prose", "object-cover", + "open-kapa-widget", "openSUSE-and-SLES", "origin-bottom-right", - "outline", - "outline-2", - "outline-gray-light", + "outline-none", "overflow-clip", "overflow-hidden", "overflow-x-hidden", - "overflow-y-auto", "overflow-y-scroll", "p-1", "p-2", @@ -422,6 +421,7 @@ "pl-4", "pl-5", "place-items-center", + "placeholder:text-white", "pr-2", "prose", "pt-0", @@ -429,9 +429,9 @@ "px-2", "px-3", "px-4", + "px-6", "px-8", "py-1", - "py-12", "py-2", "py-20", "py-4", @@ -440,6 +440,8 @@ "right-0", "right-3", "right-8", + "ring-[1.5px]", + "ring-gray-light-200", "rotate-45", "rounded", "rounded-[6px]", @@ -456,9 +458,13 @@ "select-none", "self-center", "shadow", + "shadow-lg", + "sm:flex", "sm:flex-row", "sm:grid-cols-2", + "sm:hidden", "sm:items-center", + "sm:w-full", "space-x-2", "space-y-4", "sticky", @@ -497,6 +503,7 @@ "top-16", "top-3", "top-6", + "top-full", "transition", "truncate", "underline", @@ -507,17 +514,20 @@ "w-8", "w-[1200px]", "w-[32px]", + "w-fit", "w-full", "w-lvw", + "w-screen", "xl:grid-cols-3", "xl:grid-cols-4", "xl:grid-cols-main-xl", "xl:w-[1200px]", - "xl:w-[800px]", + "xl:w-[400px]", "youtube-video", "z-10", "z-20", - "z-30" + "z-30", + "z-50" ], "ids": null } diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 8d14b993a5..0ff334e5ac 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -5,7 +5,8 @@ {{ partial "head.html" . }} - + {{ partial "header.html" . }}
diff --git a/layouts/_default/search.html b/layouts/_default/search.html new file mode 100644 index 0000000000..bf98102500 --- /dev/null +++ b/layouts/_default/search.html @@ -0,0 +1,185 @@ + + + + + {{ partial "head.html" . }} + + + + {{ partial "header.html" . }} +
+
+
+

{{ .Title }}

+ {{ .Content }} +
+
+ + +
+
+
+ +
+
+
+
+
+ + + + + diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html index 66822f2a78..83f3c33e38 100644 --- a/layouts/partials/breadcrumbs.html +++ b/layouts/partials/breadcrumbs.html @@ -1,4 +1,10 @@ -