Second iteration of news cards redesign

- Use image overlays for the cards
- Use mix-blend-mode to make contrast high enough
- Show post image if one is defined

_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.&thinsp;%b.&thinsp;%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.&thinsp;%b.&thinsp;%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>

_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;
+    }
+}

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;

assets/img/HIFIS_LOGO_news_cards_equal.svg

+<?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>