clean up news/event cards, add hero version of news card

_includes/author-list-item.html

@@ -1,4 +1,8 @@
-{% assign profile = site.team | find: "title", author %}
+{% unless include.no_links %}
+    {% assign profile = site.team | find: "title", author %}
+{% else %}
+    {% assign profile = nil %}
+{% endunless %}
 {% assign header = include.header | default: "h4" %}
 {% assign header_style = include.header_style | default: header %}
 
@@ -10,6 +14,6 @@
     {% if author contains "!external" %} 
         <{{header}} class="author-list-item{% if header != header_style %} {{header_style}}{% endif %}">{{ author | remove: "!external" | strip }}</{{header}}>
     {% else %}
-        <{{header}} class="author-list-item unresolved{% if header != header_style %} {{header_style}}{% endif %}" data-name="{{author}}">{{author}}</{{header}}>
+        <{{header}} class="author-list-item{% unless include.no_links%} unresolved{% endunless %}{% if header != header_style %} {{header_style}}{% endif %}" data-name="{{author}}">{{author}}</{{header}}>
     {% endif %}
 {%- endif -%}

_includes/author-list.html

@@ -14,15 +14,15 @@
 {%- endif -%}
 
 {% if authors != nil %}
-<div class="author-list">
+<div class="author-list">    
     {%- for author in authors -%}
         {%- if forloop.first != true -%}
             <span class="{{header_style}}">{% if forloop.length > 2 %},{%endif%}&MediumSpace;</span>
             {%- if forloop.last -%}
                 <span class="{{header_style}}">and&MediumSpace;</span>
             {%- endif -%}
         {% endif %}
-        {% include author-list-item.html %}
+        {% include author-list-item.html no_links=include.no_links header=include.header header_style=include.header_style %}
     {% endfor %}
 </div>
 {% endif %}

_includes/event-card.html

@@ -61,10 +61,10 @@
         <div class="event-item-date-row">
             {% if event.source %}
             <div class="event-tags">
-                <div class="event-item-tag">{{event.source}}</div>
+                <div class="event-item-tag bg-primary text-white">{{event.source}}</div>
             </div>
             {% endif %}
-            <div class="event-item-date small text-muted">
+            <div class="event-item-date small text-bold">
                 {% include datetime.html page=event %}
             </div>
         </div>

_includes/news-card.html

@@ -10,7 +10,7 @@
     {% endif %}
 {% endif %}
 
-<a href="{% link {{item.path}} %}" class="news-item">
+<a href="{% link {{item.path}} %}" class="news-item mb-3 {{include.class}}">
     {% if item.image %}
     <div class="news-item-image-wrapper">
         <img
@@ -23,26 +23,16 @@
     <div class="news-item-content">
         <div class="news-item-title">
             <h3 id="news-title-{{item.title || slugify}}">{{item.title}}</h3>
-            <div class="small text-muted">
-                {% if item.author -%}
-                    {% assign profile = site.team | find: "title", item.author %}
-                    {% assign id = profile.email | split: '@' | first | replace: '.', '-' %}
-                    <a href="/team#{{id}}">{{item.author}}</a>, 
-                {% endif -%} 
-                {{item.date | date: "%B %e, %Y"}}
-                {%- if item.endDate %}
-                    — {{item.endDate | date: "%B %e, %Y"}}
-                {%- endif %}
-            </div>
+            {% if item.author | item.authors %}
+                {% include author-list.html page=item no_links='true' header_style='h6' %}
+            {% endif %}
         </div>
         <div class="news-item-text">
-            {% if item.introduction %} {% assign paragraphs = item.introduction
-                | split: "\n" %} {% for p in paragraphs %}
-                <p class="{% unless forloop.first %}text-muted{% endunless %}">
-                    {{p}}
-                </p>
-                {% endfor %} {% else%} {{item.content | truncatewords: 50, '...'}}
-                {% endif %}
+            {% if item.introduction %}
+                {{item.introduction | markdownify | replace: '<p>', '__p__' | replace: '\n', '__p__' | strip_html | truncatewords: 100, '...' | replace: '__p__', '<p>'}}
+            {% else %}
+                {{item.content | replace: '<p>', '__p__' | strip_html | truncatewords: 100, '...' | replace: '__p__', '<p>'}}
+            {% endif %}
         </div>
     </div>
     <div class="news-item-tags">

_sass/_variables.scss

@@ -62,6 +62,6 @@ $spacers: map-merge(
 $container-max-widths: (
     sm: 540px,
     md: 720px,
-    lg: 840px,
-    xl: 920px,
+    lg: 960px,
+    xl: 1280px,
 );

_sass/components/_news_card.scss

@@ -1,8 +1,64 @@
 @use "../variables";
+@use "sass:map";
+
+// remove additional item for breakpoints where it would create an additional row. 
+@media (min-width: map.get($container-max-widths, "md")) and (max-width: map.get($container-max-widths, "xl")) {
+    .news-items {
+        .col-md-4:nth-child(4) {
+            display: none;
+        }
+    }
+}
+
+@media (min-width: map.get($container-max-widths, "md")) {
+    a.news-item.news-item-hero {
+        display: grid; 
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: auto max-content;
+        column-gap: 1em;
+
+        .news-item-image-wrapper {
+            width: 100%;
+            height: 100%;
+            min-height: 300px;
+            max-height: 400px;
+            // min-height: 300px;
+
+            grid-column-start: 1;
+            grid-column-end: 2;
+            grid-row-start: 1;
+            grid-row-end: 3;
+        }
+        .news-item-image {
+            width: 100%;
+            height: 100%;
+        }
+
+        .news-item-content {
+            height: min-content;
+
+            grid-column-start: 2;
+            grid-column-end: 3;
+            grid-row-start: 1;
+            grid-row-end: 2;
+        }
+
+        .news-item-tags {
+            grid-column-start: 2;
+            grid-column-end: 3;
+            grid-row-start: 2;
+            grid-row-end: 3;
+
+            align-content: flex-start;
+        }
+    }
+}
 
 a.news-item {
     text-decoration: unset;
     color: unset;
+    display: flex;
+    flex-flow: column nowrap;
 
     &:hover, &:focus {
         text-decoration: unset;

index.html

@@ -46,11 +46,19 @@
     <h1 class="sr-only">Behavioural Data Science incubator</h1>
 
     <h2 class="mt-6">Latest updates</h2>
+    {% 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 %} 
+
     <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 %} 
-        {% for item in items limit:3 %}
-            <div class="col-12 col-md-4">{% include news-card.html %}</div>
+        {% assign item = items[0] %}
+        <div class="col-12">{% include news-card.html class="news-item-hero" %}</div>
+    </div>
+
+
+    {% assign items = items | slice: 1, 4 %} 
+    <div class="row news-items">
+        {% for item in items %}
+            <div class="col-12 col-md-4 col-xl-3">{% include news-card.html %}</div>
         {% endfor %}
     </div>
 
@@ -68,8 +76,8 @@ <h2 class="mt-6">Upcoming Events</h2>
         {% endif %}
     {% endfor %}
     {% assign sorted_events = filtered_events | sort_natural: "date" %}
-    {% for event in sorted_events limit:8 %}
-        <div class="col-12 col-md-6">{% include event-card.html %}</div>    
+    {% for event in sorted_events limit:12 %}
+        <div class="col-12 col-md-6 col-xl-4">{% include event-card.html %}</div>    
     {% endfor %}
     </div>