Issue 5848 - Fix vertical alignment on .heading-icon images in help.eyeo.com

templates/product-home.tmpl

Index: templates/product-home.tmpl
===================================================================
--- a/templates/product-home.tmpl
+++ b/templates/product-home.tmpl
@@ -1,27 +1,29 @@
 {% extends "templates/minimal" %}
 
 {% set product = products[product_id] %}
 
 {% block body %}
 <main id="main" class="container">
-  <h1 class="product-heading">
-    <img class="heading-icon" src="/img/png/logo-{{ product_id }}.png" srcset="/img/svg/logo-{{ product_id }}.svg 2x" alt="{{ product.full_name+" Logo" | translate( product_id+"-logo-alt", "Image alt text") }}">
+  <header class="product-heading">
+    <h1 class="aside-icon-container">
+      <img src="/img/png/logo-{{ product_id }}.png" srcset="/img/svg/logo-{{ product_id }}.svg 2x" alt="{{ product.full_name+" Logo" | translate( product_id+"-logo-alt", "Image alt text") }}">
 
-    {{ product.full_name + " Help Center" | translate(product_id+"-help-home-title", "Page title") }}
-  </h1>
+      <span>{{ product.full_name + " Help Center" | translate(product_id+"-help-home-title", "Page title") }}</span>
+    </h1>
+  </header>
 
   {% set popular_topics = get_pages_metadata({ "product_id": product_id, "template": "article", "popular": "true" }) %}
   {% if popular_topics %}
   <section class="card {{ product_id }}-card section">
-    <h2 class="card-heading">
-      <img class="heading-icon" src="/img/png/popular-icon.png" srcset="/img/svg/popular-icon.svg 2x" alt="{{ "Popular Icon" | translate("popular-icon-alt", "Image alt text") }}">
+    <h2 class="card-heading aside-icon-container">
+      <img src="/img/png/popular-icon.png" srcset="/img/svg/popular-icon.svg 2x" alt="{{ "Popular Icon" | translate("popular-icon-alt", "Image alt text") }}">
 
-      {{ "Popular Topics" | translate("popular-topics-title", "Section title") }}
+     <span>{{ "Popular Topics" | translate("popular-topics-title", "Section title") }}</span>
     </h2>
 
     <ul class="underlined-list row">
       {% for article in popular_topics %}
       <li class="column one-half">
         <a href="{{ article["page"] }}">
           {{ article.title | translate( get_page_name( article["page"]) + "-title", "Article title") }}
         </a>
@@ -31,20 +33,20 @@
   </section>
   {% endif %}
 
   <div class="row">
     {% for category in product.help_categories %}
     {% set articles = get_pages_metadata({ "product_id": product_id, "template": "article", "category": category.name }) %}
     {% if articles and category.name != 'Popular Topics' %}
     <section class="section column one-half">
-      <h2 class="h4">
-        <img class="heading-icon" src="/img/png/{{ category.icon }}.png" srcset="/img/svg/{{ category.icon }}.svg 2x" alt="{{ category.name+" Icon" | translate(category.icon+"-alt", "Image alt text") }}">
-
-        {{ category.name | translate( category.slug + "-category-title", "Category title") }}
+      <h2 class="h4 aside-icon-container">
+        <img src="/img/png/{{ category.icon }}.png" srcset="/img/svg/{{ category.icon }}.svg 2x" alt="{{ category.name+" Icon" | translate(category.icon+"-alt", "Image alt text") }}">
+        
+        <span>{{ category.name | translate( category.slug + "-category-title", "Category title") }}</span>
       </h2>
 
       <ul class="underlined-list">
         {% for article in articles %}
         <li>
           <a href="{{ article["page"] }}">
             {{ article.title | translate( get_page_name( article["page"]) + "-title", "Article title") }}
           </a>