diff --git a/private/scss/modules/_contact.scss b/private/scss/modules/_contact.scss index efdf743..ba21920 100644 --- a/private/scss/modules/_contact.scss +++ b/private/scss/modules/_contact.scss @@ -2,6 +2,9 @@ display: table; height: 100%; width: 100%; + @media screen and (max-width: $medium_breakpoint) { + display: block; + } } .contact__frame { @@ -13,6 +16,7 @@ vertical-align: bottom; position: relative; @media screen and (max-width: $medium_breakpoint) { + display: block; padding-top: em(300px); } @media screen and (max-width: $small_breakpoint) { @@ -41,6 +45,7 @@ color: $white; position: relative; z-index: 100; + max-width: 100%; } .contact__content__main { diff --git a/private/scss/modules/plugins/_section_title.scss b/private/scss/modules/plugins/_section_title.scss index a8692e2..b899b86 100644 --- a/private/scss/modules/plugins/_section_title.scss +++ b/private/scss/modules/plugins/_section_title.scss @@ -21,4 +21,7 @@ br { display: none; } + @media screen and (max-width: $medium_breakpoint) { + font-size: em(150px); + } } \ No newline at end of file diff --git a/private/scss/modules/plugins/_slider.scss b/private/scss/modules/plugins/_slider.scss index a2637bb..613091b 100644 --- a/private/scss/modules/plugins/_slider.scss +++ b/private/scss/modules/plugins/_slider.scss @@ -40,6 +40,14 @@ @include disable_slider_navigation(); } } + .slider__text__item__email.data_id_#{$i} { + transform: none; + pointer-events: all; + opacity: 1; + & ~ .slider__text__item__email { + transform: translateX(200%); + } + } } &[data-last="#{$i}"] { .text_slider__container { @@ -60,83 +68,77 @@ .slider__content { width: 100%; position: relative; - min-height: em(400px); - padding: em(90px) 0 em(80px); - text-align: right; vertical-align: top; - @media screen and (max-width: $medium_breakpoint) { - padding: em(300px) 0 0; - } + font-size: 0; + white-space: nowrap; } .slider__navigation { position: absolute; top: 0; right: 0; - width: em(90px); - height: em(90px); - line-height: em(75px); + width: 90px; + height: 90px; + line-height: 75px; text-align: center; font-size: 0; transform: none; opacity: 1; - text-indent: em(15px); + text-indent: 15px; direction: rtl; transition: opacity 0.2s ease-in-out; + z-index: 10; svg { fill: $green; transition: fill 0.2s ease-in-out, transform 0.2s ease-in-out; display: inline-block; - width: em(35px); - height: em(35px); + width: 35px; + height: 35px; vertical-align: middle; } html.no-touchevents &:hover { svg { fill: darken($green, 10); - transform: translateX(em(5px)); + transform: translateX(5px); } } @media screen and (max-width: $medium_breakpoint) { - width: em(65px); - height: em(65px); + width: 65px; + height: 65px; background: $white; - line-height: em(65px); + line-height: 65px; text-indent: 0; - top: em(300px); - margin-top: em(-65px); svg { - width: em(25px); - height: em(25px); + width: 25px; + height: 25px; } } } .slider__navigation--prev { - right: em(90px); + right: 90px; direction: ltr; &:hover { svg { - transform: translateX(em(-5px)); + transform: translateX(-5px); } } @media screen and (max-width: $medium_breakpoint) { - right: em(65px); + right: 65px; } } .slider__images__frame { - position: absolute; overflow: hidden; - top: 0; - left: 0; - right: em(180px); - padding-bottom: 56%; - max-height: 100%; + //right: em(180px); + width: calc(100% - 180px); + display: inline-block; z-index: -1; + padding-bottom: 50%; + position: relative; @media screen and (max-width: $medium_breakpoint) { - right: 10%; - bottom: em(200px); + width: 90%; + padding-bottom: 70%; } } @@ -173,14 +175,27 @@ text-align: left; font-size: 0; white-space: nowrap; - overflow: hidden; - padding-bottom: em(50px); + margin-left: -42%; + left: 180px; @media screen and (max-width: $medium_breakpoint) { + padding-top: 40%; + margin-left: -80%; + left: 0; width: 90%; } } .slider__texts__frame { + width: 100%; + position: relative; + overflow: hidden; + padding: 90px 0 0 0; + @media screen and (max-width: $medium_breakpoint) { + padding: 65px 0 0 0; + } +} + +.slider__texts__main { width: 100%; background: $green; } @@ -271,11 +286,13 @@ position: absolute; bottom: -30px; left: 20%; - transform: none; - transition: transform 0.2s ease-in-out; + transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out; box-shadow: 0 0 30px rgba($black, 0.1); text-align: center; line-height: 69px; + transform: translateX(-200%); + pointer-events: none; + opacity: 0; svg { display: inline-block; fill: $green; @@ -285,6 +302,6 @@ margin-top: -2px; } &:hover { - transform: scale(1.1); + transform: scale(1.05) !important; } } \ No newline at end of file diff --git a/src/project/templates/project/plugins/content/slider.html b/src/project/templates/project/plugins/content/slider.html index dd59e28..9f118e9 100644 --- a/src/project/templates/project/plugins/content/slider.html +++ b/src/project/templates/project/plugins/content/slider.html @@ -13,24 +13,38 @@
-
- {% for plugin in instance.child_plugin_instances %} -
- {% render_plugin plugin %} -
- {% endfor %} +
+
+ {% for plugin in instance.child_plugin_instances %} +
+ {% render_plugin plugin %} +
+ {% endfor %} +
+ + {% if instance.child_plugin_instances|length > 1 %} + + {% include 'project/assets/arrow-right.svg' %} + {% trans 'Nächster Slide' %} + + + {% include 'project/assets/arrow-left.svg' %} + {% trans 'Vorheriger Slide' %} + + {% endif %}
+ + {% for plugin in instance.child_plugin_instances %} + {% if plugin.email %} + + {% endif %} + {% endfor %}
- {% if instance.child_plugin_instances|length > 1 %} - - {% include 'project/assets/arrow-right.svg' %} - {% trans 'Nächster Slide' %} - - - {% include 'project/assets/arrow-left.svg' %} - {% trans 'Vorheriger Slide' %} - - {% endif %} \ No newline at end of file diff --git a/src/project/templates/project/plugins/content/slider_item.html b/src/project/templates/project/plugins/content/slider_item.html index f63c7cc..5331847 100644 --- a/src/project/templates/project/plugins/content/slider_item.html +++ b/src/project/templates/project/plugins/content/slider_item.html @@ -16,9 +16,4 @@ {% endfor %} {% endif %} - {% if instance.email %} - - {% include 'project/assets/mail.svg' %} - - {% endif %} \ No newline at end of file