diff --git a/_includes/footer.html b/_includes/footer.html
index e4f17b5ec3a393f96fbaa9eaebd4b29b3d2fe502..7e7fcd957e636f307b7d5201166d3e1ba58cf3f9 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -5,7 +5,7 @@
{% endif %}
<footer class="footer">
- {% include transition.html %}
+ {% include transition.html direction="top" %}
<div id="footer-content-container">
diff --git a/_includes/header.html b/_includes/header.html
index 442a80cf14da6872e3b001ab2f22e14a137a9f09..c996713b771d027b61062de4a205a3cb3b10f69e 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -66,6 +66,6 @@ See also:
</div>
- {% include transition.html %}
+ {% include transition.html direction="bottom"%}
</header>
diff --git a/_includes/slope.svg b/_includes/slope.svg
index 888fff3b147a5da936fcd12f5614d4d4cbf3b48a..c11fd3fa7ca2acce03468064b7dd70fd3841838b 100644
--- a/_includes/slope.svg
+++ b/_includes/slope.svg
@@ -1,4 +1,9 @@
<?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>
diff --git a/_includes/transition.html b/_includes/transition.html
index 3b94a4258ba7618dace54acfe87313183193d454..194d9d9bcd5b4504dc088ace4a549f44c135065e 100644
--- a/_includes/transition.html
+++ b/_includes/transition.html
@@ -1,5 +1,23 @@
+{% 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 %}
diff --git a/_sass/boilerplate/_responsive.scss b/_sass/boilerplate/_responsive.scss
index 5d4c0fd2a410b000c01d351394f321d02edc3794..e8b70605813f600d2c7bb1393c77097af4b654f3 100644
--- a/_sass/boilerplate/_responsive.scss
+++ b/_sass/boilerplate/_responsive.scss
@@ -46,4 +46,4 @@ $phone-scale: 0.6;
#{$property}: #{$base_value * $phone-scale};
}
}
-}
\ No newline at end of file
+}
diff --git a/_sass/common/_footer.scss b/_sass/common/_footer.scss
index f7dfaa8688bfc9e021baf0ffb41b5b672757175e..4fe0bb6fce13b6752f17f8fadb771527758bde11 100644
--- a/_sass/common/_footer.scss
+++ b/_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;
diff --git a/_sass/common/_header.scss b/_sass/common/_header.scss
index f67ab35c3ffbd576e84398cf9a3c14254325d9cc..b58411d9f262035107c4e78849488d60345c614e 100644
--- a/_sass/common/_header.scss
+++ b/_sass/common/_header.scss
@@ -122,10 +122,6 @@
.transition {
color: white;
margin-top: -1px;
-
- .fill_theme {
- fill: $color-helmholtz-green;
- }
}
}
diff --git a/_sass/common/_transitions.scss b/_sass/common/_transitions.scss
index d3eb384412133041e48cc3d6920cb5cf3165ad57..c60122a94a57c4a24d91b8e9237dd824a85e8cfa 100644
--- a/_sass/common/_transitions.scss
+++ b/_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%;
}