From a0d85a00bd2b57b77ec571b1d5584f712346ca65 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 3 Mar 2016 16:16:30 +0100
Subject: [PATCH] fix all the layout things, closes #36, #37

---
 assets/_src/less/ascribe.less               | 71 ++++++++++-----------
 assets/_src/less/ascribe/_grid.less         |  8 +--
 assets/_src/less/ascribe/_subtemplates.less |  4 --
 controller/classes/Subtemplate.php          | 64 ++++++++-----------
 4 files changed, 62 insertions(+), 85 deletions(-)

diff --git a/assets/_src/less/ascribe.less b/assets/_src/less/ascribe.less
index b52804f..2aa81b7 100644
--- a/assets/_src/less/ascribe.less
+++ b/assets/_src/less/ascribe.less
@@ -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;
-}
diff --git a/assets/_src/less/ascribe/_grid.less b/assets/_src/less/ascribe/_grid.less
index bc36276..05a5e20 100644
--- a/assets/_src/less/ascribe/_grid.less
+++ b/assets/_src/less/ascribe/_grid.less
@@ -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;
diff --git a/assets/_src/less/ascribe/_subtemplates.less b/assets/_src/less/ascribe/_subtemplates.less
index c4fc4cb..1304cb2 100644
--- a/assets/_src/less/ascribe/_subtemplates.less
+++ b/assets/_src/less/ascribe/_subtemplates.less
@@ -28,10 +28,6 @@
 .subtemplate__title {
     margin-top: 0;
     margin-bottom: @spacer;
-
-    .above-chevron > .subtemplate:first-child & {
-        margin-top: (@spacer * 2);
-    }
 }
 
 .subtemplate__description {
diff --git a/controller/classes/Subtemplate.php b/controller/classes/Subtemplate.php
index d734386..6750db7 100644
--- a/controller/classes/Subtemplate.php
+++ b/controller/classes/Subtemplate.php
@@ -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>