Update index page to flow more smoothly
This commit is contained in:
Andrew Miner
+1
-1
File diff suppressed because one or more lines are too long
+25
-17
@@ -1,33 +1,44 @@
|
|||||||
.cookbook {
|
.cookbook section h1 {
|
||||||
column-count: 2;
|
font-family: sans-serif;
|
||||||
column-gap: 0.25in; }
|
font-size: 24pt;
|
||||||
.cookbook h1 {
|
font-weight: bold; }
|
||||||
font-family: sans-serif;
|
.cookbook section .list {
|
||||||
font-size: 24pt;
|
display: flex;
|
||||||
font-weight: bold; }
|
justify-content: flex-start;
|
||||||
.cookbook a {
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap; }
|
||||||
|
.cookbook section .list a {
|
||||||
|
flex: 0 1 4in;
|
||||||
border-radius: 0.0625in;
|
border-radius: 0.0625in;
|
||||||
break-inside: avoid;
|
break-inside: avoid;
|
||||||
color: black;
|
color: black;
|
||||||
font-family: serif;
|
overflow: hidden;
|
||||||
font-size: 18pt;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0.0625in;
|
padding: 0.0625in;
|
||||||
padding-right: 0.125in;
|
padding-right: 0.125in;
|
||||||
transition: all 0.25s; }
|
transition: all 0.25s; }
|
||||||
.cookbook a:visited {
|
.cookbook section .list a:visited {
|
||||||
color: black; }
|
color: black; }
|
||||||
.cookbook a:hover {
|
.cookbook section .list a:hover {
|
||||||
background: #23B7F2;
|
background: #23B7F2;
|
||||||
color: white; }
|
color: white; }
|
||||||
.cookbook a img {
|
.cookbook section .list a img {
|
||||||
border: 0.01in solid silver;
|
border: 0.01in solid silver;
|
||||||
border-radius: 0.0625in;
|
border-radius: 0.0625in;
|
||||||
margin-right: 0.125in;
|
margin-right: 0.125in;
|
||||||
height: 0.5in;
|
height: 0.5in;
|
||||||
width: 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 {
|
.recipe {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@@ -98,10 +109,7 @@
|
|||||||
.recipe .attribution p a {
|
.recipe .attribution p a {
|
||||||
color: gray; }
|
color: gray; }
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
@media (max-width: 600px) {
|
||||||
.cookbook {
|
|
||||||
column-count: 1; }
|
|
||||||
|
|
||||||
.recipe {
|
.recipe {
|
||||||
padding: 0 0.125in; }
|
padding: 0 0.125in; }
|
||||||
.recipe h1 {
|
.recipe h1 {
|
||||||
|
|||||||
+160
-149
@@ -3,206 +3,217 @@ html
|
|||||||
head
|
head
|
||||||
link(rel="stylesheet" type="text/css" href="style.css")
|
link(rel="stylesheet" type="text/css" href="style.css")
|
||||||
meta(name="viewport" content="user-scalable=no, width=device-width")
|
meta(name="viewport" content="user-scalable=no, width=device-width")
|
||||||
|
meta(charset="utf-8")
|
||||||
|
|
||||||
body.cookbook
|
body.cookbook
|
||||||
h1 Baking
|
section
|
||||||
|
h1 Baking
|
||||||
|
|
||||||
a(href="bagels")
|
.list
|
||||||
img(src="bagels/large.png")
|
a(href="bagels")
|
||||||
| Bagels
|
img(src="bagels/large.png")
|
||||||
|
p Bagels
|
||||||
|
|
||||||
a(href="challah")
|
a(href="challah")
|
||||||
img(src="challah/large.png")
|
img(src="challah/large.png")
|
||||||
| Challah
|
p Challah
|
||||||
|
|
||||||
a(href="fluffy-pancakes")
|
a(href="fluffy-pancakes")
|
||||||
img(src="fluffy-pancakes/large.png")
|
img(src="fluffy-pancakes/large.png")
|
||||||
| Fluffy Pancakes
|
p Fluffy Pancakes
|
||||||
|
|
||||||
a(href="gluten-free-flour")
|
a(href="gluten-free-flour")
|
||||||
img(src="gluten-free-flour/large.png")
|
img(src="gluten-free-flour/large.png")
|
||||||
| Gluten-Free Flour
|
p Gluten-Free Flour
|
||||||
|
|
||||||
a(href="pizza")
|
a(href="pizza")
|
||||||
img(src="pizza/large.png")
|
img(src="pizza/large.png")
|
||||||
| Pizza
|
p Pizza
|
||||||
|
|
||||||
a(href="rosemary-dinner-rolls")
|
a(href="rosemary-dinner-rolls")
|
||||||
img(src="rosemary-dinner-rolls/large.png")
|
img(src="rosemary-dinner-rolls/large.png")
|
||||||
| Rosemary Dinner Rolls
|
p Rosemary Dinner Rolls
|
||||||
|
|
||||||
a(href="southern-buttermilk-biscuits")
|
a(href="southern-buttermilk-biscuits")
|
||||||
img(src="southern-buttermilk-biscuits/large.png")
|
img(src="southern-buttermilk-biscuits/large.png")
|
||||||
| Southern Buttermilk Biscuits
|
p Southern Buttermilk Biscuits
|
||||||
|
|
||||||
h1 Soups
|
section
|
||||||
|
h1 Soups
|
||||||
|
|
||||||
a(href="caldo-verde")
|
.list
|
||||||
img(src="caldo-verde/large.png")
|
a(href="caldo-verde")
|
||||||
| Caldo Verde
|
img(src="caldo-verde/large.png")
|
||||||
|
p Caldo Verde
|
||||||
|
|
||||||
a(href="clam-chowder")
|
a(href="clam-chowder")
|
||||||
img(src="clam-chowder/large.png")
|
img(src="clam-chowder/large.png")
|
||||||
| Clam Chowder
|
p Clam Chowder
|
||||||
|
|
||||||
a(href="cream-of-spinach-soup")
|
a(href="cream-of-spinach-soup")
|
||||||
img(src="cream-of-spinach-soup/large.png")
|
img(src="cream-of-spinach-soup/large.png")
|
||||||
| Cream of Spinach Soup
|
p Cream of Spinach Soup
|
||||||
|
|
||||||
a(href="curry-butternut-squash-and-apple-soup")
|
a(href="curry-butternut-squash-and-apple-soup")
|
||||||
img(src="curry-butternut-squash-and-apple-soup/large.png")
|
img(src="curry-butternut-squash-and-apple-soup/large.png")
|
||||||
| Curry Butternut Squash & Apple Soup
|
p Curry Butternut Squash & Apple Soup
|
||||||
|
|
||||||
a(href="french-onion-soup")
|
a(href="french-onion-soup")
|
||||||
img(src="french-onion-soup/large.png")
|
img(src="french-onion-soup/large.png")
|
||||||
| French Onion Soup
|
p French Onion Soup
|
||||||
|
|
||||||
a(href="hungarian-mushroom-beef-soup")
|
a(href="hungarian-mushroom-beef-soup")
|
||||||
img(src="hungarian-mushroom-beef-soup/large.png")
|
img(src="hungarian-mushroom-beef-soup/large.png")
|
||||||
| Hungarian Mushroom Beef Soup
|
p Hungarian Mushroom Beef Soup
|
||||||
|
|
||||||
a(href="spicy-lamb-soup")
|
a(href="spicy-lamb-soup")
|
||||||
img(src="spicy-lamb-soup/large.png")
|
img(src="spicy-lamb-soup/large.png")
|
||||||
| Spicy Lamb Soup
|
p Spicy Lamb Soup
|
||||||
|
|
||||||
a(href="winter-lentil-soup")
|
a(href="winter-lentil-soup")
|
||||||
img(src="winter-lentil-soup/large.png")
|
img(src="winter-lentil-soup/large.png")
|
||||||
| Winter Lentil Soup
|
p Winter Lentil Soup
|
||||||
|
|
||||||
h1 Salads
|
section
|
||||||
|
h1 Salads
|
||||||
|
|
||||||
a(href="caesar-salad")
|
.list
|
||||||
img(src="caesar-salad/large.png")
|
a(href="caesar-salad")
|
||||||
| Caesar Salad
|
img(src="caesar-salad/large.png")
|
||||||
|
p Caesar Salad
|
||||||
|
|
||||||
a(href="cucumber-salad")
|
a(href="cucumber-salad")
|
||||||
img(src="cucumber-salad/large.png")
|
img(src="cucumber-salad/large.png")
|
||||||
| Cucumber Salad
|
p Cucumber Salad
|
||||||
|
|
||||||
a(href="ruths-chris-chopped-salad")
|
a(href="ruths-chris-chopped-salad")
|
||||||
img(src="ruths-chris-chopped-salad/large.png")
|
img(src="ruths-chris-chopped-salad/large.png")
|
||||||
| Ruth's Chris Chopped Salad
|
p Ruth's Chris Chopped Salad
|
||||||
|
|
||||||
h1 Main Dish
|
section
|
||||||
|
h1 Entrées
|
||||||
|
|
||||||
a(href="bbq-pork-ribs")
|
.list
|
||||||
img(src="bbq-pork-ribs/large.png")
|
a(href="bbq-pork-ribs")
|
||||||
| BBQ Pork Ribs
|
img(src="bbq-pork-ribs/large.png")
|
||||||
|
p BBQ Pork Ribs
|
||||||
|
|
||||||
a(href="beef-bourguignon")
|
a(href="beef-bourguignon")
|
||||||
img(src="beef-bourguignon/large.png")
|
img(src="beef-bourguignon/large.png")
|
||||||
| Beef Bourguignon
|
p Beef Bourguignon
|
||||||
|
|
||||||
a(href="butter-chicken")
|
a(href="butter-chicken")
|
||||||
img(src="butter-chicken/large.png")
|
img(src="butter-chicken/large.png")
|
||||||
| Butter Chicken
|
p Butter Chicken
|
||||||
|
|
||||||
a(href="chicken-cordon-bleu")
|
a(href="chicken-cordon-bleu")
|
||||||
img(src="chicken-cordon-bleu/large.png")
|
img(src="chicken-cordon-bleu/large.png")
|
||||||
| Chicken Cordon Bleu
|
p Chicken Cordon Bleu
|
||||||
|
|
||||||
a(href="chicken-pot-pie")
|
a(href="chicken-pot-pie")
|
||||||
img(src="chicken-pot-pie/large.png")
|
img(src="chicken-pot-pie/large.png")
|
||||||
| Chicken Pot Pie
|
p Chicken Pot Pie
|
||||||
|
|
||||||
a(href="chicken-breasts-with-caper-cream-sauce")
|
a(href="chicken-breasts-with-caper-cream-sauce")
|
||||||
img(src="chicken-breasts-with-caper-cream-sauce/large.png")
|
img(src="chicken-breasts-with-caper-cream-sauce/large.png")
|
||||||
| Chicken Breasts with Caper Cream Sauce
|
p Chicken Breasts with Caper Cream Sauce
|
||||||
|
|
||||||
a(href="chili")
|
a(href="chili")
|
||||||
img(src="chili/large.png")
|
img(src="chili/large.png")
|
||||||
| Chili
|
p Chili
|
||||||
|
|
||||||
a(href="chole")
|
a(href="chole")
|
||||||
img(src="chole/large.png")
|
img(src="chole/large.png")
|
||||||
| Chole
|
p Chole
|
||||||
|
|
||||||
a(href="egg-and-onion-pie")
|
a(href="egg-and-onion-pie")
|
||||||
img(src="egg-and-onion-pie/large.png")
|
img(src="egg-and-onion-pie/large.png")
|
||||||
| Egg & Onion Pie
|
p Egg & Onion Pie
|
||||||
|
|
||||||
a(href="garlic-prime-rib")
|
a(href="garlic-prime-rib")
|
||||||
img(src="garlic-prime-rib/large.png")
|
img(src="garlic-prime-rib/large.png")
|
||||||
| Garlic Prime Rib
|
p Garlic Prime Rib
|
||||||
|
|
||||||
a(href="gnocchi")
|
a(href="gnocchi")
|
||||||
img(src="gnocchi/large.png")
|
img(src="gnocchi/large.png")
|
||||||
| Gnocchi
|
p Gnocchi
|
||||||
|
|
||||||
a(href="kielbasa-and-cabbage")
|
a(href="kielbasa-and-cabbage")
|
||||||
img(src="kielbasa-and-cabbage/large.png")
|
img(src="kielbasa-and-cabbage/large.png")
|
||||||
| Kielbasa and Cabbage
|
p Kielbasa and Cabbage
|
||||||
|
|
||||||
a(href="kofta-kebabs")
|
a(href="kofta-kebabs")
|
||||||
img(src="kofta-kebabs/large.png")
|
img(src="kofta-kebabs/large.png")
|
||||||
| Kofta Kebabs
|
p Kofta Kebabs
|
||||||
|
|
||||||
a(href="lemon-chicken-with-mushroom-sauce")
|
a(href="lemon-chicken-with-mushroom-sauce")
|
||||||
img(src="lemon-chicken-with-mushroom-sauce/large.png")
|
img(src="lemon-chicken-with-mushroom-sauce/large.png")
|
||||||
| Lemon Chicken with Mushroom Sauce
|
p Lemon Chicken with Mushroom Sauce
|
||||||
|
|
||||||
a(href="orange-chicken")
|
a(href="orange-chicken")
|
||||||
img(src="orange-chicken/large.png")
|
img(src="orange-chicken/large.png")
|
||||||
| Orange Chicken
|
p Orange Chicken
|
||||||
|
|
||||||
a(href="ratatouille")
|
a(href="ratatouille")
|
||||||
img(src="ratatouille/large.png")
|
img(src="ratatouille/large.png")
|
||||||
| Ratatouille
|
p Ratatouille
|
||||||
|
|
||||||
a(href="ricotta-meatballs")
|
a(href="ricotta-meatballs")
|
||||||
img(src="ricotta-meatballs/large.png")
|
img(src="ricotta-meatballs/large.png")
|
||||||
| Ricotta Meatballs
|
p Ricotta Meatballs
|
||||||
|
|
||||||
a(href="roast-leg-of-lamb-with-rosemary")
|
a(href="roast-leg-of-lamb-with-rosemary")
|
||||||
img(src="roast-leg-of-lamb-with-rosemary/large.png")
|
img(src="roast-leg-of-lamb-with-rosemary/large.png")
|
||||||
| Roast Leg of Lamb with Rosemary
|
p Roast Leg of Lamb with Rosemary
|
||||||
|
|
||||||
a(href="shrimp-with-sweet-potatoes-and-bacon")
|
a(href="shrimp-with-sweet-potatoes-and-bacon")
|
||||||
img(src="shrimp-with-sweet-potatoes-and-bacon/large.png")
|
img(src="shrimp-with-sweet-potatoes-and-bacon/large.png")
|
||||||
| Shrimp with Sweet Potatoes and Bacon
|
p Shrimp with Sweet Potatoes and Bacon
|
||||||
|
|
||||||
a(href="sloppy-joe-sandwiches")
|
a(href="sloppy-joe-sandwiches")
|
||||||
img(src="sloppy-joe-sandwiches/large.png")
|
img(src="sloppy-joe-sandwiches/large.png")
|
||||||
| Sloppy Joe Sandwiches
|
p Sloppy Joe Sandwiches
|
||||||
|
|
||||||
a(href="stuffed-green-peppers")
|
a(href="stuffed-green-peppers")
|
||||||
img(src="stuffed-green-peppers/large.png")
|
img(src="stuffed-green-peppers/large.png")
|
||||||
| Stuffed Green Peppers
|
p Stuffed Green Peppers
|
||||||
|
|
||||||
h1 Sides
|
section
|
||||||
|
h1 Sides
|
||||||
|
|
||||||
a(href="bok-choy-with-garlic")
|
.list
|
||||||
img(src="bok-choy-with-garlic/large.png")
|
a(href="bok-choy-with-garlic")
|
||||||
| Bok Choy with Garlic
|
img(src="bok-choy-with-garlic/large.png")
|
||||||
|
p Bok Choy with Garlic
|
||||||
|
|
||||||
a(href="bourbon-glazed-carrots")
|
a(href="bourbon-glazed-carrots")
|
||||||
img(src="bourbon-glazed-carrots/large.png")
|
img(src="bourbon-glazed-carrots/large.png")
|
||||||
| Bourbon Glazed Carrots
|
p Bourbon Glazed Carrots
|
||||||
|
|
||||||
a(href="creamed-spinach")
|
a(href="creamed-spinach")
|
||||||
img(src="creamed-spinach/large.png")
|
img(src="creamed-spinach/large.png")
|
||||||
| Creamed Spinach
|
p Creamed Spinach
|
||||||
|
|
||||||
a(href="garlic-broccoli")
|
a(href="garlic-broccoli")
|
||||||
img(src="garlic-broccoli/large.png")
|
img(src="garlic-broccoli/large.png")
|
||||||
| Garlic Broccoli
|
p Garlic Broccoli
|
||||||
|
|
||||||
a(href="hummus")
|
a(href="hummus")
|
||||||
img(src="hummus/large.png")
|
img(src="hummus/large.png")
|
||||||
| Hummus
|
p Hummus
|
||||||
|
|
||||||
a(href="pommes-puree")
|
a(href="pommes-puree")
|
||||||
img(src="pommes-puree/large.png")
|
img(src="pommes-puree/large.png")
|
||||||
| Pommes Purée
|
p Pommes Purée
|
||||||
|
|
||||||
a(href="sauteed-mushrooms")
|
a(href="sauteed-mushrooms")
|
||||||
img(src="sauteed-mushrooms/large.png")
|
img(src="sauteed-mushrooms/large.png")
|
||||||
| Sauteed Mushrooms
|
p Sauteed Mushrooms
|
||||||
|
|
||||||
a(href="sweet-potatoes-with-honey-and-rosemary")
|
a(href="sweet-potatoes-with-honey-and-rosemary")
|
||||||
img(src="sweet-potatoes-with-honey-and-rosemary/large.png")
|
img(src="sweet-potatoes-with-honey-and-rosemary/large.png")
|
||||||
| Sweet Potatoes with Honey and Rosemary
|
p Sweet Potatoes with Honey and Rosemary
|
||||||
|
|
||||||
a(href="tzatziki")
|
a(href="tzatziki")
|
||||||
img(src="tzatziki/large.png")
|
img(src="tzatziki/large.png")
|
||||||
| Tzatziki
|
p Tzatziki
|
||||||
|
|||||||
+56
-40
@@ -1,43 +1,61 @@
|
|||||||
.cookbook {
|
.cookbook {
|
||||||
column-count: 2;
|
section {
|
||||||
column-gap: 0.25in;
|
h1 {
|
||||||
|
font-family: sans-serif;
|
||||||
h1 {
|
font-size: 24pt;
|
||||||
font-family: sans-serif;
|
font-weight: bold;
|
||||||
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;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.0625in;
|
|
||||||
padding-right: 0.125in;
|
|
||||||
|
|
||||||
transition: all 0.25s;
|
|
||||||
|
|
||||||
&:visited {
|
|
||||||
color: black;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
.list {
|
||||||
background: #23B7F2;
|
display: flex;
|
||||||
color: white;
|
justify-content: flex-start;
|
||||||
}
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
img {
|
a {
|
||||||
border: 0.01in solid silver;
|
flex: 0 1 4in;
|
||||||
border-radius: 0.0625in;
|
|
||||||
margin-right: 0.125in;
|
border-radius: 0.0625in;
|
||||||
height: 0.5in;
|
break-inside: avoid;
|
||||||
width: 0.5in;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -158,10 +176,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
.cookbook {
|
@media (max-width: 600px) {
|
||||||
column-count: 1;
|
|
||||||
}
|
|
||||||
.recipe {
|
.recipe {
|
||||||
padding: 0 0.125in;
|
padding: 0 0.125in;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user