Update index page to flow more smoothly
This commit is contained in:
Andrew Miner
+160
-149
@@ -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
|
||||
|
||||
+87
-71
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user