fix badges criteria refs - CT#7539

app/Resources/public/css/base.css

@@ -4038,6 +4038,16 @@ i.size-32.icon-new-work{
 .openbadges-text{
   text-align: center;
 }
+.title-badge{
+  font-weight: bold;
+  color: #2C3E50;
+}
+.code-badge{
+  font-size: 12px;
+}
+.name-badge{
+  font-size: 16px;
+}
 /* Social Profile */
 
 .social-profile{

main/template/default/skill/criteria.tpl

@@ -1,23 +1,23 @@
-<h1 class="page-header">{{ 'BadgeDetails'|get_lang }}</h1>
+<h2 class="page-header">{{ 'BadgeDetails'|get_lang }}</h2>
 <article>
     <div class="row">
         <div class="col-md-3">
             <figure class="thumbnail">
                 <img class="img-responsive" src="{{ skill_info.badge_image }}" alt="{{ skill_info.name }}">
                 <figcaption class="caption">
-                    <h2 class="text-center">{{ skill_info.name }}</h2>
+                    <p class="name-badge text-center">{{ skill_info.name }}</p>
                     {% if skill_info.short_code %}
-                        <p class="lead text-center">{{ skill_info.short_code }}</p>
+                        <p class="code-badge text-center"><i class="fa fa-shield"></i> {{ skill_info.short_code }}</p>
                     {% endif %}
                 </figcaption>
             </figure>
         </div>
         <div class="col-md-9">
-            <h3>{{ 'Name'|get_lang }}</h3>
+            <h4 class="title-badge">{{ 'Name'|get_lang }}</h4>
             <p class="lead">{{ skill_info.name }}</p>
-            <h3>{{ 'Description'|get_lang }}</h3>
+            <h4 class="title-badge">{{ 'Description'|get_lang }}</h4>
             <p>{{ skill_info.description }}</p>
-            <h3>{{ 'CriteriaToEarnTheBadge'|get_lang }}</h3>
+            <h4 class="title-badge">{{ 'CriteriaToEarnTheBadge'|get_lang }}</h4>
             <p>{{ skill_info.criteria }}</p>
         </div>
     </div>