jbrechtel
0643dda10d
Build and Deploy / build-and-deploy (push) Failing after 1m40s
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
187 lines
7.7 KiB
HTML
187 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Roux — Recipe page mockup</title>
|
|
<style>
|
|
:root {
|
|
--cream: #F5EBD3;
|
|
--cream-light: #FDF6E7;
|
|
--brown-dark: #3D2817;
|
|
--brown-mid: #4A3525;
|
|
--brown-soft: #6B5847;
|
|
--brown-muted: #8A7560;
|
|
--terracotta: #C5532E;
|
|
--meta-strip-bg: rgba(61, 40, 23, 0.05);
|
|
--rule: rgba(61, 40, 23, 0.18);
|
|
--rule-soft: rgba(61, 40, 23, 0.15);
|
|
--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: 28px;
|
|
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: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: 38px; line-height: 1.05; }
|
|
.recipe-sub { font-size: 16px; color: var(--brown-soft); margin: 8px 0 16px; }
|
|
|
|
/* meta strip — the key move: last cook + quick log button right under the title */
|
|
.meta-strip {
|
|
display: flex; align-items: center; gap: 14px;
|
|
background: var(--meta-strip-bg); border-radius: 10px;
|
|
padding: 12px 18px; margin-bottom: 24px;
|
|
font-size: 14px;
|
|
}
|
|
.meta-strip .last-cook { color: var(--brown-soft); flex: 1; min-width: 0; }
|
|
.meta-strip .last-cook strong { font-weight: 500; color: var(--brown-dark); }
|
|
.meta-strip .last-cook .note { font-style: italic; }
|
|
.meta-strip-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: 9px 16px;
|
|
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; }
|
|
|
|
.hero-image {
|
|
width: 100%; aspect-ratio: 2.2; border-radius: 10px;
|
|
background: linear-gradient(135deg, #E8B86A, #C9893F 50%, #8A5A2A);
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
/* body grid: ingredients/method on left, cook-history rail on right */
|
|
.body-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; }
|
|
|
|
.section-label {
|
|
font-size: 12px; letter-spacing: 0.12em; color: var(--brown-muted);
|
|
text-transform: uppercase; margin-bottom: 10px;
|
|
}
|
|
|
|
.serves { font-family: var(--font-serif); font-size: 28px; margin-bottom: 22px; }
|
|
|
|
.ingredients { list-style: none; padding: 0; margin: 0 0 28px; font-size: 15px; line-height: 1.9; }
|
|
.ingredients li { display: flex; gap: 14px; align-items: baseline; padding: 4px 0; border-bottom: 0.5px dashed var(--rule-soft); }
|
|
.ingredients li:last-child { border-bottom: none; }
|
|
.ingredients .qty { color: var(--brown-muted); min-width: 48px; font-variant-numeric: tabular-nums; }
|
|
|
|
.method { font-size: 15px; line-height: 1.7; color: var(--brown-mid); }
|
|
.method p { margin: 0 0 12px; }
|
|
.method .step { font-weight: 500; color: var(--brown-dark); margin-right: 4px; }
|
|
|
|
/* cook history rail */
|
|
.history-rail { }
|
|
.history-rail .section-label { display: flex; justify-content: space-between; align-items: baseline; }
|
|
.history-list { display: flex; flex-direction: column; gap: 0; }
|
|
.history-entry { padding: 12px 0; border-bottom: 0.5px solid var(--rule-soft); }
|
|
.history-entry:last-child { border-bottom: none; }
|
|
.history-date { font-family: var(--font-serif); font-size: 15px; font-weight: 500; color: var(--brown-dark); margin-bottom: 2px; }
|
|
.history-note { font-size: 13px; color: var(--brown-soft); line-height: 1.5; }
|
|
.history-note.empty { color: var(--brown-muted); font-style: italic; }
|
|
|
|
@media (max-width: 720px) {
|
|
.page { padding: 24px 24px 60px; }
|
|
.meta-strip { flex-direction: column; align-items: flex-start; }
|
|
.meta-strip-actions { width: 100%; justify-content: flex-end; }
|
|
.body-grid { grid-template-columns: 1fr; gap: 32px; }
|
|
h1.recipe-title { font-size: 30px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
|
|
<nav class="nav">
|
|
<span class="logo">ROUX</span>
|
|
<div class="nav-links">
|
|
<a>Recipes</a>
|
|
<a>Cook History</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<h1 class="recipe-title">Chicken Piccata</h1>
|
|
<p class="recipe-sub">With buttery angel hair pasta & dressed greens with parmesan</p>
|
|
|
|
<div class="meta-strip">
|
|
<div class="last-cook">
|
|
<strong>Last cooked May 26</strong> — <span class="note">“Pretty good — lots of extra pasta.”</span>
|
|
</div>
|
|
<div class="meta-strip-actions">
|
|
<button class="btn-ghost">↗ Original</button>
|
|
<button class="btn">+ Log meal</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-image" role="img" aria-label="Chicken Piccata photo"></div>
|
|
|
|
<div class="body-grid">
|
|
|
|
<div>
|
|
<div class="section-label">Serves</div>
|
|
<div class="serves">2</div>
|
|
|
|
<div class="section-label">Ingredients</div>
|
|
<ul class="ingredients">
|
|
<li><span class="qty">—</span><span>water</span></li>
|
|
<li><span class="qty">2</span><span>chicken breasts</span></li>
|
|
<li><span class="qty">1</span><span>lemon</span></li>
|
|
<li><span class="qty">¼ c</span><span>parsley</span></li>
|
|
<li><span class="qty">1 T</span><span>capers</span></li>
|
|
<li><span class="qty">2 T</span><span>olive oil</span></li>
|
|
<li><span class="qty">2 T</span><span>butter</span></li>
|
|
</ul>
|
|
|
|
<div class="section-label">Method</div>
|
|
<div class="method">
|
|
<p><span class="step">1.</span> Slice chicken breasts horizontally, season, and dredge in flour.</p>
|
|
<p><span class="step">2.</span> Sear in olive oil over medium-high until golden, about 3 min per side. Set aside.</p>
|
|
<p><span class="step">3.</span> Deglaze the pan with lemon juice and a splash of water; add butter and capers and simmer until glossy.</p>
|
|
<p><span class="step">4.</span> Return chicken to the pan, spoon sauce over, and rest 2 min before plating over angel hair.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="history-rail">
|
|
<div class="section-label">
|
|
<span>Cook history</span>
|
|
<button class="btn-ghost">+ Add</button>
|
|
</div>
|
|
<div class="history-list">
|
|
<div class="history-entry">
|
|
<div class="history-date">May 26, 2026</div>
|
|
<div class="history-note">Pretty good — lots of extra pasta.</div>
|
|
</div>
|
|
<div class="history-entry">
|
|
<div class="history-date">May 26, 2026</div>
|
|
<div class="history-note empty">No notes</div>
|
|
</div>
|
|
<div class="history-entry">
|
|
<div class="history-date">Apr 12, 2026</div>
|
|
<div class="history-note">Doubled the capers — much better.</div>
|
|
</div>
|
|
<div class="history-entry">
|
|
<div class="history-date">Feb 03, 2026</div>
|
|
<div class="history-note">First try. Sauce broke a little.</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|