Draft: Hook additional service page into services offered

    * Additional button that points to descriptions of the Helmholtz GitLab
    service.
    * Add some css to layout button next to the other services buttons on
    different devices.
    * Add some css to layout service page.
    * Add some dummy text to see how it looks like if text is included.

_includes/title_content/services.html

@@ -12,16 +12,19 @@
 
 </div>
 <div class="services-title-buttons">
-    <a href="{{ 'services/training' | relative_url }}" class="btn btn-success btn-lg">
+    <a href="{{ 'services/training' | relative_url }}" class="btn btn-success btn-lg service-button">
         <i class="fas fa-university"></i> Education &amp; Training
     </a>
-    <a href="{{ 'services#technology' | relative_url }}" class="btn btn-success btn-lg">
+    <a href="{{ 'services#technology' | relative_url }}" class="btn btn-success btn-lg service-button">
         <i class="fas fa-laptop-code"></i> Technology
     </a>
-    <a href="{{ 'services/consulting' | relative_url }}" class="btn btn-success btn-lg">
+    <a href="{{ 'services/consulting' | relative_url }}" class="btn btn-success btn-lg service-button">
         <i class="fas fa-chart-line"></i> Consulting
     </a>
-    <a href="{{ 'services#community' | relative_url }}" class="btn btn-success btn-lg">
+    <a href="{{ 'services#community' | relative_url }}" class="btn btn-success btn-lg service-button">
         <i class="fas fa-users"></i> Communities
     </a>
+    <a href="{{ 'services#helmholtzgitlab' | relative_url }}" class="btn btn-success btn-lg service-button">
+        <i class="fas fa-code-branch"></i> Helmholtz GitLab
+    </a>
 </div>

_layouts/services/index.html

@@ -106,6 +106,28 @@
                         </div>
                     </div>
                 </div>
+                <div class="alert alert-secondary" id="helmholtzgitlab">
+                    <div class="services-grid">
+                        <div class="text">
+                            <h2>Helmholtz GitLab</h2>
+                            <p>
+                                HIFIS Software offers a
+                                <a href="https://gitlab.hzdr.de/">Helmholtz-wide GitLab service</a>
+                                that is free-of-charge and available to all people affiliated with
+                                the Helmholtz Association and its partners.
+                                <a href="{{ 'services/helmholtzgitlab' | relative_url }}"><strong>More...</strong></a>
+                            </p>
+                            <h4>Talk to us</h4>
+                            {% include contact_us/mini.html %}
+                            {% include helpdesk/mini.html %}
+                        </div>
+                        <img
+                            src="{{ site.directory.images | relative_url }}adi-goldstein-mDinBvq1Sfg-unsplash.jpg"
+                            class="hide-on-mobile"
+                            alt="Symbolic image for Helmholtz GitLab Services."
+                        >
+                    </div>
+                </div>
             </article>
         </section>
     </main>

assets/css/services/gitlab-help-images.scss

+---
+---
+
+@import "boilerplate/breakpoints";
+
+.image-block {
+    display: flex;
+    padding: 1rem 0;
+    align-items: center;
+
+    div {
+        flex: 3 0 0;
+    }
+
+    .help-image {
+        padding: 1rem 2rem;
+        flex: 1 0 0;
+        max-width: 14rem; // needed for Chrome on large screens
+        min-height: 5rem; // needed for Firefox on small screens
+
+        &.right {
+            @include medium-is-tablet-plus {
+                order: 1
+            }
+        }
+    }
+
+    @include medium-is-phone {
+        flex-direction: column;
+    }
+}
+
+.image-attrib {
+    font-size: 0.8rem;
+    text-align: right;
+}

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

@@ -10,15 +10,38 @@
 }
 
 .services-title-buttons {
-    display:                grid;
-    grid-template-columns:  1fr 1fr;
+    display: grid;
+
+	grid-template-columns: repeat(4, 1fr);
+
+    .service-button {
+	    grid-column: span 2;
+	}
+    .service-button:nth-last-child(1):nth-child(odd) {
+        grid-column: 2 / span 2;
+    }
 
     @include medium-is-tablet {
-        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-template-columns: repeat(8, 1fr);
+
+        .service-button {
+            grid-column: span 2;
+        }
+
+        .service-button:nth-last-child(1):nth-child(odd) {
+             grid-column: 4 / span 2;
+        }
     }
 
     @include medium-is-phone {
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: repeat(4, 1fr);
+
+        .service-button {
+            grid-column: span 2;
+        }
+        .service-button:nth-last-child(1):nth-child(odd) {
+            grid-column: 2 / span 2;
+        }
     }
 
     a {

services/helmholtzgitlab.html

+---
+title: Helmholtz GitLab
+title_image: adi-goldstein-mDinBvq1Sfg-unsplash_shrinked.jpg
+layout: services/default
+author: none
+additional_css:
+    - services/gitlab-help-images.css
+excerpt: >-
+    HIFIS Software offers a Helmholtz-wide GitLab service
+    that is free-of-charge and available to all people affiliated with
+    the Helmholtz Association and its partners.
+---
+
+<p>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+    erat, sed diam voluptua. At vero eos et accusam et justo duo
+    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+    ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
+    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame
+</p>
+
+<h1>Features of Helmholtz GitLab Service</h1>
+
+<div class="image-block">
+    <img
+        class="help-image left"
+        alt="A software developer working with version control."
+        src="{{ site.directory.images | relative_url }}/services/undraw_version_control_9bpv.svg"
+    />
+    <div>
+        <h3>Version Control with Git</h3>
+        <p>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+            erat, sed diam voluptua. At vero eos et accusam et justo duo
+            dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+            ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
+            eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame
+        </p>
+    </div>
+</div>
+
+<div class="image-block">
+    <img
+        class="help-image right"
+        alt="A software developer working with GitLab."
+        src="{{ site.directory.images | relative_url }}/services/undraw_developer_activity_bv83.svg"
+    />
+    <div>
+        <h3>Project Management with GitLab</h3>
+        <p>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+            erat, sed diam voluptua. At vero eos et accusam et justo duo
+            dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+            ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
+            eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame
+        </p>
+    </div>
+</div>
+
+<div class="image-block">
+    <img
+        class="help-image left"
+        alt="A software developer monitoring some systems executing automated tasks."
+        src="{{ site.directory.images | relative_url }}/services/undraw_programming_2svr.svg"
+    />
+    <div>
+        <h3>GitLab Continuous Integration</h3>
+        <p>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+            erat, sed diam voluptua. At vero eos et accusam et justo duo
+            dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+            ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
+            eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame
+        </p>
+    </div>
+</div>
+
+<div class="image-block">
+    <img
+        class="help-image right"
+        alt="A container ship carrying some containers."
+        src="{{ site.directory.images | relative_url }}/services/undraw_Container_ship_ok1c.svg"
+    />
+    <div>
+        <h3>GitLab Container Registry</h3>
+        <p>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+            erat, sed diam voluptua. At vero eos et accusam et justo duo
+            dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+            ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
+            eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame
+        </p>
+    </div>
+</div>
+
+<div class="image-block">
+    <img
+        class="help-image left"
+        alt="A software developer with a pile of packages."
+        src="{{ site.directory.images | relative_url }}/services/undraw_deliveries_131a.svg"
+    />
+    <div>
+        <h3>GitLab Package Registry</h3>
+        <p>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+            erat, sed diam voluptua. At vero eos et accusam et justo duo
+            dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+            ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
+            eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame
+        </p>
+    </div>
+</div>
+
+<div class="image-block">
+    <img
+        class="help-image right"
+        alt="A software developer with a bookshelf with some books."
+        src="{{ site.directory.images | relative_url }}/services/undraw_Bookshelves_re_lxoy.svg"
+    />
+    <div>
+        <h3>GitLab Pages</h3>
+        <p>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+            erat, sed diam voluptua. At vero eos et accusam et justo duo
+            dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+            ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
+            eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame
+        </p>
+    </div>
+</div>
+
+<div class="image-block">
+    <img
+        class="help-image left"
+        alt="A helpdesk agent at his/her desk."
+        src="{{ site.directory.images | relative_url }}/services/undraw_feeling_proud_qne1.svg"
+    />
+    <div>
+        <h3>HIFIS Helpdesk</h3>
+        <p>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+            erat, sed diam voluptua. At vero eos et accusam et justo duo
+            dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+            ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
+            eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame
+
+            {% include contact_us/mini.html %}
+            {% include helpdesk/mini.html %}
+
+        </p>
+    </div>
+</div>
+
+<div class="image-attrib">Images by Katerina Limpitsouni via <a href="https://undraw.co/">undraw.co</a></div>