Allow any kind of staffer metadata

Author: kevinlin1

_layouts/staffer.html

@@ -16,11 +16,13 @@ <h3 class="staffer-name" id="{{ page.name | slugify }}">
     {%- if page.email -%}
     <p><a href="mailto:{{ page.email }}">{{ page.email }}</a></p>
     {%- endif -%}
-    {%- if page.section -%}
-    <p class="staffer-meta">Quiz Section: {{ page.section | markdownify | strip_html }}</p>
-    {%- endif -%}
-    {%- if page.office-hours -%}
-    <p class="staffer-meta">Office Hours: {{ page.office-hours | markdownify | strip_html }}</p>
+    {%- if page.meta -%}
+    <dl class="staffer-meta">
+      {%- for meta in page.meta -%}
+      <dt>{{ meta[0] }}</dt>
+      <dd>{{ meta[1] | markdownify }}</dd>
+      {%- endfor -%}
+    </dl>
     {%- endif -%}
     {{ content }}
   </div>

_sass/custom/staffer.scss

@@ -31,6 +31,15 @@
   }
 
   .staffer-meta {
-    @extend .text-grey-dk-000;
+    dt, dd, dd + dt {
+      margin-top: 0;
+    }
+  }
+
+  @include mq(sm) {
+    .staffer-meta {
+      display: grid;
+      grid-template-columns: auto 1fr;
+    }
   }
 }