add members page placeholder

_data/members.yml

+# make sure facility name matches the short-name field in "facilities.yml"
+
+- name: Paul Millar
+  facility: DESY
+  pic: "/assets/images/open-peep-32.png"
+
+- name: Rolf Krahl
+  facility: HZB
+  pic: "/assets/images/open-peep-79.png"
+  
+- name: Uwe Konrad
+  facility: HZDR

_data/navigation.yml

@@ -2,6 +2,9 @@
 - name: Home
   link: "/"
 
+- name: Members
+  link: "/members.html"
+
 - name: Outcomes
   link: "/outcomes.html"
 

_sass/main.scss

@@ -114,3 +114,26 @@ div.box {
 div.box + h1, div.box + img, div.box + p {
   clear: both;
 }
+
+.member-box {
+  display: flex;
+  align-items: center;
+  padding: $padding-std;
+  border: 1px solid $color-strong;
+  border-radius: $padding-big;
+  margin-bottom: $margin-small;
+}
+
+.profile-picture {
+  width: $margin-big;
+  height: $margin-big;
+  overflow: hidden;
+  border-radius: 50%;
+  margin-right: $margin-small;
+}
+
+.profile-picture img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

members.html

+---
+title: Members
+---
+<h1>{{ page.title }}</h1>
+{% for member in site.data.members %}
+  <div class="member-box">
+    <div class="profile-picture">
+      {% if member.pic %}
+        <img src='{{ member.pic | relative_url }}' alt="Profile Picture">
+      {% else %}
+        <img src='{{ "/assets/images/open-peep-60.png" | relative_url }}' alt="Profile Picture">
+      {% endif %}
+    </div>
+    <div class="member-info">
+      <p><strong>{{ member.name }}</strong></p>
+      <p>{{ member.facility }}</p>
+    </div>
+  </div>
+{% endfor %}