diff --git a/_includes/frontpage/event-card.html b/_includes/frontpage/event-card.html index 73cb8c8bfd44a9adeb127bdd7da668d536ff605d..accd7ad2481d0ed803f6b5b38af3687fcdd2a856 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 %} … {% endif %} + {{ card_text | slice: 0, 40 }} + {% if card_text.size > 40 %} … {% endif %} </p> {% endif %} diff --git a/_layouts/frontpage.html b/_layouts/frontpage.html index eef4964f3bbf91a3402c84e5e4b67872de0182ab..543a51a25f674c12efc444b732fddb571d608da3 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> 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 56f78500e7fa2fb319afc2c8894fa6ee32f26c38..a22bfaa906aae0fac62681cdb5ba561384fcdb46 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 7640df10dcbbdcc30b8703c1e0a18e3b8a8b86d2..938844905a59c4de37f470e1bfd18ca35d3f5036 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;