From 4e5e1c93e09cb89f77a2828b1b66ee4c63df0945 Mon Sep 17 00:00:00 2001
From: Tobias Huste <t.huste@hzdr.de>
Date: Tue, 27 Apr 2021 08:39:10 +0200
Subject: [PATCH] Improve layout of cards on frontpage

---
 _includes/frontpage/event-card.html |  4 ++--
 _layouts/frontpage.html             |  2 +-
 _sass/common/_cards.scss            |  2 +-
 assets/css/frontpage.scss           | 26 ++++++++++++++++++++++++++
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/_includes/frontpage/event-card.html b/_includes/frontpage/event-card.html
index 73cb8c8bf..accd7ad24 100644
--- a/_includes/frontpage/event-card.html
+++ b/_includes/frontpage/event-card.html
@@ -44,8 +44,8 @@
         {% if event.excerpt %}
         {% assign card_text = event.excerpt | strip_html %}
         <p class="card-text">
-            {{ card_text | slice: 0, 150 }}
-            {% if card_text.size > 150 %} &mldr; {% endif %}
+            {{ card_text | slice: 0, 40 }}
+            {% if card_text.size > 40 %} &mldr; {% endif %}
         </p>
         {% endif %}
 
diff --git a/_layouts/frontpage.html b/_layouts/frontpage.html
index eef4964f3..543a51a25 100644
--- a/_layouts/frontpage.html
+++ b/_layouts/frontpage.html
@@ -16,7 +16,7 @@
             <div class="info-col">
                 <div class="frontpage-jumbotron">
                         <h1><a href="{{ 'events' | relative_url }}"><i class="far fa-calendar-alt" aria-hidden="true"></i>&nbsp; Events</a></h1>
-                        <div class="flex-content-wrapper">
+                        <div class="flex-cards">
                             {% assign sorted_events = site.events | sort: "start.date" %}
                             {% assign today = "now" | date: "%Y-%m-%d" %}
                             {% assign has_upcoming_events = false %}
diff --git a/_sass/common/_cards.scss b/_sass/common/_cards.scss
index 56f78500e..a22bfaa90 100644
--- a/_sass/common/_cards.scss
+++ b/_sass/common/_cards.scss
@@ -12,7 +12,7 @@
 .card {
     @include drop-shadow;
 
-    width: 15rem;
+    width: 13rem;
     margin: 0.5rem;
 
     .badge {
diff --git a/assets/css/frontpage.scss b/assets/css/frontpage.scss
index 7640df10d..938844905 100644
--- a/assets/css/frontpage.scss
+++ b/assets/css/frontpage.scss
@@ -23,6 +23,32 @@
     }
 }
 
+.frontpage-card {
+    @include drop-shadow;
+
+    width:      13rem;
+    max-width:  13rem;
+    max-height: 9rem;
+
+    margin:     0.5rem;
+    border:     0;
+
+    color: black;
+
+    .card-body {
+        display:    flex;
+        flex-flow:  column nowrap;
+
+        .badge {
+            margin: 0.1rem;
+        }
+
+        a {
+            margin-top: auto;
+        }
+    }
+}
+
 .howto-col {
     display: grid;
     grid-template-columns: 1fr 1fr  1fr  1fr  1fr;
-- 
GitLab