Port services page from hifis.net

- Introduce a new card style
- Prepare all the other cards to be more generalized

_data/navigation.yml

@@ -15,7 +15,7 @@ header:
           url: news/
 
         - title: Services
-          url: "/"
+          url: "services/"
 
         - title: Mission
           url: "/"

_includes/cards/post_card_image.html

+{%- comment -%}
+
+    This is a card displaying post metadata as well as the title image.
+    Parameters:
+        post: The post which sould be displayed on the card
+
+{%- endcomment -%}
+{%- if post.title_image == "default" %}
+{%- assign image = 'hifis_page_title_background.jpg'-%}
+{%- else -%}
+{%- assign image = post.title_image -%}
+{%- endif -%}
+{%- assign img_url = site.directory.large_images
+    | append: "phone/"
+    | append: image
+    | strip 
+    | relative_url -%}
+<div class="card">
+    <a href="{{ include.post.url | relative_url }}">
+        <img class="card-img-top card-img-equal" src="{{ img_url }}" alt="Title image">
+        <div class="card-body">
+            <span class="badge badge-pill badge-secondary">
+                <i class="fas fa-calendar-day" aria-hidden="true"></i>
+                {{ include.post.data | date: "%d.&thinsp;%b.&thinsp;%y" }}
+            </span>
+            <h3 class="card-title">{{ include.post.title }}</h3>
+        </div>
+    </a>
+</div>

_sass/common/_cards.scss

+.flex-cards {
+    display: flex;
+    flex-flow: wrap;
+    justify-content: space-evenly;
+
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+.card {
+    width: 15rem;
+
+    margin: 0.5rem;
+    margin: 0.5rem;
+}
+
+.card-body {
+    h3 {
+        margin: 0 !important;
+    }
+}
+
+.card-img-equal {
+    width: 100%;
+    height: 10rem;
+    object-fit: cover;
+}

assets/css/hifis.scss

@@ -40,6 +40,7 @@
 
 /* === Actual styling === */
 @import "common/article";
+@import "common/cards";
 @import "common/digest";
 @import "common/event";
 @import "common/footer";

services/index.md

+---
+title: Services
+title_image: default
+layout: default
+author: none
+redirect_from:
+  - services/index_ger.html
+---
+
+## HIFIS Suggestions and Guidelines
+The optimal use of online collaboration tools is prerequisite for successful
+research and especially in times of social distancing.
+We provide guidelines and helping information.
+
+<div class="flex-cards">
+{% for post in site.categories['guidelines'] -%}
+{% include cards/post_card_image.html post=post %}
+{% endfor -%}
+</div>
+<div class="alert alert-success">
+  <h2 id="contact-us"><i class="fas fa-info-circle"></i> Comments or Suggestions?</h2>
+  <p>
+    Feel free to <a href="{% link contact.md %}">contact us</a>.
+  </p>
+</div>