2acf31fd960d3ae0a61bbbec4374210f6c807c53 — Matthew Jorgensen 2 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 @@   .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 @@ 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;