Update index page to flow more smoothly

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
+25 -17
View File
@@ -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 {