diff --git a/docs/index.html b/docs/index.html index 549391e..b606172 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1 @@ -

Baking

BagelsChallahFluffy PancakesGluten-Free FlourPizzaRosemary Dinner RollsSouthern Buttermilk Biscuits

Soups

Caldo VerdeClam ChowderCream of Spinach SoupCurry Butternut Squash & Apple SoupFrench Onion SoupHungarian Mushroom Beef SoupSpicy Lamb SoupWinter Lentil Soup

Salads

Caesar SaladCucumber SaladRuth's Chris Chopped Salad

Main Dish

BBQ Pork RibsBeef BourguignonButter ChickenChicken Cordon BleuChicken Pot PieChicken Breasts with Caper Cream SauceChiliCholeEgg & Onion PieGarlic Prime RibGnocchiKielbasa and CabbageKofta KebabsLemon Chicken with Mushroom SauceOrange ChickenRatatouilleRicotta MeatballsRoast Leg of Lamb with RosemaryShrimp with Sweet Potatoes and BaconSloppy Joe SandwichesStuffed Green Peppers

Sides

Bok Choy with GarlicBourbon Glazed CarrotsCreamed SpinachGarlic BroccoliHummusPommes PuréeSauteed MushroomsSweet Potatoes with Honey and RosemaryTzatziki \ No newline at end of file +

Baking

Bagels

Challah

Fluffy Pancakes

Gluten-Free Flour

Pizza

Rosemary Dinner Rolls

Southern Buttermilk Biscuits

Soups

Caldo Verde

Clam Chowder

Cream of Spinach Soup

Curry Butternut Squash & Apple Soup

French Onion Soup

Hungarian Mushroom Beef Soup

Spicy Lamb Soup

Winter Lentil Soup

Salads

Caesar Salad

Cucumber Salad

Ruth's Chris Chopped Salad

Entrées

BBQ Pork Ribs

Beef Bourguignon

Butter Chicken

Chicken Cordon Bleu

Chicken Pot Pie

Chicken Breasts with Caper Cream Sauce

Chili

Chole

Egg & Onion Pie

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

Stuffed Green Peppers

Sides

Bok Choy with Garlic

Bourbon Glazed Carrots

Creamed Spinach

Garlic Broccoli

Hummus

Pommes Purée

Sauteed Mushrooms

Sweet Potatoes with Honey and Rosemary

Tzatziki

\ No newline at end of file diff --git a/docs/style.css b/docs/style.css index ab871b4..a98c320 100644 --- a/docs/style.css +++ b/docs/style.css @@ -1,33 +1,44 @@ -.cookbook { - column-count: 2; - column-gap: 0.25in; } - .cookbook h1 { - font-family: sans-serif; - font-size: 24pt; - font-weight: bold; } - .cookbook a { +.cookbook section h1 { + font-family: sans-serif; + font-size: 24pt; + font-weight: bold; } +.cookbook section .list { + display: flex; + justify-content: flex-start; + flex-direction: row; + flex-wrap: wrap; } + .cookbook section .list a { + flex: 0 1 4in; border-radius: 0.0625in; break-inside: avoid; color: black; - font-family: serif; - font-size: 18pt; + overflow: hidden; text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; display: flex; align-items: center; padding: 0.0625in; padding-right: 0.125in; transition: all 0.25s; } - .cookbook a:visited { + .cookbook section .list a:visited { color: black; } - .cookbook a:hover { + .cookbook section .list a:hover { background: #23B7F2; color: white; } - .cookbook a img { + .cookbook section .list a img { border: 0.01in solid silver; border-radius: 0.0625in; margin-right: 0.125in; height: 0.5in; width: 0.5in; } + .cookbook section .list a p { + font-family: serif; + font-size: 18pt; + margin: 0; + padding: 0; + overflow: hidden; + text-overflow: ellipsis; } .recipe { margin: 0 auto; @@ -98,10 +109,7 @@ .recipe .attribution p a { color: gray; } -@media (max-width: 500px) { - .cookbook { - column-count: 1; } - +@media (max-width: 600px) { .recipe { padding: 0 0.125in; } .recipe h1 { diff --git a/src/index.pug b/src/index.pug index e42459e..cb70727 100644 --- a/src/index.pug +++ b/src/index.pug @@ -3,206 +3,217 @@ html head link(rel="stylesheet" type="text/css" href="style.css") meta(name="viewport" content="user-scalable=no, width=device-width") + meta(charset="utf-8") body.cookbook - h1 Baking + section + h1 Baking - a(href="bagels") - img(src="bagels/large.png") - | Bagels + .list + a(href="bagels") + img(src="bagels/large.png") + p Bagels - a(href="challah") - img(src="challah/large.png") - | Challah + a(href="challah") + img(src="challah/large.png") + p Challah - a(href="fluffy-pancakes") - img(src="fluffy-pancakes/large.png") - | Fluffy Pancakes + a(href="fluffy-pancakes") + img(src="fluffy-pancakes/large.png") + p Fluffy Pancakes - a(href="gluten-free-flour") - img(src="gluten-free-flour/large.png") - | Gluten-Free Flour + a(href="gluten-free-flour") + img(src="gluten-free-flour/large.png") + p Gluten-Free Flour - a(href="pizza") - img(src="pizza/large.png") - | Pizza + a(href="pizza") + img(src="pizza/large.png") + p Pizza - a(href="rosemary-dinner-rolls") - img(src="rosemary-dinner-rolls/large.png") - | Rosemary Dinner Rolls + a(href="rosemary-dinner-rolls") + img(src="rosemary-dinner-rolls/large.png") + p Rosemary Dinner Rolls - a(href="southern-buttermilk-biscuits") - img(src="southern-buttermilk-biscuits/large.png") - | Southern Buttermilk Biscuits + a(href="southern-buttermilk-biscuits") + img(src="southern-buttermilk-biscuits/large.png") + p Southern Buttermilk Biscuits - h1 Soups + section + h1 Soups - a(href="caldo-verde") - img(src="caldo-verde/large.png") - | Caldo Verde + .list + a(href="caldo-verde") + img(src="caldo-verde/large.png") + p Caldo Verde - a(href="clam-chowder") - img(src="clam-chowder/large.png") - | Clam Chowder + a(href="clam-chowder") + img(src="clam-chowder/large.png") + p Clam Chowder - a(href="cream-of-spinach-soup") - img(src="cream-of-spinach-soup/large.png") - | Cream of Spinach Soup + a(href="cream-of-spinach-soup") + img(src="cream-of-spinach-soup/large.png") + p Cream of Spinach Soup - a(href="curry-butternut-squash-and-apple-soup") - img(src="curry-butternut-squash-and-apple-soup/large.png") - | Curry Butternut Squash & Apple Soup + a(href="curry-butternut-squash-and-apple-soup") + img(src="curry-butternut-squash-and-apple-soup/large.png") + p Curry Butternut Squash & Apple Soup - a(href="french-onion-soup") - img(src="french-onion-soup/large.png") - | French Onion Soup + a(href="french-onion-soup") + img(src="french-onion-soup/large.png") + p French Onion Soup - a(href="hungarian-mushroom-beef-soup") - img(src="hungarian-mushroom-beef-soup/large.png") - | Hungarian Mushroom Beef Soup + a(href="hungarian-mushroom-beef-soup") + img(src="hungarian-mushroom-beef-soup/large.png") + p Hungarian Mushroom Beef Soup - a(href="spicy-lamb-soup") - img(src="spicy-lamb-soup/large.png") - | Spicy Lamb Soup + a(href="spicy-lamb-soup") + img(src="spicy-lamb-soup/large.png") + p Spicy Lamb Soup - a(href="winter-lentil-soup") - img(src="winter-lentil-soup/large.png") - | Winter Lentil Soup + a(href="winter-lentil-soup") + img(src="winter-lentil-soup/large.png") + p Winter Lentil Soup - h1 Salads + section + h1 Salads - a(href="caesar-salad") - img(src="caesar-salad/large.png") - | Caesar Salad + .list + a(href="caesar-salad") + img(src="caesar-salad/large.png") + p Caesar Salad - a(href="cucumber-salad") - img(src="cucumber-salad/large.png") - | Cucumber Salad + a(href="cucumber-salad") + img(src="cucumber-salad/large.png") + p Cucumber Salad - a(href="ruths-chris-chopped-salad") - img(src="ruths-chris-chopped-salad/large.png") - | Ruth's Chris Chopped Salad + a(href="ruths-chris-chopped-salad") + img(src="ruths-chris-chopped-salad/large.png") + p Ruth's Chris Chopped Salad - h1 Main Dish + section + h1 Entrées - a(href="bbq-pork-ribs") - img(src="bbq-pork-ribs/large.png") - | BBQ Pork Ribs + .list + a(href="bbq-pork-ribs") + img(src="bbq-pork-ribs/large.png") + p BBQ Pork Ribs - a(href="beef-bourguignon") - img(src="beef-bourguignon/large.png") - | Beef Bourguignon + a(href="beef-bourguignon") + img(src="beef-bourguignon/large.png") + p Beef Bourguignon - a(href="butter-chicken") - img(src="butter-chicken/large.png") - | Butter Chicken + a(href="butter-chicken") + img(src="butter-chicken/large.png") + p Butter Chicken - a(href="chicken-cordon-bleu") - img(src="chicken-cordon-bleu/large.png") - | Chicken Cordon Bleu + a(href="chicken-cordon-bleu") + img(src="chicken-cordon-bleu/large.png") + p Chicken Cordon Bleu - a(href="chicken-pot-pie") - img(src="chicken-pot-pie/large.png") - | Chicken Pot Pie + a(href="chicken-pot-pie") + img(src="chicken-pot-pie/large.png") + p Chicken Pot Pie - a(href="chicken-breasts-with-caper-cream-sauce") - img(src="chicken-breasts-with-caper-cream-sauce/large.png") - | Chicken Breasts with Caper Cream Sauce + a(href="chicken-breasts-with-caper-cream-sauce") + img(src="chicken-breasts-with-caper-cream-sauce/large.png") + p Chicken Breasts with Caper Cream Sauce - a(href="chili") - img(src="chili/large.png") - | Chili + a(href="chili") + img(src="chili/large.png") + p Chili - a(href="chole") - img(src="chole/large.png") - | Chole + a(href="chole") + img(src="chole/large.png") + p Chole - a(href="egg-and-onion-pie") - img(src="egg-and-onion-pie/large.png") - | Egg & Onion Pie + a(href="egg-and-onion-pie") + img(src="egg-and-onion-pie/large.png") + p Egg & Onion Pie - a(href="garlic-prime-rib") - img(src="garlic-prime-rib/large.png") - | Garlic Prime Rib + a(href="garlic-prime-rib") + img(src="garlic-prime-rib/large.png") + p Garlic Prime Rib - a(href="gnocchi") - img(src="gnocchi/large.png") - | Gnocchi + a(href="gnocchi") + img(src="gnocchi/large.png") + p Gnocchi - a(href="kielbasa-and-cabbage") - img(src="kielbasa-and-cabbage/large.png") - | Kielbasa and Cabbage + a(href="kielbasa-and-cabbage") + img(src="kielbasa-and-cabbage/large.png") + p Kielbasa and Cabbage - a(href="kofta-kebabs") - img(src="kofta-kebabs/large.png") - | Kofta Kebabs + a(href="kofta-kebabs") + img(src="kofta-kebabs/large.png") + p Kofta Kebabs - a(href="lemon-chicken-with-mushroom-sauce") - img(src="lemon-chicken-with-mushroom-sauce/large.png") - | Lemon Chicken with Mushroom Sauce + a(href="lemon-chicken-with-mushroom-sauce") + img(src="lemon-chicken-with-mushroom-sauce/large.png") + p Lemon Chicken with Mushroom Sauce - a(href="orange-chicken") - img(src="orange-chicken/large.png") - | Orange Chicken + a(href="orange-chicken") + img(src="orange-chicken/large.png") + p Orange Chicken - a(href="ratatouille") - img(src="ratatouille/large.png") - | Ratatouille + a(href="ratatouille") + img(src="ratatouille/large.png") + p Ratatouille - a(href="ricotta-meatballs") - img(src="ricotta-meatballs/large.png") - | Ricotta Meatballs + a(href="ricotta-meatballs") + img(src="ricotta-meatballs/large.png") + p Ricotta Meatballs - a(href="roast-leg-of-lamb-with-rosemary") - img(src="roast-leg-of-lamb-with-rosemary/large.png") - | Roast Leg of Lamb with Rosemary + a(href="roast-leg-of-lamb-with-rosemary") + img(src="roast-leg-of-lamb-with-rosemary/large.png") + p Roast Leg of Lamb with Rosemary - a(href="shrimp-with-sweet-potatoes-and-bacon") - img(src="shrimp-with-sweet-potatoes-and-bacon/large.png") - | Shrimp with Sweet Potatoes and Bacon + a(href="shrimp-with-sweet-potatoes-and-bacon") + img(src="shrimp-with-sweet-potatoes-and-bacon/large.png") + p Shrimp with Sweet Potatoes and Bacon - a(href="sloppy-joe-sandwiches") - img(src="sloppy-joe-sandwiches/large.png") - | Sloppy Joe Sandwiches + a(href="sloppy-joe-sandwiches") + img(src="sloppy-joe-sandwiches/large.png") + p Sloppy Joe Sandwiches - a(href="stuffed-green-peppers") - img(src="stuffed-green-peppers/large.png") - | Stuffed Green Peppers + a(href="stuffed-green-peppers") + img(src="stuffed-green-peppers/large.png") + p Stuffed Green Peppers - h1 Sides + section + h1 Sides - a(href="bok-choy-with-garlic") - img(src="bok-choy-with-garlic/large.png") - | Bok Choy with Garlic + .list + a(href="bok-choy-with-garlic") + img(src="bok-choy-with-garlic/large.png") + p Bok Choy with Garlic - a(href="bourbon-glazed-carrots") - img(src="bourbon-glazed-carrots/large.png") - | Bourbon Glazed Carrots + a(href="bourbon-glazed-carrots") + img(src="bourbon-glazed-carrots/large.png") + p Bourbon Glazed Carrots - a(href="creamed-spinach") - img(src="creamed-spinach/large.png") - | Creamed Spinach + a(href="creamed-spinach") + img(src="creamed-spinach/large.png") + p Creamed Spinach - a(href="garlic-broccoli") - img(src="garlic-broccoli/large.png") - | Garlic Broccoli + a(href="garlic-broccoli") + img(src="garlic-broccoli/large.png") + p Garlic Broccoli - a(href="hummus") - img(src="hummus/large.png") - | Hummus + a(href="hummus") + img(src="hummus/large.png") + p Hummus - a(href="pommes-puree") - img(src="pommes-puree/large.png") - | Pommes Purée + a(href="pommes-puree") + img(src="pommes-puree/large.png") + p Pommes Purée - a(href="sauteed-mushrooms") - img(src="sauteed-mushrooms/large.png") - | Sauteed Mushrooms + a(href="sauteed-mushrooms") + img(src="sauteed-mushrooms/large.png") + p Sauteed Mushrooms - a(href="sweet-potatoes-with-honey-and-rosemary") - img(src="sweet-potatoes-with-honey-and-rosemary/large.png") - | Sweet Potatoes with Honey and Rosemary + a(href="sweet-potatoes-with-honey-and-rosemary") + img(src="sweet-potatoes-with-honey-and-rosemary/large.png") + p Sweet Potatoes with Honey and Rosemary - a(href="tzatziki") - img(src="tzatziki/large.png") - | Tzatziki + a(href="tzatziki") + img(src="tzatziki/large.png") + p Tzatziki diff --git a/src/style.scss b/src/style.scss index 20869c3..b0fdf80 100644 --- a/src/style.scss +++ b/src/style.scss @@ -1,43 +1,61 @@ .cookbook { - column-count: 2; - column-gap: 0.25in; - - h1 { - font-family: sans-serif; - font-size: 24pt; - font-weight: bold; - } - - a { - border-radius: 0.0625in; - break-inside: avoid; - color: black; - font-family: serif; - font-size: 18pt; - text-decoration: none; + section { + h1 { + font-family: sans-serif; + font-size: 24pt; + font-weight: bold; + } - display: flex; - align-items: center; - padding: 0.0625in; - padding-right: 0.125in; - - transition: all 0.25s; - - &:visited { - color: black; - } - - &:hover { - background: #23B7F2; - color: white; - } - - img { - border: 0.01in solid silver; - border-radius: 0.0625in; - margin-right: 0.125in; - height: 0.5in; - width: 0.5in; + .list { + display: flex; + justify-content: flex-start; + flex-direction: row; + flex-wrap: wrap; + + a { + flex: 0 1 4in; + + border-radius: 0.0625in; + break-inside: avoid; + color: black; + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + + display: flex; + align-items: center; + padding: 0.0625in; + padding-right: 0.125in; + + transition: all 0.25s; + + &:visited { + color: black; + } + + &:hover { + background: #23B7F2; + color: white; + } + + img { + border: 0.01in solid silver; + border-radius: 0.0625in; + margin-right: 0.125in; + height: 0.5in; + width: 0.5in; + } + + p { + font-family: serif; + font-size: 18pt; + margin: 0; + padding: 0; + overflow: hidden; + text-overflow: ellipsis; + } + } } } } @@ -45,28 +63,28 @@ .recipe { margin: 0 auto; max-width: 7in; - + display: flex; flex-direction: column; - + h1 { margin-top: 0; margin-bottom: 0.25in; - + font-family: serif; font-size: 24pt; } - + h2 { font-size: 12pt; margin: 0; margin-bottom: 0.125in; text-transform: uppercase; } - + .ingredients { display: flex; - + .image { img { border-radius: 0.25in; @@ -75,16 +93,16 @@ max-height: 3in; } } - + .list { margin-left: 0.25in; - + table { margin-bottom: 0.25in; - + tr { vertical-align: top; - + td:nth-child(1) { font-family: sans-serif; font-size: 12pt; @@ -92,7 +110,7 @@ text-align: right; white-space: nowrap; } - + td:nth-child(2) { font-family: sans-serif; font-size: 12pt; @@ -101,56 +119,56 @@ } } } - + .directions { margin-top: 0.25in; - + tr { vertical-align: top; - + td { padding-bottom: 0.1875in; } } - + td:nth-child(1) { padding-right: 0.25in; - + font-family: sans-serif; font-size: 18pt; font-weight: bold; - + &:after { content: "."; } } - + td:nth-child(2) { width: 100%; - + font-family: serif; font-size: 14pt; } - + td:nth-child(3) { padding-left: 0.25in; - + font-family: sans-serif; font-size: 9pt; white-space: nowrap; } } - + .attribution { margin: 0 0.25in; - + color: gray; font-family: sans-serif; font-size: 10pt; - + p { margin: 0; - + a { color: gray; } @@ -158,24 +176,22 @@ } } -@media (max-width: 500px) { - .cookbook { - column-count: 1; - } + +@media (max-width: 600px) { .recipe { padding: 0 0.125in; - + h1 { text-align: center; } - + .ingredients { flex-direction: column; align-items: center; - + .list { margin-top: 0.25in; } } } -} \ No newline at end of file +}