From a896e4a6e8482059886d49579b6bb45d748bcea4 Mon Sep 17 00:00:00 2001
From: Tobias Huste <t.huste@hzdr.de>
Date: Thu, 9 Jul 2020 12:11:11 +0200
Subject: [PATCH] Port services page from hifis.net

- Introduce a new card style
- Prepare all the other cards to be more generalized
---
 _data/navigation.yml                          |  2 +-
 _includes/cards/post_card_image.html          | 29 +++++++++++++++++++
 ...guidelines-for-collaborative-notetaking.md |  0
 _sass/common/_cards.scss                      | 27 +++++++++++++++++
 assets/css/hifis.scss                         |  1 +
 services/index.md                             | 25 ++++++++++++++++
 6 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 _includes/cards/post_card_image.html
 rename _posts/2020/{05 => 06}/2020-06-26-guidelines-for-collaborative-notetaking.md (100%)
 create mode 100644 _sass/common/_cards.scss
 create mode 100644 services/index.md

diff --git a/_data/navigation.yml b/_data/navigation.yml
index 573bc135e..68832bcd1 100644
--- a/_data/navigation.yml
+++ b/_data/navigation.yml
@@ -15,7 +15,7 @@ header:
           url: news/
 
         - title: Services
-          url: "/"
+          url: "services/"
 
         - title: Mission
           url: "/"
diff --git a/_includes/cards/post_card_image.html b/_includes/cards/post_card_image.html
new file mode 100644
index 000000000..25a0c4e1c
--- /dev/null
+++ b/_includes/cards/post_card_image.html
@@ -0,0 +1,29 @@
+{%- 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>
diff --git a/_posts/2020/05/2020-06-26-guidelines-for-collaborative-notetaking.md b/_posts/2020/06/2020-06-26-guidelines-for-collaborative-notetaking.md
similarity index 100%
rename from _posts/2020/05/2020-06-26-guidelines-for-collaborative-notetaking.md
rename to _posts/2020/06/2020-06-26-guidelines-for-collaborative-notetaking.md
diff --git a/_sass/common/_cards.scss b/_sass/common/_cards.scss
new file mode 100644
index 000000000..a89be0d46
--- /dev/null
+++ b/_sass/common/_cards.scss
@@ -0,0 +1,27 @@
+.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;
+}
diff --git a/assets/css/hifis.scss b/assets/css/hifis.scss
index 1804c0461..00315bf99 100644
--- a/assets/css/hifis.scss
+++ b/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";
diff --git a/services/index.md b/services/index.md
new file mode 100644
index 000000000..3b618d859
--- /dev/null
+++ b/services/index.md
@@ -0,0 +1,25 @@
+---
+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>
-- 
GitLab