Merge branch 'header-footer-helmholtz-cd' into 'master'

Rework handling of transitions

See merge request hifis/hifis.net!6

_includes/footer.html

@@ -5,7 +5,7 @@
 {% endif %}
 <footer class="footer">
 
-    {% include transition.html %}
+    {% include transition.html direction="top" %}
 
     <div id="footer-content-container">
 

_includes/header.html

@@ -66,6 +66,6 @@ See also:
 
     </div>
 
-    {% include transition.html %}
+    {% include transition.html direction="bottom"%}
 
 </header>

_includes/slope.svg

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<svg class="transition_block" viewbox="0 0 1 1" preserveAspectRatio="none"> 
+    <rect x="0" y="0" width="1" height="1" class="fill_left" style="stroke:none"/>
+</svg>
+
 <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
@@ -10,7 +15,8 @@
    version="1.1"
    viewBox="0 0 340 70"
    height="70"
-   width="340">
+   width="340"
+>
   <defs
      id="defs4646" />
   <metadata
@@ -25,15 +31,26 @@
       </cc:Work>
     </rdf:RDF>
   </metadata>
-
   <path
-     style="fill=currentColor; stroke:none;"
+     id="left_slope"
+     class="fill_left"
      d="m 0,0 v 70 h 230 c 10,0 20,0 30,-10 L 310,10 C 320,0 340,0 340,0 Z"
-     id="outer_slope" />
-     
+     style="stroke:none;" 
+  />
   <path
-     style="stroke:none;stroke-width:2"
+     id="inner_slope"
+     class="fill_slider"
      d="M 80,30 C 75,30 60,30 50,40 L 30,60 C 20,70 10,70 0,70 h 230 c 10,0 20,0 30,-10 l 30,-30 z"
-     class="fill_theme"
-     id="inner_slope" />
+     style="stroke:none;" 
+  />
+  <path
+     id="right_slope" 
+     class="fill_right"
+     d="M 340,70 H 230 c 10,0 20,0 30,-10 L 310,10 C 320,0 340,0 340,0 Z"
+     style="stroke:none"
+  />
+</svg>
+
+<svg class="transition_block" viewbox="0 0 1 1" preserveAspectRatio="none"> 
+    <rect x="0" y="0" width="1" height="1" class="fill_right" style="stroke:none"/>
 </svg>

_includes/transition.html

 
+{% comment %}
+    Transitions can either be on top or on the bottom of other design elements.
+    On the bottom they start on the left side  and slope out towards the center,
+    on the top of elements they slope in from the center towards the right.
 
-    <div class="transition modernizr-generatedcontent">
+    The parameter `direction` is required and can be either
+        * `bottom` / `left`
+        * `top` / `right`
+    to indicate where the transition should be.
+{% endcomment %}
+
+{% if include.direction == "left" or include.direction == "bottom" %}
+    <div class="transition_on_bottom modernizr-generatedcontent">
+        {% include slope.svg %}
+    </div>
+{% elsif include.direction == "right" or include.direction == "top" %}
+    <div class="transition_on_top modernizr-generatedcontent">
         {% include slope.svg %}
     </div>
+{% else %}
+    <!-- Included transition, but no valid direction was set. -->
+{% endif %}

_sass/boilerplate/_responsive.scss

@@ -46,4 +46,4 @@ $phone-scale:       0.6;
             #{$property}: #{$base_value * $phone-scale};
         }
     }
-}
\ No newline at end of file
+}

_sass/common/_footer.scss

@@ -8,15 +8,22 @@
     );
 
     .transition {
-        @include rotate-180;
-
+        position:       relative;
+        z-index:        0;
         color:          $color-helmholtz-blue;
         margin-bottom:  -1px; /* Drag in a bit to avoid rendering artifacts */
+
+        .fill_slider {
+            fill:       $color-helmholtz-green; 
+        }
     }
 
     #footer-content-container {
         @include width-full-content;
 
+        position:           relative;
+        z-index:            100;
+
         background-color:   $color-helmholtz-blue;
         color:              white;
 

_sass/common/_header.scss

@@ -122,10 +122,6 @@
     .transition {
         color:      white;
         margin-top: -1px;
-
-        .fill_theme {
-            fill:   $color-helmholtz-green;
-        }
     }
 }
 

_sass/common/_transitions.scss

@@ -15,10 +15,22 @@
 
     .transition {
         color: red;
-        .fill_theme {
+        .fill_slider {
             fill: blue;
         }
     }
+
+     alternative form with outlying slider:
+
+    .transition {
+       color: transparent;
+      .fill_slider {
+        fill: blue;
+      }
+      .fill_right {
+        color: red;
+      }
+    }
 */
 
 @mixin transition_heights {
@@ -30,7 +42,7 @@
 .transition {
     @include transition_heights;
 
-    display:            flex; /* (1) */
+    display:            flex;
     font-size:          0;
     z-index:            100;
     overflow:           hidden;
@@ -38,25 +50,44 @@
     background-color:   transparent;
 
     /* (1) Gets rid of pesky 1px lines that pop up occasionally */
+}
 
-    /* Create a pseudo-element that gets put before the slope svg */
-    &::before {
-        @include transition_heights;
-        @include respond-to-medium(width, 55vw, 50vw, 45vw);
 
-        content:            "";
-        display:            inline;
-        background-color:   currentColor;
-        margin-right:       -1px; /* (2) */
+.transition_on_bottom {
 
-        /* (2) Drag the following svg in by 1 px to avoid rendering artifacts */
-    }
+    @extend .transition;
+
+    .fill_right { fill:    none;            }
+    .fill_left  { fill:    currentColor;    }
+}
+
+.transition_on_top {
+
+    @extend .transition;
+
+    .fill_right { fill:    currentColor;    }
+    .fill_left  { fill:    none;            }
 }
 
 /* Used in the svg files that hold the transition paths */
 .transition_slope {
     @include transition_heights;
 
-    fill:   currentColor;
-    width:  auto;
+    fill:           none;
+    width:          auto;
+
+    /* Flex the other elements, not this one */
+    flex-shrink:    0;
+    flex-grow:      0;
+
+    /* Allow drawing in the transition blocks to the sides
+     * to prevent pixel artifacts */
+    margin-left:    -1px;
+    margin-right:   -1px;
+}
+
+.transition_block {
+    @include transition_heights;
+
+    width:  100%;
 }