diff --git a/Build/Assets/Scss/base/_variables.scss b/Build/Assets/Scss/base/_variables.scss index 4a1ef61388eba0348421f317844e3d204ee4fc0a..0f8d5764e0307d73c5ad6e8f6f695077afd3c53f 100644 --- a/Build/Assets/Scss/base/_variables.scss +++ b/Build/Assets/Scss/base/_variables.scss @@ -184,7 +184,7 @@ $container-max-widths: ( // // $caret-width: .3em !default; // -// $transition-base: all .2s ease-in-out !default; +$transition-base: 2s ease-in-out !default; // $transition-fade: opacity .15s linear !default; // $transition-collapse: height .35s ease !default; diff --git a/Build/Assets/Scss/components/_jumbotron.scss b/Build/Assets/Scss/components/_jumbotron.scss index 4938310d9307b533dc35abaebcf3cdcb9d7d9f71..d756033573928cec758abfe108efffd36e54a25d 100755 --- a/Build/Assets/Scss/components/_jumbotron.scss +++ b/Build/Assets/Scss/components/_jumbotron.scss @@ -6,104 +6,37 @@ // // Styleguide 4.14 -.jumbotron-image-wrap { +.jumbotron { position: relative; - width: auto; - height: 400px; - margin-bottom: 30px; + background: no-repeat center center; background-size: cover; - background-position: 50% 25%; - overflow: hidden; + padding: 4rem 2rem; + transition: padding $transition-base; - .headerce { - top: 54%; - padding-left: 15px; - padding-right: 15px; - -webkit-transform: translateY(-50%); - transform: translateY(-50%); - width: 100%; + &__text * { + color: white; } -} - -.jumbotron-content-wrap { - position: relative; - top: -110px; - .card { - font-size: 1.5rem; + &__card { + background-color: white; + box-shadow: 0 0 16px 1px rgba(81, 81, 81, 0.1); padding: 2rem; } - .card-text { - .btn { - margin-bottom: 0; - } - } -} - -@media (max-width: 1024px) { - .features-header-image { - height: 400px; - } -} - -@media (max-width: 992px) { - .jumbotron-image-wrap { - height: 228px; + @media all and (min-width: 768px) { + padding: 8rem 4rem; - .headerce p { - font-size: 1rem; - } - - .headerce-head { - font-size: 2rem; - } - } - - .jumbotron-content-wrap { - top: -60px; - - .card { - font-size: 1rem; - padding: 0.5rem; - } - } -} - -@media (max-width: 767px) { - .jumbotron-image-wrap { - height: auto; - margin-bottom: 0; - - .headerce { + &__card { position: relative; - top: auto; - -webkit-transform: translateY(0); - transform: translateY(0); - color: #333; - - .headerce-head { - color: #333; - margin-bottom: 0.4rem; - } - - p { - margin-bottom: 0; - color: #333; - } + top: -5rem; } - } - .jumbotron-content-wrap { - position: relative; - top: auto; - - .container { + &__cardwrapper { margin-top: 0; } + } - .card { - padding: 0; - } + @media all and (min-width: 1024px) { + padding: 10rem 4rem; } } diff --git a/Resources/Private/Templates/ContentElements/Jumbotron.html b/Resources/Private/Templates/ContentElements/Jumbotron.html index 442b951b1890252c261e1dc8565bb260ccc08217..27c8c9ba347487a2bac42646f463b03063adc957 100755 --- a/Resources/Private/Templates/ContentElements/Jumbotron.html +++ b/Resources/Private/Templates/ContentElements/Jumbotron.html @@ -1,63 +1,25 @@ -
- - - - - - - - {file.alternative} - - - -
-
-
- -

{data.header}

-
- -

- {data.subheader} -

-
-
-
+
+
+
+ +

{data.header}

+
+ +

{data.subheader}

+
- +
- - -
-
-
-
-
-
-
-
- {data.bodytext -> f:format.html()} -
-
-
-
-
-
+ + +
+
+

{data.bodytext -> f:format.html()}

-
-
+
+