ascribe/wp-theme
1
0
Fork 0
mirror of https://github.com/ascribe/wp-theme synced 2025-01-03 10:25:08 +01:00
Code Issues Releases Wiki Activity

product-overview fixes

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
assets/less/ascribe.less
View File

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

4
assets/less/ascribe/_subtemplates.less
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;
} }

2
assets/less/ascribe/_variables.less
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;

11
controller/classes/Subtemplate.php
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'>
<article class='grid grid--gutters grid--full grid-small--half'>
<figure class='grid__col grid__col--center'>
<img src='{$imageUrl}' alt='{$imageAlt}'> <img src='{$imageUrl}' alt='{$imageAlt}'>
<div class='text-column'> </figure>
<div class='grid__col grid__col--center text-column'>
<h1 class='{$headingSize}'>{$subtemplateTitle}</h1> <h1 class='{$headingSize}'>{$subtemplateTitle}</h1>
<div>{$content}</div> <div>{$content}</div>
</div> </div>
</article>
</div> </div>
</section>"; </section>";
return $result; return $result;