diff --git a/_includes/cards/post_card.html b/_includes/cards/post_card.html
index df711e4c878b54d9eea333b4fa313952ea09f2a9..8fc0f54a94966c262c93f622758c9ca8e5374df1 100644
--- a/_includes/cards/post_card.html
+++ b/_includes/cards/post_card.html
@@ -5,17 +5,31 @@ Parameters:
post: The post which sould be displayed on the card
{%- endcomment -%}
-
-<div class="card {{ include.class }} bg-light">
- <div class="card-header">
- <span class="badge badge-secondary">
- <i class="fas fa-calendar-day" aria-hidden="true"></i>
- {{ include.post.data | date: "%d. %b. %y" }}
- </span>
- </div>
- <div class="card-body">
- <a href="{{ include.post.url | relative_url }}" class="stretched-link">
- <h4 class="card-title">{{ include.post.title }}</h4>
- </a>
+{%- if include.post.title_image == "default" %}
+{%- assign img_url = site.directory.images
+ | append: 'HIFIS_LOGO_news_cards_equal.svg'
+ | strip
+ | relative_url -%}
+{%- else -%}
+{%- assign img_url = site.directory.large_images
+ | append: "phone/"
+ | append: include.post.title_image
+ | strip
+ | relative_url -%}
+{%- endif -%}
+<div class="card image-card bg-primary">
+ <img src="{{ img_url }}" class="card-img" alt="Title image for {{ post.title }}">
+ <div class="card-img-overlay">
+ <div class="card-title">
+ <span class="badge badge-secondary">
+ <i class="fas fa-calendar-day" aria-hidden="true"></i>
+ {{ include.post.data | date: "%d. %b. %y" }}
+ </span>
+ </div>
+ <div class="card-text">
+ <a href="{{ include.post.url | relative_url }}" class="stretched-link">
+ <h4>{{ include.post.title }}</h4>
+ </a>
+ </div>
</div>
</div>
diff --git a/_sass/common/_cards.scss b/_sass/common/_cards.scss
index 25572dde3055647f2c82fdaeb079aa583c088194..cbbac597ccff141c2a9bc52335980348ecee4278 100644
--- a/_sass/common/_cards.scss
+++ b/_sass/common/_cards.scss
@@ -42,3 +42,42 @@
height: 8rem;
object-fit: cover;
}
+
+.image-card {
+ @include drop-shadow;
+
+ max-height: 9rem;
+
+ border: 0;
+
+ .card-text {
+ text-shadow: 2px 2px 8px black;
+ }
+
+ .card-img {
+ height: 100%;
+ width: 100%;
+ object-fit: cover;
+
+ mix-blend-mode: hard-light;
+ filter: brightness(50%);
+ }
+
+ .card-img-overlay {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ }
+
+ a {
+ color: white;
+
+ &:hover {
+ color: $color-helmholtz-bright-blue;
+ }
+ }
+
+ h4 {
+ margin: 0;
+ }
+}
diff --git a/assets/css/frontpage.scss b/assets/css/frontpage.scss
index 4cd6fdd18a95ede49359c3b4cb94717d114b5f69..3af80f38c450d97abe24112369e4354efbf17414 100644
--- a/assets/css/frontpage.scss
+++ b/assets/css/frontpage.scss
@@ -40,41 +40,6 @@
}
}
-.frontpage-card {
- @include drop-shadow;
-
- width: 15rem;
- max-width: 15rem;
-
- margin: 1rem;
-
- color: black;
-
- .card-body {
- display: flex;
- flex-flow: column nowrap;
-
- .badge {
- margin: 0.1rem;
- }
-
- a {
- margin-top: auto;
- }
- }
-}
-
-.frontpage-image-card {
- @extend .frontpage-card;
-
- @include drop-shadow(
- $color: rgba(black, 0.5)
- );
-
- color: white;
- background-color: black;
-}
-
.frontpage-jumbotron {
padding-right: 0;
padding-left: 0;
diff --git a/assets/img/HIFIS_LOGO_news_cards_equal.svg b/assets/img/HIFIS_LOGO_news_cards_equal.svg
new file mode 100644
index 0000000000000000000000000000000000000000..348bd290d9f21024ff53aa7a747b74dbad84b1a1
--- /dev/null
+++ b/assets/img/HIFIS_LOGO_news_cards_equal.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="850" height="850" enable-background="new 0 0 891.381 302.875" version="1.1" viewBox="0 0 850 850" 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(.61541 0 0 1.2025 41.076 65.834)" gradientUnits="userSpaceOnUse"><stop stop-color="#0a2d6e" offset="0"/><stop stop-color="#005aa0" stop-opacity="0" offset="1"/></linearGradient></defs>
+<rect width="850" height="850" fill="url(#linearGradient1028)" stroke-miterlimit="10" stroke-width="0" style="paint-order:normal"/>
+<g transform="matrix(2.0517 0 0 2.0517 289.55 319.98)"><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>