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) $