Merge branch 'cherry-pick-transition' into 'master'

Adapt forgotten transition to the new way transitions work

See merge request hifis/hifis.net!24

_includes/title_image.html

@@ -40,6 +40,6 @@
         {% endif %}
     </div>
 
-    {% include transition.html %}
+    {% include transition.html direction="right" %}
 
 </div>

_sass/common/_title.scss

@@ -7,8 +7,11 @@
 
 
 div#title {
+
     position:               relative;
     min-height:             2rem;
+
+    color:                  $color-content-light-gray;
     background-color:       $color-helmholtz-blue;
 
     .location-info {
@@ -104,21 +107,10 @@ div#title {
         }
     }
 
-    /*
-        The transition element from the title image into the main body.
-        NOTE Mirrored along the top line so it reaches into the title image and
-        overlaps it instead of being placed below and going into the following
-        main content.
-    */
     .transition {
-//        @include rotate-180-offset-top;
-        @include rotate-180;
 
-        color: $color-content-light-gray;
-        position:   absolute;
-        right:      -1px; /* (1) */
-        bottom:     -1px; /* (1) */
-
-        /* (1) Drag in the transition to avoid 1px wide border artifacts. */
+        /* Do not apply the mix-blend mode of the parent */
+        isolation: isolate; 
     }
 }
+