rewrite ingredients.html to be less confusing, minor layout fixes and css changes

_includes/ingredients.html

@@ -5,6 +5,20 @@
 <{{tag}}>Ingredients</{{tag}}>
 <ul class='ingredients'>
 	{% for item in page.ingredients -%}
-	<li class='{% if item[3] %}optional{% endif %}'>{% if item[0] != 0 %}{% if item[0][0] %}{{ item[0][0] }} to {{ item[0][1] }}{% else %}{{ item[0] }}{% endif %}{% endif %} {%- if item[2] %} {{ item[2] }} of {%- endif %} {{ item[1] }}{% if item[0] == 0 %} to taste{% endif %}</li>
+	{%- assign tag = "li" -%}
-	{% endfor -%}
+	{%- if item[3] -%}
+		{%- assign tag = tag | append: " class='optional'" -%}
+	{%- endif -%}
+
+	{%- assign amount = item[0] | append: " " -%}
+	{%- assign end = "" -%}
+	{%- if item[0][0] -%}
+		{%- assign amount = item[0][0] | append: " to " | append: item[0][1] | append: " " -%}
+	{%- elsif item[0] == 0 -%}
+		{%- assign amount = "" -%}
+		{%- assign end = " to taste" -%}
+	{%- endif -%}
+
+	<{{ tag }}>{{ amount }} {%- if item[2] %}{{ item[2] }} of {% endif -%} {{ item[1] }}{{ end }}</li>
+	{% endfor %}
 </ul>

_includes/method.html

@@ -7,6 +7,6 @@
 	<ol>
 		{% for item in page.method -%}
 		<li>{{ item }}</li>
-		{% endfor -%}
+		{% endfor %}
 	</ol>
 {%- endif -%}

_layouts/default.html

@@ -13,7 +13,7 @@
 		{{ content }}
 	</div>
 
-	{%- include footer.html -%}
+	{% include footer.html -%}
 
 </body>
 

assets/style.css

@@ -111,6 +111,12 @@ li {
 	background: linear-gradient(to right, turquoise 5px, #eee 5px 100%);
 	max-width: 600px;
 	flex: 1 0 300px;
+	box-shadow: 0 0 3px #0003;
+	transition: 0.2s all;
+
+}
+.recipe-listing:hover {
+	box-shadow: 0 0 15px #0003;
 }
 a.recipe-listing {
 	color: black;