Correct inline display of staffer pronouns (for search)

Author: kevinlin1

_layouts/staffer.html

@@ -9,10 +9,10 @@ <h3 class="staffer-name" id="{{ page.name | slugify }}">
       {%- else -%}
       {{ page.name }}
       {%- endif -%}
-      {%- if page.pronouns -%}
-      <span class="staffer-pronouns">{{ page.pronouns }}</span>
-      {%- endif -%}
     </h3>
+    {%- if page.pronouns -%}
+    <p class="staffer-pronouns">{{ page.pronouns }}</p>
+    {%- endif -%}
     {%- if page.email -%}
     <p><a href="mailto:{{ page.email }}">{{ page.email }}</a></p>
     {%- endif -%}

_sass/custom/staffer.scss

@@ -9,9 +9,19 @@
     width: auto;
   }
 
-  p,
+  .anchor-heading {
+    right: auto;
+    left: -$sp-5;
+  }
+
+  .staffer-name,
+  .staffer-meta,
+  p {
+    margin: 0 0 $sp-1 0;
+  }
+
   .staffer-name {
-    margin: $sp-1 !important;
+    @extend .d-inline-block;
   }
 
   .staffer-pronouns {