Add new background color and transition to mission jumbotron

_layouts/frontpage.html

@@ -33,39 +33,48 @@
                 <a href="{{ 'news/' | relative_url }}" class="btn btn-outline-secondary">More</a>
             </section>
         </div>
-        <div class="frontpage-mission-jumbotron">
-            <section>
-                <div class="info-col">
-                    <div class="info-box">
-                        <a href="{% link index.md %}" class="btn btn-outline-light">
-                            <h3><i class="fas fa-user-plus" aria-hidden="true"></i>&nbsp; You & HIFIS</h3>
-                        </a>
-                        <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">
-                        <a href="{% link mission/index.md %}" class="btn btn-outline-light">
-                            <h3><i class="fas fa-atom" aria-hidden="true"></i>&nbsp; HIFIS Mission</h3>
-                        </a>
-                        <p>Strengthening and developing the ICT competences of the whole Helmholtz Association.</p>
-                    </div>
-                    <div class="info-box">
-                        <a href="{% link partners.md %}" class="btn btn-outline-light">
-                            <h3><i class="fas fa-globe-europe" aria-hidden="true"></i>&nbsp; HIFIS Partners</h3>
-                        </a>
-                        <p>Take a look at our partners, within the Helmholtz Association and throughout the World.</p>
-                    </div>
-                    <div class="info-box">
-                        <a href="{% link roadmap/index.md %}" class="btn btn-outline-light">
-                            <h3><i class="fas fa-road" aria-hidden="true"></i>&nbsp; Now & tomorrow - The HIFIS Roadmap</h3>
-                        </a>
-                        <p>Get the latest updates of the HIFIS roadmap, summarizing our goals for the months and years to come.
-</p>
+        <div class="transition-block">
+
+            {% include transition.html direction="top" %}
+            <div class="frontpage-mission-jumbotron">
+                <section>
+                    <div class="info-col">
+                        <div class="info-box">
+                            <a href="{% link index.md %}" class="btn btn-outline-primary">
+                                <h3><i class="fas fa-user-plus" aria-hidden="true"></i>&nbsp; You & HIFIS</h3>
+                            </a>
+                            <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">
+                            <a href="{% link mission/index.md %}" class="btn btn-outline-primary">
+                                <h3><i class="fas fa-atom" aria-hidden="true"></i>&nbsp; HIFIS Mission</h3>
+                            </a>
+                            <p>Strengthening and developing the ICT competences of the whole Helmholtz Association.</p>
+                        </div>
+                        <div class="info-box">
+                            <a href="{% link partners.md %}" class="btn btn-outline-primary">
+                                <h3><i class="fas fa-globe-europe" aria-hidden="true"></i>&nbsp; HIFIS Partners</h3>
+                            </a>
+                            <p>Take a look at our partners, within the Helmholtz Association and throughout the World.
+                            </p>
+                        </div>
+                        <div class="info-box">
+                            <a href="{% link roadmap/index.md %}" class="btn btn-outline-primary">
+                                <h3><i class="fas fa-road" aria-hidden="true"></i>&nbsp; Now & tomorrow - The HIFIS
+                                    Roadmap
+                                </h3>
+                            </a>
+                            <p>Get the latest updates of the HIFIS roadmap, summarizing our goals for the months
+                                andyears to
+                                come.</p>
+                        </div>
                     </div>
-                </div>
-            </section>
+                </section>
+            </div>
         </div>
-        
+
     </main>
 
     {% include footer.html %}

assets/css/frontpage.scss

@@ -35,13 +35,8 @@
         padding: 1rem;
     }
 
-    .btn-outline-light {
+    .btn-outline-primary {
         border: none;
-
-        &:focus,
-        &:hover {
-            color: $color-helmholtz-dark-blue;
-        }
     }
 }
 
@@ -99,7 +94,7 @@
     h1, h2, h3 {
         @include font-heading;
 
-        margin-top:     0.50rem;
+        margin-top:     0.55rem;
         margin-bottom:  0.25rem;
     }
 
@@ -133,15 +128,27 @@
     }
 }
 
+.transition-block {
+    filter: drop-shadow(-.1rem -.1rem .1rem rgba(0,0,0,0.1));
+
+    .transition_on_top {
+        margin-bottom: -1px;
+        .fill_right {
+            fill: lighten($color-helmoltz-gray, 55%);
+        }
+    }
+}
+
 .frontpage-mission-jumbotron {
     @extend .frontpage-jumbotron;
 
-    padding-top:    1rem;
-    padding-bottom: 1rem;
+    // Ensure that the base jumbotron always ends below the footer.
+    padding-bottom:     $transition-max-height;
+    margin-bottom:      -$transition-max-height;
 
-    position:           relative;
-    background-color:   $color-helmholtz-blue;
-    color:              white;
+    position:               relative;
+    background-color:       lighten($color-helmoltz-gray, 55%);
+    color:                  darken($color-helmoltz-gray, 20%);
 }
 
 .btn-logo {