Merge branch 'fix-transition' into 'master'

Resolve "Fix transition in title_image.html"

See merge request hifis/hifis.net!29

_sass/boilerplate/_measurements.scss

@@ -36,8 +36,9 @@ $transition-slope-min-width:    3.65rem; /* ~73px (1) */
 
 /* --- header --- */
 $header-content-min-height:     $logo-min-height;
-$header-min-height:             $header-content-min-height
-                                + 2 * $document-top-margin
+$header-box-min-height:         $header-content-min-height
+                                + 2 * $document-top-margin;
+$header-min-height:             $header-box-min-height 
                                 + $transition-min-height;
 
 /* --- Title Image --- */

_sass/common/_title.scss

@@ -36,7 +36,7 @@ div#title {
         content:    "";
         display:    block;
 
-        @include respond-to-medium(height,  $header-content-min-height);
+        @include respond-to-medium(height,  $header-box-min-height);
     }
 
     img.bg-jumbotron {
@@ -59,7 +59,7 @@ div#title {
         }
 
         /*
-            Place margins large enough to avoid the content hitting
+            Place padding large enough to avoid the content hitting
             the transitions above and below.
         */
         padding-top:     3rem;
@@ -88,6 +88,7 @@ div#title {
 
         padding:    0;
         @include respond-to-medium(height, 40vh, 50vh, 60vh);
+
     }
 
     h1 {
@@ -95,7 +96,11 @@ div#title {
         @include respond-to-medium(font-size,   $title-image-text-size);
 
         /* Make sure the heading gets enough space if the title box is shared */
-        min-width:  40%;
+        min-width:      40%;
+
+        /* Reduce the amount of space required for the header part */
+        margin-bottom:  0;
+        margin-top:     0;
     }
 
     a {
@@ -111,6 +116,17 @@ div#title {
 
         /* Do not apply the mix-blend mode of the parent */
         isolation: isolate; 
+        
+        /* Properly overlapping the title content requires some extra work */
+        position:   absolute;
+        left:       0;
+
+        /* Rounding by the browser introduces an occasional 1px line 
+         * on bottom and right side. Drag in the transition to prevent this.
+         */
+        bottom:     -1px;
+        right:      -1px;
+        z-index:    100;
     }
 }