Fix huge header in participatory budgets

The budget header was supposed to be huge, but only in the participatory
budgets index or show actions. It was still huge, with plenty of empty
space, when there was no budget, or in the "submit my ballot" and
"select a heading" pages.

app/assets/stylesheets/budgets/ballot/show.scss

@@ -0,0 +1,8 @@
+.budget-ballot-show {
+
+  > header {
+    @extend %budget-header;
+    @include grid-column-gutter;
+    padding-bottom: $line-height;
+  }
+}

app/assets/stylesheets/budgets/groups/show.scss

@@ -0,0 +1,7 @@
+.budget-group-show {
+
+  > header {
+    @extend %budget-header;
+    @include grid-column-gutter;
+  }
+}

app/assets/stylesheets/budgets/index.scss

@@ -0,0 +1,8 @@
+.budgets-index {
+
+  > header {
+    @extend %budget-header;
+    @include grid-column-gutter;
+    margin-bottom: $line-height;
+  }
+}

app/assets/stylesheets/mixins/budgets.scss

@@ -7,7 +7,7 @@
 
   h1 {
     font-size: rem-calc(60);
-    padding: $line-height * 2 0 $line-height;
+    padding: $line-height 0;
   }
 
   h1,

app/assets/stylesheets/participation.scss

@@ -1108,6 +1108,10 @@
     background-size: cover;
   }
 
+  h1 {
+    padding-top: $line-height * 2;
+  }
+
   .budget-title {
     font-weight: bold;
     text-transform: uppercase;

app/views/budgets/ballot/_ballot.html.erb

@@ -1,5 +1,4 @@
-<div class="budget-header">
-  <div class="row">
+<header>
   <%= back_link_to session[:ballot_referer] %>
 
   <h1 class="text-center"><%= t("budgets.ballots.show.title") %></h1>
@@ -13,8 +12,7 @@
     <p>
     <p><%= t("budgets.ballots.show.voted_info_2") %></p>
   </div>
-  </div>
-</div>
+</header>
 
 <div class="row ballot">
   <% ballot_groups = @ballot.groups.sort_by_name %>

app/views/budgets/ballot/show.html.erb

@@ -1,3 +1,3 @@
-<div id="ballot">
+<main id="ballot" class="budget-ballot-show">
   <%= render "budgets/ballot/ballot" %>
-</div>
+</main>

app/views/budgets/groups/show.html.erb

@@ -2,14 +2,11 @@
   <%= render "shared/canonical", href: budget_group_url(filter: @current_filter) %>
 <% end %>
 
-<div class="budget-header">
-  <div class="row">
-    <div class="small-12 medium-9 column">
+<main class="budget-group-show">
+  <header>
     <%= back_link_to budget_path(@budget) %>
-      <h2><%= t("budgets.groups.show.title") %></h2>
-    </div>
-  </div>
-</div>
+    <h1><%= t("budgets.groups.show.title") %></h1>
+  </header>
 
   <% if @current_filter == "unfeasible" %>
     <div class="row margin-top">
@@ -71,3 +68,4 @@
       </div>
     <% end %>
   <% end %>
+</main>

app/views/budgets/index.html.erb

@@ -6,6 +6,7 @@
   <%= render "shared/canonical", href: budgets_url %>
 <% end %>
 
+<main class="budgets-index">
   <% if @budget.present? %>
     <%= render Budgets::BudgetComponent.new(@budget) %>
 
@@ -13,13 +14,9 @@
       <%= render "finished", budgets: @finished_budgets %>
     <% end %>
   <% else %>
-  <div class="budget-header margin-bottom">
-    <div class="row">
-      <div class="small-12 medium-9 column">
+    <header>
       <h1><%= t("budgets.index.title") %></h1>
-      </div>
-    </div>
-  </div>
+    </header>
 
     <div class="row">
       <div class="small-12 column">
@@ -31,3 +28,4 @@
   <% end %>
 
   <%= render Budgets::FooterComponent.new %>
+</main>