~mjorgensen/jrgnsn.net

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