Commit a934db56 authored by Felix Ranesberger's avatar Felix Ranesberger

[FEATURE] rebuild jumbotron component

text was overflowing the capsule
parent a45f4c78
......@@ -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;
......
......@@ -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, .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;
}
}
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default"/>
<f:section name="Main">
<div class="jumbotron-image-wrap">
<f:if condition="{images.0}">
<picture class="features-header-image__image">
<source srcset="{f:uri.image(image: images.0, width:'1700c', maxWidth: '3250c', treatIdAsReference: 1)}"
media="(min-width: 1260px)">
<source srcset="{f:uri.image(image: images.0, width:'1260c', maxWidth: '3250c', treatIdAsReference: 1)}"
media="(min-width: 990px)">
<source srcset="{f:uri.image(image: images.0, width:'990c', maxWidth: '3250c', treatIdAsReference: 1)}"
media="(min-width: 780px)">
<source srcset="{f:uri.image(image: images.0, width:'780c', maxWidth: '3250c', treatIdAsReference: 1)}"
media="(min-width: 480px)">
<source srcset="{f:uri.image(image: images.0, width:'480c', maxWidth: '3250c', treatIdAsReference: 1)}"
media="(max-width: 479px)">
<img
src="{f:uri.image(image: images.0)}"
width="{dimensions.width}"
height="{dimensions.height}"
alt="{file.alternative}"
title="{file.title}"/>
</picture>
</f:if>
<f:if condition="{data.header} || {data.subheader}">
<div class="container">
<div class="row">
<div class="headerce">
<f:if condition="{data.header}">
<h1 class="headerce-head">{data.header}</h1>
</f:if>
<f:if condition="{data.subheader}">
<p class="headerce-p">
{data.subheader}
</p>
</f:if>
</div>
</div>
<div class="jumbotron" style="background-image: url('{f:uri.image(image: images.0)}');">
<div class="container">
<div class="jumbotron__text">
<f:if condition="{data.header}">
<h1 class="headerce-head">{data.header}</h1>
</f:if>
<f:if condition="{data.subheader}">
<p class="headerce-p">{data.subheader}</p>
</f:if>
</div>
</f:if>
</div>
</div>
<f:if condition="{data.bodytext}">
<div class="jumbotron-content-wrap">
<div class="container">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<div class="card-body__content">
<div class="card-text">
{data.bodytext -> f:format.html()}
</div>
</div>
</div>
</div>
</div>
</div>
<f:if condition="{data.bodytext}">
<div class="container jumbotron__cardwrapper">
<div class="jumbotron__card">
<p>{data.bodytext -> f:format.html()}</p>
</div>
</div>
</f:if>
</div>
</f:if>
</f:section>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment