_layouts, _sass: Inline pronouns next to name

_layouts/staffer.html

@@ -9,13 +9,13 @@
       {% else %}
       {{ page.name }}
       {% endif %}
+      {% if page.pronouns %}
+      <span class="staffer-pronouns">{{ page.pronouns }}</span>
+      {% endif %}
     </h3>
     {% if page.email %}
     <p><a href="mailto:{{ page.email }}">{{ page.email }}</a></p>
     {% endif %}
-    {% if page.pronouns %}
-    <p>Pronouns: {{ page.pronouns }}</p>
-    {% endif %}
     {% if page.section %}
     <p class="text-grey-dk-000">Quiz Section: {{ page.section | markdownify | strip_html }}</p>
     {% endif %}

_sass/custom/staffer.scss

@@ -19,3 +19,7 @@
 .staffer-name {
   margin: $sp-1;
 }
+
+.staffer-pronouns {
+  @extend .label, .text-grey-dk-100, .bg-grey-lt-200;
+}