people/jvittinghoff: Force image size

This commit updates the image size for Johanna's personal page because
it was too big to show up nicely. To achieve this, we add a new
'picwidth' class that forces a smaller, centered card image.

_layouts/person.html

@@ -10,7 +10,7 @@ layout: default
         <div class="card">
             <div class="card-image">
                 {% if page.pic %}
-                    <img src="/{{page.pic}}" width="300"/>
+                    <img src="/{{page.pic}}" width="{% if page.picwidth %}{{ page.picwidth }}{% else %}300{% endif %}" {% if page.picwidth %}class="picwidth"{% endif %} />
                 {% endif %}
             </div>
             <div class="card-content">

people/jvittinghoff.md

@@ -4,6 +4,7 @@ layout: person
 title: Johanna Vittinghoff
 fullname: Johanna Vittinghoff
 pic: public/images/jvittinghoff.jpg
+picwidth: 218
 
 role: support-staff
 start_date: 2017-03

people/meta/README.md

@@ -11,6 +11,7 @@ Each file needs some specific parameters:
  * **title** Name of the person, doubles as the page title
  * **fullname** Full name of the person, to be used in references
  * **pic** Relative link to a picture of the person
+ * **picwidth** If provided, overrides the default picture width of `300`
  
  * **role** one of *master-student*, *bachelor-student*, *phd-student*, *postdoc*, *faculty* or *guest*
  * **start_date** (optional) a start date (YYYY-MM) 

public/css/main.css

@@ -171,4 +171,11 @@ ul.side-nav.fixed:hover {
 
 .legal-links a:hover {
   text-decoration: underline;
+}
+
+/* forcibly reset image size for specific pics*/
+.card-image > .picwidth {
+  width: initial !important;
+  height: initial !important;
+  margin: auto;
 }
\ No newline at end of file