Use h2 tags in feed headers

We were jumping from h1 to h3 and some of these sections (cards and
processes) had h3 tags inside them.

My best guess is we were using h3 so the titles were smaller. So I'm
adding a CSS mixin to easily use a font size of a different heading tag.

app/assets/stylesheets/layout.scss

@@ -2856,6 +2856,13 @@ table {
  }
  }
 
+ h2 {
+ &.title {
+ @include header-font-size(h3);
+ }
+ }
+
+ h2,
  h3 {
 
  &.title {

app/assets/stylesheets/mixins.scss

@@ -209,3 +209,11 @@
  text-decoration: none;
  }
 }
+
+@mixin header-font-size($heading-tag) {
+ @each $size, $headers in $header-styles {
+ @include breakpoint($size) {
+ font-size: rem-calc(map-get(map-get($headers, $heading-tag), font-size));
+ }
+ }
+}

app/components/widgets/feeds/feed_component.html.erb

@@ -1,6 +1,6 @@
 <section id="feed_<%= kind %>" class="widget-feed feed-<%= kind %>">
  <header>
- <h3 class="title"><%= t("welcome.feed.most_active.#{kind}") %></h3>
+ <h2 class="title"><%= t("welcome.feed.most_active.#{kind}") %></h2>
  </header>
 
  <div class="feed-content">

app/views/welcome/index.html.erb

@@ -19,7 +19,7 @@
  <div class="row">
  <% if @cards.any? %>
  <div class="small-12 column <%= "large-8" if feed_processes_enabled? %>">
- <h3 class="title"><%= t("welcome.cards.title") %></h3>
+ <h2 class="title"><%= t("welcome.cards.title") %></h2>
 
  <%= render "shared/cards" %>
  </div>