bf8454c77a
Alice feedback: pull back from cWHO terminal-coded look, blend Bob's gothic
witch with sulkta.com polish. 'burn tokens till we nail it.'
Style direction:
- Polished dark base like sulkta.com — soft purple/green radial glows on
near-black, faint witchy pentagram-circle SVG bg pattern at 5% opacity
- NO scanlines, NO CRT vignette overlay (cWHO is too terminal for this)
- Inter for body (sulkta.com), Cinzel SERIF for h1/h2/brand/recipe-card
titles (gothic flourish), JetBrains Mono for code/labels/uppercase chips
- Soft glow shadows (rgba box-shadow) instead of hard cWHO 3px offsets
- Rounded corners 4-6px throughout
- Smooth fade-in animations on .panel and .page-head
- Pills with subtle background tint (sulkta pill style)
- KV labels in mono uppercase purple — kept the gothic occult-tag feel
- Recipe cards lift on hover with purple glow shadow
Templates extracted from server.py to cauldron/templates/:
- _base.html — full layout shell, topbar, scanlines REMOVED, animation
- me.html — uses {extends '_base.html'}
- connect.html — same
- recipes.html — NEW, paginated grid view
- recipe_detail.html — NEW, full recipe with ingredients + instructions
- stub.html — NEW, placeholder for /plan and /list (v0.3)
Routes added:
- GET /recipes — user-tier: list via current_user_mealie()
- GET /recipes/<slug> — user-tier: detail view
- GET /plan, /list — stubs so nav doesn't 404
Server:
- render_template_string → render_template (proper Jinja file lookup)
- Stripped inline _PALETTE_CSS / ME_TEMPLATE / CONNECT_TEMPLATE constants
- Added current_user_mealie() helper to all user-facing routes
62 lines
2.1 KiB
HTML
62 lines
2.1 KiB
HTML
{% extends "_base.html" %}
|
|
{% block title %}{{ recipe.name }} · Cauldron{% endblock %}
|
|
{% block content %}
|
|
|
|
<div class="page-head">
|
|
<div class="crumb">// recipes / {{ recipe.slug }}</div>
|
|
<h1>{{ recipe.name }}</h1>
|
|
{% if recipe.description %}<div class="lede">{{ recipe.description }}</div>{% endif %}
|
|
</div>
|
|
|
|
<section class="panel">
|
|
<div class="panel-head">
|
|
<h2>meta</h2>
|
|
</div>
|
|
<dl class="kv">
|
|
{% if recipe.totalTime %}<dt>total</dt><dd>{{ recipe.totalTime }}</dd>{% endif %}
|
|
{% if recipe.prepTime %}<dt>prep</dt><dd>{{ recipe.prepTime }}</dd>{% endif %}
|
|
{% if recipe.cookTime %}<dt>cook</dt><dd>{{ recipe.cookTime }}</dd>{% endif %}
|
|
{% if recipe.recipeYield %}<dt>yield</dt><dd>{{ recipe.recipeYield }}</dd>{% endif %}
|
|
{% if recipe.recipeServings %}<dt>servings</dt><dd>{{ recipe.recipeServings }}</dd>{% endif %}
|
|
</dl>
|
|
</section>
|
|
|
|
<section class="panel green">
|
|
<div class="panel-head">
|
|
<h2>ingredients</h2>
|
|
<span class="ctx">{{ (recipe.recipeIngredient or []) | length }} items</span>
|
|
</div>
|
|
{% if recipe.recipeIngredient %}
|
|
<ul style="list-style: none; padding: 0; margin: 0;">
|
|
{% for ing in recipe.recipeIngredient %}
|
|
<li style="padding: 4px 0; border-bottom: 1px dashed var(--line); color: var(--bone);">
|
|
{% if ing.display %}{{ ing.display }}{% else %}{{ ing.note or '' }}{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<p class="muted">no ingredients listed.</p>
|
|
{% endif %}
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<div class="panel-head">
|
|
<h2>instructions</h2>
|
|
</div>
|
|
{% if recipe.recipeInstructions %}
|
|
<ol>
|
|
{% for step in recipe.recipeInstructions %}
|
|
<li style="margin: .8em 0; color: var(--bone);">{{ step.text }}</li>
|
|
{% endfor %}
|
|
</ol>
|
|
{% else %}
|
|
<p class="muted">no instructions listed.</p>
|
|
{% endif %}
|
|
</section>
|
|
|
|
<div class="btn-row">
|
|
<a class="btn btn-purple" href="/recipes">← back to grimoire</a>
|
|
<a class="btn" href="{{ public_url }}/recipe/{{ recipe.slug }}" target="_blank" rel="noopener">view in mealie ↗</a>
|
|
</div>
|
|
|
|
{% endblock %}
|