From 13fbf4e4b31e04705c639ec5d93f4d148c249033 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 20 Dec 2020 22:06:00 +0100
Subject: [PATCH] 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                   | 7 +++++++
 app/assets/stylesheets/mixins.scss                   | 8 ++++++++
 app/components/widgets/feeds/feed_component.html.erb | 2 +-
 app/views/welcome/index.html.erb                     | 2 +-
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 996c2c036..306cb7420 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2856,6 +2856,13 @@ table {
     }
   }
 
+  h2 {
+    &.title {
+      @include header-font-size(h3);
+    }
+  }
+
+  h2,
   h3 {
 
     &.title {
diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss
index 875a1b913..99afec57a 100644
--- a/app/assets/stylesheets/mixins.scss
+++ b/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));
+    }
+  }
+}
diff --git a/app/components/widgets/feeds/feed_component.html.erb b/app/components/widgets/feeds/feed_component.html.erb
index 1709c758e..5eb0352a8 100644
--- a/app/components/widgets/feeds/feed_component.html.erb
+++ b/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">
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb
index fafbcafbb..94e3a04b2 100644
--- a/app/views/welcome/index.html.erb
+++ b/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>