Add team page with member information and pictures

- Also make use of the {%- syntax to reduce whitespace in the generated
HTML for the team member includes
- Fix alignment of title in the section part

_data/hifis_team.yml

@@ -31,8 +31,81 @@
 #         link_as:  https://www.facebook.com/my-profile-url
 #         show_as:  "My Profile"
 
+- id: guelzow
+  name: "Guelzow, Volker"
+  image: "Volker_Guelzow.jpg"
+  location:
+    campus: desy
+  position: "Coordinator and Speaker of HIFIS"
+  associate: false
+  rank: 4
+  associate: false
+  cluster: overall
+- id: finke
+  name: "Finke, Ants"
+  location:
+    campus: hzb
+  position: "Coordinator"
+  associate: false
+  rank: 3
+  associate: false
+  cluster: overall
+- id: konrad
+  name: "Konrad, Uwe"
+  image: "Uwe_Konrad.jpg"
+  location:
+    campus: hzdr
+  position: "Coordinator"
+  associate: false
+  rank: 3
+  associate: false
+  cluster: overall
 - id: jandt
   name: "Jandt, Uwe"
+  image: "Uwe_Jandt.jpg"
+  location:
+    campus: desy
+  position: "HIFIS Office Management"
+  associate: false
+  rank: 2
+  associate: false
+  cluster: overall
+- id: fuhrmann
+  name: "Fuhrmann, Patrick"
+  image: "anon_freepic.jpg"
   location:
     campus: desy
+  position: "Backbone Cluster Management"
+  associate: false
+  rank: 1
+  associate: false
+  cluster: backbone
+- id: klotz
+  name: "Klotz, Andreas"
+  location:
+    campus: hzb
+  position: "Cloud Cluster Management"
+  associate: false
+  rank: 1
+  associate: false
+  cluster: cloud
+- id: spicker
+  name: "Spicker, Annette"
+  image: "Annette_Spicker.jpg"
+  location:
+    campus: hzb
+  position: "Cloud Cluster Management"
+  associate: false
+  rank: 1
+  associate: false
+  cluster: cloud
+- id: huste
+  name: "Huste, Tobias"
+  image: "Tobias_Huste.jpg"
+  location:
+    campus: hzdr
+  position: "Software Cluster Management"
+  associate: false
+  rank: 1
   associate: false
+  cluster: software

_includes/team_card.html

-{% comment %}
+{%- comment -%}
     A normal team card is designed for acting as a slightly more prominent
     representation of a person.
     It features a name, title, organization, position and image of the person
     and acts as a link to the full member site.
-{% endcomment %}
+{%- endcomment -%}
 
-{% assign person = include.person %}
-{% if person %}
-<a href="{{ person.id | prepend: 'members/' | relative_url }}">
-    <div class="team-card-normal">
+{%- assign person = include.person -%}
+{%- if person -%}
+<div class="team-card-normal">
 
-        {% include team_card/image.html %}
-
-        <div>
-            {% include team_card/organization_short.html    person=person %}
-            {% include team_card/title.html                 person=person %}
-            {% include team_card/name.html                  person=person %}
-            {% include team_card/position.html              person=person %}
-            {% include team_card/team_member_associate.html person=person %}
-        </div>
+    {%- include team_card/image.html -%}
 
+    <div>
+        {%- include team_card/organization_short.html    person=person -%}
+        {%- if person.title -%}
+        {%- include team_card/title.html                 person=person -%}
+        {%- endif -%}
+        {%- include team_card/name.html                  person=person -%}
+        {%- include team_card/position.html              person=person -%}
+        {%- include team_card/team_member_associate.html person=person -%}
     </div>
-</a>
-{% else %}
+
+</div>
+{%- else -%}
     <!--
         WARNING: team_card.html was included,
         but parameter person was not defined
     -->
-{% endif %}
+{%- endif -%}

_includes/team_card/contacts.html

 
-{% assign person = include.person %}
-{% if person.contact %}
-{% assign contact = person.contact %}
+{%- assign person = include.person -%}
+{%- if person.contact -%}
+{%- assign contact = person.contact -%}
 
 <div id="contacts-general">
-    {% if contact.email %}
+    {%- if contact.email -%}
     <div>
         <a href="mailto:{{ contact.email }}">
             <i class="fas fa-envelope"></i>
             {{ contact.email }}
         </a>
     </div>
-    {% endif %}
+    {%- endif -%}
 
-    {% if contact.phone %}
+    {%- if contact.phone -%}
     <div>
         <a href="tel:{{ contact.phone }}">
             <i class="fas fa-phone"></i>
             {{ contact.phone }}
         </a>
     </div>
-    {% endif %}
+    {%- endif -%}
 
-    {% if contact.fax %}
+    {%- if contact.fax -%}
     <div>
         <a href="fax:{{ contact.fax }}">
             <i class="fas fa-fax"></i>
             {{ contact.fax }}
         </a>
     </div>
-    {% endif %}
+    {%- endif -%}
 
-    {% if contact.sms %}
+    {%- if contact.sms -%}
     <div>
         <a href="sms:{{ contact.sms }}">
             <i class="fas fa-sms"></i>
             {{ contact.sms }}
         </a>
     </div>
-    {% endif %}
+    {%- endif -%}
 </div>
 
-{% endif %}
+{%- endif -%}

_includes/team_card/contacts_messengers.html

 
-{% if include.contact %}
-    {% if include.contact.messengers %}
+{%- if include.contact -%}
+    {%- if include.contact.messengers -%}
     <div id="contacts-messengers">
-        {% for messenger in include.contact.messengers %}
-            {% assign medium = site.data.messengers[messenger.type] %}
+        {%- for messenger in include.contact.messengers -%}
+            {%- assign medium = site.data.messengers[messenger.type] -%}
 
-            {% if medium.protocol %}
-            {% assign proto = medium.protocol %}
-            {% else %}
-            {% assign proto = "https"%}
-            {% endif %}
+            {%- if medium.protocol -%}
+            {%- assign proto = medium.protocol -%}
+            {%- else -%}
+            {%- assign proto = "https"-%}
+            {%- endif -%}
 
-            {% if medium.fontawesome_class %}
-            {% assign class = medium.fontawesome_class %}
-            {% else %}
-            {% assign class = "far fa-comments" %}
-            {% endif %}
+            {%- if medium.fontawesome_class -%}
+            {%- assign class = medium.fontawesome_class -%}
+            {%- else -%}
+            {%- assign class = "far fa-comments" -%}
+            {%- endif -%}
             <a href="{{ proto }}:{{ messenger.link_as }}">
                 <i class="{{ class }}"></i>&nbsp;
             </a>
-        {% endfor %}
+        {%- endfor -%}
     </div>
-    {% endif %}
-{% else %}
+    {%- endif -%}
+{%- else -%}
     <!-- WARN included file team_card/contact_messenger, but "contact" was null -->
-{% endif %}
+{%- endif -%}

_includes/team_card/contacts_platforms.html

 
-{% if include.contact.platforms %}
+{%- if include.contact.platforms -%}
 <div id="contacts-platforms">
-    {% for platform in include.contact.platforms %}
-        {% assign medium = site.data.social_platforms[platform.type] %}
+    {%- for platform in include.contact.platforms -%}
+        {%- assign medium = site.data.social_platforms[platform.type] -%}
         <a href="{{ platform.link_as }}">
             <i class="{{ medium.fontawesome_class }}"></i>&nbsp;
         </a>
-    {% endfor %}
+    {%- endfor -%}
 </div>
-{% endif %}
+{%- endif -%}

_includes/team_card/image.html

-{% comment %}
+{%- comment -%}
     Includes an image of a person on the page.
     
     Assumes that there is a variable "person" already defined.  
@@ -6,23 +6,23 @@
     image file from the site's image directory (see _config.yml).
     If the image could not be found for any reason, a default avatar image 
     will be substituted.
-{% endcomment %}
+{%- endcomment -%}
 
-{% assign person = include.person %}
-{% if person %}
-    {% if person.image %}
-        {% assign image-url = site.directory.images
+{%- assign person = include.person -%}
+{%- if person -%}
+    {%- if person.image -%}
+        {%- assign image-url = site.directory.images
                             | append: "members/"
-                            | append: person.image %}
+                            | append: person.image -%}
         <img    class="portrait"
                 src="{{ image-url | strip | relative_url }}" 
                 alt="Picture of {{ person.name }}">
-    {% else %}
-        <div class="portrait">        </div>
-    {% endif %}
-{% else %}
+    {%- else -%}
+        <div class="portrait"></div>
+    {%- endif -%}
+{%- else -%}
     <!--
         WARNING: team_card/image.html was included, 
         but no person object was defined 
     -->
-{% endif %}
+{%- endif -%}

_includes/team_card/name.html

-{% comment %}
+{%- comment -%}
     Inserts the name of a person.
     
     Assumes that there is a variable "person" already defined.  
     It holds a key "name" and an associated value which is pasted here 
     verbatim.
     If the key is not present, an informative HTML comment will be inserted.
-{% endcomment %}
+{%- endcomment -%}
 
-{% assign person = include.person %}
-{% if person %}
-    {% if person.name %}
+{%- assign person = include.person -%}
+{%- if person -%}
+    {%- if person.name -%}
         <span class="name">
             {{ person.name }}
         </span>
-    {% else %}
+    {%- else -%}
         <!-- 
             NOTE: team_card/name.html was included,
             but person.name was not defined
         -->
-    {% endif %}
-{% else %}
+    {%- endif -%}
+{%- else -%}
     <!--
         WARNING: team_card/name.html was included,
         but no person object was defined
     -->
-{% endif %}
+{%- endif -%}

_includes/team_card/organization_long.html

-{% comment %}
+{%- comment -%}
     Inserts a full data set of an campus of an organization.
     The data will be formatted as postal address, followed by an external link
     to the organizations website.
@@ -13,68 +13,68 @@
     If the key is not valid, an informative HTML comment will be inserted.
     If available, the parameter "room" will be inserted verbatim at the
     appropriate position.
-{% endcomment %}
+{%- endcomment -%}
 
 
-{% if include.location %}
+{%- if include.location -%}
 
-{% assign campus-id = include.location.campus %}
-{% assign room = include.location.room %}
+{%- assign campus-id = include.location.campus -%}
+{%- assign room = include.location.room -%}
 
-    {% if campus-id %}
-        {% assign organization-code = campus-id | split: "-" | first %}
-        {% assign organization =  site.data.helmholtz-centers[organization-code] %}
-        {% assign location = organization.campii[campus-id] %}
+    {%- if campus-id -%}
+        {%- assign organization-code = campus-id | split: "-" | first -%}
+        {%- assign organization =  site.data.helmholtz-centers[organization-code] -%}
+        {%- assign location = organization.campii[campus-id] -%}
 
-        {% if organization and location %}
+        {%- if organization and location -%}
             <div class="org-long">
                 <address>
                     <span class="org-name">{{ organization.name }}</span>
                     <span class="org-name">Campus
-                    {% if location.name %}
+                    {%- if location.name -%}
                         {{ location.name }}
-                    {% else %}
+                    {%- else -%}
                         {{ location.city }}
-                    {% endif %}
+                    {%- endif -%}
                     </span>
 
-                    {% if room %}
+                    {%- if room -%}
                         <span> {{ room }} </span>
-                    {% endif %}
+                    {%- endif -%}
 
                     <span> {{ location.street }} </span>
                     <span> {{ location.zip-code }} {{ location.city }} </span>
                     <span>
-                    {% if location.country %}
+                    {%- if location.country -%}
                         {{ location.country }}
-                    {% else %}
+                    {%- else -%}
                         Germany
-                    {% endif %}
+                    {%- endif -%}
                     </span>
                 </address>
 
                 <div>
-                    {% if location.website %}
-                        {% assign website = location.website %}
-                    {% else %}
-                        {% if organization.website %}
-                            {% assign website = organization.website %}
-                        {% endif %}
-                    {% endif %}
+                    {%- if location.website -%}
+                        {%- assign website = location.website -%}
+                    {%- else -%}
+                        {%- if organization.website -%}
+                            {%- assign website = organization.website -%}
+                        {%- endif -%}
+                    {%- endif -%}
 
-                    {% if website %}
+                    {%- if website -%}
                     <a href="https://{{ website }}">
                         <i class="fas fa-external-link-alt"></i>
                         {{ website | split: "/" | first }}
                     </a>
-                    {% endif %}
+                    {%- endif -%}
 
-                    {% comment %}
+                    {%- comment -%}
                         Space for map button here
-                    {% endcomment %}
+                    {%- endcomment -%}
                 </div>
             </div>
-        {% else %}
+        {%- else -%}
             <!--
                 NOTE: team_card/organization_long.html was included,
                 but parameter "location.campus" could not be matched
@@ -84,13 +84,13 @@
             <div class="org-long">
                 <address>
                     <span class="org-name">{{ campus-id }}</span>
-                    {% if room %}
+                    {%- if room -%}
                         <span> {{ room }} </span>
-                    {% endif %}
+                    {%- endif -%}
                 </address>
             </div>
-        {% endif %}
-    {% else %}
+        {%- endif -%}
+    {%- else -%}
         <!--
             NOTE: team_card/organization_long.html was included,
             but parameter "location.campus" was not valid.
@@ -99,12 +99,12 @@
         <div class="org-long-placeholder">
             {{ include.location }}
         </div>
-    {% endif %}
-{% else %}
+    {%- endif -%}
+{%- else -%}
     <!--
         NOTE: team_card/organization_long.html was included,
         but parameter "location" was not defined.
     -->
     <div class="org-long-placeholder"></div>
-{% endif %}
+{%- endif -%}
 

_includes/team_card/organization_short.html

-{% comment %}
+{%- comment -%}
     Inserts the abbreviation of an organization of a person, followed by a
     slash, if something was printed at all.
 
@@ -6,30 +6,30 @@
     It holds a key "organization" and an associated value which is a foreign key
     into _data/hifis_organizations.yml
     If the key is not present, an informative HTML comment will be inserted.
-{% endcomment %}
+{%- endcomment -%}
 
-{% assign person = include.person %}
-{% if person %}
-    {% if person.location.campus %}
+{%- assign person = include.person -%}
+{%- if person -%}
+    {%- if person.location.campus -%}
         <span class="org-short">
-            {% assign organization =  site.data.helmholtz-centers[person.location.campus] %}
-            {% if organization %}
+            {%- assign organization =  site.data.helmholtz-centers[person.location.campus] -%}
+            {%- if organization -%}
                 {{ organization.abbreviation }}
-            {% else %}
+            {%- else -%}
                 <!-- NOTE: No further organization info, fallback to verbatim input -->
                 <em>{{ person.location.campus }}</em>
-            {% endif%}
+            {%- endif-%}
         </span>
         /
-    {% else %}
+    {%- else -%}
         <!--
             NOTE: team_card/organization_short.html was included,
             but person.organization was not defined
         -->
-    {% endif %}
-{% else %}
+    {%- endif -%}
+{%- else -%}
     <!--
         WARNING: team_card/organization_short.html was included,
         but no person object was defined
     -->
-{% endif %}
+{%- endif -%}

_includes/team_card/position.html

-{% comment %}
+{%- comment -%}
     Inserts the position description of a person.
     
     Assumes that there is a variable "person" already defined.  
     It holds a key "position" and an associated value which is pasted here 
     verbatim.
     If the key is not present, an informative HTML comment will be inserted.
-{% endcomment %}
+{%- endcomment -%}
 
-{% assign person = include.person %}
-{% if person %}
-    {% if person.position %}
+{%- assign person = include.person -%}
+{%- if person -%}
+    {%- if person.position -%}
         <span class="position">
             {{ person.position }}
         </span>
-    {% else %}
+    {%- else -%}
         <!-- 
             NOTE: team_card/position.html was included,
             but person.position was not defined 
         -->
-    {% endif %}
-{% else %}
+    {%- endif -%}
+{%- else -%}
     <!--
         WARNING: team_card/position.html was included, 
         but no person object was defined 
     -->
-{% endif %}
+{%- endif -%}

_includes/team_card/team_member_associate.html

-{% comment %}
+{%- comment -%}
 Associate team members are marked by a badge icon.
-{% endcomment %}
+{%- endcomment -%}
 
-{% assign person = include.person %}
-{% if person %}
-    {% if person.associate and person.associate == true %}
+{%- assign person = include.person -%}
+{%- if person -%}
+    {%- if person.associate and person.associate == true -%}
         <span   class="badge badge-pill badge-secondary" 
                 title="Team member is an associate team member.">
             Associate
         </span>
-    {% endif %}
-{% else %}
+    {%- endif -%}
+{%- else -%}
     <!--
         WARNING: team_member_associate.html was included,
         but parameter person was not defined
     -->
-{% endif %}
+{%- endif -%}

_includes/team_card/title.html

-{% comment %}
+{%- comment -%}
     Inserts the (academic) title of a person.
 
     Assumes that there is a variable "person" already defined.  
     It holds a key "title" and an associated value which is pasted here 
     and all spaces are replaced by  
     If the key is not present, an informative HTML comment will be inserted.
-{% endcomment %}
+{%- endcomment -%}
 
-{% assign person = include.person %}
-{% if person %}
-    {% if person.title %}
+{%- assign person = include.person -%}
+{%- if person -%}
+    {%- if person.title -%}
         <span class="title">
             {{ person.title | replace: " ", "&thinsp;" }}
         </span>
-    {% else %}
+    {%- else -%}
         <!-- 
             NOTE: team_card/title.html was included,
             but person.title was not defined
         -->
-    {% endif %}
-{% else %}
+    {%- endif -%}
+{%- else -%}
     <!--
         WARNING: team_card/title.html was included, 
         but no person object was defined 
     -->
-{% endif %}
+{%- endif -%}

_layouts/roadmap.html

@@ -21,7 +21,7 @@
 
             {% if newyear != year %}
                 {% assign year = newyear %}
-                <h1>{{ newyear }}</h1>
+                <h1 class="text-center">{{ newyear }}</h1>
             {% endif %}
 
             <div class="roadmap-month">

_layouts/team.html

+{%- comment -%}
+This page uses _data/hifis_team.yml to generate its content.
+It does on purpose NOT include the content of the markdown page.
+{%- endcomment -%}
 
-{% comment %}
-    This page uses _data/hifis_team.yml to generate its content.
-    It does on purpose NOT include the content of the markdown page.
-{% endcomment %}
-
-{% include top.html %}
+{%- include top.html -%}
 
 <body>
 
-    {% include header.html %}
+    {%- include header.html -%}
 
     <main>
-        {% include title_image.html%}
+        {%- include title_image.html-%}
 
-        {% assign team_members_core = site.data.hifis_team
-            | where: "associate", false | sort: "name" %}
-        {% assign team_members_associate = site.data.hifis_team
-            | where: "associate", true | sort: "name" %}
+        {%- assign team_members_core = site.data.hifis_team
+            | where: "associate", false -%}
         <section>
             <article>
                 <div>
                     <h1>Team</h1>
                     <div class="team_list">
-                        {% for person in team_members_core %}
-                            {% include team_card.html person=person %}
-                        {% endfor %}
-                    </div>
-                </div>
-            </article>
-        </section>
-
-        <section>
-            <article>
-                <div>
-                    <h1>Associates</h1>
-                    <div class="team_list">
-                        {% for person in team_members_associate %}
-                            {% include team_card.html person=person %}
-                        {% endfor %}
+                        {%- for person in team_members_core -%}
+                        {%- include team_card.html person=person -%}
+                        {%- endfor -%}
                     </div>
                 </div>
             </article>
         </section>
     </main>
-
-    {% include footer.html %}
-
+    {%- include footer.html -%}
 </body>
 
 </html>

_sass/profiles/_team-card-normal.scss

@@ -9,10 +9,7 @@
     &:focus,
     &:hover {
         background-color:   $color-header-light-gray;
-
-        .name {
-            color:  $color-helmholtz-blue;
-        }
+        color:              $color-helmholtz-blue;
     }
 
     /*

_sass/roadmap/_roadmap.scss

@@ -103,7 +103,6 @@ section {
         @include font-bold;
 
         color:          $color-helmholtz-blue;
-        text-align:     center;
     }
 
     h2 {