HTML: implement nested ingredients list

layouts/partials/ingredients.html

@@ -10,18 +10,8 @@
     </div>
     {{- end }}
 
-    <ul>
+    {{ with $.Param "ingredients" -}}
-    {{ range $.Param "ingredients" }}
+    {{ partial "ingredients_ul.html" . }}
-    <li>
+    {{- end }}
-      <span class="ingred-qt">{{ with .qt }}{{ . | markdownify }}{{ end }}</span>
-      {{ with .article -}}
-      {{ . | markdownify -}}
-      {{- if substr . -1 1 | eq "'" -}}{{ else }} {{ end -}}
-      {{/* ^^^ No space only if article ends with an apostrophe */}}
-      {{- end -}}
-      <span class="ingred-name">{{ .name | markdownify }}</span>
-    </li>
-    {{ end }}
-    </ul>
   </div>
 </div>

layouts/partials/ingredients_ul.html

@@ -0,0 +1,23 @@
+<ul>
+{{- range . }}
+  {{ if isset . "catname" }}
+</ul>
+
+<h2>{{ .catname | markdownify }}</h2>
+
+  {{ partial "ingredients_ul.html" .ingredients }}
+<ul>
+
+  {{ else }}
+  <li>
+    <span class="ingred-qt">{{ with .qt }}{{ . | markdownify }}{{ end }}</span>
+    {{ with .article -}}
+    {{ . | markdownify -}}
+    {{- if substr . -1 1 | eq "'" -}}{{ else }} {{ end -}}
+    {{/* ^^^ No space only if article ends with an apostrophe */}}
+    {{- end -}}
+    <span class="ingred-name">{{ .name | markdownify }}</span>
+  </li>
+  {{ end }}
+{{ end -}}
+</ul>

scss/style.scss

@@ -89,6 +89,11 @@ body {
     font-weight: bold;
   }
 
+  h2 {
+    font-size: 1em;
+    font-weight: bold;
+  }
+
   .ingred-portions {
     text-align: right;
     font-style: italic;

static/css/style.css

@@ -66,6 +66,9 @@ body {
   #ingredients .ingred-title {
     font-size: 1.3em;
     font-weight: bold; }
+  #ingredients h2 {
+    font-size: 1em;
+    font-weight: bold; }
   #ingredients .ingred-portions {
     text-align: right;
     font-style: italic; }