Increase number of news displayed on frontpage

- Redesign news cards
- Reduce border-radius

_includes/cards/post_card_image.html

@@ -18,11 +18,17 @@
 <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">
+        <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>
+                {{ include.post.categories[0] | capitalize }}
+            </span>
+        </div>
+        <div class="card-body">
             <h3 class="card-title">{{ include.post.title }}</h3>
         </div>
     </a>

_layouts/frontpage.html

@@ -12,7 +12,7 @@
 
         {%- include title_image.html content=title-content -%}
 
-        <div class="frontpage-jumbotron">
+        <div class="frontpage-wide-jumbotron">
             <section>
                 {% if page.notification.description and page.notification.title %}
                 {% include frontpage/notification.html
@@ -20,9 +20,9 @@
                             description=page.notification.description %}
                 {% endif %}
                 <h1>News</h1>
-                <div class="flex-content-wrapper">
-                    {% for post in site.posts limit:3 %}
-                    {% include frontpage/post-card.html post = post %}
+                <div class="flex-cards">
+                    {% for post in site.posts limit:5 %}
+                    {% include cards/post_card_image.html post = post %}
                     {% endfor %}
                 </div>
                 <a href="{{ 'news/' | relative_url }}" class="btn btn-outline-secondary">More</a>

_sass/_bootstrap_variables.scss

 @import "boilerplate/colors";
 
-$border-radius:    0.5rem;
+$border-radius:    0.25rem;
 
 $theme-colors: (
     "danger":       $color-helmholtz-health,

_sass/common/_article.scss

@@ -3,7 +3,7 @@ article {
 
     color:              $color-text;
     background-color:   $color-text-background;
-    border-radius:      1rem;
+    border-radius:      $border-radius;
     padding:            2rem;
 
     @include medium-is-phone {

_sass/common/_cards.scss

@@ -5,13 +5,23 @@
 
     margin-top: 1rem;
     margin-bottom: 1rem;
+
+    text-align: center;
 }
 
 .card {
-    width: 15rem;
+    @include drop-shadow;
 
+    width: 15rem;
     margin: 0.5rem;
-    margin: 0.5rem;
+
+    .badge {
+        @include drop-shadow(
+            $offset-x:  0.2rem,
+            $offset-y:  0.2rem,
+            $color:     rgba(black, 0.25)
+        );
+    }
 }
 
 .card-body {
@@ -22,6 +32,6 @@
 
 .card-img-equal {
     width: 100%;
-    height: 10rem;
+    height: 8rem;
     object-fit: cover;
 }

assets/css/frontpage.scss

 ---
 ---
 
+@import "bootstrap_variables";
 @import "boilerplate/colors";
 @import "boilerplate/mixins";
 @import "common/article";
@@ -111,6 +112,18 @@
     }
 }
 
+.frontpage-wide-jumbotron {
+    @extend .frontpage-jumbotron;
+
+    section > * {
+        margin-left:    auto;
+        margin-right:   auto;
+
+        max-width: fit-content;
+        max-width: -moz-fit-content;
+    }
+}
+
 .frontpage-mission-jumbotron {
     @extend .frontpage-jumbotron;