35336a53cbd29d9ba1bc0b1581f7fa6030329f23 — Matthew Jorgensen 2 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 @@ 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;