Redesign frontpage according to mockup

_includes/frontpage/title-content.html

+<div>
+    <h1>HIFIS Mission</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.</p>
+</div>
+<div class="services-box">
+    <div class="services-title-buttons">
+        <a href="#" class="btn btn-light btn-lg text-dark">
+            <i class="fas fa-cloud"></i> Helmholtz Cloud
+        </a>
+        <a href="https://software.hifis.net" class="btn btn-light btn-lg text-dark">
+            <i class="fas fa-laptop-code"></i> Helmholtz Software
+        </a>
+        <a href="#" class="btn btn-light btn-lg text-dark">
+            <i class="fas fa-question"></i> Support
+        </a>
+        <a href="#" class="btn btn-light btn-lg text-dark">
+            <i class="fas fa-location-arrow"></i> Contact
+        </a>
+    </div>
+</div>

_layouts/frontpage.html

@@ -6,16 +6,20 @@
 
     <main>
 
-        {% include title_image.html %}
+        {% capture title-content %}
+        {% include frontpage/title-content.html %}
+        {% endcapture %}
+
+        {%- include title_image.html content=title-content -%}
 
         <div class="frontpage-jumbotron">
             <section>
                 {% if page.notification.description and page.notification.title %}
-                    {% include frontpage/notification.html
+                {% include frontpage/notification.html
                             title=page.notification.title
                             description=page.notification.description %}
                 {% endif %}
-                <h1><i class="fas fa-blog" aria-hidden="true"></i>&nbsp; Latest posts</h1>
+                <h1>News</h1>
                 <div class="flex-content-wrapper">
                     {% for post in site.posts limit:3 %}
                     {% include frontpage/post-card.html post = post %}
@@ -25,18 +29,29 @@
             </section>
         </div>
         <div class="frontpage-mission-jumbotron">
-
             <section>
-                <h1>The Mission</h1>
-                <p class="lead">HIFIS Software Services' mission is to empower scientists of any domain to implement
-                    and
-                    to perpetuate modern scientific software development principles in order to
-                    make research software engineering more sustainable.</p>
-                <p>
-                    <a href="{{ 'faq' | relative_url }}" class="btn btn-outline-light">
-                        <i class="fas fa-question-circle" aria-hidden="true"></i> FAQ
-                    </a>
-                </p>
+                <div class="info-col">
+                    <div class="info-box">
+                        <h3><i class="fas fa-user-plus" aria-hidden="true"></i>&nbsp; You & HIFIS</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+                            labore et dolore magna aliqua.</p>
+                    </div>
+                    <div class="info-box">
+                        <h3><i class="fas fa-atom" aria-hidden="true"></i>&nbsp; HIFIS for Scientists</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+                            labore et dolore magna aliqua.</p>
+                    </div>
+                    <div class="info-box">
+                        <h3><i class="fas fa-globe-europe" aria-hidden="true"></i>&nbsp; HIFIS International</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+                            labore et dolore magna aliqua.</p>
+                    </div>
+                    <div class="info-box">
+                        <h3><i class="fas fa-road" aria-hidden="true"></i>&nbsp; Now & tomorrow - The HIFIS Roadmap</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+                            labore et dolore magna aliqua.</p>
+                    </div>
+                </div>
             </section>
         </div>
         <div class="frontpage-jumbotron">
@@ -47,21 +62,21 @@
                     {% assign today = "now" | date: "%Y-%m-%d" %}
                     {% assign has_upcoming_events = false %}
                     {% for event in sorted_events %}
-                        {% if event.start.date < today or
+                    {% if event.start.date < today or
                               event.registration_period.to < today %}
-                            {% continue %}
-                        {% else %}
-                            {% assign has_upcoming_events = true %}
-                        {% endif %}
-                        {% include frontpage/event-card.html
+                    {% continue %}
+                    {% else %}
+                    {% assign has_upcoming_events = true %}
+                    {% endif %}
+                    {% include frontpage/event-card.html
                               title = event.excerpt %}
                     {% endfor %}
                     {% if has_upcoming_events == false %}
-                        <article class="list-entry">
-                            <h1>
-                                There are no upcoming events right now ... stay tuned.
-                            </h1>
-                        </article>
+                    <article class="list-entry">
+                        <h1>
+                            There are no upcoming events right now ... stay tuned.
+                        </h1>
+                    </article>
                     {% endif %}
                 </div>
             </section>

assets/css/frontpage.scss

@@ -7,13 +7,33 @@
 
 #title {
 
+    h1 {
+        margin-bottom: 0;
+    }
+
     h2 {
         a {
             vertical-align:     middle;
         }
     }
+
+    p {
+        margin-top: 0;
+    }
 }
 
+.info-col {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+
+    @include medium-is-phone {
+        grid-template-columns: 1fr;
+    }
+
+    .info-box {
+        padding: 1rem;
+    }
+}
 
 .frontpage-card {
     @include drop-shadow;
@@ -94,8 +114,8 @@
 .frontpage-mission-jumbotron {
     @extend .frontpage-jumbotron;
 
-    padding-top:    3rem;
-    padding-bottom: 3rem;
+    padding-top:    1rem;
+    padding-bottom: 1rem;
 
     position:           relative;
     background-color:   $color-helmholtz-blue;

assets/css/title/service-title-buttons.scss

@@ -13,8 +13,12 @@
     display:                grid;
     grid-template-columns:  1fr 1fr;
 
+    @include medium-is-tablet {
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+
     @include medium-is-phone {
-        grid-template-columns: 1fr;
+        grid-template-columns: 1fr 1fr;
     }
 
     a {
@@ -29,6 +33,6 @@
         display:    flex;
         flex-flow:  column nowrap;
 
-        @include font-small;
+        @include font-small;   
     }
 }

index.md

 ---
-title: HIFIS Software Services
-title_image: default
+title: HIFIS - Helmholtz Federated IT Services
+title_image: milkovi-qGQIOLke2kE-unsplash.jpg
 layout: frontpage
 additional_css:
     - frontpage.css
     - title/service-title-buttons.css
-
 additional_js: frontpage.js
 excerpt:
-  "HIFIS Software aims to make research software engineering more
-  sustainable."
+  "HIFIS aims to provide excellent, seamlessly accessible IT services for the
+  whole Helmholtz Association."
 ---
 {% comment %}
   This markdown file triggers the generation of the frontpage.

scripts/create_jumbotron_variants.sh

+#! /usr/bin/env bash
+
+# ==============================================================================
+# title       : create_jumbotron_variants.sh
+# description : Iterates over all image files in a given folder and creates
+#               smaller variants of these according to given breakpoints.
+#               The smaller versions are sorted into subfolders according to the
+#               breakpoint they were generated for.
+# date        : 2019-11-07
+# requires    : Imagemagick v6 or compatible
+# usage       : $ bash ./scripts/create_jumbotron_variants assets/img/jumbotron/
+# parameters  : (1) path to the assets subfolder containing the jumbotron images
+#               to be processed.
+# notes       : The intention to outsource this script is to collect all shell
+#               scripts in a separate scripts folder instead of putting all
+#               scripts with all its length into the GitLab CI pipeline
+#               configuration yaml file.
+#               Beside that users can manually call this script as well.
+# ==============================================================================
+
+# Check if ImageMagick programs are available
+if ! [ -x "$(command -v identify)" ]
+then
+  echo 'ERROR: Command \"identify\" required (provided by imagemagick v6)' >&2
+  exit 1
+fi
+
+if ! [ -x "$(command -v convert)" ]
+then
+  echo 'ERROR: Command \"convert\" required (provided by imagemagick v6)' >&2
+  exit 1
+fi
+
+# Check whether $1 is sane
+if ! [ -d "$1" ]
+then
+    echo "ERROR: $1 was expected to be a valid directory" >&2
+    exit 1
+fi
+
+# The list of breakpoints for which to generate variants and their widths in px
+declare -A breakpoints=(\
+    ["phone"]="600"\
+    ["tablet"]="1200"\
+    ["desktop"]="1800"\
+    ["display_2k"]="2400"\
+)
+
+# From now on we work in the folder given by $1
+cd "$1" || exit
+
+for bp_name in "${!breakpoints[@]}"
+do echo "$bp_name - ${breakpoints[$bp_name]}"
+
+    # If the target folders do not exist, create them
+    if ! [ -d "$bp_name" ]
+    then
+        echo "Creating folder $bp_name"
+        mkdir "$bp_name"
+    fi
+
+done
+
+# Get all the images to convert (ignore subfolders)
+images=$(find . -maxdepth 1 -iregex ".*\.\(jpg\|gif\|png\|jpeg\|webp\)")
+
+for source_file in $images
+do
+    image_width=$(identify -format "%[fx:w]"  "$source_file")
+    echo "=== Processing $source_file (width = $image_width px) ==="
+
+    for bp_name in "${!breakpoints[@]}"
+    do
+        target_file=$bp_name/$source_file
+        target_width=${breakpoints[$bp_name]}
+
+        if [ "$image_width" -gt "$target_width" ]
+        then
+            # Do not overwrite existing files
+            if [ -f "$target_file" ]
+            then
+                echo "Skip $target_file (already exists)"
+                continue
+            else
+                # Create new version for this breakpoint
+                echo "Generating $target_file ($target_width px)"
+                convert "$source_file" -resize "$target_width" "$target_file"
+            fi
+        else
+            # Instead of upscaling, create a relative link to the original
+            echo "Creating link $target_file (Source smaller then target)"
+            ln -sr "$source_file" "$target_file"
+        fi
+    done
+done
+exit 0
+