People cards

Author: dgopstein

_data/people.yml

@@ -1,4 +1,5 @@
 - name: Vladimir Diaz
+  role: Developer
   since: 2013
   photo: img/smiley.jpg
   interests: Software update security
@@ -10,12 +11,13 @@
       link: https://www.python.org/dev/peps/pep-0458/
     - name: PEP 480
       link: http://catalog.unm.edu/catalogs/2013-2014/courses/PEP/480-582.html
-  deployments:  TUF (used in Flynn, LEAP, and Docker software repositories; on-going integrations at  repositories for Ruby, CoreOS, Haskell, OCaml, and Python’s PyPI). 
+  deployments:  TUF (used in Flynn, LEAP, and Docker software repositories; on-going integrations at repositories for Ruby, CoreOS, Haskell, OCaml, and Python’s PyPI). 
 
 - name: Lukas Pühringer
+  role: Developer
   since: 2016
   photo: img/smiley.jpg
-  interests:  Security in operating systems and full stack networking; <br \> Distributed software development and version control systems; Front-end development and graphical user interfaces
+  interests:  Security in operating systems and full stack networking. Distributed software and version control systems.
   projects: Lead Developer for Toto
   publications:
     - name: PIK 2013

css/people.scss

@@ -1,30 +1,72 @@
 ---
 ---
 
-.people-boxes .person {
+.people-boxes {
+  margin-top: 3em;
+  font-size: 0.8em;
+}
+
+.people-boxes li {
   list-style-type: none;
+  margin-bottom: 2rem;
+}
 
-  max-width: 30em;
-  border-width: 2px;
+.people-boxes .person {
+  max-width: 35rem;
+  border-width: 5px;
   border-style: solid;
   border-color: black;
+  padding: 1rem;
 
-  margin-bottom: 2em;
+  position: relative;
+  height: 20rem;
 }
 
 .people-boxes .header {
   font-weight: bold;
-  font-size: 1.2em;
+  font-size: 1.2rem;
+  display: block;
 }
 
 .people-boxes .name {
   font-weight: bold;
-  font-size: 1.5em;
+  font-size: 1.5rem;
 }
 
 .people-boxes .photo {
-  float: right;
-  display: inline;
-  size: 6em;
-  width: 6em;
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 1rem 1rem;
+  width: 8rem;
+  border-style: solid;
+  border-width: 2px;
+}
+
+.people-boxes .role {
+  font-style: italic;
 }
+
+.people-boxes .interests {
+  position: absolute;
+  top: 4.5rem;
+  width: 65%;
+}
+
+.people-boxes .publications {
+  position: absolute;
+  top: 10rem;
+  left: 14rem;
+}
+
+.people-boxes .projects {
+  position: absolute;
+  top: 10rem;
+}
+
+.people-boxes .deployments {
+  position: absolute;
+  top: 14rem;
+}
+
+

people.html

@@ -7,31 +7,34 @@
 
 <ul class="people-boxes">
 {% for person in site.data.people %}
-  <li class="person">
-    <div class="name"> {{ person.name }} </div>
-    <img class="photo" src="{{ person.photo }}" />
-    <div class="interests">
-      <span class="header">Research Interests</span>
-      {{ person.interests }}
-    </div>
-    <div class="projects">
-      <span class="header">Lab Projects</span>
-      {{ person.projects }}
-    </div>
-    <div class="publications">
-      <span class="header">Publications</span>
-      {% assign pubLinks = '' | split:':' %}
-      {% for publication in person.publications %}
-        {% capture pubLink %} <a href="{{ publication.link }}">{{ publication.name }}</a> {% endcapture %}
-        {% assign pubLinks = pubLinks | push: pubLink %}
-      {% endfor %}
+  <li>
+    <div class="person">
+      <div class="name"> {{ person.name }} </div>
+      <div class="role"> {{ person.role }} </div>
+      <img class="photo" src="{{ person.photo }}" />
+      <div class="interests">
+        <span class="header">Research Interests</span>
+        {{ person.interests }}
+      </div>
+      <div class="projects">
+        <span class="header">Lab Projects</span>
+        {{ person.projects }}
+      </div>
+      <div class="publications">
+        <span class="header">Publications</span>
+        {% assign pubLinks = '' | split:':' %}
+        {% for publication in person.publications %}
+          {% capture pubLink %} <a href="{{ publication.link }}">{{ publication.name }}</a> {% endcapture %}
+          {% assign pubLinks = pubLinks | push: pubLink %}
+        {% endfor %}
 
 
-      {{ pubLinks | array_to_sentence_string }}
-    </div>
-    <div class="deployments">
-      <span class="header">Software/System Deployments</span>
-      {{ person.deployments }}
+        {{ pubLinks | array_to_sentence_string }}
+      </div>
+      <div class="deployments">
+        <span class="header">Software/System Deployments</span>
+        {{ person.deployments }}
+      </div>
     </div>
   </li>
 {% endfor %}