From cca66f581641bd54e3f51cb058b7d9c16010d088 Mon Sep 17 00:00:00 2001
From: Tobias Huste <t.huste@hzdr.de>
Date: Thu, 9 Jul 2020 14:24:47 +0200
Subject: [PATCH] Increase number of news displayed on frontpage

- Redesign news cards
- Reduce border-radius
---
 _includes/cards/post_card_image.html | 10 ++++++++--
 _layouts/frontpage.html              |  8 ++++----
 _sass/_bootstrap_variables.scss      |  2 +-
 _sass/common/_article.scss           |  2 +-
 _sass/common/_cards.scss             | 16 +++++++++++++---
 assets/css/frontpage.scss            | 13 +++++++++++++
 6 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/_includes/cards/post_card_image.html b/_includes/cards/post_card_image.html
index 25a0c4e1c..e1726b7b7 100644
--- a/_includes/cards/post_card_image.html
+++ b/_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>
diff --git a/_layouts/frontpage.html b/_layouts/frontpage.html
index 4c6b24541..462d4d9a5 100644
--- a/_layouts/frontpage.html
+++ b/_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>
diff --git a/_sass/_bootstrap_variables.scss b/_sass/_bootstrap_variables.scss
index 547a577f2..9ed0aecfb 100644
--- a/_sass/_bootstrap_variables.scss
+++ b/_sass/_bootstrap_variables.scss
@@ -1,6 +1,6 @@
 @import "boilerplate/colors";
 
-$border-radius:    0.5rem;
+$border-radius:    0.25rem;
 
 $theme-colors: (
     "danger":       $color-helmholtz-health,
diff --git a/_sass/common/_article.scss b/_sass/common/_article.scss
index 14a9ffa44..b40ef6861 100644
--- a/_sass/common/_article.scss
+++ b/_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 {
diff --git a/_sass/common/_cards.scss b/_sass/common/_cards.scss
index a89be0d46..04d03b8d1 100644
--- a/_sass/common/_cards.scss
+++ b/_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;
 }
diff --git a/assets/css/frontpage.scss b/assets/css/frontpage.scss
index 8fdc021d3..1c937ffb6 100644
--- a/assets/css/frontpage.scss
+++ b/assets/css/frontpage.scss
@@ -1,6 +1,7 @@
 ---
 ---
 
+@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;
 
-- 
GitLab