43 lines
2.0 KiB
HTML
43 lines
2.0 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<!-- main content -->
|
||
|
|
<main class="px-16 py-6 bg-gray-100 md:col-span-3">
|
||
|
|
<div class="flex justify-center md:justify-end">
|
||
|
|
<a href="/sign-in" class="btn text-primary border-primary md:border-2 hover:shadow-lg transition ease-out duration-300">Login</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="sm:bg-white sm:w-[50%] sm:ml-auto sm:mr-auto sm:mt-[10rem] sm:p-10 sm:rounded-3xl">
|
||
|
|
<div>
|
||
|
|
<img src={{ recipe.image_url.clone().unwrap_or_default() }} alt="omelette" class="sm:rounded-xl">
|
||
|
|
</div>
|
||
|
|
<div class="pl-[1.7rem] mt-8 sm:p-0 sm:mt-9">
|
||
|
|
<h1 class="font-young-serif text-[37px] text-stone-700 leading-10 mb-7 sm:text-stone-800">{{ recipe.title }}</h1>
|
||
|
|
<p class="text-[17px] pr-[15px] font-outfit-regular text-stone-500 sm:text-base sm:p-0">
|
||
|
|
{{ recipe.summary.clone().unwrap_or_default() }}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="pr-7 border-bottom border-b-[2px] ml-auto mr-auto w-[20rem] pb-6 sm:w-auto">
|
||
|
|
<p class="Title mb-5">Ingredients</p>
|
||
|
|
<ul class="list-disc ml-6 marker:text-rose-900">
|
||
|
|
{% for ingeredient in ingeredients %}
|
||
|
|
<li class="paragraph pl-3 mb-2"><span class="mr-2">{{ ingeredient.qty }}</span><span>{{ ingeredient.name }}</span></li>
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="border-bottom marker:text-rose-900 marker:font-outfit-semibold border-b-[2px] ml-auto mr-auto w-[20.2rem] pb-4 mt-8 sm:w-auto">
|
||
|
|
<p class="Title mb-5">Instructions</p>
|
||
|
|
<ol class="list-decimal ml-6">
|
||
|
|
{% for step in steps %}
|
||
|
|
<li class="font-outfit-regular text-stone-500 text-[17px] mb-3 pl-3 text-base">
|
||
|
|
{{ step.body }}
|
||
|
|
<div>{{ step.hint.clone().unwrap_or_default() }}</div>
|
||
|
|
</li>
|
||
|
|
{% endfor %}
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
{% endblock %}
|