andrew/recipes
1
0
Fork 0
Code Pull Requests Activity

Update index page to flow more smoothly

Browse Source
This commit is contained in:
Andrew Miner
2017-11-15 12:54:07 -08:00
parent 54c69910cc
commit c37424479f
4 changed files with 273 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/index.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/style.css
+22 -14
View File
@@ -1,33 +1,44 @@
.cookbook {
column-count: 2;
column-gap: 0.25in; }
.cookbook h1 {
.cookbook section h1 {
font-family: sans-serif;
font-size: 24pt;
font-weight: bold; }
.cookbook a {
.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 {
src/index.pug
+60 -49
View File
@@ -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
section
h1 Baking
.list
a(href="bagels")
img(src="bagels/large.png")
| Bagels
p Bagels
a(href="challah")
img(src="challah/large.png")
| Challah
p Challah
a(href="fluffy-pancakes")
img(src="fluffy-pancakes/large.png")
| Fluffy Pancakes
p Fluffy Pancakes
a(href="gluten-free-flour")
img(src="gluten-free-flour/large.png")
| Gluten-Free Flour
p Gluten-Free Flour
a(href="pizza")
img(src="pizza/large.png")
| Pizza
p Pizza
a(href="rosemary-dinner-rolls")
img(src="rosemary-dinner-rolls/large.png")
| Rosemary Dinner Rolls
p Rosemary Dinner Rolls
a(href="southern-buttermilk-biscuits")
img(src="southern-buttermilk-biscuits/large.png")
| Southern Buttermilk Biscuits
p Southern Buttermilk Biscuits
section
h1 Soups
.list
a(href="caldo-verde")
img(src="caldo-verde/large.png")
| Caldo Verde
p Caldo Verde
a(href="clam-chowder")
img(src="clam-chowder/large.png")
| Clam Chowder
p Clam Chowder
a(href="cream-of-spinach-soup")
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")
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")
img(src="french-onion-soup/large.png")
| French Onion Soup
p French Onion Soup
a(href="hungarian-mushroom-beef-soup")
img(src="hungarian-mushroom-beef-soup/large.png")
| Hungarian Mushroom Beef Soup
p Hungarian Mushroom Beef Soup
a(href="spicy-lamb-soup")
img(src="spicy-lamb-soup/large.png")
| Spicy Lamb Soup
p Spicy Lamb Soup
a(href="winter-lentil-soup")
img(src="winter-lentil-soup/large.png")
| Winter Lentil Soup
p Winter Lentil Soup
section
h1 Salads
.list
a(href="caesar-salad")
img(src="caesar-salad/large.png")
| Caesar Salad
p Caesar Salad
a(href="cucumber-salad")
img(src="cucumber-salad/large.png")
| Cucumber Salad
p Cucumber Salad
a(href="ruths-chris-chopped-salad")
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
.list
a(href="bbq-pork-ribs")
img(src="bbq-pork-ribs/large.png")
| BBQ Pork Ribs
p BBQ Pork Ribs
a(href="beef-bourguignon")
img(src="beef-bourguignon/large.png")
| Beef Bourguignon
p Beef Bourguignon
a(href="butter-chicken")
img(src="butter-chicken/large.png")
| Butter Chicken
p Butter Chicken
a(href="chicken-cordon-bleu")
img(src="chicken-cordon-bleu/large.png")
| Chicken Cordon Bleu
p Chicken Cordon Bleu
a(href="chicken-pot-pie")
img(src="chicken-pot-pie/large.png")
| Chicken Pot Pie
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
p Chicken Breasts with Caper Cream Sauce
a(href="chili")
img(src="chili/large.png")
| Chili
p Chili
a(href="chole")
img(src="chole/large.png")
| Chole
p Chole
a(href="egg-and-onion-pie")
img(src="egg-and-onion-pie/large.png")
| Egg & Onion Pie
p Egg & Onion Pie
a(href="garlic-prime-rib")
img(src="garlic-prime-rib/large.png")
| Garlic Prime Rib
p Garlic Prime Rib
a(href="gnocchi")
img(src="gnocchi/large.png")
| Gnocchi
p Gnocchi
a(href="kielbasa-and-cabbage")
img(src="kielbasa-and-cabbage/large.png")
| Kielbasa and Cabbage
p Kielbasa and Cabbage
a(href="kofta-kebabs")
img(src="kofta-kebabs/large.png")
| Kofta Kebabs
p Kofta Kebabs
a(href="lemon-chicken-with-mushroom-sauce")
img(src="lemon-chicken-with-mushroom-sauce/large.png")
| Lemon Chicken with Mushroom Sauce
p Lemon Chicken with Mushroom Sauce
a(href="orange-chicken")
img(src="orange-chicken/large.png")
| Orange Chicken
p Orange Chicken
a(href="ratatouille")
img(src="ratatouille/large.png")
| Ratatouille
p Ratatouille
a(href="ricotta-meatballs")
img(src="ricotta-meatballs/large.png")
| Ricotta Meatballs
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
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
p Shrimp with Sweet Potatoes and Bacon
a(href="sloppy-joe-sandwiches")
img(src="sloppy-joe-sandwiches/large.png")
| Sloppy Joe Sandwiches
p Sloppy Joe Sandwiches
a(href="stuffed-green-peppers")
img(src="stuffed-green-peppers/large.png")
| Stuffed Green Peppers
p Stuffed Green Peppers
section
h1 Sides
.list
a(href="bok-choy-with-garlic")
img(src="bok-choy-with-garlic/large.png")
| Bok Choy with Garlic
p Bok Choy with Garlic
a(href="bourbon-glazed-carrots")
img(src="bourbon-glazed-carrots/large.png")
| Bourbon Glazed Carrots
p Bourbon Glazed Carrots
a(href="creamed-spinach")
img(src="creamed-spinach/large.png")
| Creamed Spinach
p Creamed Spinach
a(href="garlic-broccoli")
img(src="garlic-broccoli/large.png")
| Garlic Broccoli
p Garlic Broccoli
a(href="hummus")
img(src="hummus/large.png")
| Hummus
p Hummus
a(href="pommes-puree")
img(src="pommes-puree/large.png")
| Pommes Purée
p Pommes Purée
a(href="sauteed-mushrooms")
img(src="sauteed-mushrooms/large.png")
| Sauteed Mushrooms
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
p Sweet Potatoes with Honey and Rosemary
a(href="tzatziki")
img(src="tzatziki/large.png")
| Tzatziki
p Tzatziki
src/style.scss
+25 -9
View File
@@ -1,20 +1,27 @@
.cookbook {
column-count: 2;
column-gap: 0.25in;
section {
h1 {
font-family: sans-serif;
font-size: 24pt;
font-weight: bold;
}
.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;
font-family: serif;
font-size: 18pt;
overflow: hidden;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: center;
@@ -39,6 +46,17 @@
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 {
column-count: 1;
}
@media (max-width: 600px) {
.recipe {
padding: 0 0.125in;