~mjorgensen/jrgnsn.net

2acf31fd960d3ae0a61bbbec4374210f6c807c53 — Matthew Jorgensen 5 months ago b6ee54e
Recipe style tweaks.

- Add border to top of footnotes
- Widen page, and make "Ingredients" list look a little better.
2 files changed, 53 insertions(+), 1 deletions(-)

A _recipes/vegan_pecan_pie.md
M css/recipe.css
A _recipes/vegan_pecan_pie.md => _recipes/vegan_pecan_pie.md +41 -0
@@ 0,0 1,41 @@
---
layout: recipe
title: Vegan Pecan Pie
ingredients:
    - Pie Crust:
      - qty: 1 stick (1/2 cup)
        name: vegan buttery sticks; cold, cut into cubes
      - qty: 1 stick (1/2 cup)
        name: vegan sortening; cold, cut into cubes
      - qty: 3 cups
        name: all purpose flour (plus flour for rolling)
      - qty: 1 tsp
        name: salt
      - qty: 2 tbsp
        name: white sugar
      - qty: 10 tbsp (150mL)
        name: ice water
    - Filling:
      - qty: 1 tbsp
        name: cocounut oil
      - qty: 1/2 cup
        name: pecan halves
      - qty: 1 cup
        name: pecan pieces (or you can have all halves, toast together, and then separate to chop)
      - qty: 1/2 tsp
        name: ground cinnamon
      - qty: 1 cup
        name: white sugar
      - qty: 1/2 cup
        name: maple syrup
      - qty: 1/4 cup
        name: vegan butter
      - qty: 2 tbsp
        name: flax meal (combine with 6 tbsp water)
      - qty: 10
        name: salted top crackers, crushed
      - qty: 1 tbsp
        name: (heaping) flour
      - qty: 1-1/2 tbsp
        name: vanilla extract
---

M css/recipe.css => css/recipe.css +12 -1
@@ 1,3 1,7 @@
.container {
    max-width: 800px;
}

header {
    display: grid;
}


@@ 28,7 32,7 @@ header {

.ingredient-list {
    display: grid;
    grid-template-columns: fit-content(35%);
    grid-template-columns: fit-content(30%);
    grid-row-gap: 0.5em;
    grid-column-gap: 1em;
    padding: 0 0.5em;


@@ 58,6 62,13 @@ header {
    padding: 0.3em 0;
}

.footnotes:before {
    border-top: 1px solid black;
    width: 100%;
    display: block;
    padding: 1em 0 0 0;
}

@media (max-width: 500px) {
    .recipe-container {
        display: block;