Redesign post cards on frontpage

- Use default font instead of Hermann
- Reduce size by removing the image and some metainformation

_includes/cards/post_card.html

+{%- comment -%}
+
+This is a card displaying post title and date.
+Parameters:
+post: The post which sould be displayed on the card
+
+{%- endcomment -%}
+
+<div class="card {{ include.class }} bg-light">
+    <div class="card-header">
+        <span class="badge badge-secondary">
+            <i class="fas fa-calendar-day" aria-hidden="true"></i>
+            {{ include.post.data | date: "%d.&thinsp;%b.&thinsp;%y" }}
+        </span>
+    </div>
+    <div class="card-body">
+        <a href="{{ include.post.url | relative_url }}" class="stretched-link">
+            <h4 class="card-title">{{ include.post.title }}</h4>
+        </a>
+    </div>
+</div>

_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
-
+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 include.post.title_image == "default" %}
 {%- assign img_url = site.directory.images
@@ -18,24 +16,24 @@
     | relative_url -%}
 {%- endif -%}
 <div class="card {{ include.class }}">
-    <a href="{{ include.post.url | relative_url }}">
-        <img class="card-img-top card-img-equal" src="{{ img_url }}" alt="Title image">
-        <div class="card-img-overlay">
-            <span class="badge badge-secondary">
-                <i class="fas fa-calendar-day" aria-hidden="true"></i>
-                {{ include.post.data | date: "%d.&thinsp;%b.&thinsp;%y" }}
-            </span>
-            <span class="badge badge-dark">
-                <i class="fas fa-tag" aria-hidden="true"></i>
-                {%- for category in include.post.categories -%}
-                {%- unless site.languages contains category -%}
-                {{ category | capitalize }}
-                {%- endunless -%}
-                {%- endfor -%}
-            </span>
-        </div>
-        <div class="card-body">
-            <h3 class="card-title">{{ include.post.title }}</h3>
-        </div>
-    </a>
+    <img class="card-img-top card-img-equal" src="{{ img_url }}" alt="Title image">
+    <div class="card-img-overlay">
+        <span class="badge badge-secondary">
+            <i class="fas fa-calendar-day" aria-hidden="true"></i>
+            {{ include.post.data | date: "%d.&thinsp;%b.&thinsp;%y" }}
+        </span>
+        <span class="badge badge-dark">
+            <i class="fas fa-tag" aria-hidden="true"></i>&nbsp;
+            {%- for category in include.post.categories -%}
+            {%- unless site.languages contains category -%}
+            {{ category | capitalize }}
+            {%- endunless -%}
+            {%- endfor -%}
+        </span>
+    </div>
+    <div class="card-body">
+        <a href="{{ include.post.url | relative_url }}" class="stretched-link">
+            <h4 class="card-title">{{ include.post.title }}</h4>
+        </a>
+    </div>
 </div>

_layouts/frontpage.html

@@ -30,9 +30,9 @@
                     {%- assign class="hide-on-mobile" -%}
                     {%- endif -%}
                     {%- if post_translated -%}
-                    {%- include cards/post_card_image.html post=post_translated class=class -%}
+                    {%- include cards/post_card.html post=post_translated class=class -%}
                     {%- else -%}
-                    {%- include cards/post_card_image.html post=post class=class -%}
+                    {%- include cards/post_card.html post=post class=class -%}
                     {%- endif -%}
                     {%- endfor -%}
                 </div>

_sass/common/_cards.scss

@@ -25,8 +25,15 @@
 }
 
 .card-body {
-    h3 {
-        margin: 0 !important;
+    display:            flex;
+    justify-content:    center;
+    align-items:        center;
+    
+    padding: .5rem;
+
+    .card-title {
+        margin-bottom:  .5rem;
+        margin-top:     .5rem;
     }
 }