Improve cards layout on frontpage

- Only display the three most recent news entries on mobile
- Create an improved default image for news with default title images

_includes/cards/post_card_image.html

@@ -5,17 +5,19 @@
         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-img-overlay">

_layouts/frontpage.html

@@ -22,7 +22,12 @@
                 <h1>News</h1>
                 <div class="flex-cards">
                     {% for post in site.posts limit:5 %}
-                    {% include cards/post_card_image.html post = post %}
+                    {% 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>

assets/img/HIFIS_LOGO_news_cards.svg

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