Ingredients, with Style

‹prev | My Chain | next›

Work over the past couple of days has the ingredients list in this state:



Which is a definite improvement over this:



Still, there are a few more things that I would like to clean up. It would be nicer to have the "Ingredients" header not quite so large and closer to the list of ingredients:

h2 {
  margin-bottom: 0px;
  font-size: 1.2em;
}

ul {
  margin-top: 0px;
}

I would also like a bit of space between the recipe meta information (the serving info, tools used, etc.):

#recipe-meta {
  float: right;
  width: 250px;
  margin: 3px 8px;
}

I would like to give a little emphasis to the ingredient name to afford quick scanning by the user:

.preparations {
  color: #555;
  .brand {
    font-style: italic;
  }
  .name {
    color: black;
    /* background-color: #FFFFe0; */
  }
}

(That's less CSS format)

Lastly, while I am mucking with CSS, I hate having to read very wide text (when I maximize the window). The only part of the recipe that might go wide would be the text instructions below the ingredient list:

#instructions {
  width: 50em;
}

With those changes, I have a much cleaner ingredient list:



I also add a footer to the site before finishing coding for the night. With a nice stopping point, I redeploy the app:

jaynestown% rake vlad:stop_app
jaynestown% rake vlad:update vlad:migrate vlad:start_app

I still have a couple of minor little tweaks in need of doing, so I may pick up with that tomorrow.