diff --git a/_includes/cards/post_card_image.html b/_includes/cards/post_card_image.html
index 25a0c4e1c0ce498f73a15d53d6893c987f73d2db..b20f01b5b814c413feef1fb885fa46ff66307512 100644
--- a/_includes/cards/post_card_image.html
+++ b/_includes/cards/post_card_image.html
@@ -5,24 +5,32 @@
post: The post which sould be displayed on the card
{%- endcomment -%}
-{%- if post.title_image == "default" %}
-{%- assign image = 'hifis_page_title_background.jpg'-%}
+{%- if include.post.title_image == "default" %}
+{%- assign img_url = site.directory.images
+ | append: 'HIFIS_LOGO_news_cards.svg'
+ | strip
+ | relative_url -%}
{%- else -%}
-{%- assign image = post.title_image -%}
-{%- endif -%}
{%- assign img_url = site.directory.large_images
| append: "phone/"
- | append: image
+ | append: include.post.title_image
| strip
| relative_url -%}
-<div class="card">
+{%- endif -%}
+<div class="card {{ include.class }}">
<a href="{{ include.post.url | relative_url }}">
<img class="card-img-top card-img-equal" src="{{ img_url }}" alt="Title image">
- <div class="card-body">
- <span class="badge badge-pill badge-secondary">
+ <div class="card-img-overlay">
+ <span class="badge badge-secondary">
<i class="fas fa-calendar-day" aria-hidden="true"></i>
{{ include.post.data | date: "%d. %b. %y" }}
</span>
+ <span class="badge badge-dark">
+ <i class="fas fa-tag" aria-hidden="true"></i>
+ {{ include.post.categories[0] | capitalize }}
+ </span>
+ </div>
+ <div class="card-body">
<h3 class="card-title">{{ include.post.title }}</h3>
</div>
</a>
diff --git a/_layouts/frontpage.html b/_layouts/frontpage.html
index 4c6b24541376ecd7ba37a6ef7e0cdf75941f0f23..211f2680a8f35de5961e316ad383efa53ffc2520 100644
--- a/_layouts/frontpage.html
+++ b/_layouts/frontpage.html
@@ -12,7 +12,7 @@
{%- include title_image.html content=title-content -%}
- <div class="frontpage-jumbotron">
+ <div class="frontpage-wide-jumbotron">
<section>
{% if page.notification.description and page.notification.title %}
{% include frontpage/notification.html
@@ -20,9 +20,14 @@
description=page.notification.description %}
{% endif %}
<h1>News</h1>
- <div class="flex-content-wrapper">
- {% for post in site.posts limit:3 %}
- {% include frontpage/post-card.html post = post %}
+ <div class="flex-cards">
+ {% for post in site.posts limit:5 %}
+ {% if forloop.index < 4 -%}
+ {% assign class="" %}
+ {% else -%}
+ {% assign class="hide-on-mobile" %}
+ {% endif -%}
+ {% include cards/post_card_image.html post=post class=class %}
{% endfor %}
</div>
<a href="{{ 'news/' | relative_url }}" class="btn btn-outline-secondary">More</a>
diff --git a/_sass/_bootstrap_variables.scss b/_sass/_bootstrap_variables.scss
index 547a577f2d7d0a1fc37558bc420ce66821553dfa..9ed0aecfbad94270d0bd462dc0eebaa3bca22f80 100644
--- a/_sass/_bootstrap_variables.scss
+++ b/_sass/_bootstrap_variables.scss
@@ -1,6 +1,6 @@
@import "boilerplate/colors";
-$border-radius: 0.5rem;
+$border-radius: 0.25rem;
$theme-colors: (
"danger": $color-helmholtz-health,
diff --git a/_sass/common/_article.scss b/_sass/common/_article.scss
index 14a9ffa443956617702cb6b96f067968f9c6021d..b40ef68613ac12a8d8ecd405d45c67a21811a7be 100644
--- a/_sass/common/_article.scss
+++ b/_sass/common/_article.scss
@@ -3,7 +3,7 @@ article {
color: $color-text;
background-color: $color-text-background;
- border-radius: 1rem;
+ border-radius: $border-radius;
padding: 2rem;
@include medium-is-phone {
diff --git a/_sass/common/_cards.scss b/_sass/common/_cards.scss
index a89be0d463a16bdb0a3063d31b926ccd593f98ec..04d03b8d1da9143f4f331a6f4cee0d94a2712a12 100644
--- a/_sass/common/_cards.scss
+++ b/_sass/common/_cards.scss
@@ -5,13 +5,23 @@
margin-top: 1rem;
margin-bottom: 1rem;
+
+ text-align: center;
}
.card {
- width: 15rem;
+ @include drop-shadow;
+ width: 15rem;
margin: 0.5rem;
- margin: 0.5rem;
+
+ .badge {
+ @include drop-shadow(
+ $offset-x: 0.2rem,
+ $offset-y: 0.2rem,
+ $color: rgba(black, 0.25)
+ );
+ }
}
.card-body {
@@ -22,6 +32,6 @@
.card-img-equal {
width: 100%;
- height: 10rem;
+ height: 8rem;
object-fit: cover;
}
diff --git a/assets/css/frontpage.scss b/assets/css/frontpage.scss
index 8fdc021d3764b027a4870f869cfbeff8457c5cda..1c937ffb6873ed5462b375cb11818cc9d58200b0 100644
--- a/assets/css/frontpage.scss
+++ b/assets/css/frontpage.scss
@@ -1,6 +1,7 @@
---
---
+@import "bootstrap_variables";
@import "boilerplate/colors";
@import "boilerplate/mixins";
@import "common/article";
@@ -111,6 +112,18 @@
}
}
+.frontpage-wide-jumbotron {
+ @extend .frontpage-jumbotron;
+
+ section > * {
+ margin-left: auto;
+ margin-right: auto;
+
+ max-width: fit-content;
+ max-width: -moz-fit-content;
+ }
+}
+
.frontpage-mission-jumbotron {
@extend .frontpage-jumbotron;
diff --git a/assets/img/HIFIS_LOGO_news_cards.svg b/assets/img/HIFIS_LOGO_news_cards.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fb503310b96c53a0c792776338e8235c9c8e6a1d
--- /dev/null
+++ b/assets/img/HIFIS_LOGO_news_cards.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="850" height="453.33" enable-background="new 0 0 891.381 302.875" version="1.1" viewBox="0 0 850 453.33" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><defs><linearGradient id="linearGradient1028" x1="-66.746" x2="3562.6" y1="652.13" y2="-1196.9" gradientTransform="matrix(.61367 0 0 .64607 42.281 36.751)" gradientUnits="userSpaceOnUse"><stop stop-color="#0a2d6e" offset="0"/><stop stop-color="#005aa0" stop-opacity="0" offset="1"/></linearGradient></defs>
+<rect x="1.321" y="1.3802" width="847.6" height="456.69" fill="url(#linearGradient1028)" stroke-miterlimit="10" stroke-width="0" style="paint-order:normal"/>
+<g transform="matrix(2.0517 0 0 2.0517 289.55 200.9)"><g fill="none" stroke="#8cb423" stroke-miterlimit="10" stroke-width="2.4017"><line x1="35.044" x2="67.45" y1="61.583" y2="76.598"/><line x1="7.784" x2="67.45" y1="71.883" y2="76.598"/><line x1="58.434" x2="71.617" y1="31.108" y2="97.573"/><line x1="58.434" x2="28.284" y1="31.108" y2="94.03"/><line x1="28.284" x2="127.24" y1="94.03" y2="50.078"/><line x1="58.434" x2="127.24" y1="31.108" y2="50.078"/></g><g transform="translate(-100.98 -99.673)">
+ <path d="m214.64 201.71h-88.769c-13.725 0-24.892-11.166-24.892-24.891 0-13.726 11.167-24.892 24.892-24.892 1.977 0 3.922 0.233 5.821 0.695 3.414-17.172 18.611-29.995 36.577-29.995 3.412 0 6.772 0.461 10.03 1.372 6.854-13.72 20.711-22.652 36.236-23.066l0.207 7.727c-13.656 0.363-25.726 8.815-30.751 21.532l-1.413 3.577-3.584-1.397c-3.431-1.337-7.039-2.015-10.726-2.015-15.593 0-28.555 12.182-29.508 27.732l-0.351 5.719-5.171-2.467c-2.343-1.117-4.822-1.685-7.369-1.685-9.463 0-17.161 7.698-17.161 17.162 0 9.463 7.698 17.161 17.161 17.161h88.769v7.731z" fill="#fff"/>
+</g><g stroke-miterlimit="10"><path d="m31.824 94.137c-0.076 1.957-1.722 3.494-3.678 3.435-1.954-0.06-3.479-1.692-3.403-3.651 0.077-1.956 1.723-3.49 3.678-3.432 1.956 0.06 3.479 1.692 3.403 3.648z" fill="#005aa0" stroke="#fff" stroke-width="2.5148"/><line x1="113.76" x2="127.24" y1="4.801" y2="50.078" fill="none" stroke="#8cb423" stroke-width="2.4017"/><line x1="113.76" x2="67.45" y1="4.801" y2="76.598" fill="none" stroke="#8cb423" stroke-width="2.4017"/><path d="m117.3 4.907c-0.076 1.957-1.722 3.494-3.678 3.435-1.954-0.06-3.479-1.692-3.403-3.651 0.077-1.956 1.723-3.49 3.678-3.432 1.956 0.06 3.479 1.693 3.403 3.648z" fill="#005aa0" stroke="#fff" stroke-width="2.5148"/><line x1="58.434" x2="112.62" y1="31.108" y2="97.573" fill="none" stroke="#8cb423" stroke-width="2.4017"/><line x1="127.24" x2="112.62" y1="50.078" y2="97.573" fill="none" stroke="#8cb423" stroke-width="2.4017"/><path d="m61.975 31.215c-0.076 1.957-1.722 3.494-3.678 3.435-1.954-0.06-3.479-1.692-3.403-3.651 0.077-1.956 1.723-3.49 3.678-3.432 1.955 0.06 3.478 1.693 3.403 3.648z" fill="#005aa0" stroke="#fff" stroke-width="2.5148"/><path d="m130.78 50.184c-0.076 1.957-1.722 3.494-3.678 3.435-1.954-0.06-3.479-1.692-3.403-3.651 0.077-1.956 1.723-3.49 3.678-3.432 1.955 0.061 3.478 1.693 3.403 3.648z" fill="#005aa0" stroke="#fff" stroke-width="2.5148"/><line x1="67.45" x2="112.62" y1="76.598" y2="97.573" fill="none" stroke="#8cb423" stroke-width="2.4017"/><path d="m70.991 76.705c-0.076 1.957-1.722 3.494-3.678 3.435-1.954-0.06-3.479-1.692-3.403-3.651 0.077-1.956 1.723-3.49 3.678-3.432 1.955 0.06 3.478 1.693 3.403 3.648z" fill="#005aa0" stroke="#fff" stroke-width="2.515"/><path d="m116.16 97.68c-0.076 1.957-1.722 3.494-3.678 3.435-1.954-0.06-3.479-1.692-3.403-3.651 0.077-1.956 1.723-3.49 3.678-3.432 1.955 0.06 3.478 1.692 3.403 3.648z" fill="#005aa0" stroke="#fff" stroke-width="2.5148"/></g></g></svg>