Sunday, September 20, 2009

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.

No comments:

Post a Comment