Format tags

Still not crazy about this treatment. I feel like
they should go below feature/scenario/etc titles, but
that's not how there done in gherkin, so impedence
mismatch.

features/example.feature

@@ -1,7 +1,7 @@
 @wip @S-12345
 Feature: An Example Feature
 
-  Now feature descriptions can contain _markdown_. [Links are fine](http://versionone.com) as are images:
+  Write feature descriptions in _markdown_. [Links are fine](http://versionone.com) as are images:
 
   ![Trident Maple](http://farm1.static.flickr.com/111/293228717_7fbaffb99f.jpg)
 

lib/dopecukes/formatter.coffee

@@ -6,30 +6,30 @@ output = ""
 backgroundSteps = 0
 
 formatFeature = (feature) =>
+  formatTags(feature.tags) if feature.tags?
   @output += "<article class='feature'>"
   @output += "<h1 class='name'>#{feature.name}</h1>"
-  formatTags(feature.tags) if feature.tags?
   @output += "<section class='description'>#{md(feature.description)}</section>"
   formatFeatureElement(element) for element in feature.elements
   @output += "</article>"
   @backgroundSteps = 0
 
 formatFeatureElement = (element) =>
   elementType = element.type
-  @output += "<section class='#{elementType} #{figureOutStatus(element)}'>"
+  @output += "<section class='#{elementType} #{rollStatusUp(element)}'>"
+  formatTags(element.tags) if element.tags?
   formatBackground(element) if elementType == "background"
   formatScenario(element) if elementType == "scenario"
   formatScenarioOutline(element) if elementType == "scenario_outline"
   @output += "</section>"
 
 formatBackground = (background) =>
   @output += "<h2>Background</h2>"
-  formatTags(background.tags) if background.tags?
   @output += "<ul class='steps'>"
   formatBackgroundStep(step) for step in background.steps
   @output += "</ul>"
 
-figureOutStatus = (scenario) ->
+rollStatusUp = (scenario) ->
   statuses = _.map(scenario.steps, (step) -> step?.result?.status)
   reduction = (memo, status) ->
     return memo if memo != 'passed'
@@ -38,14 +38,12 @@ figureOutStatus = (scenario) ->
 
 formatScenario = (scenario) =>
     @output += "<h2>#{scenario.name}</h2>"
-    formatTags(scenario.tags) if scenario.tags?
     @output += "<ul class='steps'>"
     formatStep(step) for step in scenario.steps[(@backgroundSteps)..scenario.length]
     @output += "</ul>"
 
 formatScenarioOutline = (scenario_outline) =>
   @output += "<h2>#{scenario_outline.name}</h2>"
-  formatTags(scenario_outline.tags) if scenario_outline.tags?
   @output += "<ul class='steps'>"
   formatStep(step) for step in scenario_outline.steps
   @output += "</ul>"
@@ -84,5 +82,6 @@ formatTag = (tag) =>
 
 module.exports = (features) =>
   @output = ""
+  @backgroundSteps = 0
   formatFeature(feature) for feature in features
   return @output

lib/dopecukes/public/screen.css

@@ -11,6 +11,7 @@ body {
 .container {
   display: table;
   width: 960px;
+  margin: 0px auto;
 }
 
 nav {
@@ -23,13 +24,15 @@ section.features {
 }
 
 h1 {
+  clear: both;
   color: #2E5992;
   font-weight: normal;
   font-size: 24px;
   margin-bottom: 8px;
 }
 
 h2 {
+  clear: both;
   font-size: 18px;
   color: #808080;
   background-color: #E6E6E6;
@@ -49,7 +52,8 @@ ul.steps {
 ul.tags {
   list-style-type: none;
   padding-left: 0px;
-  margin-bottom: 55px;
+  /* margin-bottom: 55px; */
+  /* margin-top: -5px; */
 }
 
 li.tag {
@@ -71,6 +75,10 @@ section.description, section.background, section.scenario, section.scenario_outl
   padding-left: 4px;
 }
 
+article.feature section ul.tags {
+  padding-bottom: 14px;
+}
+
 section h2 {
   background-repeat: no-repeat;
   background-position: 2px center;