Merge branch 'optimize-card-layout' into 'hifis-unified-step-1-after-vc-20210317'

Improve layout of cards on frontpage

See merge request hifis/hifis.net!192

_includes/cards/event_card.html

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

_includes/frontpage/image-card.html

-
 {% if include.image_path %}
 {% assign image_path = site.directory.images | append: include.image_path %}
 {% assign url = include.url %}

_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 %}
@@ -27,8 +27,7 @@
                             {%   else %}
                             {%      assign has_upcoming_events = true %}
                             {%   endif %}
-                            {%   include frontpage/event-card.html
-                                title = event.excerpt %}                         
+                            {%   include cards/event_card.html event = event %}                         
                             {%  assign events_counter = events_counter|plus:1 %}
                             {%  if events_counter >= 3   %}
                             {%     break  %}

_sass/common/_cards.scss

@@ -12,8 +12,10 @@
 .card {
     @include drop-shadow;
 
-    width: 15rem;
+    width: 12rem;
     margin: 0.5rem;
+    height: 9rem;
+    border: 0;
 
     .badge {
         @include drop-shadow(
@@ -22,6 +24,12 @@
             $color:     rgba(black, 0.25)
         );
     }
+
+    .card-overlay {
+        display:            flex;
+        flex-direction:     column;
+        justify-content:    flex-start;
+    }
 }
 
 .card-body {