fix all the layout things, closes #36, #37

This commit is contained in:
Matthias Kretschmann 2016-03-03 16:16:30 +01:00
parent bb04669b7a
commit a0d85a00bd
4 changed files with 62 additions and 85 deletions

View File

@ -39,12 +39,14 @@
// MAIN
.above-chevron {
margin-top: -160px;
margin-bottom: -160px;
position: relative;
z-index: 3;
> .subtemplate {
background: #fff;
margin-top: -80px;
margin-bottom: -80px;
}
}
// SUBTEMPLATES
.four-oh-four {
font-size: 34px;
@ -355,7 +357,8 @@
.galleriesPressTitle;
}
img {
display:block;
display: block;
margin: auto;
}
@media (min-width: @tabletWidth) {
@ -369,18 +372,25 @@
}
.faq {
.copyTextMedium;
> h1 { margin-top: 0; }
dl,dt,dd {
margin:0;
padding:0;
margin: 0;
padding: 0;
}
dd:not(:last-child) {
margin-bottom: @spacer;
}
dt {
&:extend(.bold);
}
.featured-faqs {
margin-bottom:75px;
dt {
&:extend(.fontRegular);
font-size: 25px;
line-height: 32px;
color: @pink;
cursor: pointer;
}
@ -388,7 +398,7 @@
max-height:0;
overflow-y:hidden;
transition: .2s ease-out;
margin-bottom: 5px;
margin-bottom: @spacer;
&.open {
max-height: 800px;
@ -396,12 +406,7 @@
}
}
.regular-faqs {
dt {
&:extend(.fontRegular);
}
dd {
margin-bottom: 60px;
}
}
}
@ -523,14 +528,16 @@
}
}
}
//
// Subtemplate: Media Downloads Buttons
//
.downloads {
.left {
float: left;
}
.right {
float: right;
}
text-align: center;
}
.upcoming-events,
.past-events {
.event-container {
@ -856,17 +863,3 @@ h1 > a,
.subtemplate.press-articles > div > div > img {
margin-bottom: 70px;
}
.subtemplate.downloads a[href=''] {
display: none;
}
.subtemplate.downloads a[href=''] + a:not([href='']) {
float: none;
display: inline-block;
margin: 0 auto;
}
.subtemplate.downloads .centered-content {
text-align: center;
}

View File

@ -98,7 +98,7 @@
// Gutters
//
.grid--gutters {
margin: -(@gutter-space/2) 0 @gutter-space (-(@gutter-space/2));
margin: -(@gutter-space) 0 @gutter-space (-@gutter-space);
> .grid__col {
padding: @gutter-space 0 0 @gutter-space;;
@ -107,7 +107,7 @@
@media (@screen-sm) {
.grid-small--gutters {
margin: -(@gutter-space/2) 0 @gutter-space (-(@gutter-space/2));
margin: -(@gutter-space) 0 @gutter-space (-@gutter-space);
> .grid__col {
padding: @gutter-space 0 0 @gutter-space;
@ -117,7 +117,7 @@
@media (@screen-md) {
.grid-medium--gutters {
margin: -(@gutter-space/2) 0 @gutter-space (-(@gutter-space/2));
margin: -(@gutter-space) 0 @gutter-space (-@gutter-space);
> .grid__col {
padding: @gutter-space 0 0 @gutter-space;
@ -127,7 +127,7 @@
@media (@screen-lg) {
.grid-large--gutters {
margin: -(@gutter-space/2) 0 @gutter-space (-(@gutter-space/2));
margin: -(@gutter-space) 0 @gutter-space (-@gutter-space);
> .grid__col {
padding: @gutter-space 0 0 @gutter-space;

View File

@ -28,10 +28,6 @@
.subtemplate__title {
margin-top: 0;
margin-bottom: @spacer;
.above-chevron > .subtemplate:first-child & {
margin-top: (@spacer * 2);
}
}
.subtemplate__description {

View File

@ -598,12 +598,10 @@ class Subtemplate {
}
}
$result = "<section class='subtemplate team'>
<div class='row row--content'>
<h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<div class='intro'>{$content}</div>
<div class='grid grid--gutters grid--full grid-small--half grid-medium--third'>{$teamMemberMarkup}</div>
</div>
$result = "<section class='subtemplate row row--content team'>
<h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<div class='intro'>{$content}</div>
<div class='grid grid--gutters grid--full grid-small--half grid-medium--third'>{$teamMemberMarkup}</div>
</section>";
return $result;
@ -614,11 +612,9 @@ class Subtemplate {
$bgColor = get_sub_field('background_color');
$result = "<section class='subtemplate content {$bgColor}'>
<div class='row row--content'>
<h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<div>{$content}</div>
</div>
$result = "<section class='subtemplate row row--content content {$bgColor}'>
<h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<div>{$content}</div>
</section>";
return $result;
@ -627,11 +623,9 @@ class Subtemplate {
$content = get_sub_field('content');
$result = "<section class='subtemplate content-boxed'>
<div class='row row--content'>
<h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<div>{$content}</div>
</div>
$result = "<section class='subtemplate row row--content content-boxed'>
<h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<div>{$content}</div>
</section>";
return $result;
@ -679,12 +673,10 @@ class Subtemplate {
}
$regularFAQ .= "</dl>";
$result = "<section class='subtemplate content faq'>
<div class='row'>
$result = "<section class='subtemplate row row--content content faq'>
<h1>{$subtemplateTitle}</h1>
{$featuredFAQ}
{$regularFAQ}
</div>
</section>";
return $result;
@ -705,10 +697,10 @@ class Subtemplate {
}
}
$result = "<section class='subtemplate values'><div class='row'>
$result = "<section class='subtemplate row values'>
<h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<main><div class='grid grid--gutters grid--full grid-small--half'>{$values}</div></main>
</div></section>";
</section>";
return $result;
}
@ -733,11 +725,9 @@ class Subtemplate {
$careerMarkup .= get_sub_field('empty_text');
}
$result = "<section class='subtemplate careers'>
<div class='row'>
<h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<ul>{$careerMarkup}</ul>
</div>
$result = "<section class='subtemplate row row--content careers'>
<h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<ul>{$careerMarkup}</ul>
</section>";
return $result;
@ -772,7 +762,7 @@ class Subtemplate {
}
}
$result = "<section class='subtemplate press-articles row'>
$result = "<section class='subtemplate row row--content press-articles '>
<h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<img src='{$image}' alt='Media Companies'>
<div>{$pressMarkup}</div>
@ -785,7 +775,7 @@ class Subtemplate {
$buttonUrl = get_sub_field('button_url');
$buttonText = get_sub_field('button_text');
$result = "<section class='subtemplate downloads row'>
$result = "<section class='subtemplate row downloads'>
<a href='{$buttonUrl}' download class='button blue'>{$buttonText}</a>
</section>";
@ -810,14 +800,12 @@ class Subtemplate {
}
}
$result = "<section class='subtemplate contact'>
<div class='row row--content'>
<h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
$result = "<section class='subtemplate row row--content contact'>
<h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
<div class='grid grid--gutters grid--fit grid-small--half'>
<div class='grid__col form'>{$content}</div>
<aside class='grid__col contact-points'>{$contactPoints}</aside>
</div>
<div class='grid grid--gutters grid--fit grid-small--half'>
<div class='grid__col form'>{$content}</div>
<aside class='grid__col contact-points'>{$contactPoints}</aside>
</div>
</section>";
@ -912,7 +900,7 @@ class Subtemplate {
$sidebar = $this->eventSidebar();
$result = "<section class='subtemplate upcoming-events'>
$result = "<section class='subtemplate row upcoming-events'>
<div class='row'>
<div class='event-container'>
<h1>Events</h1>
@ -1074,7 +1062,7 @@ class Subtemplate {
$sidebar = $this->eventSidebar();
$result = "<section class='subtemplate upcoming-events'>
$result = "<section class='subtemplate row upcoming-events'>
<div class='row'>
<div class='event-container'>
<h1>Upcoming Events</h1>
@ -1084,7 +1072,7 @@ class Subtemplate {
</div>
</section>
<div class='chevron-divider'></div>
<section class='subtemplate past-events'>
<section class='subtemplate row past-events'>
<div class='row'>
<div class='event-container'>
<h1>Past Events</h1>