tweak tags location on event template

_includes/event-card.html

@@ -0,0 +1,73 @@
+{% assign title_lower = event.title | downcase %}
+{% assign event_image = event.image %}
+{% if event.path %}
+    {% capture event_path %}{% link {{event.path}} %}{% endcapture %}
+{% else %}
+    {% assign event_path = false %}
+{% endif %}
+{% if event.image %}
+    {% assign event_image = event.image %}
+{% else %}
+    {% assign event_image = false %}
+{% endif %}
+
+{% unless event_path %}
+    {% if event.url %}
+        {% assign event_path = event.url %}
+    {% endif %}
+{% endunless %}
+
+{% unless event_path %}
+    {% if title_lower contains "bdsi walk-in hour" %}
+        {% capture event_path %}{% link research.html %}#walk-in-hours{% endcapture %}
+        {% assign event_image = "assets/images/open-hour-header.png" %}
+    {% endif %}
+{% endunless %}
+
+{% unless event_path %}
+    {% for community in site.communities %}
+        {% for keyword in community.keywords %}
+            {% assign keyword_lower = keyword | downcase %}
+            {% if title_lower contains keyword_lower %}
+                {% capture event_path %}{% link {{ community.path }} %}{% endcapture %}  
+                {% assign event_image = event.image | default: community.image %}
+            {% endif %}
+        {% endfor %}
+    {% endfor %}
+{% endunless %}
+
+{% unless event_path %}
+    {% assign event_path = "#" %}
+{% endunless %}
+
+{% unless event_image %}
+    {% if event.img_url %}
+        {% assign event_image = event.img_url %}
+    {% elsif event.image %}
+        {% capture event_image %}{% link {{event.image}} %}{% endcapture %}
+    {% endif %}
+{% endunless %}
+
+{% unless event_image %}
+    {% assign event_image = "assets/images/calendar-blank.png" %}
+{% endunless %}
+
+
+<a href="{{event_path}}" title="{{event.title}}" class="event-item">
+    <div class="event-item-image-wrapper">
+        <img src="{{event_image}}" alt="{{event.image_alt}}" class="event-item-image">
+    </div>
+    <div class="event-item-content">
+        <div class="event-item-date-row">
+            {% if event.source %}
+            <div class="event-tags">
+                <div class="event-item-tag">{{event.source}}</div>
+            </div>
+            {% endif %}
+            <div class="event-item-date small text-muted">
+                {% include datetime.html page=event %}
+            </div>
+        </div>
+        <h3 class="event-item-title h5">{{event.title}}</h3>
+    </div>
+</a>

_sass/components/_event_card.scss

@@ -0,0 +1,82 @@
+@use "../variables";
+
+a.event-item {
+    text-decoration: unset;
+    color: unset;
+
+    &:hover, &:focus {
+        text-decoration: unset;
+        filter: unset;
+    }
+}
+
+.event-item {
+    display: flex;
+    flex-flow: row nowrap;
+    margin-bottom: 1em;
+
+    .event-item-image-wrapper {
+        display: flex;
+        flex-flow: row nowrap;
+        flex: 0 0 auto;        
+        height: 64px;
+        width: 64px;
+        overflow: hidden;
+        border-radius: 4px;
+        background-color: #ddd;
+    }
+
+    .event-item-image { 
+        margin-bottom: 1em;
+        height: 100%;
+        width: 100%;
+        object-fit: cover;        
+        transition: transform 0.3s;
+    }
+
+    &:hover .event-item-image {
+        transform: scale(1.1);
+    }
+
+    .event-item-title {
+        margin: 0;
+    }
+
+    .event-item-date-row {
+        display: flex; 
+        flex-flow: row nowrap;
+        gap: 0.5em;
+
+        align-content: center;
+        align-items: baseline;
+    }
+
+    .event-item-tags {
+        display: flex;
+        flex-flow: row wrap;
+        width: 100%;
+        gap: 0.2em;
+        flex-grow: 0;
+        flex-basis: content;
+    }
+
+    .event-item-content {
+        display: flex; 
+        flex-flow: column nowrap;
+        justify-content: flex-start;
+        padding: 0 0.5em;
+    }
+
+    .event-item-tag {
+        padding: 0.4em 0.6em 0.2em;
+        border-radius: 4px;
+        text-transform: uppercase;
+
+        color: $dark;
+        font-size: 70%;
+        font-weight: lighter;
+        background-color: #eee;
+
+        white-space: nowrap;
+    }
+}

_sass/components/_news_card.scss

@@ -58,6 +58,7 @@ a.news-item {
         padding: 0.4em 0.6em 0.2em;
         border-radius: 4px;
         text-transform: uppercase;
+        white-space: nowrap;
 
         color: $dark;
         font-size: 70%;

index.html

@@ -45,7 +45,7 @@
     <!-- % include find-expertise.html %} -->
     <h1 class="sr-only">Behavioural Data Science incubator</h1>
 
-    <h2 class="mt-2">Latest updates</h2>
+    <h2 class="mt-6">Latest updates</h2>
     <div class="row news-items">
         {% capture currentDate %}{{- site.time | date: "%B %e, %Y" -}}{% endcapture %}
         {% assign items = site.events | concat: site.news | concat: site.blogs | where: "frontpage", true | sort: "date" | reverse %} 
@@ -54,15 +54,17 @@ <h2 class="mt-2">Latest updates</h2>
         {% endfor %}
     </div>
 
-    <h2 class="mt-2">Upcoming Events</h2>
+    <h2 class="mt-6">Upcoming Events</h2>
     <div class="row event-items">
     {% capture renderDate %}{{- site.time | date: "%Y-%m-%d" -}}{% endcapture %}
     {% assign events = site.data.calendar | concat: site.events | concat: site.data.bmslab_events | concat: site.data.dsi_events | concat: site.data.dcc_events %}
     {% assign filtered_events = '' | split: '' %}
     {% for event in events %}
         {% capture startDate %}{{- event.date | date: "%Y-%m-%d" -}}{% endcapture %}
         {% if startDate >= renderDate %}
-            {% assign filtered_events = filtered_events | push: event %}
+            {% unless event.title contains "Walk-in Hour" %}
+                {% assign filtered_events = filtered_events | push: event %}
+            {% endunless %}
         {% endif %}
     {% endfor %}
     {% assign sorted_events = filtered_events | sort_natural: "date" %}