From 431386b292a08561fb0aeff0ebc0eb042e24a033 Mon Sep 17 00:00:00 2001 From: James Brechtel Date: Tue, 19 May 2026 22:20:15 -0400 Subject: [PATCH] feat: style search input with color scheme and auto-focus on load - Adds CSS for input[type=search] using theme colors (bg, text, accent) - Adds autofocus attribute so search box is focused on page load --- src/Roux/Html.hs | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Roux/Html.hs b/src/Roux/Html.hs index d9e68c6..d8f31a4 100644 --- a/src/Roux/Html.hs +++ b/src/Roux/Html.hs @@ -148,6 +148,9 @@ page title content = , "a:hover { text-decoration: underline; }" , "a[role=button] { --pico-color: var(--roux-accent); }" , "" + , "/* Search input */" + , "input[type=search] { background: var(--roux-bg); color: var(--roux-text); border-color: rgba(184, 92, 56, 0.3); }" + , "input[type=search]:focus { border-color: var(--roux-accent); box-shadow: 0 0 0 1px var(--roux-accent); }" , ".roux-navbar { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; margin-bottom: 1rem; border-bottom: 0.5px solid rgba(184, 92, 56, 0.2); }" , ".roux-navbar ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }" , ".roux-navbar li { margin: 0; padding: 0; }" @@ -341,6 +344,7 @@ indexPage _mode recipes = ! A.id "roux-search" ! A.placeholder "Search recipes..." ! A.style "margin-bottom: 1rem;" + ! A.autofocus "" -- Container for JS-rendered recipe list H.div ! A.id "roux-recipe-list" $ H.p "Loading recipes..." -- Embedded JSON: recipe data