You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

159 lines
5.2 KiB

---
layout: default
---
<div class="container" itemscope itemtype="http://schema.org/Recipe">
<!-- call up the image and image credit link -->
{% for image in page.image %}
<div class="xs-p2">
<img itemprop="image" src="{{site.baseurl}}/images/{{ image }}" />
{% if page.imagecredit %}
{% for imagecredit in page.imagecredit %}
<a href="{{ imagecredit }}" class="right">
<svg class="js-geomicon geomicon" width="14" height="14" data-icon="camera" viewBox="0 0 32 32" style="fill:currentcolor"><title>camera icon</title><path d="M0 6 L8 6 L10 2 L22 2 L24 6 L32 6 L32 28 L0 28 z M9 17 A7 7 0 0 0 23 17 A7 7 0 0 0 9 17"></path></svg>
</a>
{% endfor %}
{% endif %}
</div>
{% endfor %}
<article class="h-recipe post-content px2">
<!-- call up the main recipe title and content -->
<header class="post-header">
<h1 class="p-name post-title center m1 sm-mt3" itemprop="name">{{ page.title }}</h1>
</header>
<div class="px2 mt3 clearfix">
<div class="sm-col-8 mx-auto" itemprop="description">{{page.content}}</div>
</div>
<div class="mt3 clearfix">
<div class="sm-col sm-col-12 lg-col-12">
{% include nutritional-information.html %}
</div>
</div>
<!-- call up recipe and directions -->
<div class="clearfix mt3">
<div class="sm-col sm-col-6 lg-col-6">
<!-- check if it's a component-based recipe -->
{% if page.components %}
<h4 class="blue mt0 mb2 xs-center">{{ site.translation[site.language].components }}</h4>
<ul>
<!-- list components that make up recipe -->
{% for component in page.components %}
<li>{{ component | markdownify }}</li>
{% endfor %}
</ul>
{% endif %}
{% if page.ingredients %}
<h4 class="blue mt0 mb2 xs-center">{{ site.translation[site.language].ingredients }}</h4>
<ul itemprop="ingredients">
<!-- list ingredients that make up recipe -->
{% for ingredient in page.ingredients %}
<li class="p-ingredient" itemprop="recipeIngredient">{{ ingredient | markdownify }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="sm-col sm-col-6 lg-col-6">
<h4 class="blue mt0 mb2 xs-center">{{ site.translation[site.language].directions }}</h4>
<ul class="e-instructions" itemprop="recipeInstructions">
{% for direction in page.directions %}
<li>{{ direction | markdownify }}</li>
{% endfor %}
</ul>
</div>
</div>
<!-- end recipe and directions -->
<!-- check if it's a component-based recipe, render it -->
{% if page.components %}
<div class="components bg-darken-2 p2 mt3 mb3 center">
&darr; {{ site.translation[site.language].component_based }} &darr;
</div>
<div class="clearfix mxn2">
{% for component in page.components %}
<div class="sm-col sm-col-4 px2">
{% for recipe in site.components %}
{% if recipe.title == component %}
<h4 class="blue center">{{recipe.title}}</h4>
{% for image in recipe.image %}
<div class="image ratio bg-cover" style="background-image:url({{site.baseurl}}/images/{{ image }});">
<img class="hide" itemprop="photo" src="{{site.baseurl}}/images/{{ image }}" />
</div>
{% if recipe.imagecredit %}
{% for imagecredit in recipe.imagecredit %}
<a href="{{ imagecredit }}" class="right">
<svg class="js-geomicon geomicon" width="14" height="14" data-icon="camera" viewBox="0 0 32 32" style="fill:currentcolor"><title>camera icon</title><path d="M0 6 L8 6 L10 2 L22 2 L24 6 L32 6 L32 28 L0 28 z M9 17 A7 7 0 0 0 23 17 A7 7 0 0 0 9 17"></path></svg>
</a>
{% endfor %}
{% endif %}
{% endfor %}
<h4 class="blue regular xs-center">{{ site.translation[site.language].ingredients }}</h4>
<ul class="ingredients" itemprop="ingredients">
{% for item in recipe.ingredients %}
<li itemprop="ingredient">{{ item | markdownify }}</li>
{% endfor %}
</ul>
<h4 class="blue regular xs-center">{{ site.translation[site.language].directions }}</h4>
<ul itemprop="instructions">
{% for item in recipe.directions %}
<li>{{ item | markdownify }}</li>
{% endfor %}
</ul>
{% endif %}
{% endfor %}
</div>
{% endfor %}
</div>
{% endif %}
<!-- end components -->
{% for category in page.categories %}
<p class="clearfix">{{ site.translation[site.language].category }}: <span itemprop="recipeCategory">{{ category }}</span></p>
{% endfor %}
</article>
</div>
<script type="text/javascript">
$( document ).ready(function() {
jQuery.fn.clickToggle = function(a,b) {
var ab=[b,a];
function cb(){ ab[this._tog^=1].call(this); }
return this.on("click", cb);
};
$("ul li").append('<input type="checkbox">');
$("ul li").clickToggle(function(){
$(this).children("input").prop('checked', true);
var height = $(this).height();
var y = $(window).scrollTop();
$('html, body').animate({scrollTop: y+height+16}, 200);
}, function(){
$(this).children("input").prop('checked', false);
var height = $(this).height();
var y = $(window).scrollTop();
$('html, body').animate({scrollTop: y-height-16}, 200);
});
});
</script>