diff --git a/src/Roux/Html.hs b/src/Roux/Html.hs index 743dc27..67ee2b5 100644 --- a/src/Roux/Html.hs +++ b/src/Roux/Html.hs @@ -927,7 +927,7 @@ recipePageStyles = , ".rp-hero-wrap { position: relative; margin-bottom: 32px; }" , ".rp-hero-wrap .rp-hero { margin-bottom: 0; }" , "" - , ".rp-body-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; margin-bottom: 32px; }" + , ".rp-body-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 16px; }" , "" , ".rp-section-label { font-size: 12px; letter-spacing: 0.12em; color: #8A7560; text-transform: uppercase; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; }" , ".rp-serves { font-family: \"Fraunces\", serif; font-size: 28px; margin-bottom: 22px; }" @@ -960,6 +960,7 @@ recipePageStyles = , "" , ".rp-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }" , ".rp-tag { font-size: 12px; color: var(--roux-accent); border: 1px solid rgba(184,92,56,0.25); border-radius: 4px; padding: 2px 10px; }" + , ".rp-history-section { border-top: 0.5px solid rgba(61,40,23,0.15); padding-top: 24px; margin-top: 0; }" , "" , "@media (max-width: 720px) { .rp-page { padding: 24px 24px 60px; } .rp-meta-strip { flex-direction: column; align-items: flex-start; } .rp-meta-strip-actions { width: 100%; justify-content: flex-end; } .rp-body-grid { grid-template-columns: 1fr; gap: 32px; } .rp-title { font-size: 30px; } }" ] @@ -999,25 +1000,29 @@ renderRecipe filename recipe entries = do -- Hero image rpHeroImage meta filename -- Body grid + -- Body grid: ingredients | method + let sections = NE.toList (recipeSections recipe) + -- Body grid: ingredients | method H.div ! A.class_ "rp-body-grid" $ do - -- Left column: servings, ingredients, method + -- Left column: servings + ingredients H.div $ do case metaServings meta of Just s -> do H.div ! A.class_ "rp-section-label" $ "Serves" H.div ! A.class_ "rp-serves" $ H.toHtml (showServings s) Nothing -> pure () - let sections = NE.toList (recipeSections recipe) H.div ! A.class_ "rp-section-label" $ "Ingredients" rpIngredientList sections + -- Right column: method + H.div $ do H.div ! A.class_ "rp-section-label" $ "Method" rpMethodList sections - -- Right column: cook history rail - H.aside $ do - H.div ! A.class_ "rp-section-label" $ do - H.span "Cook history" - H.button ! A.class_ "rp-btn-ghost roux-record-trigger" ! H.dataAttribute "filename" (H.toValue (T.pack filename)) $ "+ Add" - rpHistoryList entries + -- Cook history full-width below grid + H.aside ! A.class_ "rp-history-section" $ do + H.div ! A.class_ "rp-section-label" $ do + H.span "Cook history" + H.button ! A.class_ "rp-btn-ghost roux-record-trigger" ! H.dataAttribute "filename" (H.toValue (T.pack filename)) $ "+ Add" + rpHistoryList entries -- Tags let tags = metaTags meta unless (null tags) $