diff --git a/.gitignore b/.gitignore
index adbcb52..d1b328b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
+.DS_Store
*.swp
.sass-cache
diff --git a/artwork/icons.graffle/data.plist b/artwork/icons.graffle/data.plist
new file mode 100644
index 0000000..9f70fe2
--- /dev/null
+++ b/artwork/icons.graffle/data.plist
@@ -0,0 +1,1057 @@
+
+
+
Bagels
Challah
Fluffy Pancakes
Gluten-Free Flour
Pizza
Rosemary Dinner Rolls
Southern Buttermilk Biscuits
Caldo Verde
Clam Chowder
Cream of Spinach Soup
Curry Butternut Squash & Apple Soup
Hungarian Mushroom Beef Soup
Winter Lentil Soup
Caesar Salad
Cucumber Salad
Ruth's Chris Chopped Salad
BBQ Pork Ribs
Beef Bourguignon
Chicken Cordon Bleu
Chicken Pot Pie
Chicken Breasts with Caper Cream Sauce
Chole
Garlic Prime Rib
Gnocchi
Kielbasa and Cabbage
Kofta Kebabs
Lemon Chicken with Mushroom Sauce
Orange Chicken
Ratatouille
Ricotta Meatballs
Roast Leg of Lamb with Rosemary
Shrimp with Sweet Potatoes and Bacon
Sloppy Joe Sandwiches
Bok Choy with Garlic
Bourbon Glazed Carrots
Creamed Spinach
Garlic Broccoli
Hummus
Pommes Purée
Sweet Potatoes with Honey and Rosemary
Tzatziki
\ No newline at end of file
+
Bagels
Challah
Fluffy Pancakes
Gluten-Free Flour
Pizza
Rosemary Dinner Rolls
Southern Buttermilk Biscuits
Caldo Verde
Clam Chowder
Cream of Spinach Soup
Curry Butternut Squash & Apple Soup
Hungarian Mushroom Beef Soup
Winter Lentil Soup
Caesar Salad
Cucumber Salad
Ruth's Chris Chopped Salad
BBQ Pork Ribs
Beef Bourguignon
Butter Chicken
Chicken Cordon Bleu
Chicken Pot Pie
Chicken Breasts with Caper Cream Sauce
Chole
Garlic Prime Rib
Gnocchi
Kielbasa and Cabbage
Kofta Kebabs
Lemon Chicken with Mushroom Sauce
Orange Chicken
Ratatouille
Ricotta Meatballs
Roast Leg of Lamb with Rosemary
Shrimp with Sweet Potatoes and Bacon
Sloppy Joe Sandwiches
Bok Choy with Garlic
Bourbon Glazed Carrots
Creamed Spinach
Garlic Broccoli
Hummus
Pommes Purée
Sweet Potatoes with Honey and Rosemary
Tzatziki
\ No newline at end of file
diff --git a/docs/style2.css b/docs/style2.css
new file mode 100644
index 0000000..bcf124b
--- /dev/null
+++ b/docs/style2.css
@@ -0,0 +1,162 @@
+.recipe {
+ margin: 0 auto;
+ max-width: 7in; }
+ .recipe .header {
+ display: flex; }
+ .recipe .header .image {
+ background-size: cover;
+ background-position: center;
+ border: 1px solid #DDD;
+ border-radius: 0.25in;
+ display: flex;
+ flex: 0 0 2.5in;
+ text-align: center; }
+ .recipe .header .about {
+ flex: 1 1 100%;
+ margin: 0 0 0 0.125in;
+ padding: 0 0 0 0.125in; }
+ .recipe .header .about h1 {
+ font-family: sans-serif;
+ font-size: 24pt;
+ margin: 0 0 0 0;
+ text-align: center; }
+ .recipe .header .about .timing {
+ color: gray;
+ font-style: italic;
+ margin: 0 0 1em 0;
+ text-align: center; }
+ .recipe .header .about .servings {
+ margin: 0 0 0.125in 0;
+ text-align: center; }
+ .recipe .header .about .servings img {
+ height: 0.25in;
+ width: 0.25in; }
+ .recipe .header .about .servings img + img {
+ margin-left: 0.125in; }
+ .recipe .header .icons {
+ align-items: center;
+ display: flex;
+ font-family: sans-serif;
+ font-size: 0.25in;
+ justify-content: center;
+ margin: 0.25in 0 calc(0.25in + 8px) 0; }
+ .recipe .header .icons .icon {
+ background-position: center;
+ background-size: contain;
+ display: inline-block;
+ height: 0.375in;
+ margin: 0 0.5em 0 0;
+ position: relative;
+ width: 0.375in; }
+ .recipe .header .icons .icon:first-child {
+ margin-left: 0; }
+ .recipe .header .icons .icon:after {
+ font-family: sans-serif;
+ font-size: 8px;
+ position: absolute;
+ bottom: -2px;
+ left: 50%;
+ text-align: center;
+ transform: translate(-50%, 100%);
+ white-space: nowrap; }
+ .recipe .header .icons .icon.overnight {
+ background-image: url("../images/overnight.png"); }
+ .recipe .header .icons .icon.overnight:after {
+ color: #3700A3;
+ content: "overnight"; }
+ .recipe .header .icons .icon.gluten-free {
+ background-image: url("../images/gluten-free.png"); }
+ .recipe .header .icons .icon.gluten-free:after {
+ color: #ECB629;
+ content: "no gluten"; }
+ .recipe .header .icons .icon.low-carb {
+ background-image: url("../images/low-carb.png"); }
+ .recipe .header .icons .icon.low-carb:after {
+ color: #A83533;
+ content: "low carb"; }
+ .recipe .header .icons .icon.serving {
+ background-image: url("../images/serving.png"); }
+ .recipe .header .icons .icon.serving:after {
+ color: black;
+ content: "serves"; }
+ .recipe .header .icons .icon.vegetarian {
+ background-image: url("../images/vegetarian.png"); }
+ .recipe .header .icons .icon.vegetarian:after {
+ color: #0EA822;
+ content: "veggie"; }
+ .recipe .header .description {
+ font-style: italic;
+ color: gray; }
+ .recipe .instructions {
+ margin: 0.25in 0 0.25in 0; }
+ .recipe .instructions .step {
+ align-items: top;
+ display: flex;
+ overflow: visible;
+ position: relative; }
+ .recipe .instructions .step + .step {
+ margin-top: 0.25in; }
+ .recipe .instructions .step h3 {
+ flex: 0 0 0.375in;
+ font-family: sans-serif;
+ font-size: 24pt;
+ margin: 0;
+ position: relative;
+ top: -0.125em; }
+ .recipe .instructions .step .ingredients {
+ flex: 0 0 2.125in;
+ font-size: 10pt; }
+ .recipe .instructions .step .ingredients ul {
+ list-style: none;
+ margin: 0;
+ padding: 0; }
+ .recipe .instructions .step .ingredients ul li {
+ display: flex; }
+ .recipe .instructions .step .ingredients ul li:nth-child(even) {
+ background: rgba(0, 0, 0, 0.1); }
+ .recipe .instructions .step .ingredients ul li .amount {
+ flex: 0 0 25%;
+ font-family: sans-serif;
+ padding: 0 1em 0.25em 0.25em;
+ white-space: nowrap; }
+ .recipe .instructions .step .ingredients ul li .item {
+ flex: 1 1 75%;
+ font-family: sans-serif;
+ padding: 0 1em 0.25em 0; }
+ .recipe .instructions .step .detail {
+ border-left: 1px solid silver;
+ flex: 1 1 100%;
+ font-size: 12pt;
+ margin: 0 0 0 0.125in;
+ padding: 0 0 0 0.125in; }
+ .recipe .credits {
+ color: gray;
+ font-size: 10pt;
+ font-style: italic;
+ text-align: center; }
+
+@media (max-width: 5in) {
+ .recipe .header {
+ flex-direction: column;
+ align-items: center; }
+ .recipe .header .image {
+ border: 0;
+ border-radius: 0;
+ width: 100%; }
+ .recipe .header .about {
+ margin: 0.125in 0 0 0; }
+ .recipe .header .about .description {
+ width: 90%; }
+ .recipe .instructions .step {
+ align-items: center;
+ flex-direction: column; }
+ .recipe .instructions .step h3 {
+ margin: 0.25in 0 0.125in 0; }
+ .recipe .instructions .step .ingredients {
+ flex: 0 0 auto;
+ margin: 0 0 0.125in;
+ width: 90%; }
+ .recipe .instructions .step .detail {
+ border: 0; } }
+
+/*# sourceMappingURL=style2.css.map */
diff --git a/docs/style2.css.map b/docs/style2.css.map
new file mode 100644
index 0000000..0ed0a23
--- /dev/null
+++ b/docs/style2.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["../src/style2.scss"],
+"names": [],
+"file": "style2.css"
+}
diff --git a/src/butter-chicken/index.pug b/src/butter-chicken/index.pug
new file mode 100644
index 0000000..2fefc0f
--- /dev/null
+++ b/src/butter-chicken/index.pug
@@ -0,0 +1,140 @@
+doctype html
+html
+ head
+ link(href="../style2.css" rel="stylesheet" type="text/css")
+ meta(charset="UTF-8")
+ meta(name="viewport" content="user-scalable=no, width=device-width")
+
+ body.recipe
+ section.header
+ .image(style="background-image: url('./large.png')")
+
+ .about
+ h1 Butter Chicken
+
+ .timing prep 35 min, cook 30 min
+
+ .icons
+ .icon.overnight
+ .icon.gluten-free
+ .icon.low-carb
+ .icon.serving
+ | × 6
+
+ .description.
+ This is a fairly simple Indian dish which turns out a large amount of amazingly spiced chicken with
+ fairly little effort. Our first time, we doubled the recipe and used pre-cut chunks of chicken, but
+ it tasty both the day of and for several days afterward.
+
+ section.instructions
+ .step
+ h3 1
+ .ingredients
+ ul
+ li
+ .amount 1½ cups
+ .item greek yogurt (full-fat)
+ li
+ .amount 2 tbsp
+ .item lemon juice
+ li
+ .amount 1½ tbsp
+ .item tumeric (ground)
+ li
+ .amount 2 tbsp
+ .item garam masala
+ li
+ .amount 2 tbsp
+ .item cumin (ground)
+ li
+ .amount 3 lbs
+ .item chicken thighs, on the bone
+ .detail.
+ Whisk together the yogurt, lemon juice, tumeric, garam masala, and cumin in a large bowl. Add the
+ chicken and coat throughly with the marinade. Cover and place in the refrigerator overnight.
+
+ .step
+ h3 2
+ .ingredients
+ ul
+ li
+ .amount ¼ lb
+ .item butter (unsalted)
+ li
+ .amount 4 tsp
+ .item vegetable oil
+ li
+ .amount 2
+ .item onions (yellow, diced)
+ li
+ .amount 4 cloves
+ .item garlic (minced)
+ li
+ .amount 3 tbsp
+ .item ginger (peeled, grated)
+ li
+ .amount 1 tbsp
+ .item cumin seeds
+ .detail.
+ In a large pan over medium heat, melt the butter until it starts to foam. Add the onions and cook
+ until translucent. Add garlic, ginger, and cumin seeds. Continue to cook until the onions start to
+ brown.
+
+ .step
+ h3 3
+ .ingredients
+ ul
+ li
+ .amount 1
+ .item cinnamon stick
+ li
+ .amount 2
+ .item tomatoes (diced)
+ li
+ .amount 2
+ .item red chilies (e.g., jalapeño)
+ li
+ .amount ~
+ .item kosher salt
+ .detail.
+ Add the cinnamon stick, tomatoes, chiles, and salt. Cook until the chilis are soft.
+
+ .step
+ h3 4
+ .ingredients
+ ul
+ li
+ .amount ⅔ cups
+ .item chicken stock
+ .detail.
+ Add the chicken and marinade to the pan, and cook until heated through. Add the chicken stock, and
+ bring to a boil. Reduce the heat and simmer, uncovered, for 30 minutes.
+
+ .step
+ h3 5
+ .ingredients
+ ul
+ li
+ .amount 1½ cups
+ .item cream
+ li
+ .amount 1½ tsp
+ .item tomato paste
+ .detail.
+ Stir in the cream and tomato paste. Simmer until completely mixed and heated through.
+
+ .step
+ h3 6
+ .ingredients
+ ul
+ li
+ .amount 3 tbsp
+ .item almonds (slivered)
+ li
+ .amount ½ cup
+ .item cilantro (minced)
+ .detail.
+ Add the almonds and cook until softened. Add the cilantro as a garnish and serve.
+
+ section.credits.
+ Sam Sifton, NYTimes Cooking Section, https://cooking.nytimes.com/recipes/1016754-butter-chicken
diff --git a/src/butter-chicken/large.png b/src/butter-chicken/large.png
new file mode 100644
index 0000000..dedb75b
Binary files /dev/null and b/src/butter-chicken/large.png differ
diff --git a/src/images/gluten-free.png b/src/images/gluten-free.png
new file mode 100644
index 0000000..c739c73
Binary files /dev/null and b/src/images/gluten-free.png differ
diff --git a/src/images/low-carb.png b/src/images/low-carb.png
new file mode 100644
index 0000000..2e51934
Binary files /dev/null and b/src/images/low-carb.png differ
diff --git a/src/images/overnight.png b/src/images/overnight.png
new file mode 100644
index 0000000..48d0a60
Binary files /dev/null and b/src/images/overnight.png differ
diff --git a/src/images/serving.png b/src/images/serving.png
new file mode 100644
index 0000000..bb1d29f
Binary files /dev/null and b/src/images/serving.png differ
diff --git a/src/images/vegetarian.png b/src/images/vegetarian.png
new file mode 100644
index 0000000..ee9ee1c
Binary files /dev/null and b/src/images/vegetarian.png differ
diff --git a/src/index.pug b/src/index.pug
index 4f7d069..f0627cc 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -85,6 +85,10 @@ html
img(src="beef-bourguignon/final.png")
| Beef Bourguignon
+ a(href="butter-chicken")
+ img(src="butter-chicken/large.png")
+ | Butter Chicken
+
a(href="chicken-cordon-bleu")
img(src="chicken-cordon-bleu/final.png")
| Chicken Cordon Bleu
diff --git a/src/style2.scss b/src/style2.scss
new file mode 100644
index 0000000..c1d41fd
--- /dev/null
+++ b/src/style2.scss
@@ -0,0 +1,235 @@
+.recipe {
+ margin: 0 auto;
+ max-width: 7in;
+
+ .header {
+ display: flex;
+
+ .image {
+ background-size: cover;
+ background-position: center;
+ border: 1px solid #DDD;
+ border-radius: 0.25in;
+ display: flex;
+ flex: 0 0 2.5in;
+ text-align: center;
+ }
+
+ .about {
+ flex: 1 1 100%;
+ margin: 0 0 0 0.125in;
+ padding: 0 0 0 0.125in;
+
+ h1 {
+ font-family: sans-serif;
+ font-size: 24pt;
+ margin: 0 0 0 0;
+ text-align: center;
+ }
+
+ .timing {
+ color: gray;
+ font-style: italic;
+ margin: 0 0 1em 0;
+ text-align: center;
+ }
+
+ .servings {
+ margin: 0 0 0.125in 0;
+ text-align: center;
+
+ img {
+ height: 0.25in;
+ width: 0.25in;
+ }
+
+ img + img {
+ margin-left: 0.125in;
+ }
+ }
+ }
+
+ .icons {
+ align-items: center;
+ display: flex;
+ font-family: sans-serif;
+ font-size: 0.25in;
+ justify-content: center;
+ margin: 0.25in 0 calc(0.25in + 8px) 0;
+
+ .icon {
+ background-position: center;
+ background-size: contain;
+ display: inline-block;
+ height: 0.375in;
+ margin: 0 0.5em 0 0;
+ position: relative;
+ width: 0.375in;
+
+ &:first-child {
+ margin-left: 0;
+ }
+ &:after {
+ font-family: sans-serif;
+ font-size: 8px;
+ position: absolute;
+ bottom: -2px;
+ left: 50%;
+ text-align: center;
+ transform: translate(-50%, 100%);
+ white-space: nowrap;
+ }
+ &.overnight {
+ background-image: url("../images/overnight.png");
+ &:after {
+ color: #3700A3;
+ content: "overnight";
+ }
+ }
+ &.gluten-free {
+ background-image: url("../images/gluten-free.png");
+ &:after {
+ color: #ECB629;
+ content: "no gluten";
+ }
+ }
+ &.low-carb {
+ background-image: url("../images/low-carb.png");
+ &:after {
+ color: #A83533;
+ content: "low carb";
+ }
+ }
+ &.serving {
+ background-image: url("../images/serving.png");
+ &:after {
+ color: black;
+ content: "serves";
+ }
+ }
+ &.vegetarian {
+ background-image: url("../images/vegetarian.png");
+ &:after {
+ color: #0EA822;
+ content: "veggie";
+ }
+ }
+ }
+ }
+
+ .description {
+ font-style: italic;
+ color: gray;
+ }
+ }
+
+ .instructions {
+ margin: 0.25in 0 0.25in 0;
+
+ .step {
+ align-items: top;
+ display: flex;
+ overflow: visible;
+ position: relative;
+
+ & + .step {
+ margin-top: 0.25in;
+ }
+
+ h3 {
+ flex: 0 0 0.375in;
+ font-family: sans-serif;
+ font-size: 24pt;
+ margin: 0;
+ position: relative;
+ top: -0.125em;
+ }
+ .ingredients {
+ flex: 0 0 2.125in;
+ font-size: 10pt;
+
+ ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ li {
+ display: flex;
+
+ &:nth-child(even) {
+ background: rgba(0, 0, 0, 0.1);
+ }
+
+ .amount {
+ flex: 0 0 25%;
+ font-family: sans-serif;
+ padding: 0 1em 0.25em 0.25em;
+ white-space: nowrap;
+ }
+ .item {
+ flex: 1 1 75%;
+ font-family: sans-serif;
+ padding: 0 1em 0.25em 0;
+ }
+ }
+ }
+ }
+
+ .detail {
+ border-left: 1px solid silver;
+ flex: 1 1 100%;
+ font-size: 12pt;
+ margin: 0 0 0 0.125in;
+ padding: 0 0 0 0.125in;
+ }
+ }
+ }
+
+ .credits {
+ color: gray;
+ font-size: 10pt;
+ font-style: italic;
+ text-align: center;
+ }
+}
+
+@media (max-width: 5in) {
+ .recipe {
+ .header {
+ flex-direction: column;
+ align-items: center;
+
+ .image {
+ border: 0;
+ border-radius: 0;
+ width: 100%;
+ }
+
+ .about {
+ margin: 0.125in 0 0 0;
+
+ .description {
+ width: 90%;
+ }
+ }
+ }
+ .instructions {
+ .step {
+ align-items: center;
+ flex-direction: column;
+
+ h3 {
+ margin: 0.25in 0 0.125in 0;
+ }
+ .ingredients {
+ flex: 0 0 auto;
+ margin: 0 0 0.125in;
+ width: 90%;
+ }
+ .detail {
+ border: 0;
+ }
+ }
+ }
+ }
+}