1
0
mirror of https://github.com/ascribe/wp-theme synced 2025-01-03 10:25:08 +01:00

product-overview fixes

This commit is contained in:
Matthias Kretschmann 2016-01-16 20:11:38 +01:00
parent a5b717dbd8
commit ab231e2717
4 changed files with 39 additions and 66 deletions

View File

@ -231,76 +231,42 @@
} }
} }
} }
.product-overview { .product-overview {
padding: 175px 0; &:extend(.text-center, .subtemplate);
border-top: 1px solid @greyHr; border-top: 0;
border-bottom: 25px solid @greyBg;
h1 { h1 { font-size: @font-size-h3; }
.sectionHeader;
}
p {
.copyTextSmall;
}
&:nth-of-type(odd) { .grid,
img { p { margin-bottom: 0; }
float: left;
}
.text-column {
float: right;
}
}
&:nth-of-type(even) {
img {
float: right;
}
}
.text-column {
width: 45%;
}
img {
max-width: 55%;
}
.row {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
&.small { @media (@screen-sm) {
border-top: 0; flex-wrap: no-wrap;
border-bottom: 25px solid @greyBg;
padding: 100px 0;
h1 {
font-size: 22px;
margin:0;
}
.text-column {
text-align: center;
} }
} }
@media screen and (max-width: @tabletWidth) { .grid { }
padding: 100px 0;
&:first-of-type {
border-top: 0;
}
img { @media (@screen-sm) {
max-width: 100%; &:nth-of-type(odd) {
width: 55%; .grid {
} flex-direction: row-reverse;
.text-column { }
text-align: center;
}
}
@media screen and (max-width: @phoneWidth) {
img {
display: none;
}
.text-column {
width: 100%;
} }
} }
} }
.blue-box { .blue-box {
&:extend(.text-center); &:extend(.text-center);
padding: @spacer 0; padding: @spacer 0;

View File

@ -3,13 +3,15 @@
padding-top: @spacer; padding-top: @spacer;
padding-bottom: @spacer; padding-bottom: @spacer;
@media (min-width: @tabletWidth) { @media (@screen-sm) {
padding-top: (@spacer * 2); padding-top: (@spacer * 2);
padding-bottom: (@spacer * 2); padding-bottom: (@spacer * 2);
} }
> .row { background-color: @white; } > .row { background-color: @white; }
&.grey > .row { background-color: transparent; }
&.case-studies { &.case-studies {
padding: 0; padding: 0;
} }

View File

@ -38,7 +38,7 @@
@line-height-base: 24px; @line-height-base: 24px;
@line-height-small: 22px; @line-height-small: 22px;
@line-height-large: 26px; @line-height-large: 28px;
@text-color: @greyText; @text-color: @greyText;

View File

@ -272,13 +272,18 @@ class Subtemplate {
$content = get_sub_field('content'); $content = get_sub_field('content');
$result = "<section class='subtemplate product-overview {$headingSize}'> $result = "<section class='subtemplate product-overview'>
<div class='row row--content'> <div class='row'>
<img src='{$imageUrl}' alt='{$imageAlt}'> <article class='grid grid--gutters grid--full grid-small--half'>
<div class='text-column'> <figure class='grid__col grid__col--center'>
<h1 class='{$headingSize}'>{$subtemplateTitle}</h1> <img src='{$imageUrl}' alt='{$imageAlt}'>
<div>{$content}</div> </figure>
</div>
<div class='grid__col grid__col--center text-column'>
<h1 class='{$headingSize}'>{$subtemplateTitle}</h1>
<div>{$content}</div>
</div>
</article>
</div> </div>
</section>"; </section>";
return $result; return $result;