35336a53cbd29d9ba1bc0b1581f7fa6030329f23 — Matthew Jorgensen 3 months ago 1a10ef7
Implement "sectioned" ingredient lists!
2 files changed, 27 insertions(+), 8 deletions(-)

M _layouts/recipe.html
M css/recipe.css
M _layouts/recipe.html => _layouts/recipe.html +15 -6
@@ 34,17 34,26 @@
 
         <div class="recipe-container">
             <div class="ingredients">
-                <h3>Ingredients</h3>
-                <div class="ingredient-list">
-                    {% for ingredient in page.ingredients %}
-                    <span class="qty">{{ ingredient.qty }}</span>
-                    <span class="name">{{ ingredient.name }}</span>
+                <h2>Ingredients</h2>
+                    <div class="ingredient-list"> 
+                    {% for keys in page.ingredients %}
+                        {% for key in keys %}
+                        {% if page.ingredients.size > 1 %}
+                        <h3>{{ key.first }}</h3>
+                        {% endif %}
+                            {% for ing in key %}
+                            {% for in in ing %}
+                                <span class="qty">{{in.qty }}</span>
+                                <span class="name">{{in.name}}</span>
+                            {% endfor %}
+                            {% endfor %}
+                        {% endfor %}
                     {% endfor %}
                 </div>
             </div>
 
             <div class="directions">
-                <h3>Instructions</h3>
+                <h2>Instructions</h2>
                 {{ content }}
             </div>
         </div>

M css/recipe.css => css/recipe.css +12 -2
@@ 22,14 22,24 @@ header {
     grid-column-end: 1;
 }
 
+.ingredients h2 {
+    margin-bottom: 0;
+}
+
 .ingredient-list {
     display: grid;
-    grid-template-columns: max-content;
-    grid-row-gap: 0.3em;
+    grid-template-columns: fit-content(35%);
+    grid-row-gap: 0.5em;
     grid-column-gap: 1em;
     padding: 0 0.5em;
 }
 
+.ingredient-list h3 {
+    grid-column-start: 1;
+    grid-column-end: 3;
+    margin-bottom: 0;
+}
+
 
 .ingredient-list .qty {
     grid-column-start: 1;