From 1f7b55af6fc505483f797788cd3c48111eb2270f Mon Sep 17 00:00:00 2001 From: James Brechtel Date: Thu, 21 May 2026 21:29:20 -0400 Subject: [PATCH] feat: add CSS class and styles for editable recipe title --- src/Roux/Html.hs | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/Roux/Html.hs b/src/Roux/Html.hs index f38d62b..944f28c 100644 --- a/src/Roux/Html.hs +++ b/src/Roux/Html.hs @@ -259,6 +259,12 @@ page title content = , "@keyframes roux-timer-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }" , ".roux-timer-reset, .roux-timer-close { background: none; border: none; cursor: pointer; font-size: 0.75rem; padding: 0 2px; line-height: 1; color: rgba(61, 44, 30, 0.4); transition: color 0.15s; }" , ".roux-timer-reset:hover, .roux-timer-close:hover { color: var(--roux-accent); }" + , "" + , ".roux-recipe-title { cursor: pointer; position: relative; }" + , ".roux-recipe-title:hover::after { content: '\\270E'; font-size: 0.7rem; opacity: 0.3; margin-left: 0.5rem; vertical-align: super; }" + , ".roux-recipe-title.roux-editing { cursor: text; border-bottom: 1px dashed rgba(184, 92, 56, 0.4); outline: none; }" + , ".roux-recipe-title.roux-title-error { animation: roux-shake 0.3s ease-in-out; }" + , "@keyframes roux-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }" ] H.body $ H.main ! A.class_ "container" $ content @@ -721,7 +727,7 @@ renderRecipe filename recipe = do Just c -> H.p ! A.class_ "roux-course" $ H.toHtml c Nothing -> pure () H.div ! A.style "display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;" $ do - H.h1 $ H.toHtml (titleText recipe) + H.h1 ! A.class_ "roux-recipe-title" $ H.toHtml (titleText recipe) case metaSource meta of Just url -> H.a ! A.class_ "roux-source-link" ! A.href (H.toValue url) ! A.target "_blank" ! A.rel "noopener noreferrer" $ do "↗ Original"