From 71d5bf3c295d27373caa0f319d46c91cf71a1fcc Mon Sep 17 00:00:00 2001
From: Matt Hinchliffe <matt.hinchliffe@ft.com>
Date: Thu, 16 Jul 2015 10:44:22 +0100
Subject: [PATCH 1/7] Don't show slideshow controls on small screens, use a
 solid lightbox background color for perf++

---
 app/assets/stylesheets/component/_gallery.scss   |  2 +-
 app/assets/stylesheets/component/_slideshow.scss | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/component/_gallery.scss b/app/assets/stylesheets/component/_gallery.scss
index 4f56093..b99912b 100644
--- a/app/assets/stylesheets/component/_gallery.scss
+++ b/app/assets/stylesheets/component/_gallery.scss
@@ -16,7 +16,7 @@
   }
 
   &:hover {
-    background: rgba($palette-gray-80, 0.5);
+    background: $palette-gray-80;
   }
 
 }
diff --git a/app/assets/stylesheets/component/_slideshow.scss b/app/assets/stylesheets/component/_slideshow.scss
index 20b289f..221921d 100644
--- a/app/assets/stylesheets/component/_slideshow.scss
+++ b/app/assets/stylesheets/component/_slideshow.scss
@@ -13,8 +13,9 @@ $slideshow-img-size: 640px;
   width: 100%;
   height: 100%;
   display: none;
-  transition: transform 1s ease;
+  transition: transform 0.75s ease;
   will-change: transform;
+  user-select: none;
 
   &.is-next,
   &.is-prev,
@@ -103,6 +104,7 @@ $slideshow-img-size: 640px;
   position: absolute;
   top: 50%;
   z-index: 1;
+  display: none;
   margin-top: -25px;
   border: 0;
   background: none;
@@ -110,6 +112,12 @@ $slideshow-img-size: 640px;
   font-size: 32px;
   line-height: 1;
   transition: left 0.25s, right 0.25s;
+
+  // They don't offer anything on a small screen
+  @media screen and (min-height: $slideshow-img-size) {
+    display: block;
+  }
+
 }
 
 .Slideshow-btn--next {
@@ -134,6 +142,7 @@ $slideshow-img-size: 640px;
   position: absolute;
   bottom: 10px;
   z-index: 2;
+  display: none;
   margin-left: 0;
   padding-left: 0;
   width: 100%;
@@ -141,8 +150,8 @@ $slideshow-img-size: 640px;
   white-space: nowrap;
 
   // Avoid clashing with image caption
-  @media screen and (max-height: $slideshow-img-size) {
-    display: none;
+  @media screen and (min-height: $slideshow-img-size) {
+    display: block;
   }
 
 }

From 530d7e56f694e3c5e62074d02daea72ff9bd0d57 Mon Sep 17 00:00:00 2001
From: Matt Hinchliffe <matt.hinchliffe@ft.com>
Date: Mon, 20 Jul 2015 12:08:51 +0100
Subject: [PATCH 2/7] Remove unused CSS grid utils

---
 app/assets/stylesheets/application.css.scss     |  1 -
 app/assets/stylesheets/config/_grid.scss        |  3 ---
 app/assets/stylesheets/lib/_functions.scss      |  1 -
 app/assets/stylesheets/lib/functions/_grid.scss | 10 ----------
 4 files changed, 15 deletions(-)
 delete mode 100644 app/assets/stylesheets/config/_grid.scss
 delete mode 100644 app/assets/stylesheets/lib/functions/_grid.scss

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 7d3e6fe..3bb4021 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -1,5 +1,4 @@
 @import "config/color";
-@import "config/grid";
 @import "config/layout";
 @import "config/responsive";
 @import "config/style";
diff --git a/app/assets/stylesheets/config/_grid.scss b/app/assets/stylesheets/config/_grid.scss
deleted file mode 100644
index 07b7132..0000000
--- a/app/assets/stylesheets/config/_grid.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-$grid-column:       60;
-$grid-gutter:       20;
-$grid-max-columns:  12;
diff --git a/app/assets/stylesheets/lib/_functions.scss b/app/assets/stylesheets/lib/_functions.scss
index 4f66103..3efeb54 100644
--- a/app/assets/stylesheets/lib/_functions.scss
+++ b/app/assets/stylesheets/lib/_functions.scss
@@ -1,4 +1,3 @@
-@import "functions/grid";
 @import "functions/layout";
 @import "functions/responsive";
 @import "functions/typography";
diff --git a/app/assets/stylesheets/lib/functions/_grid.scss b/app/assets/stylesheets/lib/functions/_grid.scss
deleted file mode 100644
index 8fb3248..0000000
--- a/app/assets/stylesheets/lib/functions/_grid.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@function grid-column($columns) {
-  $width: ($columns * $grid-column) + (($columns - 1) * $grid-gutter);
-  $container-width: $grid-max-columns * ($grid-column + $grid-gutter);
-  @return percentage($width / $container-width);
-}
-
-@function grid-gutter() {
-  $container-width: $grid-max-columns * ($grid-column + $grid-gutter);
-  @return percentage($grid-gutter / $container-width);
-}

From 7c6d3e5f269d6fda3476d8d33e3af366efbfa789 Mon Sep 17 00:00:00 2001
From: Matt Hinchliffe <matt.hinchliffe@ft.com>
Date: Mon, 20 Jul 2015 15:53:51 +0100
Subject: [PATCH 3/7] Update base padding config and mixins

---
 app/assets/stylesheets/component/_notice.scss |  2 +-
 .../stylesheets/component/_slideshow.scss     |  4 ++--
 app/assets/stylesheets/config/_layout.scss    | 16 ++++++++-----
 .../stylesheets/lib/extends/_layout.scss      | 20 ++++++++--------
 .../stylesheets/lib/extends/_style.scss       |  2 +-
 .../stylesheets/lib/functions/_layout.scss    | 24 ++++++++-----------
 .../stylesheets/view/_search-results.scss     |  2 +-
 .../stylesheets/view/shared/_site-header.scss |  4 ++--
 8 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/app/assets/stylesheets/component/_notice.scss b/app/assets/stylesheets/component/_notice.scss
index 3bbf402..efc7d73 100644
--- a/app/assets/stylesheets/component/_notice.scss
+++ b/app/assets/stylesheets/component/_notice.scss
@@ -1,7 +1,7 @@
 .Notice {
   @extend %base-border-radius;
   border: 2px solid;
-  padding: $base-padding-small;
+  padding: map-get($base-padding, 'small');
 }
 
 .Notice--error {
diff --git a/app/assets/stylesheets/component/_slideshow.scss b/app/assets/stylesheets/component/_slideshow.scss
index 221921d..6f7cc98 100644
--- a/app/assets/stylesheets/component/_slideshow.scss
+++ b/app/assets/stylesheets/component/_slideshow.scss
@@ -88,7 +88,7 @@ $slideshow-img-size: 640px;
   display: none;
   overflow: hidden;
   background: linear-gradient(to top, rgba($palette-gray-80, .85) 0, rgba($palette-gray-80, 0) 100%);
-  padding: $base-padding;
+  padding: map-get($base-padding, 'medium');
   padding-top: 40px;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -108,7 +108,7 @@ $slideshow-img-size: 640px;
   margin-top: -25px;
   border: 0;
   background: none;
-  padding: $base-padding-small;
+  padding: map-get($base-padding, 'small');
   font-size: 32px;
   line-height: 1;
   transition: left 0.25s, right 0.25s;
diff --git a/app/assets/stylesheets/config/_layout.scss b/app/assets/stylesheets/config/_layout.scss
index 7f79339..4191c1e 100644
--- a/app/assets/stylesheets/config/_layout.scss
+++ b/app/assets/stylesheets/config/_layout.scss
@@ -7,10 +7,14 @@ $header-height-small: 62px;
 $header-height-large: 78px;
 
 // Base margins and padding
-$base-margin-small:   16px 10px;
-$base-margin:         24px 20px;
-$base-margin-large:   36px 40px;
+$base-margins: (
+  'small': 16px 10px,
+  'medium': 24px 20px,
+  'large': 36px 40px
+);
 
-$base-padding-small:  12px;
-$base-padding:        20px;
-$base-padding-large:  36px 40px;
+$base-padding: (
+  'small': 12px,
+  'medium': 18px 20px,
+  'large': 36px 40px
+);
diff --git a/app/assets/stylesheets/lib/extends/_layout.scss b/app/assets/stylesheets/lib/extends/_layout.scss
index af80f7f..238e727 100644
--- a/app/assets/stylesheets/lib/extends/_layout.scss
+++ b/app/assets/stylesheets/lib/extends/_layout.scss
@@ -1,25 +1,25 @@
 %base-margin {
-  margin: $base-margin-small;
+  margin: map-get($base-margins, 'small');
 
-  @include respond-above("medium") {
-    margin: $base-margin;
+  @include respond-above('medium') {
+    margin: map-get($base-margins, 'medium');
   }
 
-  @include respond-above("large") {
-    margin: $base-margin-large;
+  @include respond-above('large') {
+    margin: map-get($base-margins, 'large');
   }
 
 }
 
 %base-padding {
-  padding: $base-padding-small;
+  padding: map-get($base-padding, 'small');
 
-  @include respond-above("medium") {
-    padding: $base-padding;
+  @include respond-above('medium') {
+    padding: map-get($base-padding, 'medium');
   }
 
-  @include respond-above("large") {
-    padding: $base-padding-large;
+  @include respond-above('large') {
+    padding: map-get($base-padding, 'large');
   }
 
 }
diff --git a/app/assets/stylesheets/lib/extends/_style.scss b/app/assets/stylesheets/lib/extends/_style.scss
index 038d89a..41e7e35 100644
--- a/app/assets/stylesheets/lib/extends/_style.scss
+++ b/app/assets/stylesheets/lib/extends/_style.scss
@@ -18,7 +18,7 @@
   @extend %base-font;
   @extend %base-border-radius;
   border: 2px solid;
-  padding: $base-padding-small;
+  padding: map-get($base-padding, 'small');
   line-height: 1.625;
   font-size: 100%;
   color: $palette-gray-80;
diff --git a/app/assets/stylesheets/lib/functions/_layout.scss b/app/assets/stylesheets/lib/functions/_layout.scss
index e4b0bf7..8614e5d 100644
--- a/app/assets/stylesheets/lib/functions/_layout.scss
+++ b/app/assets/stylesheets/lib/functions/_layout.scss
@@ -1,23 +1,19 @@
-@function base-margin($direction: null, $size: null) {
-  @if $size == "small" {
-    @return directional-value($base-margin-small, $direction);
-  }
+@function base-padding($direction, $size: 'medium') {
+  $margin-values: map-get($base-margins, $size);
 
-  @if $size == "large" {
-    @return directional-value($base-margin-large, $direction);
+  @if $margin-values {
+    @return directional-value($margin-values, $direction);
   }
 
-  @return directional-value($base-margin, $direction);
+  @warn "Margin size '#{$size}' does not exist in $base-margins";
 }
 
-@function base-padding($direction: null, $size: null) {
-  @if $size == "small" {
-    @return directional-value($base-padding-small, $direction);
-  }
+@function base-padding($direction, $size: 'medium') {
+  $padding-values: map-get($base-padding, $size);
 
-  @if $size == "large" {
-    @return directional-value($base-padding-large, $direction);
+  @if $padding-values {
+    @return directional-value($padding-values, $direction);
   }
 
-  @return directional-value($base-padding, $direction);
+  @warn "Padding size '#{$size}' does not exist in $base-padding";
 }
diff --git a/app/assets/stylesheets/view/_search-results.scss b/app/assets/stylesheets/view/_search-results.scss
index 488d42f..1a2c4b4 100644
--- a/app/assets/stylesheets/view/_search-results.scss
+++ b/app/assets/stylesheets/view/_search-results.scss
@@ -70,7 +70,7 @@
 }
 
 .SearchResults-toggle {
-  padding: $base-padding-small;
+  padding: map-get($base-padding, 'small');
   border-bottom: 1px solid $palette-gray-20;
 
   &.is-active {
diff --git a/app/assets/stylesheets/view/shared/_site-header.scss b/app/assets/stylesheets/view/shared/_site-header.scss
index 4b90812..bc41c43 100644
--- a/app/assets/stylesheets/view/shared/_site-header.scss
+++ b/app/assets/stylesheets/view/shared/_site-header.scss
@@ -21,10 +21,10 @@
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
-  padding: $base-padding-small;
+  padding: map-get($base-padding, 'small');
 
   @include respond-above("medium") {
-    padding: $base-padding;
+    padding: map-get($base-padding, 'medium');
   }
 
 }

From 548d47c8ead45708d0bb0d2aef1cf4efef26eb8b Mon Sep 17 00:00:00 2001
From: Matt Hinchliffe <matt.hinchliffe@ft.com>
Date: Mon, 20 Jul 2015 16:01:58 +0100
Subject: [PATCH 4/7] Update responsive functions and mixins

---
 .../stylesheets/config/_responsive.scss       |  8 ++---
 .../lib/functions/_responsive.scss            |  8 ++++-
 .../stylesheets/lib/mixins/_responsive.scss   | 30 ++++++++++++++-----
 3 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/config/_responsive.scss b/app/assets/stylesheets/config/_responsive.scss
index db008e4..74a2bb2 100644
--- a/app/assets/stylesheets/config/_responsive.scss
+++ b/app/assets/stylesheets/config/_responsive.scss
@@ -1,6 +1,6 @@
 $breakpoints: (
-  small:    480px,
-  medium:   720px,
-  large:    960px,
-  x-large:  1280px
+  'small':    480px,
+  'medium':   720px,
+  'large':    960px,
+  'x-large':  1280px
 );
diff --git a/app/assets/stylesheets/lib/functions/_responsive.scss b/app/assets/stylesheets/lib/functions/_responsive.scss
index a00a247..78478bb 100644
--- a/app/assets/stylesheets/lib/functions/_responsive.scss
+++ b/app/assets/stylesheets/lib/functions/_responsive.scss
@@ -1,3 +1,9 @@
 @function breakpoint($breakpoint-name) {
-  @return map-get($breakpoints, $breakpoint-name);
+  $breakpoint-value: map-get($breakpoints, $breakpoint-name);
+
+  @if $breakpoint-value {
+    @return $breakpoint-value;
+  }
+
+  @warn "Breakpoint '#{$breakpoint-name}' not found in $breakpoints";
 }
diff --git a/app/assets/stylesheets/lib/mixins/_responsive.scss b/app/assets/stylesheets/lib/mixins/_responsive.scss
index 06a1ce7..f263262 100644
--- a/app/assets/stylesheets/lib/mixins/_responsive.scss
+++ b/app/assets/stylesheets/lib/mixins/_responsive.scss
@@ -1,11 +1,27 @@
-@mixin respond-above($breakpoint-name) {
-  $breakpoint-value: breakpoint($breakpoint-name);
+@mixin respond($above: null, $below: null) {
+  $breakpoint-value: if($above, breakpoint($above), breakpoint($below));
 
-  @if $breakpoint-value != null {
-    @media screen and (min-width: $breakpoint-value) {
-      @content;
+  @if $breakpoint-value {
+    @if $above {
+      @media screen and (min-width: $breakpoint-value) {
+        @content;
+      }
+    } @elseif $below {
+      @media screen and (max-width: $breakpoint-value) {
+        @content;
+      }
     }
-  } @else {
-    @warn "Missing breakpoint '#{$breakpoint-name}'";
+  }
+}
+
+@mixin respond-above($breakpoint-name) {
+  @include respond($above: $breakpoint-name) {
+    @content;
+  }
+}
+
+@mixin respond-below($breakpoint-name) {
+  @include respond($below: $breakpoint-name) {
+    @content;
   }
 }

From fdc2de15b150e6dc14a14c5a0f95fe821e638004 Mon Sep 17 00:00:00 2001
From: Matt Hinchliffe <matt.hinchliffe@ft.com>
Date: Mon, 20 Jul 2015 16:05:59 +0100
Subject: [PATCH 5/7] Update typography config, extends, functions and mixins

---
 .../stylesheets/config/_typography.scss       | 82 +++++++++----------
 .../stylesheets/lib/extends/_typography.scss  |  2 +-
 .../lib/functions/_typography.scss            | 18 +++-
 .../stylesheets/lib/mixins/_typography.scss   | 14 ++--
 4 files changed, 63 insertions(+), 53 deletions(-)

diff --git a/app/assets/stylesheets/config/_typography.scss b/app/assets/stylesheets/config/_typography.scss
index dea4b78..6a297b5 100644
--- a/app/assets/stylesheets/config/_typography.scss
+++ b/app/assets/stylesheets/config/_typography.scss
@@ -1,64 +1,64 @@
-$base-font-face: "Courier New", Courier, monospace;
+$base-font-family: 'Courier New', Courier, monospace;
 
 $base-paragraph-spacing: 26px;
 
 $text-sizing: (
-  centi: (
-    small: (
-      font-size: 12px,
-      line-height: 16px
+  'centi': (
+    'small': (
+      'font-size': 12px,
+      'line-height': 16px
     )
   ),
-  deci: (
-    small: (
-      font-size: 14px,
-      line-height: 20px
+  'deci': (
+    'small': (
+      'font-size': 14px,
+      'line-height': 20px
     )
   ),
-  base: (
-    small: (
-      font-size: 16px,
-      line-height: 26px
+  'base': (
+    'small': (
+      'font-size': 16px,
+      'line-height': 26px
     )
   ),
-  deca: (
-    small: (
-      font-size: 18px,
-      line-height: 26px
+  'deca': (
+    'small': (
+      'font-size': 18px,
+      'line-height': 26px
     ),
-    large: (
-      font-size: 20px,
-      line-height: 30px
+    'large': (
+      'font-size': 20px,
+      'line-height': 30px
     )
   ),
-  hecto: (
-    small: (
-      font-size: 22px,
-      line-height: 28px
+  'hecto': (
+    'small': (
+      'font-size': 22px,
+      'line-height': 28px
     ),
-    large: (
-      font-size: 24px,
-      line-height: 32px
+    'large': (
+      'font-size': 24px,
+      'line-height': 32px
     )
   ),
-  kilo: (
-    small: (
-      font-size: 24px,
-      line-height: 32px
+  'kilo': (
+    'small': (
+      'font-size': 24px,
+      'line-height': 32px
     ),
-    large: (
-      font-size: 28px,
-      line-height: 36px
+    'large': (
+      'font-size': 28px,
+      'line-height': 36px
     )
   ),
-  mega: (
-    small: (
-      font-size: 36px,
-      line-height: 48px
+  'mega': (
+    'small': (
+      'font-size': 36px,
+      'line-height': 48px
     ),
-    large: (
-      font-size: 40px,
-      line-height: 60px
+    'large': (
+      'font-size': 40px,
+      'line-height': 60px
     )
   )
 );
diff --git a/app/assets/stylesheets/lib/extends/_typography.scss b/app/assets/stylesheets/lib/extends/_typography.scss
index 9a695a6..1dc4ada 100644
--- a/app/assets/stylesheets/lib/extends/_typography.scss
+++ b/app/assets/stylesheets/lib/extends/_typography.scss
@@ -1,3 +1,3 @@
 %base-font {
-  font-family: $base-font-face;
+  font-family: $base-font-family;
 }
diff --git a/app/assets/stylesheets/lib/functions/_typography.scss b/app/assets/stylesheets/lib/functions/_typography.scss
index 3ec0e89..c3fdda7 100644
--- a/app/assets/stylesheets/lib/functions/_typography.scss
+++ b/app/assets/stylesheets/lib/functions/_typography.scss
@@ -1,8 +1,20 @@
 @function text-breakpoints-for($text-size) {
-  @return map-get($text-sizing, $text-size);
+  $text-breakpoints: map-get($text-sizing, $text-size);
+
+  @if $text-breakpoints {
+    @return $text-breakpoints;
+  }
+
+  @warn "Text size '#{$text-size}' not found in $text-sizing";
 }
 
 @function text-properties-for($text-size, $breakpoint-name) {
-  $text-breakpoints-map: text-breakpoints-for($text-size);
-  @return map-get($text-breakpoints-map, $breakpoint-name);
+  $text-breakpoints: text-breakpoints-for($text-size);
+  $text-properties: map-get($text-breakpoints, $breakpoint-name);
+
+  @if $text-properties {
+    @return $text-properties;
+  }
+
+  @warn "Breakpoint '#{$breakpoint-name}' for text size '#{$text-size}' was not found";
 }
diff --git a/app/assets/stylesheets/lib/mixins/_typography.scss b/app/assets/stylesheets/lib/mixins/_typography.scss
index 367cc83..7abfd69 100644
--- a/app/assets/stylesheets/lib/mixins/_typography.scss
+++ b/app/assets/stylesheets/lib/mixins/_typography.scss
@@ -1,22 +1,20 @@
-@mixin text-size($text-size, $breakpoint-name: "small") {
+@mixin text-size($text-size, $breakpoint-name: 'small') {
   $text-size-properties: text-properties-for($text-size, $breakpoint-name);
 
-  @if $text-size-properties != null {
-    font-size: map-get($text-size-properties, "font-size");
-    line-height: map-get($text-size-properties, "line-height");
-  } @else {
-    @warn "Breakpoint '#{$breakpoint-name}' for text size '#{$text-size}' is not defined";
+  @if $text-size-properties {
+    font-size: map-get($text-size-properties, 'font-size');
+    line-height: map-get($text-size-properties, 'line-height');
   }
 }
 
-@mixin responsive-text-size($text-size, $default-breakpoint: "small") {
+@mixin responsive-text-size($text-size, $default-breakpoint: 'small') {
   @include text-size($text-size, $default-breakpoint);
 
   $text-breakpoints-map: text-breakpoints-for($text-size);
   $text-breakpoints-keys: map-keys($text-breakpoints-map);
 
   @each $breakpoint-name in $text-breakpoints-keys {
-    @if $breakpoint-name != $default-breakpoint and breakpoint($breakpoint-name) != null {
+    @if $breakpoint-name != $default-breakpoint {
       @include respond-above($breakpoint-name) {
         @include text-size($text-size, $breakpoint-name);
       }

From 1e24b3dffc2495e242a7d43c9acd34c294d0e4d3 Mon Sep 17 00:00:00 2001
From: Matt Hinchliffe <matt.hinchliffe@ft.com>
Date: Mon, 20 Jul 2015 16:08:06 +0100
Subject: [PATCH 6/7] Update utility functions

---
 .../stylesheets/lib/functions/_utility.scss   | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/lib/functions/_utility.scss b/app/assets/stylesheets/lib/functions/_utility.scss
index 04d940d..5ab318a 100644
--- a/app/assets/stylesheets/lib/functions/_utility.scss
+++ b/app/assets/stylesheets/lib/functions/_utility.scss
@@ -5,36 +5,32 @@
 @function unpack($shorthand) {
   @if length($shorthand) == 1 {
     @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);
-  } @else if length($shorthand) == 2 {
+  }
+  @if length($shorthand) == 2 {
     @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
-  } @else if length($shorthand) == 3 {
+  }
+  @if length($shorthand) == 3 {
     @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
-  } @else {
-    @return $shorthand;
   }
+
+  @return $shorthand;
 }
 
 @function directional-value($values, $direction) {
   $values: unpack($values);
 
-  @if $direction == "top" {
+  @if $direction == 'top' {
     @return nth($values, 1);
   }
-  @if $direction == "right" {
+  @if $direction == 'right' {
     @return nth($values, 2);
   }
-  @if $direction == "bottom" {
+  @if $direction == 'bottom' {
     @return nth($values, 3);
   }
-  @if $direction == "left" {
+  @if $direction == 'left' {
     @return nth($values, 4);
   }
-}
-
-@mixin prefixer($property, $value, $prefixes: webkit moz) {
-  @each $prefix in $prefixes {
-    -#{$prefix}-#{$property}: $value;
-  }
 
-  #{$property}: $value;
+  @warn "Direction '#{$direction}' does not exist";
 }

From 61695811d0cbcd555d2472051f31e741de396462 Mon Sep 17 00:00:00 2001
From: Matt Hinchliffe <matt.hinchliffe@ft.com>
Date: Mon, 20 Jul 2015 16:39:52 +0100
Subject: [PATCH 7/7] Add SCSS lint and ensure stylesheets are compliant

---
 .scss-lint.yml                                | 169 ++++++++++++++++++
 Gemfile                                       |   3 +
 Gemfile.lock                                  |   6 +
 .../stylesheets/component/_aspect-ratio.scss  |   8 +-
 app/assets/stylesheets/component/_notice.scss |   2 +-
 .../stylesheets/component/_slideshow.scss     |  18 +-
 .../component/_sliding-drawer.scss            |   2 +-
 app/assets/stylesheets/config/_color.scss     |   2 +-
 app/assets/stylesheets/config/_layout.scss    |  12 +-
 .../stylesheets/config/_responsive.scss       |   8 +-
 .../stylesheets/config/_typography.scss       |  82 ++++-----
 app/assets/stylesheets/lib/_animation.scss    |   4 +
 app/assets/stylesheets/lib/_functions.scss    |   2 +-
 .../stylesheets/lib/extends/_layout.scss      |  20 +--
 .../stylesheets/lib/extends/_style.scss       |   2 +-
 .../stylesheets/lib/functions/_layout.scss    |   4 +-
 .../stylesheets/lib/functions/_utility.scss   |   8 +-
 .../stylesheets/lib/mixins/_typography.scss   |   8 +-
 .../stylesheets/view/_search-results.scss     |   2 +-
 .../stylesheets/view/shared/_site-header.scss |  19 +-
 20 files changed, 281 insertions(+), 100 deletions(-)
 create mode 100644 .scss-lint.yml

diff --git a/.scss-lint.yml b/.scss-lint.yml
new file mode 100644
index 0000000..8d84e2a
--- /dev/null
+++ b/.scss-lint.yml
@@ -0,0 +1,169 @@
+linters:
+
+  BangFormat:
+    enabled: true
+    space_before_bang: true
+    space_after_bang: false
+
+  BorderZero:
+    enabled: true
+
+  ColorKeyword:
+    enabled: false
+
+  ColorVariable:
+    enabled: false
+
+  Comment:
+    enabled: false
+
+  DebugStatement:
+    enabled: true
+
+  DeclarationOrder:
+    enabled: true
+
+  DuplicateProperty:
+    enabled: false
+
+  ElsePlacement:
+    enabled: true
+    style: same_line
+
+  EmptyLineBetweenBlocks:
+    enabled: true
+    ignore_single_line_blocks: false
+
+  EmptyRule:
+    enabled: true
+
+  FinalNewline:
+    enabled: true
+    present: true
+
+  HexLength:
+    enabled: true
+    style: short
+
+  HexNotation:
+    enabled: true
+    style: uppercase
+
+  HexValidation:
+    enabled: true
+
+  IdSelector:
+    enabled: true
+
+  ImportPath:
+    enabled: true
+    leading_underscore: false
+    filename_extension: false
+
+  Indentation:
+    enabled: true
+    character: space
+    width: 2
+
+  LeadingZero:
+    enabled: true
+    style: include_zero
+
+  MergeableSelector:
+    enabled: false
+    force_nesting: false
+
+  NameFormat:
+    enabled: true
+    convention: hyphenated_lowercase
+    allow_leading_underscore: true
+
+  NestingDepth:
+    enabled: true
+    max_depth: 3
+
+  PlaceholderInExtend:
+    enabled: true
+
+  PropertySortOrder:
+    enabled: false
+    ignore_unspecified: false
+
+  PropertySpelling:
+    enabled: true
+    extra_properties: []
+
+  QualifyingElement:
+    enabled: true
+    allow_element_with_attribute: false
+    allow_element_with_class: false
+    allow_element_with_id: false
+
+  SelectorDepth:
+    enabled: true
+    max_depth: 3
+
+  SelectorFormat:
+    enabled: true
+    convention: hyphenated_lowercase
+    class_convention: '^(?:u|is|has)\-[a-z][a-zA-Z0-9]*$|^(?!u|is|has)[a-zA-Z][a-zA-Z0-9]*(?:\-[a-z][a-zA-Z0-9]*)?(?:\-\-[a-zA-Z0-9]*)?$'
+
+  Shorthand:
+    enabled: true
+
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: false
+
+  SingleLinePerSelector:
+    enabled: true
+
+  SpaceAfterComma:
+    enabled: true
+
+  SpaceAfterPropertyColon:
+    enabled: true
+    style: one_space
+
+  SpaceAfterPropertyName:
+    enabled: true
+
+  SpaceBeforeBrace:
+    enabled: true
+    style: space
+    allow_single_line_padding: true
+
+  SpaceBetweenParens:
+    enabled: true
+    spaces: 0
+
+  StringQuotes:
+    enabled: true
+    style: double_quotes
+
+  TrailingSemicolon:
+    enabled: true
+
+  TrailingZero:
+    enabled: true
+
+  UnnecessaryMantissa:
+    enabled: true
+
+  UnnecessaryParentReference:
+    enabled: true
+
+  UrlFormat:
+    enabled: false
+
+  UrlQuotes:
+    enabled: true
+
+  VendorPrefixes:
+    enabled: true
+    identifier_list: base
+    include: []
+    exclude: []
+
+  ZeroUnit:
+    enabled: true
diff --git a/Gemfile b/Gemfile
index 258bc37..882334c 100644
--- a/Gemfile
+++ b/Gemfile
@@ -61,6 +61,9 @@ group :development do
   # Access an IRB console on exception pages or by using <%%= console %> in views
   gem 'web-console', '~> 2.0.0'
 
+  # Use SCSS lint to check Sass style
+  gem 'scss-lint'
+
 end
 
 group :production do
diff --git a/Gemfile.lock b/Gemfile.lock
index 25fb41c..1573e9b 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -145,6 +145,8 @@ GEM
       activesupport (= 4.2.4)
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
+    rainbow (2.0.0)
+    raindrops (0.12.0)
     rake (10.4.2)
     ransack (1.6.6)
       actionpack (>= 3.0)
@@ -176,6 +178,9 @@ GEM
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
+    scss-lint (0.35.0)
+      rainbow (~> 2.0)
+      sass (~> 3.4.1)
     slim (3.0.1)
       temple (~> 0.7.3)
       tilt (>= 1.3.3, < 2.1)
@@ -229,6 +234,7 @@ DEPENDENCIES
   rails_12factor
   rspec-rails
   sass-rails (~> 5.0.0)
+  scss-lint
   slim-rails
   spring
   uglifier (~> 2.7.2)
diff --git a/app/assets/stylesheets/component/_aspect-ratio.scss b/app/assets/stylesheets/component/_aspect-ratio.scss
index 8886559..27483ed 100644
--- a/app/assets/stylesheets/component/_aspect-ratio.scss
+++ b/app/assets/stylesheets/component/_aspect-ratio.scss
@@ -2,15 +2,15 @@
   position: relative;
 }
 
-.AspectRatio--1x1  {
+.AspectRatio--1x1 {
   padding-top: 100%;
 }
 
-.AspectRatio--4x3  {
+.AspectRatio--4x3 {
   padding-top: 75%;
 }
 
-.AspectRatio--3x2  {
+.AspectRatio--3x2 {
   padding-top: 66.66%;
 }
 
@@ -18,7 +18,7 @@
   padding-top: 56.25%;
 }
 
-.AspectRatio--2x1  {
+.AspectRatio--2x1 {
   padding-top: 50%;
 }
 
diff --git a/app/assets/stylesheets/component/_notice.scss b/app/assets/stylesheets/component/_notice.scss
index efc7d73..44e73d8 100644
--- a/app/assets/stylesheets/component/_notice.scss
+++ b/app/assets/stylesheets/component/_notice.scss
@@ -1,7 +1,7 @@
 .Notice {
   @extend %base-border-radius;
   border: 2px solid;
-  padding: map-get($base-padding, 'small');
+  padding: map-get($base-padding, "small");
 }
 
 .Notice--error {
diff --git a/app/assets/stylesheets/component/_slideshow.scss b/app/assets/stylesheets/component/_slideshow.scss
index 6f7cc98..93a692f 100644
--- a/app/assets/stylesheets/component/_slideshow.scss
+++ b/app/assets/stylesheets/component/_slideshow.scss
@@ -87,8 +87,8 @@ $slideshow-img-size: 640px;
   left: 0;
   display: none;
   overflow: hidden;
-  background: linear-gradient(to top, rgba($palette-gray-80, .85) 0, rgba($palette-gray-80, 0) 100%);
-  padding: map-get($base-padding, 'medium');
+  background: linear-gradient(to top, rgba($palette-gray-80, 0.85) 0, rgba($palette-gray-80, 0) 100%);
+  padding: map-get($base-padding, "medium");
   padding-top: 40px;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -108,7 +108,7 @@ $slideshow-img-size: 640px;
   margin-top: -25px;
   border: 0;
   background: none;
-  padding: map-get($base-padding, 'small');
+  padding: map-get($base-padding, "small");
   font-size: 32px;
   line-height: 1;
   transition: left 0.25s, right 0.25s;
@@ -165,6 +165,12 @@ $slideshow-img-size: 640px;
   border-radius: 50%;
   box-shadow: inset 0 0 0 2px white;
 
+  @include respond-above("large") {
+    width: 16px;
+    height: 16px;
+    margin: 0 8px;
+  }
+
   &::after {
     content: "";
     position: absolute;
@@ -186,10 +192,4 @@ $slideshow-img-size: 640px;
 
   }
 
-  @include respond-above("large") {
-    width: 16px;
-    height: 16px;
-    margin: 0 8px;
-  }
-
 }
diff --git a/app/assets/stylesheets/component/_sliding-drawer.scss b/app/assets/stylesheets/component/_sliding-drawer.scss
index b170893..b46456f 100644
--- a/app/assets/stylesheets/component/_sliding-drawer.scss
+++ b/app/assets/stylesheets/component/_sliding-drawer.scss
@@ -6,7 +6,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    transition: transform .5s $ease-out-back;
+    transition: transform 0.5s $ease-out-back;
     will-change: transform;
   }
 
diff --git a/app/assets/stylesheets/config/_color.scss b/app/assets/stylesheets/config/_color.scss
index 01d618a..f874c5d 100644
--- a/app/assets/stylesheets/config/_color.scss
+++ b/app/assets/stylesheets/config/_color.scss
@@ -13,4 +13,4 @@ $palette-gray-05: #F2F2F2;
 // Notice colors
 $palette-notice-error:   #D9534F;
 $palette-notice-warning: #F0AD4E;
-$palette-notice-success: #5Cb85C;
+$palette-notice-success: #5CB85C;
diff --git a/app/assets/stylesheets/config/_layout.scss b/app/assets/stylesheets/config/_layout.scss
index 4191c1e..857cfba 100644
--- a/app/assets/stylesheets/config/_layout.scss
+++ b/app/assets/stylesheets/config/_layout.scss
@@ -8,13 +8,13 @@ $header-height-large: 78px;
 
 // Base margins and padding
 $base-margins: (
-  'small': 16px 10px,
-  'medium': 24px 20px,
-  'large': 36px 40px
+  "small": 16px 10px,
+  "medium": 24px 20px,
+  "large": 36px 40px
 );
 
 $base-padding: (
-  'small': 12px,
-  'medium': 18px 20px,
-  'large': 36px 40px
+  "small": 12px,
+  "medium": 18px 20px,
+  "large": 36px 40px
 );
diff --git a/app/assets/stylesheets/config/_responsive.scss b/app/assets/stylesheets/config/_responsive.scss
index 74a2bb2..8f02774 100644
--- a/app/assets/stylesheets/config/_responsive.scss
+++ b/app/assets/stylesheets/config/_responsive.scss
@@ -1,6 +1,6 @@
 $breakpoints: (
-  'small':    480px,
-  'medium':   720px,
-  'large':    960px,
-  'x-large':  1280px
+  "small":    480px,
+  "medium":   720px,
+  "large":    960px,
+  "x-large":  1280px
 );
diff --git a/app/assets/stylesheets/config/_typography.scss b/app/assets/stylesheets/config/_typography.scss
index 6a297b5..1daa68c 100644
--- a/app/assets/stylesheets/config/_typography.scss
+++ b/app/assets/stylesheets/config/_typography.scss
@@ -1,64 +1,64 @@
-$base-font-family: 'Courier New', Courier, monospace;
+$base-font-family: "Courier New", Courier, monospace;
 
 $base-paragraph-spacing: 26px;
 
 $text-sizing: (
-  'centi': (
-    'small': (
-      'font-size': 12px,
-      'line-height': 16px
+  "centi": (
+    "small": (
+      "font-size": 12px,
+      "line-height": 16px
     )
   ),
-  'deci': (
-    'small': (
-      'font-size': 14px,
-      'line-height': 20px
+  "deci": (
+    "small": (
+      "font-size": 14px,
+      "line-height": 20px
     )
   ),
-  'base': (
-    'small': (
-      'font-size': 16px,
-      'line-height': 26px
+  "base": (
+    "small": (
+      "font-size": 16px,
+      "line-height": 26px
     )
   ),
-  'deca': (
-    'small': (
-      'font-size': 18px,
-      'line-height': 26px
+  "deca": (
+    "small": (
+      "font-size": 18px,
+      "line-height": 26px
     ),
-    'large': (
-      'font-size': 20px,
-      'line-height': 30px
+    "large": (
+      "font-size": 20px,
+      "line-height": 30px
     )
   ),
-  'hecto': (
-    'small': (
-      'font-size': 22px,
-      'line-height': 28px
+  "hecto": (
+    "small": (
+      "font-size": 22px,
+      "line-height": 28px
     ),
-    'large': (
-      'font-size': 24px,
-      'line-height': 32px
+    "large": (
+      "font-size": 24px,
+      "line-height": 32px
     )
   ),
-  'kilo': (
-    'small': (
-      'font-size': 24px,
-      'line-height': 32px
+  "kilo": (
+    "small": (
+      "font-size": 24px,
+      "line-height": 32px
     ),
-    'large': (
-      'font-size': 28px,
-      'line-height': 36px
+    "large": (
+      "font-size": 28px,
+      "line-height": 36px
     )
   ),
-  'mega': (
-    'small': (
-      'font-size': 36px,
-      'line-height': 48px
+  "mega": (
+    "small": (
+      "font-size": 36px,
+      "line-height": 48px
     ),
-    'large': (
-      'font-size': 40px,
-      'line-height': 60px
+    "large": (
+      "font-size": 40px,
+      "line-height": 60px
     )
   )
 );
diff --git a/app/assets/stylesheets/lib/_animation.scss b/app/assets/stylesheets/lib/_animation.scss
index 9671a25..99594cc 100644
--- a/app/assets/stylesheets/lib/_animation.scss
+++ b/app/assets/stylesheets/lib/_animation.scss
@@ -2,6 +2,7 @@
   0% {
     transform: translateY(100%);
   }
+
   100% {
     transform: translateY(0);
   }
@@ -11,6 +12,7 @@
   0% {
     transform: translateY(0);
   }
+
   100% {
     transform: translateY(100%);
   }
@@ -21,6 +23,7 @@
     opacity: 0;
     transform: scale(0.5);
   }
+
   100% {
     opacity: 1;
     transform: scale(1);
@@ -32,6 +35,7 @@
     opacity: 1;
     transform: scale(1);
   }
+
   100% {
     opacity: 0;
     transform: scale(1.5);
diff --git a/app/assets/stylesheets/lib/_functions.scss b/app/assets/stylesheets/lib/_functions.scss
index 3efeb54..1fc6a18 100644
--- a/app/assets/stylesheets/lib/_functions.scss
+++ b/app/assets/stylesheets/lib/_functions.scss
@@ -1,4 +1,4 @@
 @import "functions/layout";
 @import "functions/responsive";
 @import "functions/typography";
-@import "functions/utility"
+@import "functions/utility";
diff --git a/app/assets/stylesheets/lib/extends/_layout.scss b/app/assets/stylesheets/lib/extends/_layout.scss
index 238e727..266ee4a 100644
--- a/app/assets/stylesheets/lib/extends/_layout.scss
+++ b/app/assets/stylesheets/lib/extends/_layout.scss
@@ -1,25 +1,25 @@
 %base-margin {
-  margin: map-get($base-margins, 'small');
+  margin: map-get($base-margins, "small");
 
-  @include respond-above('medium') {
-    margin: map-get($base-margins, 'medium');
+  @include respond-above("medium") {
+    margin: map-get($base-margins, "medium");
   }
 
-  @include respond-above('large') {
-    margin: map-get($base-margins, 'large');
+  @include respond-above("large") {
+    margin: map-get($base-margins, "large");
   }
 
 }
 
 %base-padding {
-  padding: map-get($base-padding, 'small');
+  padding: map-get($base-padding, "small");
 
-  @include respond-above('medium') {
-    padding: map-get($base-padding, 'medium');
+  @include respond-above("medium") {
+    padding: map-get($base-padding, "medium");
   }
 
-  @include respond-above('large') {
-    padding: map-get($base-padding, 'large');
+  @include respond-above("large") {
+    padding: map-get($base-padding, "large");
   }
 
 }
diff --git a/app/assets/stylesheets/lib/extends/_style.scss b/app/assets/stylesheets/lib/extends/_style.scss
index 41e7e35..16e07af 100644
--- a/app/assets/stylesheets/lib/extends/_style.scss
+++ b/app/assets/stylesheets/lib/extends/_style.scss
@@ -18,7 +18,7 @@
   @extend %base-font;
   @extend %base-border-radius;
   border: 2px solid;
-  padding: map-get($base-padding, 'small');
+  padding: map-get($base-padding, "small");
   line-height: 1.625;
   font-size: 100%;
   color: $palette-gray-80;
diff --git a/app/assets/stylesheets/lib/functions/_layout.scss b/app/assets/stylesheets/lib/functions/_layout.scss
index 8614e5d..7c6d98d 100644
--- a/app/assets/stylesheets/lib/functions/_layout.scss
+++ b/app/assets/stylesheets/lib/functions/_layout.scss
@@ -1,4 +1,4 @@
-@function base-padding($direction, $size: 'medium') {
+@function base-padding($direction, $size: "medium") {
   $margin-values: map-get($base-margins, $size);
 
   @if $margin-values {
@@ -8,7 +8,7 @@
   @warn "Margin size '#{$size}' does not exist in $base-margins";
 }
 
-@function base-padding($direction, $size: 'medium') {
+@function base-padding($direction, $size: "medium") {
   $padding-values: map-get($base-padding, $size);
 
   @if $padding-values {
diff --git a/app/assets/stylesheets/lib/functions/_utility.scss b/app/assets/stylesheets/lib/functions/_utility.scss
index 5ab318a..1fc2123 100644
--- a/app/assets/stylesheets/lib/functions/_utility.scss
+++ b/app/assets/stylesheets/lib/functions/_utility.scss
@@ -19,16 +19,16 @@
 @function directional-value($values, $direction) {
   $values: unpack($values);
 
-  @if $direction == 'top' {
+  @if $direction == "top" {
     @return nth($values, 1);
   }
-  @if $direction == 'right' {
+  @if $direction == "right" {
     @return nth($values, 2);
   }
-  @if $direction == 'bottom' {
+  @if $direction == "bottom" {
     @return nth($values, 3);
   }
-  @if $direction == 'left' {
+  @if $direction == "left" {
     @return nth($values, 4);
   }
 
diff --git a/app/assets/stylesheets/lib/mixins/_typography.scss b/app/assets/stylesheets/lib/mixins/_typography.scss
index 7abfd69..f140c33 100644
--- a/app/assets/stylesheets/lib/mixins/_typography.scss
+++ b/app/assets/stylesheets/lib/mixins/_typography.scss
@@ -1,13 +1,13 @@
-@mixin text-size($text-size, $breakpoint-name: 'small') {
+@mixin text-size($text-size, $breakpoint-name: "small") {
   $text-size-properties: text-properties-for($text-size, $breakpoint-name);
 
   @if $text-size-properties {
-    font-size: map-get($text-size-properties, 'font-size');
-    line-height: map-get($text-size-properties, 'line-height');
+    font-size: map-get($text-size-properties, "font-size");
+    line-height: map-get($text-size-properties, "line-height");
   }
 }
 
-@mixin responsive-text-size($text-size, $default-breakpoint: 'small') {
+@mixin responsive-text-size($text-size, $default-breakpoint: "small") {
   @include text-size($text-size, $default-breakpoint);
 
   $text-breakpoints-map: text-breakpoints-for($text-size);
diff --git a/app/assets/stylesheets/view/_search-results.scss b/app/assets/stylesheets/view/_search-results.scss
index 1a2c4b4..12a5819 100644
--- a/app/assets/stylesheets/view/_search-results.scss
+++ b/app/assets/stylesheets/view/_search-results.scss
@@ -70,7 +70,7 @@
 }
 
 .SearchResults-toggle {
-  padding: map-get($base-padding, 'small');
+  padding: map-get($base-padding, "small");
   border-bottom: 1px solid $palette-gray-20;
 
   &.is-active {
diff --git a/app/assets/stylesheets/view/shared/_site-header.scss b/app/assets/stylesheets/view/shared/_site-header.scss
index bc41c43..35d6a25 100644
--- a/app/assets/stylesheets/view/shared/_site-header.scss
+++ b/app/assets/stylesheets/view/shared/_site-header.scss
@@ -21,10 +21,10 @@
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
-  padding: map-get($base-padding, 'small');
+  padding: map-get($base-padding, "small");
 
   @include respond-above("medium") {
-    padding: map-get($base-padding, 'medium');
+    padding: map-get($base-padding, "medium");
   }
 
 }
@@ -62,6 +62,11 @@
   box-sizing: border-box;
   width: 100%;
 
+  // The panel will display above the header when the document is
+  // scrolled past its boundary on iOS Safari so it needs to be
+  // hidden without using display: none which prevents transitions.
+  left: -9999px;
+
   // This mask covers any bleed-through caused by animation easing
   &::before {
     content: "";
@@ -75,19 +80,13 @@
 
   &.is-open {
     @extend %base-shadow-low;
-    animation: slideOut .6s $ease-out-back forwards;
+    animation: slideOut 0.6s $ease-out-back forwards;
   }
 
   &.is-closed {
-    animation: slideIn .6s $ease-in-back;
+    animation: slideIn 0.6s $ease-in-back;
   }
 
-
-  // The panel will display above the header when the document is
-  // scrolled past its boundary on iOS Safari so it needs to be
-  // hidden without using display: none which prevents transitions.
-  left: -9999px;
-
   &.is-open,
   &.is-animating {
     left: 0;