83 lines
3.3 KiB
HTML
83 lines
3.3 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<main class="m-4 flex flex-col gap-4 w-full">
|
|
{% include "../top_bar.html" %}
|
|
<div class="sm:rounded-3xl w-full flex flex-col gap-4">
|
|
<div class="text-center w-full">
|
|
<img src={{ recipe.image_url.clone() }} alt="{{recipe.title}}" class="rounded-xl w-40 md:w-3/4 ml-auto mr-auto">
|
|
</div>
|
|
<div class="flex flex-col gap-7">
|
|
<h1 class="font-young-serif text-desktop-heading-l text-stone-700 sm:text-stone-800 text-center md:text-left">
|
|
{{ recipe.title }}
|
|
</h1>
|
|
<p class="font-outfit-regular text-stone-500 sm:text-base">
|
|
{{ recipe.summary.clone().unwrap_or_default() }}
|
|
</p>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="flex flex-col gap-7">
|
|
<p class="text-desktop-heading-m">
|
|
Ingredients
|
|
</p>
|
|
<ul class="list-disc marker:text-rose-900 list-inside flex flex-col gap-3">
|
|
{% for ingeredient in ingeredients %}
|
|
<li class="paragraph">
|
|
<span class="mr-1">
|
|
{{ ingeredient.qty }}
|
|
</span>
|
|
<span class="mr-4">
|
|
{{ ingeredient.unit }}
|
|
</span>
|
|
<span>
|
|
{{ ingeredient.name }}
|
|
</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="marker:text-rose-900 marker:font-outfit-semibold flex flex-col gap-7">
|
|
<p class="text-desktop-heading-m">
|
|
Instructions
|
|
</p>
|
|
<ol class="list-decimal list-inside flex flex-col gap-3">
|
|
{% for step in steps %}
|
|
<li class="font-outfit-regular text-stone-500 text-base text-base">
|
|
{{ step.body }}
|
|
<div>{{ step.hint.clone().unwrap_or_default() }}</div>
|
|
</li>
|
|
{% endfor %}
|
|
</ol>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="marker:text-rose-900 marker:font-outfit-semibold flex flex-col gap-7">
|
|
<p class="text-desktop-heading-m">
|
|
Tags
|
|
</p>
|
|
<div class="flex gap-4 gap-7">
|
|
{% for tag in tags %}
|
|
<a class="bg-gray-300 dark:bg-gray-700 text-base text-gray-700 dark:text-white py-2 px-4 rounded-full font-bold hover:bg-gray-400 dark:hover:bg-gray-600 flex justify-center items-center">
|
|
{{ tag.name }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="marker:text-rose-900 marker:font-outfit-semibold flex flex-col gap-7">
|
|
<p class="text-desktop-heading-m">
|
|
Ingredients
|
|
</p>
|
|
<div class="flex gap-4 gap-7">
|
|
{% for ingeredient in ingeredients %}
|
|
<a class="bg-gray-300 dark:bg-gray-700 text-base text-gray-700 dark:text-white py-2 px-4 rounded-full font-bold hover:bg-gray-400 dark:hover:bg-gray-600 flex justify-center items-center">
|
|
{{ ingeredient.name }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{% endblock %}
|