Merge branch '9-display-more-news-entries-on-the-frontpage' into 'master'

Increase number of news displayed on frontpage

Closes #9

See merge request hifis/hifis.net!14

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

_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>

_sass/_bootstrap_variables.scss

 @import "boilerplate/colors";
 
-$border-radius:    0.5rem;
+$border-radius:    0.25rem;
 
 $theme-colors: (
     "danger":       $color-helmholtz-health,

_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 {

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

assets/css/frontpage.scss

 ---
 ---
 
+@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;
 

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>