More Less CSS

‹prev | My Chain | next›

The meals in my Sinatra / CouchDB application look to be in pretty decent shape. What's left to do for recipes?

In the legacy Rails application, recipes look like:



So far, the updated application has recipes looking like:



Thanks to the work on meal, the recipes are already in pretty good shape. The most obvious differences are style-less vital stats and tools sections. Both sections should have green borders. The titles should have green backgrounds with white letters. The lists should not be bulletted. In other words, recalling that the less CSS variable @italian_green was defined yesterday:

.recipe-tools, .recipe-stats {
  border: 2px solid @italian_green;

  h2 {
    color: white;
    background-color: @italian_green;
    font-size: medium;
    padding: 2px;
    margin: 0px;
  }

  ul, li {
    display: block;
    padding: 1px;
    margin: 1px;
  }

}

This gets me to this point:



I still need to get both sections floated to the right of the ingredient list. I cannot apply a right float to both sections because they will end up next to each other:



I cannot clear one of the floats because the recipe photo is already floated (clearing these would place them below the photo). This leaves me with the only option of wrapping both sections in a <div> and floating it. In the Haml template, I add the outer div (and a title):

#recipe-meta
  .recipe-stats
    %h2= "Servings and Times"
    %div= "Preparation Time: " + hours(@recipe['prep_time'])
    - if @recipe['inactive_time']
      %div= "Inactive Time: " + hours(@recipe['inactive_time'])

  - if @recipe['tools']
    .recipe-tools
      %h2= "Tools and Appliances"
      %ul
        - @recipe['tools'].each do |tool|
          %li
            %a{:href => amazon_url(tool['asin'])}
              = tool['title']

I can then float the outermost div:

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

And I now have:



Much better.

I have a few more tweaks to add (fonts and padding) to the recipe stats and tools. I need to add a recipe search field to the page as well. The servings and the cooking time also appear to be missing. I will investigate these issues and more... tomorrow.