Update recipe view page layout to match roux-recipe-mockup.html

Layout changes: - Nav matching landing page style (ROUX logo + Recipes + Cook History) - Large serif title with inline editing preserved - Subtitle from recipe description - Meta strip: rounded background with last cook info + source link + Log meal button - Full-width hero image with upload/replace overlay - 2-column body grid (1.5fr ingredients+method | 1fr cook history rail) - Flat ingredient list with quantities (no checkboxes) - Numbered method paragraphs (no checkboxes, timers preserved) - Cook history rail on right with + Add button - Tags displayed below the grid - Responsive: single column on mobile Architecture: - Removed: renderMetaBar, renderCookLog, renderRecentCookEntries, renderRecentEntry, renderEntry, renderIngredientGroup, renderIngredientRow, collectSectionIngredients, dedupFirst, renderMethodSections, renderMethodStep, isEmptyStep, isBlankText, isMethodSection, sectionMethodSteps, renderMarginalNote, collectNotes, bodyItemSteps, pairWith - Added: recipePageStyles, rpHeroImage, rpLastCookInfo, formatFullDate, rpIngredientList, rpNamedIngredientSection, collectIngredients, rpIngredientItems, rpMethodList, rpRenderMethodStep, rpHistoryList, rpRenderHistoryEntry - Updated cookLogJs to use .roux-record-trigger class for dual trigger buttons - Removed unused imports (Data.Function, catMaybes) - All hlint warnings fixed, 51 tests passing
2026-05-26 07:38:15 -04:00
parent 6a7374c912
commit 0643dda10d
3 changed files with 608 additions and 264 deletions
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Roux — Landing page mockup</title>
+<style>
+  :root {
+    --cream: #F5EBD3;
+    --cream-light: #FDF6E7;
+    --brown-dark: #3D2817;
+    --brown-mid: #4A3525;
+    --brown-soft: #6B5847;
+    --brown-muted: #8A7560;
+    --terracotta: #C5532E;
+    --terracotta-soft: rgba(197, 83, 46, 0.08);
+    --rule: rgba(61, 40, 23, 0.18);
+    --rule-soft: rgba(61, 40, 23, 0.12);
+    --font-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
+    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; background: var(--cream); font-family: var(--font-sans); color: var(--brown-dark); }
+  .page { max-width: 980px; margin: 0 auto; padding: 36px 48px 80px; }
+
+  .nav { display: flex; justify-content: space-between; align-items: center;
+         border-bottom: 0.5px solid var(--rule); padding-bottom: 12px; margin-bottom: 32px;
+         font-size: 12px; letter-spacing: 0.12em; color: var(--brown-soft); text-transform: uppercase; }
+  .logo { font-family: var(--font-serif); font-size: 22px; font-weight: 500; letter-spacing: 0.08em; color: var(--brown-dark); }
+  .nav-links { display: flex; gap: 28px; }
+  .nav-links a { color: var(--brown-soft); text-decoration: none; cursor: pointer; }
+  .nav-links a.active { color: var(--terracotta); }
+  .nav-links a:hover { color: var(--terracotta); }
+
+  h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; color: var(--brown-dark); margin: 0; }
+  h1.recipe-title { font-size: 32px; line-height: 1.1; }
+  h3.shelf-title { font-size: 20px; }
+
+  .shuffle-card {
+    background: var(--terracotta-soft);
+    border-radius: 12px;
+    padding: 20px 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 24px;
+    margin-bottom: 36px;
+  }
+  .shuffle-meta { font-size: 12px; letter-spacing: 0.12em; color: var(--brown-muted); text-transform: uppercase; margin-bottom: 4px; }
+  .shuffle-card h3 { font-size: 20px; }
+  .shuffle-actions { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }
+
+  .btn {
+    background: var(--terracotta); color: var(--cream-light);
+    border: none; border-radius: 8px; padding: 10px 18px;
+    font-size: 13px; font-weight: 500; cursor: pointer;
+    font-family: inherit;
+  }
+  .btn:hover { filter: brightness(0.95); }
+  .btn-ghost {
+    background: none; border: none; color: var(--terracotta);
+    font-size: 13px; cursor: pointer; padding: 0; font-family: inherit;
+  }
+  .btn-ghost:hover { text-decoration: underline; }
+
+  .shelf-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
+  .shelf { margin-bottom: 36px; }
+  .shelf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
+
+  .card { cursor: pointer; }
+  .card-image {
+    width: 100%; aspect-ratio: 1.3; border-radius: 8px;
+    background-size: cover; background-position: center;
+    transition: opacity 0.15s ease;
+  }
+  .card:hover .card-image { opacity: 0.92; }
+  .card-title { font-family: var(--font-serif); font-size: 17px; font-weight: 500; color: var(--brown-dark); margin: 10px 0 4px; }
+  .card-meta { font-size: 12px; color: var(--brown-muted); }
+
+  /* placeholder gradients — swap with real images */
+  .img-1 { background: linear-gradient(135deg, #E8B86A, #C9893F 60%, #8A5A2A); }
+  .img-2 { background: linear-gradient(135deg, #A8C77A, #6B8E3D 60%, #3D5A1F); }
+  .img-3 { background: linear-gradient(135deg, #D4A574, #9C6B3F 60%, #5C3A1F); }
+  .img-4 { background: linear-gradient(135deg, #E8C46A, #B8902F 60%, #7A5E1A); }
+  .img-5 { background: linear-gradient(135deg, #C7A878, #8E6B3D 60%, #5A4520); }
+  .img-6 { background: linear-gradient(135deg, #B5D4A1, #7AA862 60%, #4D7038); }
+
+  @media (max-width: 720px) {
+    .page { padding: 24px 24px 60px; }
+    .shelf-row { grid-template-columns: 1fr 1fr; }
+    .shuffle-card { flex-direction: column; align-items: flex-start; }
+    .shuffle-actions { width: 100%; justify-content: flex-end; }
+  }
+</style>
+</head>
+<body>
+<div class="page">
+
+  <nav class="nav">
+    <span class="logo">ROUX</span>
+    <div class="nav-links">
+      <a class="active">Home</a>
+      <a>Recipes</a>
+      <a>Cook History</a>
+    </div>
+  </nav>
+
+  <div class="shuffle-card">
+    <div>
+      <div class="shuffle-meta">Don&rsquo;t know what to cook?</div>
+      <h3>Try Sheet-Pan Salmon &amp; Asparagus</h3>
+    </div>
+    <div class="shuffle-actions">
+      <button class="btn-ghost">&#x21BB; Shuffle</button>
+      <button class="btn">Open recipe</button>
+    </div>
+  </div>
+
+  <section class="shelf">
+    <div class="shelf-header">
+      <h3 class="shelf-title">Recently cooked</h3>
+      <button class="btn-ghost">All history &rarr;</button>
+    </div>
+    <div class="shelf-row">
+      <div class="card">
+        <div class="card-image img-1"></div>
+        <div class="card-title">Chicken Piccata</div>
+        <div class="card-meta">May 26 &middot; 2nd cook</div>
+      </div>
+      <div class="card">
+        <div class="card-image img-2"></div>
+        <div class="card-title">Arugula Pesto Wheat Berries</div>
+        <div class="card-meta">May 21</div>
+      </div>
+      <div class="card">
+        <div class="card-image img-3"></div>
+        <div class="card-title">Alain Ducasse&rsquo;s Gougères</div>
+        <div class="card-meta">May 18</div>
+      </div>
+    </div>
+  </section>
+
+  <section class="shelf">
+    <div class="shelf-header">
+      <h3 class="shelf-title">Recently added</h3>
+      <button class="btn-ghost">All recipes &rarr;</button>
+    </div>
+    <div class="shelf-row">
+      <div class="card">
+        <div class="card-image img-4"></div>
+        <div class="card-title">Apple Cider Vinegar Dressing</div>
+        <div class="card-meta">Added May 24</div>
+      </div>
+      <div class="card">
+        <div class="card-image img-5"></div>
+        <div class="card-title">Chicken Piccata</div>
+        <div class="card-meta">Added May 20</div>
+      </div>
+      <div class="card">
+        <div class="card-image img-6"></div>
+        <div class="card-title">Arugula Pesto Chicken</div>
+        <div class="card-meta">Added May 14</div>
+      </div>
+    </div>
+  </section>
+
+</div>
+</body>
+</html>