From cde1354f809974b157c90c178c0734305a5cd2d4 Mon Sep 17 00:00:00 2001 From: Karel Kroeze Date: Thu, 16 Jan 2025 13:44:03 +0100 Subject: [PATCH] clean up news/event cards, add hero version of news card --- _includes/author-list-item.html | 8 +++-- _includes/author-list.html | 4 +-- _includes/event-card.html | 4 +-- _includes/news-card.html | 28 +++++----------- _sass/_variables.scss | 4 +-- _sass/components/_news_card.scss | 56 ++++++++++++++++++++++++++++++++ index.html | 20 ++++++++---- 7 files changed, 91 insertions(+), 33 deletions(-) diff --git a/_includes/author-list-item.html b/_includes/author-list-item.html index c8bcba6937..07f19a67f0 100644 --- a/_includes/author-list-item.html +++ b/_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 }} {% else %} - <{{header}} class="author-list-item unresolved{% if header != header_style %} {{header_style}}{% endif %}" data-name="{{author}}">{{author}} + <{{header}} class="author-list-item{% unless include.no_links%} unresolved{% endunless %}{% if header != header_style %} {{header_style}}{% endif %}" data-name="{{author}}">{{author}} {% endif %} {%- endif -%} diff --git a/_includes/author-list.html b/_includes/author-list.html index 1d94b1c6e9..e821421c6b 100644 --- a/_includes/author-list.html +++ b/_includes/author-list.html @@ -14,7 +14,7 @@ {%- endif -%} {% if authors != nil %} -
+
{%- for author in authors -%} {%- if forloop.first != true -%} {% if forloop.length > 2 %},{%endif%}  @@ -22,7 +22,7 @@ and  {%- 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 %}
{% endif %} \ No newline at end of file diff --git a/_includes/event-card.html b/_includes/event-card.html index 9a4f0899ae..5636ad082d 100644 --- a/_includes/event-card.html +++ b/_includes/event-card.html @@ -61,10 +61,10 @@
{% if event.source %}
-
{{event.source}}
+
{{event.source}}
{% endif %} -
+
{% include datetime.html page=event %}
diff --git a/_includes/news-card.html b/_includes/news-card.html index 4a951b7729..d07579ed8f 100644 --- a/_includes/news-card.html +++ b/_includes/news-card.html @@ -10,7 +10,7 @@ {% endif %} {% endif %} - + {% if item.image %}

{{item.title}}

-
- {% if item.author -%} - {% assign profile = site.team | find: "title", item.author %} - {% assign id = profile.email | split: '@' | first | replace: '.', '-' %} - {{item.author}}, - {% endif -%} - {{item.date | date: "%B %e, %Y"}} - {%- if item.endDate %} - — {{item.endDate | date: "%B %e, %Y"}} - {%- endif %} -
+ {% if item.author | item.authors %} + {% include author-list.html page=item no_links='true' header_style='h6' %} + {% endif %}
- {% if item.introduction %} {% assign paragraphs = item.introduction - | split: "\n" %} {% for p in paragraphs %} -

- {{p}} -

- {% endfor %} {% else%} {{item.content | truncatewords: 50, '...'}} - {% endif %} + {% if item.introduction %} + {{item.introduction | markdownify | replace: '

', '__p__' | replace: '\n', '__p__' | strip_html | truncatewords: 100, '...' | replace: '__p__', '

'}} + {% else %} + {{item.content | replace: '

', '__p__' | strip_html | truncatewords: 100, '...' | replace: '__p__', '

'}} + {% endif %}

diff --git a/_sass/_variables.scss b/_sass/_variables.scss index f580fd2a92..1f2d580438 100644 --- a/_sass/_variables.scss +++ b/_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, ); diff --git a/_sass/components/_news_card.scss b/_sass/components/_news_card.scss index c0bd2ca3c3..1ccc261565 100644 --- a/_sass/components/_news_card.scss +++ b/_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; diff --git a/index.html b/index.html index d8c87f19da..0744212b03 100644 --- a/index.html +++ b/index.html @@ -46,11 +46,19 @@

Behavioural Data Science incubator

Latest updates

+ {% 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 %} +
- {% 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 %} -
{% include news-card.html %}
+ {% assign item = items[0] %} +
{% include news-card.html class="news-item-hero" %}
+
+ + + {% assign items = items | slice: 1, 4 %} +
+ {% for item in items %} +
{% include news-card.html %}
{% endfor %}
@@ -68,8 +76,8 @@

Upcoming Events

{% endif %} {% endfor %} {% assign sorted_events = filtered_events | sort_natural: "date" %} - {% for event in sorted_events limit:8 %} -
{% include event-card.html %}
+ {% for event in sorted_events limit:12 %} +
{% include event-card.html %}
{% endfor %}