From df7cd950f93cb39e912c63463df5430441b19856 Mon Sep 17 00:00:00 2001
From: James Vinter <vinterj@parliament.uk>
Date: Wed, 15 Mar 2017 15:50:10 +0000
Subject: [PATCH 1/7] [WEBSITE-712] SASS enhancements and additions inline with
 new brand

---
 src/stylesheets/components/_footer.scss       |  9 +---
 src/stylesheets/components/_header.scss       | 22 +++-------
 .../components/_highlight-box.scss            |  4 +-
 .../components/_highlight-status.scss         | 12 ++++--
 src/stylesheets/components/_line-break.scss   |  6 +--
 src/stylesheets/components/_link-tab.scss     | 34 +++++++--------
 src/stylesheets/components/_list-styles.scss  | 22 +++++-----
 .../components/_navigation-letter.scss        |  8 +---
 src/stylesheets/elements/_links.scss          |  3 ++
 src/stylesheets/elements/_typography.scss     |  7 +++
 src/stylesheets/objects/_block-layouts.scss   | 24 +++++------
 src/stylesheets/objects/_grid-layouts.scss    | 29 +++++++------
 src/stylesheets/settings/_colours.scss        | 43 +++++++++++--------
 src/stylesheets/settings/_spacing.scss        |  6 +--
 src/stylesheets/tools/mixins/_font-size.scss  |  7 ++-
 15 files changed, 120 insertions(+), 116 deletions(-)

diff --git a/src/stylesheets/components/_footer.scss b/src/stylesheets/components/_footer.scss
index ef9836ef..1deb78d1 100644
--- a/src/stylesheets/components/_footer.scss
+++ b/src/stylesheets/components/_footer.scss
@@ -7,18 +7,13 @@
   padding-bottom: $base-spacing-unit;
   background-color: $footer-background;
   a:link, a:hover, a:active, a:focus, a:visited, p {
-  	color: $footer-text;
+    color: $footer-text;
   }
   a:hover, a:active, a:focus {
     text-decoration: none;
   }
   &__logo {
-  	font-weight: bold;
-    img {
-      display: block;
-      width: 118px;
-      height: 22px;
-    }
+    font-weight: bold;
   }
   &__list {
     list-style: none;
diff --git a/src/stylesheets/components/_header.scss b/src/stylesheets/components/_header.scss
index 9aa3e916..aae69533 100644
--- a/src/stylesheets/components/_header.scss
+++ b/src/stylesheets/components/_header.scss
@@ -6,22 +6,12 @@
   border-bottom-style: solid;
   border-bottom-color: $header-bottom-border;
   &__logo {
-  	span {
-	    a {
-	      text-decoration: none;
-	      color: $headings;
-	      @include fontsize(36, 52);
-    		font-weight: bold;
-	    }
-	  }
-    img {
-      display: block;
-      width: 268px;
-      height: 50px;
-      // Mobile View
-      @include media($mobile) {
-        width: 134px;
-        height: 25px;
+    span {
+      a {
+        text-decoration: none;
+        color: $headings;
+        @include fontsize(36, 52);
+        font-weight: bold;
       }
     }
   }
diff --git a/src/stylesheets/components/_highlight-box.scss b/src/stylesheets/components/_highlight-box.scss
index bdc5d557..fef1866f 100644
--- a/src/stylesheets/components/_highlight-box.scss
+++ b/src/stylesheets/components/_highlight-box.scss
@@ -25,8 +25,8 @@
     margin-bottom: 0;
   }
   @include media($tablet) {
-	  padding-right: $base-spacing-unit-medium;
-	  padding-left: $base-spacing-unit-medium;
+    padding-right: $base-spacing-unit-medium;
+    padding-left: $base-spacing-unit-medium;
   }
 }
 
diff --git a/src/stylesheets/components/_highlight-status.scss b/src/stylesheets/components/_highlight-status.scss
index 794cc22e..203686f0 100644
--- a/src/stylesheets/components/_highlight-status.scss
+++ b/src/stylesheets/components/_highlight-status.scss
@@ -1,11 +1,13 @@
 .highlight__status {
   @extend .block;
   background-color: $beta-banner;
-  color: $headings;
   a {
-    &:link,
+    &:link {
+      color: $paragraph;
+      text-decoration: underline;
+    }
     &:visited {
-      color: $headings;
+      color: $links-visited;
       text-decoration: underline;
     }
     &:hover,
@@ -15,4 +17,8 @@
       text-decoration: none;
     }
   }
+  @include media($mobile) {
+    padding-top: $base-spacing-unit-tiny - 2;
+    padding-bottom: $base-spacing-unit-tiny;
+  }
 }
diff --git a/src/stylesheets/components/_line-break.scss b/src/stylesheets/components/_line-break.scss
index a2b96356..4342e1ad 100644
--- a/src/stylesheets/components/_line-break.scss
+++ b/src/stylesheets/components/_line-break.scss
@@ -1,7 +1,7 @@
 .line-break-heavy {
   height: 4px;
   width: 60px;
-  margin-top: $base-spacing-unit-tiny;
-  margin-bottom: $base-spacing-unit-tiny;
-	background-color: $headings;
+  margin-top: $base-spacing-unit-small;
+  margin-bottom: $base-spacing-unit-small;
+  background-color: $headings;
 }
diff --git a/src/stylesheets/components/_link-tab.scss b/src/stylesheets/components/_link-tab.scss
index 31f21125..daed18f3 100644
--- a/src/stylesheets/components/_link-tab.scss
+++ b/src/stylesheets/components/_link-tab.scss
@@ -4,22 +4,22 @@
   border-bottom-color: $dividers;
 
   &--item {
-  	display: inline-block;
-  	margin-right: $base-spacing-unit-medium;
-  	position: relative;
-  	top: 5px;
-  	padding-bottom: 2px;
-  	a {
-  		position: inherit;
-  		top:-1px;
-  	}
-  	&.active {
-  		p {
-  			font-weight: bold;
-  		}
-  		border-bottom-width: 5px;
-		  border-bottom-style: solid;
-		  border-bottom-color: blue;
-  	}
+  display: inline-block;
+  margin-right: $base-spacing-unit-medium;
+  position: relative;
+  top: 5px;
+  padding-bottom: 2px;
+  a {
+    position: inherit;
+    top:-1px;
+  }
+  &.active {
+    p {
+      font-weight: bold;
+    }
+    border-bottom-width: 5px;
+    border-bottom-style: solid;
+    border-bottom-color: $highlight-primary-bold;
+    }
   }
 }
diff --git a/src/stylesheets/components/_list-styles.scss b/src/stylesheets/components/_list-styles.scss
index 6de9c9ce..351b838c 100644
--- a/src/stylesheets/components/_list-styles.scss
+++ b/src/stylesheets/components/_list-styles.scss
@@ -9,14 +9,14 @@
     list-style: none;
   }
   h2,h3,h4,h5,h6 {
-  	font-size: inherit;
+    font-size: inherit;
     line-height: inherit;
     font-weight: bold;
   }
   &:after {
-  	content: "";
-	  display: table;
-	  clear: both;
+    content: "";
+    display: table;
+    clear: both;
   }
 }
 
@@ -34,13 +34,13 @@
 }
 
 .list__item {
-	@extend .list;
-	background: $white;
-	padding: $base-spacing-unit-medium;
-	margin-bottom: $base-spacing-unit-tiny;
-	&:last-child {
-		margin-bottom: 0;
-	}
+  @extend .list;
+  background: $white;
+  padding: $base-spacing-unit-medium;
+  margin-bottom: $base-spacing-unit-tiny;
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
 // Definition List - Horizontally Aligned
diff --git a/src/stylesheets/components/_navigation-letter.scss b/src/stylesheets/components/_navigation-letter.scss
index 41672fee..6bb8aef1 100644
--- a/src/stylesheets/components/_navigation-letter.scss
+++ b/src/stylesheets/components/_navigation-letter.scss
@@ -11,18 +11,14 @@
     margin-left: 0;
     float: left;
     padding: 0;
-    line-height: ($base-spacing-unit-large - 4);
     text-align: center;
     text-transform: uppercase;
     &:last-child {
       margin-right: 0;
     }
-    & > a {
-      display: block;
-    }
     @include media($desktop) {
-    	width: 7.69230769231%;
-      line-height: ($base-spacing-unit-large - 10);
+      //width: 7.69230769231%;
+      width: 3.84615384615%;
     }
   }
   & li.active > a {
diff --git a/src/stylesheets/elements/_links.scss b/src/stylesheets/elements/_links.scss
index f66e7785..2ced7d0c 100644
--- a/src/stylesheets/elements/_links.scss
+++ b/src/stylesheets/elements/_links.scss
@@ -19,4 +19,7 @@ a {
   &:visited {
     color: $links-visited;
   }
+  // Experimental text decoration declaration (webkit only)
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip
+  -webkit-text-decoration-skip: ink;
 }
diff --git a/src/stylesheets/elements/_typography.scss b/src/stylesheets/elements/_typography.scss
index 21414b77..f27ff9d3 100644
--- a/src/stylesheets/elements/_typography.scss
+++ b/src/stylesheets/elements/_typography.scss
@@ -2,6 +2,13 @@
 h1, h2, h3, h4, h5, h6, p {
   margin: 0;
   padding: 0;
+  font-weight: normal;
+  // font-smoothing - anti aliasing
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  // font-feature-settings - vertically aligned typeface
+  // https://developer.mozilla.org/en/docs/Web/CSS/font-feature-settings
+  font-feature-settings: 'pnum';
 }
 
 // Font Colors
diff --git a/src/stylesheets/objects/_block-layouts.scss b/src/stylesheets/objects/_block-layouts.scss
index 5e4b5269..4ebef3e0 100644
--- a/src/stylesheets/objects/_block-layouts.scss
+++ b/src/stylesheets/objects/_block-layouts.scss
@@ -6,23 +6,21 @@
 }
 
 .block--border-bottom {
-	@extend .block;
-	border-bottom: 1px solid $dividers;
+  @extend .block;
+  border-bottom: 1px solid $dividers;
 }
 
 .block--border {
-	@extend .block;
-	border-bottom: 1px solid $dividers;
-	border-top: 1px solid $dividers;
-	& + .block--border {
-		border-top: none;
-	}
+  @extend .block;
+  border-bottom: 1px solid $dividers;
+  border-top: 1px solid $dividers;
+  & + .block--border {
+    border-top: none;
+  }
 }
 
 .block--top {
-	@extend .block;
-	padding-top: $base-spacing-unit-medium;
-	padding-bottom: 0;
+  @extend .block;
+  padding-top: $base-spacing-unit-medium;
+  padding-bottom: 0;
 }
-
-
diff --git a/src/stylesheets/objects/_grid-layouts.scss b/src/stylesheets/objects/_grid-layouts.scss
index dc68c9c9..7a3723fc 100644
--- a/src/stylesheets/objects/_grid-layouts.scss
+++ b/src/stylesheets/objects/_grid-layouts.scss
@@ -38,27 +38,28 @@
   }
 }
 
+// Column - Float Layout 80:20
 .column__float--left-80 {
-	width: 80%;
-	float: left;
-	display: inline-block;
+  width: 80%;
+  float: left;
+  display: inline-block;
 }
 
 .column__float--right-20 {
-	width: 20%;
-	float: left;
-	display: inline-block;
-	text-align: right;
-	p {
+  width: 20%;
+  float: left;
+  display: inline-block;
+  text-align: right;
+  p {
     font-size: 30px;
     font-weight: bold;
     position: absolute;
-		right: $base-spacing-unit-medium;
-		top: calc(50% - 29px);
+    right: $base-spacing-unit-medium;
+    top: calc(50% - 29px);
     span {
-    	font-size: 18px;
-    	display:block;
-    	font-weight: normal;
+    font-size: 18px;
+    display:block;
+    font-weight: normal;
     }
-	}
+  }
 }
diff --git a/src/stylesheets/settings/_colours.scss b/src/stylesheets/settings/_colours.scss
index aa880b7e..38b3bae0 100644
--- a/src/stylesheets/settings/_colours.scss
+++ b/src/stylesheets/settings/_colours.scss
@@ -1,38 +1,47 @@
 // PDS Base Colours
-$black: #000;
-$white: #FFF;
-$commons-green: #00BA56;
-$lords-red: #C90D38;
-$bright-blue: #165FEA;
-$purple-heart: #5D2EB4;
-$blizzard-blue: #A3DFED;
+$black: #000000;
+$white: #FFFFFF;
+$commons-green: #006E46;
+$lords-red: #A10700;
 
 // PDS Grey Palette
-$grey-1: #333333; // Nightrider
-$grey-2: #5C5C5C; // Dark Grey
-$grey-3: #9B9B9B; // Hard Grey
-$grey-4: #C1C1C1; // Soft Grey
-$grey-5: #F4F4F4; // Light Grey
-
-// Branding Palette
+$grey-1: #2E2E2E; // Nightrider
+$grey-2: #4D4D4D; // Dark Grey
+$grey-3: #CBC9CD; // Hard Grey
+$grey-4: #EBE9E8; // Soft Grey
+$grey-5: #F8F7F7; // Light Grey
 
+// Components
 $header-background: #FFFFFF;
 $header-bottom-border: #CBC9CD;
 $beta-banner: #96DCBE;
 $main-background: #F8F7F7;
+$footer-background: #373151;
+$footer-text: #F8F7F7;
+
+// Typography
 $headings: #373151;
+$paragraph: #4D4D4D;
 $dividers: #CBC9CD;
+
+// Links
 $links: #2B57AB;
 $links-hover: #373151;
 $links-active: #2B57AB;
 $links-visited: #7C1389;
 
-$paragraph: #4D4D4D;
+// Buttons
+$button-primary: #2B57AB;
+$button-secondary: #BFCDE6;
+
+// Notifications
 $highlight-primary-bold: #5F2DB4;
 $highlight-primary-soft: #E7DFF4;
 $highlight-secondary-bold: #96DCBE;
 $highlight-secondary-soft: #DFF4EB;
 $highlight-caution-bold: #FBCF20;
 $highlight-caution-soft: #FEF3C7;
-$footer-background: #373151;
-$footer-text: #F8F7F7;
+$highlight-warning-bold: #DE2E32;
+$highlight-warning-soft: #F7CBCC;
+$highlight-success-bold: #00B95D;
+$highlight-success-soft: #BFEDD6;
diff --git a/src/stylesheets/settings/_spacing.scss b/src/stylesheets/settings/_spacing.scss
index 52c3bcce..abfa69a9 100644
--- a/src/stylesheets/settings/_spacing.scss
+++ b/src/stylesheets/settings/_spacing.scss
@@ -1,9 +1,9 @@
 // Create uniform spacing value by setting it equal to line height set in the fonts.scss file
-$base-spacing-unit: ($base-font-size * $base-line-height) + 0px;
-
+$base-spacing-unit-calc: $base-font-size * $base-line-height;
+$base-spacing-unit: ($base-spacing-unit-calc * 0.75) + 0px;
 // Using base spacing value create consistent spacing variations
 $base-spacing-unit-tiny: round($base-spacing-unit / 3);
 $base-spacing-unit-small: round($base-spacing-unit / 2);
-$base-spacing-unit-medium: round($base-spacing-unit * 0.75);
+$base-spacing-unit-medium: round($base-spacing-unit);
 $base-spacing-unit-large: round($base-spacing-unit * 1.25);
 $base-spacing-unit-extra-large: round($base-spacing-unit * 1.5);
diff --git a/src/stylesheets/tools/mixins/_font-size.scss b/src/stylesheets/tools/mixins/_font-size.scss
index 18df629f..eeca75d9 100644
--- a/src/stylesheets/tools/mixins/_font-size.scss
+++ b/src/stylesheets/tools/mixins/_font-size.scss
@@ -1,5 +1,5 @@
-// Pass in desired Pixel and Line Height values to get REM/Pixel fallback, Sets margin to
-// half of difference between total sizre and font size if margin=true.
+// Pass in desired Pixel and Line Height values to get REM/Pixel fallback,
+// Sets margin to half of difference between total sizre and font size if margin=true.
 
 @mixin fontsize($size, $line, $margin:true){
   font-size:   $size + 0px;
@@ -10,7 +10,6 @@
     margin: (($line - $size) / 2 + 0px) auto;
   }
   @else {
-  	margin: 0;
+    margin: 0;
   }
-
 }

From 6a8c2993c98fbedcb1bf0b3e10f85a61a7fe1938 Mon Sep 17 00:00:00 2001
From: James Vinter <vinterj@parliament.uk>
Date: Wed, 15 Mar 2017 15:51:10 +0000
Subject: [PATCH 2/7] [WEBSITE-712] Static templates updated inline with new
 brand requirements

---
 .../prototypes/conservative-current.pug       |  1 -
 src/templates/prototypes/contact.pug          |  3 -
 src/templates/prototypes/front-page.pug       | 60 +++++++++----------
 .../house-commons-members-current.pug         |  1 -
 .../house-lords-members-current.pug           |  1 -
 src/templates/prototypes/party-current.pug    |  4 --
 6 files changed, 30 insertions(+), 40 deletions(-)

diff --git a/src/templates/prototypes/conservative-current.pug b/src/templates/prototypes/conservative-current.pug
index 5f82a15d..34925aa9 100644
--- a/src/templates/prototypes/conservative-current.pug
+++ b/src/templates/prototypes/conservative-current.pug
@@ -3,7 +3,6 @@ block content
   //- Page Title
   h1 Current Conservative members of Parliament
   p A to Z - select a letter
-  //p Sort by: First name / #[+link('#', 'Last name')]
   //- Letter Navigation
   include ../../components/letter-navigation.pug
   //- Result List
diff --git a/src/templates/prototypes/contact.pug b/src/templates/prototypes/contact.pug
index 665d7798..ea45dbba 100644
--- a/src/templates/prototypes/contact.pug
+++ b/src/templates/prototypes/contact.pug
@@ -1,9 +1,6 @@
 extends ../../layouts/layout.pug
 
 block content
-  //- Back Button
-  .block
-    p &lt; #[+link('people-id.html', 'Previous Page')]
   //- Page Title
   h1 Who to contact with your issue
   .block
diff --git a/src/templates/prototypes/front-page.pug b/src/templates/prototypes/front-page.pug
index 602e04b6..3ddae426 100644
--- a/src/templates/prototypes/front-page.pug
+++ b/src/templates/prototypes/front-page.pug
@@ -1,32 +1,32 @@
 extends ../../layouts/layout.pug
 block content
-	section
-		h1 UK Parliament test website
-		p.lead Welcome to beta.parliament.uk, a test website for UK Parliament.
-	section.block--top
-		.highlight__box
-			h2 About this website
-			p We’re building a #[+link('#', 'new website for Parliament')]. These pages are being tested and improved – they may be inaccurate or misleading.
-			p Test pages are separate from the current #[+link('#', 'parliament.uk')] website.
-	section.block--top
-		h2 What's on our test website
-		h3 Member Information
-		ol.list
-			li.list__item
-				h4 #[+link('#', 'MPs')]
-				p All current members of the House of Commons
-			li.list__item
-				h4 #[+link('#', 'Lords')]
-				p All current members of the House of Lords
-			li.list__item
-				h4 #[+link('#', 'Constituencies')]
-				p Find MPs by the area they represent
-			li.list__item
-				h4 #[+link('#', 'Parties and groups')]
-				p Find MPs and Lords by their party or group
-	section.block--top
-		h2 Feedback
-		p We want #[+link('#', 'your feedback')] on test pages to help us improve them further.
-	section.block--top
-		h2 Follow our progress
-	p Follow all #[+link('#', 'new website developments on our blog')].
+  section
+    h1 UK Parliament test website
+    p.lead Welcome to beta.parliament.uk, a test website for UK Parliament.
+  section.block--top
+    .highlight__box
+      h2 About this website
+      p We’re building a #[+link('#', 'new website for Parliament')]. These pages are being tested and improved – they may be inaccurate or misleading.
+      p Test pages are separate from the current #[+link('#', 'parliament.uk')] website.
+  section.block--top
+    h2 What's on our test website
+    h3 Member Information
+    ol.list
+      li.list__item
+        h4 #[+link('#', 'MPs')]
+        p All current members of the House of Commons
+      li.list__item
+        h4 #[+link('#', 'Lords')]
+        p All current members of the House of Lords
+      li.list__item
+        h4 #[+link('#', 'Constituencies')]
+        p Find MPs by the area they represent
+      li.list__item
+        h4 #[+link('#', 'Parties and groups')]
+        p Find MPs and Lords by their party or group
+  section.block--top
+    h2 Feedback
+    p We want #[+link('#', 'your feedback')] on test pages to help us improve them further.
+  section.block--top
+    h2 Follow our progress
+    p Follow all #[+link('#', 'new website developments on our blog')].
diff --git a/src/templates/prototypes/house-commons-members-current.pug b/src/templates/prototypes/house-commons-members-current.pug
index 5638118c..936b58f2 100644
--- a/src/templates/prototypes/house-commons-members-current.pug
+++ b/src/templates/prototypes/house-commons-members-current.pug
@@ -3,7 +3,6 @@ block content
   //- Page Title
   h1 Current MPs in the House of Commons
   p A to Z - select a letter
-  //p Sort by: First name / #[+link('#', 'Last name')]
   //- Letter Navigation
   include ../../components/letter-navigation.pug
   //- Result List
diff --git a/src/templates/prototypes/house-lords-members-current.pug b/src/templates/prototypes/house-lords-members-current.pug
index 7192679f..81616a48 100644
--- a/src/templates/prototypes/house-lords-members-current.pug
+++ b/src/templates/prototypes/house-lords-members-current.pug
@@ -3,7 +3,6 @@ block content
   //- Page Title
   h1 Lords
   p A to Z - select a letter
-  //p Sort by: First name / #[+link('#', 'Last name')]
   //- Letter Navigation
   include ../../components/letter-navigation.pug
   //- Result List
diff --git a/src/templates/prototypes/party-current.pug b/src/templates/prototypes/party-current.pug
index 9a6fc7bc..941647fd 100644
--- a/src/templates/prototypes/party-current.pug
+++ b/src/templates/prototypes/party-current.pug
@@ -2,15 +2,12 @@ extends ../../layouts/layout.pug
 block content
   //- Page Title
   h1 Parties and groups
-
   .block
     .link__tab
       .link__tab--item.active
         p Commons
       .link__tab--item
         +link('#', "Lords")
-    //p Sort by: Number of MPs / #[+link('#', 'A-Z')]
-
   //- Option Tags
   ol.list
     each object in [{name: 'Conservative', description: 'All current Conservative MPs', count: '345'},{name: 'Labour', description: 'All current Labour MPs', count: '9'},{name: 'Vanguard Unionist Progressive Party', description: 'All current Vanguard Unionist Progressive Party MPs', count: '786'}]
@@ -22,4 +19,3 @@ block content
           p
             =object.count
             span MPs
-

From 32e2a0e54fe79faf747e39b3a7563dab66dee607 Mon Sep 17 00:00:00 2001
From: James Vinter <vinterj@parliament.uk>
Date: Wed, 15 Mar 2017 16:38:54 +0000
Subject: [PATCH 3/7] [WEBSITE-712] fix to font-size and line-height for
 anchors inside lead class

---
 src/stylesheets/elements/_typography.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/stylesheets/elements/_typography.scss b/src/stylesheets/elements/_typography.scss
index f27ff9d3..d29d0c48 100644
--- a/src/stylesheets/elements/_typography.scss
+++ b/src/stylesheets/elements/_typography.scss
@@ -44,7 +44,8 @@ h6 {
 p,a {
   @include fontsize(18, 30);
 }
-.lead {
+.lead,
+.lead > a {
   @include fontsize(21, 33);
 }
 
@@ -99,7 +100,8 @@ p,a {
   p,a {
     @include fontsize(18, 30);
   }
-  .lead {
+  .lead,
+  .lead > a {
     @include fontsize(21, 33);
   }
 }

From 484a307581a17fa34213309c4ba98d973442aa39 Mon Sep 17 00:00:00 2001
From: James Vinter <vinterj@parliament.uk>
Date: Wed, 15 Mar 2017 16:53:15 +0000
Subject: [PATCH 4/7] [WEBSITE-712] updated fix to font-size and line-height
 for anchors inside lead class

---
 src/stylesheets/elements/_typography.scss | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/stylesheets/elements/_typography.scss b/src/stylesheets/elements/_typography.scss
index d29d0c48..cd6e3c6e 100644
--- a/src/stylesheets/elements/_typography.scss
+++ b/src/stylesheets/elements/_typography.scss
@@ -44,7 +44,9 @@ h6 {
 p,a {
   @include fontsize(18, 30);
 }
-.lead,
+.lead {
+  @include fontsize(21, 33);
+}
 .lead > a {
   @include fontsize(21, 33);
 }
@@ -75,6 +77,9 @@ p,a {
   .lead {
     @include fontsize(18, 27);
   }
+  .lead > a {
+    @include fontsize(18, 27);
+  }
 }
 
 // Desktop Typography Settings (pixels)
@@ -100,7 +105,9 @@ p,a {
   p,a {
     @include fontsize(18, 30);
   }
-  .lead,
+  .lead {
+    @include fontsize(21, 33);
+  }
   .lead > a {
     @include fontsize(21, 33);
   }

From eee999bb0ee14ed9af5823b4c5725d20eabaef33 Mon Sep 17 00:00:00 2001
From: James Vinter <vinterj@Jamess-MacBook-Pro.local>
Date: Fri, 17 Mar 2017 15:27:56 +0000
Subject: [PATCH 5/7] [WEBSITE-789] CSS updates to spacing, font-size &
 line-heights, list styles and grid settings

---
 .../components/_highlight-box.scss            |  2 +-
 src/stylesheets/components/_list-styles.scss  | 16 ++------
 src/stylesheets/elements/_body.scss           | 16 +++++++-
 src/stylesheets/elements/_lists.scss          | 38 -------------------
 src/stylesheets/elements/_typography.scss     | 26 +------------
 src/stylesheets/objects/_grid-layouts.scss    |  8 +---
 src/stylesheets/objects/_grid-settings.scss   | 12 +++---
 src/stylesheets/settings/_spacing.scss        | 15 ++++----
 8 files changed, 35 insertions(+), 98 deletions(-)

diff --git a/src/stylesheets/components/_highlight-box.scss b/src/stylesheets/components/_highlight-box.scss
index fef1866f..62b077ca 100644
--- a/src/stylesheets/components/_highlight-box.scss
+++ b/src/stylesheets/components/_highlight-box.scss
@@ -24,7 +24,7 @@
   & + .highlight__box--caution {
     margin-bottom: 0;
   }
-  @include media($tablet) {
+  @include media($desktop) {
     padding-right: $base-spacing-unit-medium;
     padding-left: $base-spacing-unit-medium;
   }
diff --git a/src/stylesheets/components/_list-styles.scss b/src/stylesheets/components/_list-styles.scss
index 351b838c..171dd17e 100644
--- a/src/stylesheets/components/_list-styles.scss
+++ b/src/stylesheets/components/_list-styles.scss
@@ -8,7 +8,7 @@
     margin: 0;
     list-style: none;
   }
-  h2,h3,h4,h5,h6 {
+  h2, h3, h4, h5, h6 {
     font-size: inherit;
     line-height: inherit;
     font-weight: bold;
@@ -24,12 +24,12 @@
   @extend .list;
   border-bottom-width: 1px;
   border-bottom-style: solid;
-  border-bottom-color: $grey-4;
-  color: $grey-2;
+  border-bottom-color: $dividers;
+  color: $paragraph;
   &:first-of-type {
     border-top-width: 1px;
     border-top-style: solid;
-    border-top-color: $grey-4;
+    border-top-color: $dividers;
   }
 }
 
@@ -51,14 +51,6 @@
     clear: left;
     padding-right: $base-spacing-unit-tiny;
   }
-  & dt, dd, dd > a {
-    @include fontsize(16, 26, false);
-  }
-  @include media($desktop) {
-    dt, dd, dd > a {
-      @include fontsize(18, 36, false);
-    }
-  }
 }
 
 // Definition List - Nested Within Normal List
diff --git a/src/stylesheets/elements/_body.scss b/src/stylesheets/elements/_body.scss
index ab609d81..f0dafffd 100644
--- a/src/stylesheets/elements/_body.scss
+++ b/src/stylesheets/elements/_body.scss
@@ -4,10 +4,22 @@ html {
 }
 // Variables inherited from 'settings/_fonts.scss'
 body {
+  direction: ltr;
   margin-bottom: 165px; // equal to footer height
   padding: 0;
   background-color: $main-background;
-  direction: ltr;
+  color: $paragraph;
   font-family: $base-font-stack;
-  color: $grey-1;
+  p, a, ol, ul, dl {
+    // Baseline Typography Settings (pixels)
+    @include fontsize(18, 30);
+    // Mobile Typography Settings (pixels)
+    @include media($mobile) {
+      @include fontsize(16, 25);
+    }
+    // Desktop Typography Settings (pixels)
+    @include media($desktop) {
+      @include fontsize(18, 30);
+    }
+  }
 }
diff --git a/src/stylesheets/elements/_lists.scss b/src/stylesheets/elements/_lists.scss
index 57a1d1cd..bdfd46ff 100644
--- a/src/stylesheets/elements/_lists.scss
+++ b/src/stylesheets/elements/_lists.scss
@@ -11,47 +11,9 @@ li {
   margin: 0;
 }
 
-// Non-Media Query Browsers and Tablet dimensions (pixels)
-li {
-  @include fontsize(18, 30);
-}
-
-// Mobile List Item Size (pixels)
-@include media($mobile) {
-  li {
-    @include fontsize(16, 26);
-  }
-}
-
-// Desktop List Item Size (pixels)
-@include media($desktop) {
-  li {
-    @include fontsize(18, 30);
-  }
-}
-
 // DEFINITION LISTS
 
 dl, dt, dd {
   margin: 0;
   padding: 0;
 }
-
-// Non-Media Query Browsers and Tablet dimensions (pixels)
-dt, dd {
-  @include fontsize(18, 30);
-}
-
-// Mobile Definition List Sizes (pixels)
-@include media($mobile) {
-  dt, dd {
-    @include fontsize(16, 26);
-  }
-}
-
-// Desktop Definition List Sizes (pixels)
-@include media($desktop) {
-  dt, dd {
-    @include fontsize(18, 30);
-  }
-}
diff --git a/src/stylesheets/elements/_typography.scss b/src/stylesheets/elements/_typography.scss
index e8f4e06d..0235dd57 100644
--- a/src/stylesheets/elements/_typography.scss
+++ b/src/stylesheets/elements/_typography.scss
@@ -1,5 +1,5 @@
 // Base Typography Resets
-h1, h2, h3, h4, h5, h6, p {
+h1, h2, h3, h4, h5, h6 {
   margin: 0;
   padding: 0;
   // font-smoothing - anti aliasing
@@ -10,15 +10,11 @@ h1, h2, h3, h4, h5, h6, p {
   font-feature-settings: 'pnum';
 }
 
-// Font Colors
+// Heading Colors
 h1, h2, h3, h4, h5, h6 {
   color: $headings;
 }
 
-p {
-  color: $paragraph;
-}
-
 // Fontsize Mixin Creates 'font-size' & 'line-height' in REM with PX fallback
 
 // Base Typography Settings - Non-Media Query Browsers and Tablet dimensions (pixels)
@@ -40,15 +36,9 @@ h5 {
 h6 {
   @include fontsize(18, 26);
 }
-p,a {
-  @include fontsize(18, 30);
-}
 .lead {
   @include fontsize(21, 33);
 }
-.lead > a {
-  @include fontsize(21, 33);
-}
 
 // Mobile Typography Settings (pixels)
 @include media($mobile) {
@@ -70,15 +60,9 @@ p,a {
   h6 {
     @include fontsize(16, 23);
   }
-  p,a {
-    @include fontsize(16, 25);
-  }
   .lead {
     @include fontsize(18, 27);
   }
-  .lead > a {
-    @include fontsize(18, 27);
-  }
 }
 
 // Desktop Typography Settings (pixels)
@@ -101,13 +85,7 @@ p,a {
   h6 {
     @include fontsize(18, 26);
   }
-  p,a {
-    @include fontsize(18, 30);
-  }
   .lead {
     @include fontsize(21, 33);
   }
-  .lead > a {
-    @include fontsize(21, 33);
-  }
 }
diff --git a/src/stylesheets/objects/_grid-layouts.scss b/src/stylesheets/objects/_grid-layouts.scss
index 7a3723fc..5893ad36 100644
--- a/src/stylesheets/objects/_grid-layouts.scss
+++ b/src/stylesheets/objects/_grid-layouts.scss
@@ -1,12 +1,6 @@
 // Container - Full Grid Width
 .container--full-grid {
-  //@include outer-container;
-  max-width: 768px;
-  margin-left:auto;
-  margin-right:auto;
-  @include media($mobile) {
-  	max-width:100%;
-  }
+  @include outer-container;
 }
 
 // Container - Full Screen
diff --git a/src/stylesheets/objects/_grid-settings.scss b/src/stylesheets/objects/_grid-settings.scss
index ba392f0f..23ee1dec 100644
--- a/src/stylesheets/objects/_grid-settings.scss
+++ b/src/stylesheets/objects/_grid-settings.scss
@@ -1,16 +1,14 @@
 // Base Page Dimensions
-$max-width: 1280px;
+$max-width: 768px;
 $min-width: 320px;
 
 // Base Grid Settings
-$column: 85px;
-$gutter: 20px;
-$grid-columns: 12;
+$column: 80px;
+$gutter: 16px;
+$grid-columns: 8;
 
 // Breakpoints
-$widescreen: new-breakpoint(min-width $max-width 12);
-$desktop: new-breakpoint(min-width 960px 12);
-$tablet: new-breakpoint(min-width 768px 10);
+$desktop: new-breakpoint(min-width 768px 8);
 $mobile: new-breakpoint(max-width 767px 4);
 
 // Visualise Grid
diff --git a/src/stylesheets/settings/_spacing.scss b/src/stylesheets/settings/_spacing.scss
index abfa69a9..c94907af 100644
--- a/src/stylesheets/settings/_spacing.scss
+++ b/src/stylesheets/settings/_spacing.scss
@@ -1,9 +1,10 @@
 // Create uniform spacing value by setting it equal to line height set in the fonts.scss file
-$base-spacing-unit-calc: $base-font-size * $base-line-height;
-$base-spacing-unit: ($base-spacing-unit-calc * 0.75) + 0px;
+$base-spacing-unit-calc: $base-font-size * $base-line-height; // 24px
+$base-spacing-unit: ($base-spacing-unit-calc * 0.75) + 0px; // 18px
+
 // Using base spacing value create consistent spacing variations
-$base-spacing-unit-tiny: round($base-spacing-unit / 3);
-$base-spacing-unit-small: round($base-spacing-unit / 2);
-$base-spacing-unit-medium: round($base-spacing-unit);
-$base-spacing-unit-large: round($base-spacing-unit * 1.25);
-$base-spacing-unit-extra-large: round($base-spacing-unit * 1.5);
+$base-spacing-unit-tiny: round($base-spacing-unit / 3); // 6px
+$base-spacing-unit-small: round($base-spacing-unit-tiny * 2); // 12px
+$base-spacing-unit-medium: round($base-spacing-unit); // 18px
+$base-spacing-unit-large: round($base-spacing-unit + $base-spacing-unit-tiny); // 24px
+$base-spacing-unit-extra-large: round($base-spacing-unit + $base-spacing-unit-small); // 30px

From 756fda82e28c87588e04d5b7f387fff7948ffdd4 Mon Sep 17 00:00:00 2001
From: James Vinter <vinterj@Jamess-MacBook-Pro.local>
Date: Fri, 17 Mar 2017 15:28:47 +0000
Subject: [PATCH 6/7] [WEBSITE-791] Updated static contact MP page and
 associated styling

---
 .../components/_content-slider.scss           | 27 +++++---
 src/templates/prototypes/contact.pug          | 69 +++++++++++--------
 src/templates/prototypes/people-id.pug        | 27 ++++----
 3 files changed, 75 insertions(+), 48 deletions(-)

diff --git a/src/stylesheets/components/_content-slider.scss b/src/stylesheets/components/_content-slider.scss
index 923186c9..38530647 100644
--- a/src/stylesheets/components/_content-slider.scss
+++ b/src/stylesheets/components/_content-slider.scss
@@ -4,25 +4,33 @@
   padding-bottom: 0;
   border-bottom-width: 1px;
   border-bottom-style: solid;
-  border-bottom-color: $grey-4;
+  border-bottom-color: $dividers;
 }
 
 .slider-link {
   display: block;
   position: relative;
-  padding-top: $base-spacing-unit-small;
+  padding-top: $base-spacing-unit;
   padding-bottom: $base-spacing-unit-small;
   border-top-width: 1px;
   border-top-style: solid;
-  border-top-color: $grey-4;
-  color: $grey-1;
+  border-top-color: $dividers;
+  color: $headings;
   text-decoration: none;
+  @include fontsize(28, 36);
+  @include media($mobile) {
+    @include fontsize(24, 32);
+  }
 }
 
 .slider-content {
   padding-bottom: $base-spacing-unit-tiny;
   & > h3 {
     padding-bottom: $base-spacing-unit-small;
+    @include fontsize(24, 32);
+    @include media($mobile) {
+      @include fontsize(20, 28);
+    }
   }
   & > p {
     padding-bottom: $base-spacing-unit-small;
@@ -36,15 +44,18 @@
 .has-js {
   .slider-link {
     padding-right: $base-spacing-unit-large;
-    color: $links;
-    font-weight: bold;
-    text-decoration: underline;
-    cursor: pointer;
+    color: $headings;
+    //color: $links;
+    //font-weight: bold;
+    //text-decoration: underline;
+    //cursor: pointer;
+    /*
     &:hover,
     &:active,
     &:focus {
       text-decoration: none;
     }
+    */
     & > span.open,
     & > span.close {
       display:block;
diff --git a/src/templates/prototypes/contact.pug b/src/templates/prototypes/contact.pug
index ea45dbba..5de4565d 100644
--- a/src/templates/prototypes/contact.pug
+++ b/src/templates/prototypes/contact.pug
@@ -2,53 +2,68 @@ extends ../../layouts/layout.pug
 
 block content
   //- Page Title
-  h1 Who to contact with your issue
+  h1 Who should I contact with my issue?
   .block
-    each val in ['MPs and Lords can only help with issues that are the responsibility of UK Parliament.', 'Often the right person to contact will be a local councillor, the Citizens’ Advice Bureau or an ombudsman.', 'If you live in Scotland, Wales or Northern Ireland you may need to contact your MSP, AM or MLA.']
+    each val in ['MPs and Lords can help with issues that are the responsibility of UK Parliament.', 'But often the right person to contact will be a local councillor, Citizens Advice or an ombudsman.', 'If you live in Scotland, Wales or Northern Ireland you may need to contact your Member of the Scottish Parliament, Welsh Assembly Member or Member of the Legislative Assembly.']
       p= val
   .block#content-slider
     //- When to contact your MP
-    +slider('When to contact your MP')
+    +slider('When should I contact an MP or Lord?')
+      p Members of Parliament (MPs) and Lords represent you in Parliament and can help with issues such as:
       ul
-        each val in ['Issues with hospitals and the NHS', 'Immigration issues', 'School closures and grants', 'Data protection']
+        each val in ['Hospitals and the NHS', 'Problems with benefits, pensions and national insurance', 'Immigration', 'School closures and funding', 'Transport facilities']
           li= val
+      p #[+link('https://beta.parliament.uk/houses/4b77dd58-f6ba-4121-b521-c8ad70465f52/members/current/a-z/a', 'Find MPs')(target="_blank" title="website opens in new window")]
+      p #[+link('https://beta.parliament.uk/houses/f1a325bf-f550-48a5-ad40-e30cb7b7bdf4/members/current/a-z/a', 'Find Lords')(target="_blank" title="website opens in new window")]
     //- When to contact your local council
-    +slider('When to contact your local council')
-      p Your local council can help with issues with local services such as:
+    +slider('When should I contact my Local Council?')
+      p Your local council can help with local issues such as:
       ul
-        each val in ['Council Tax', 'Housing', 'Bins and recycling', 'Street repairs']
+        each val in ['Council Tax', 'Housing', 'Bins and recycling', 'Street repairs and parking', 'Children and families', 'Schools and learning']
           li= val
-      p #[+link('#', 'Find your local council')]
+      p #[+link('https://www.gov.uk/find-local-council', 'Find your local council')(target="_blank" title="website opens in new window")]
     //- When to contact Citizens Advice
-    +slider('When to contact Citizens Advice')
-      p For free, impartial advice on money, legal and customer issues contact #[+link('#', 'Citizens Advice')]
+    +slider('When should I contact Citizens Advice?')
+      p For free, impartial advice on money, legal and consumer issues contact #[+link('https://www.citizensadvice.org.uk', 'Citizens Advice')(target="_blank" title="website opens in new window")]
     //- When to contact an Ombudsman
-    +slider('When to contact an Ombudsman')
-      p If you have a private dispute with a landlord, employer or company, the #[+link('#', 'Ombudsman Association')] may be able to help.
+    +slider('When should I contact the Ombudsman Association?')
+      p If you have a private dispute with a landlord, employer or company, the #[+link('http://www.ombudsmanassociation.org', 'Ombudsman Association')(target="_blank" title="website opens in new window")] may be able to help.
     //- When to contact the Government
-    +slider('When to contact the Government')
-      p For government services and information visit #[+link('#', 'GOV.UK')]
+    +slider('When should I contact the government?')
+      p Visit #[+link('https://www.gov.uk', 'GOV.UK')(target="_blank" title="website opens in new window")] for Government services such as:
+      ul
+        each val in ['Benefits entitlement', 'Money and tax', 'Business guidance', 'Visas and citizenship', 'Licence applications', 'Passports and travel advice']
+          li= val
     //- When to contact your MEP
-    +slider('When to contact your MEP')
-      p Your member of European Parliament can help with EU-wide issues such as:
+    +slider('When should I contact my Member of European Parliament?')
+      p Your MEP (Member of European Parliament) can help with EU-wide issues such as:
       ul
-        each val in ['Employment and working conditions', 'Consumer protection (e.g. roaming charges for mobile phones)', 'Environment standards']
+        each val in ['Employment and working conditions', 'Consumer protection (for example roaming charges for mobile phones)', 'Environment standards']
           li= val
+      p #[+link('http://www.europarl.org.uk/en/your-meps/uk_meps.html', 'Find your MEP')(target="_blank" title="website opens in new window")]
     //- If you live in Scotland, Wales or Northern Ireland
-    +slider('If you live in Scotland, Wales or Northern Ireland')
+    +slider('Do you live in Scotland, Wales or Northern Ireland?')
       h3 Scotland
-      p Your MSP (Member of the Scottish Parliament) can help you with issues such as health services, education, justice and transport.
-      p #[+link('#', 'Find your MSP')]
-
+      p Your MSP (Member of the Scottish Parliament) can help you with issues such as:
+      ul
+        each val in ['Health services', 'Education', 'Law and courts', 'Transport', 'Social services']
+          li= val
+      p #[+link('http://www.parliament.scot/msps.aspx', 'Find your MSP')(target="_blank" title="website opens in new window")]
       h3 Wales
-      p AMs (Welsh Assembly Members) can help you with issues such as social welfare, fire and rescue services, flood defences and rural development.
-      p #[+link('#', 'Find your AM')]
-
+      p AMs (Welsh Assembly Members) can help you with issues such as:
+      ul
+        each val in ['Health services', 'Education', 'Law and courts', 'Flood defences', 'Social services']
+          li= val
+      p #[+link('http://senedd.assembly.wales/mgFindMember.aspx', 'Find your AM')(target="_blank" title="website opens in new window")]
       h3 Northern Ireland
-      p MLAs (Members of the Legislative Assembly) can help you with issues such as policing and justice, social care, tourism and trade and investment.
-      p #[+link('#', 'Find your MLA')]
+      p MLAs (Members of the Legislative Assembly) can help you with issues such as:
+      ul
+        each val in ['Health services', 'Education', 'Employment', 'Social services', 'Trade and investment']
+          li= val
+      p #[+link('http://www.niassembly.gov.uk/your-mlas/', 'Find your MLA')(target="_blank" title="website opens in new window")]
+
 
-block script
+//-block script
   script(type='text/javascript').
     if (document.addEventListener) {
       document.addEventListener("DOMContentLoaded", function() {
diff --git a/src/templates/prototypes/people-id.pug b/src/templates/prototypes/people-id.pug
index b3dfbce6..dc350169 100644
--- a/src/templates/prototypes/people-id.pug
+++ b/src/templates/prototypes/people-id.pug
@@ -38,16 +38,17 @@ block content
   section
     //- Membership History
     h2 Membership History
-    h3 Lords
-    ol.list
-      each object in [{sitting_duration: '1987 - 2015', party: 'Labour'}]
-        li.list__item--secondary
-          p= object.sitting_duration
-          p #[+link('#', object.party)]
-    h3 Commons
-    ol.list
-      each object in [{constituency: 'Hackney North and Stoke Newington', sitting_duration: '2015 - Current', party: "Labour"},{constituency: 'Hackney North and Stoke Newington', sitting_duration: '1987 - 2015', party: 'Labour'}]
-        li.list__item--secondary
-          p MP for #[+link('#', object.constituency)]
-          p= object.sitting_duration
-          p #[+link('#', object.party)]
+    .block
+      h3 Lords
+      ol.list
+        each object in [{sitting_duration: '1987 - 2015', party: 'Labour'}]
+          li.list__item--secondary
+            p= object.sitting_duration
+            p #[+link('#', object.party)]
+      h3 Commons
+      ol.list
+        each object in [{constituency: 'Hackney North and Stoke Newington', sitting_duration: '2015 - Current', party: "Labour"},{constituency: 'Hackney North and Stoke Newington', sitting_duration: '1987 - 2015', party: 'Labour'}]
+          li.list__item--secondary
+            p MP for #[+link('#', object.constituency)]
+            p= object.sitting_duration
+            p #[+link('#', object.party)]

From f868c1a275730f65e93f54802a030957e97cd0af Mon Sep 17 00:00:00 2001
From: James Vinter <vinterj@Jamess-MacBook-Pro.local>
Date: Fri, 17 Mar 2017 16:12:36 +0000
Subject: [PATCH 7/7] [WEBSITE-789] font size and font margin mixins created,
 typography and body font sizes adjusted

---
 src/stylesheets/elements/_body.scss           | 18 ++++-----
 src/stylesheets/elements/_typography.scss     | 38 +++++++++++++++++--
 src/stylesheets/main.scss                     |  1 +
 .../tools/mixins/_font-margin.scss            | 10 +++++
 src/stylesheets/tools/mixins/_font-size.scss  |  9 +----
 5 files changed, 54 insertions(+), 22 deletions(-)
 create mode 100644 src/stylesheets/tools/mixins/_font-margin.scss

diff --git a/src/stylesheets/elements/_body.scss b/src/stylesheets/elements/_body.scss
index f0dafffd..225a54a1 100644
--- a/src/stylesheets/elements/_body.scss
+++ b/src/stylesheets/elements/_body.scss
@@ -10,16 +10,14 @@ body {
   background-color: $main-background;
   color: $paragraph;
   font-family: $base-font-stack;
-  p, a, ol, ul, dl {
-    // Baseline Typography Settings (pixels)
+  // Baseline Typography Settings (pixels)
+  @include fontsize(18, 30);
+  // Mobile Typography Settings (pixels)
+  @include media($mobile) {
+    @include fontsize(16, 25);
+  }
+  // Desktop Typography Settings (pixels)
+  @include media($desktop) {
     @include fontsize(18, 30);
-    // Mobile Typography Settings (pixels)
-    @include media($mobile) {
-      @include fontsize(16, 25);
-    }
-    // Desktop Typography Settings (pixels)
-    @include media($desktop) {
-      @include fontsize(18, 30);
-    }
   }
 }
diff --git a/src/stylesheets/elements/_typography.scss b/src/stylesheets/elements/_typography.scss
index 0235dd57..f0edf1ca 100644
--- a/src/stylesheets/elements/_typography.scss
+++ b/src/stylesheets/elements/_typography.scss
@@ -8,11 +8,20 @@ h1, h2, h3, h4, h5, h6 {
   // font-feature-settings - vertically aligned typeface
   // https://developer.mozilla.org/en/docs/Web/CSS/font-feature-settings
   font-feature-settings: 'pnum';
+  color: $headings;
 }
 
-// Heading Colors
-h1, h2, h3, h4, h5, h6 {
-  color: $headings;
+p, a, ol, ul, dl {
+  // Baseline Typography Settings (pixels)
+  @include fontmargin(18, 30);
+  // Mobile Typography Settings (pixels)
+  @include media($mobile) {
+    @include fontmargin(16, 25);
+  }
+  // Desktop Typography Settings (pixels)
+  @include media($desktop) {
+    @include fontmargin(18, 30);
+  }
 }
 
 // Fontsize Mixin Creates 'font-size' & 'line-height' in REM with PX fallback
@@ -20,72 +29,93 @@ h1, h2, h3, h4, h5, h6 {
 // Base Typography Settings - Non-Media Query Browsers and Tablet dimensions (pixels)
 h1 {
   @include fontsize(36, 44);
+  @include fontmargin(36, 44);
 }
 h2 {
   @include fontsize(32, 40);
+  @include fontmargin(32, 40);
 }
 h3 {
   @include fontsize(26, 34);
+  @include fontmargin(26, 34);
 }
 h4 {
   @include fontsize(22, 30);
+  @include fontmargin(22, 30);
 }
 h5 {
   @include fontsize(20, 28);
+  @include fontmargin(20, 28);
 }
 h6 {
   @include fontsize(18, 26);
+  @include fontmargin(18, 26);
 }
 .lead {
   @include fontsize(21, 33);
+  @include fontmargin(21, 33);
 }
 
 // Mobile Typography Settings (pixels)
 @include media($mobile) {
   h1 {
     @include fontsize(32, 40);
+    @include fontmargin(32, 40);
   }
   h2 {
     @include fontsize(28, 36);
+    @include fontmargin(28, 36);
   }
   h3 {
     @include fontsize(24, 32);
+    @include fontmargin(24, 32);
   }
   h4 {
     @include fontsize(21, 32);
+    @include fontmargin(21, 32);
   }
   h5 {
     @include fontsize(18, 26);
+    @include fontmargin(18, 26);
   }
   h6 {
     @include fontsize(16, 23);
+    @include fontmargin(16, 23);
   }
   .lead {
     @include fontsize(18, 27);
+    @include fontmargin(18, 27);
   }
 }
 
 // Desktop Typography Settings (pixels)
 @include media($desktop) {
   h1 {
-   @include fontsize(36, 44);
+    @include fontsize(36, 44);
+    @include fontmargin(36, 44);
   }
   h2 {
     @include fontsize(32, 40);
+    @include fontmargin(32, 40);
   }
   h3 {
     @include fontsize(26, 34);
+    @include fontmargin(26, 34);
   }
   h4 {
     @include fontsize(22, 30);
+    @include fontmargin(22, 30);
   }
   h5 {
     @include fontsize(20, 28);
+    @include fontmargin(20, 28);
   }
   h6 {
     @include fontsize(18, 26);
+    @include fontmargin(18, 26);
   }
   .lead {
     @include fontsize(21, 33);
+    @include fontmargin(21, 33);
   }
 }
diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss
index aa32dbff..ef6a96d2 100644
--- a/src/stylesheets/main.scss
+++ b/src/stylesheets/main.scss
@@ -5,6 +5,7 @@
 
 // Import tools & mixins
 @import 'tools/mixins/border-radius';
+@import 'tools/mixins/font-margin';
 @import 'tools/mixins/font-size';
 @import 'tools/mixins/screenreader';
 
diff --git a/src/stylesheets/tools/mixins/_font-margin.scss b/src/stylesheets/tools/mixins/_font-margin.scss
new file mode 100644
index 00000000..6ccb7717
--- /dev/null
+++ b/src/stylesheets/tools/mixins/_font-margin.scss
@@ -0,0 +1,10 @@
+// Sets margin to half of difference between line-height and font size if margin=true.
+
+@mixin fontmargin($size, $line, $margin:true){
+  @if $margin == true {
+    margin: (($line - $size) / 2 + 0px) auto;
+  }
+  @else {
+    margin: 0;
+  }
+}
diff --git a/src/stylesheets/tools/mixins/_font-size.scss b/src/stylesheets/tools/mixins/_font-size.scss
index eeca75d9..77f7bfa1 100644
--- a/src/stylesheets/tools/mixins/_font-size.scss
+++ b/src/stylesheets/tools/mixins/_font-size.scss
@@ -1,15 +1,8 @@
 // Pass in desired Pixel and Line Height values to get REM/Pixel fallback,
-// Sets margin to half of difference between total sizre and font size if margin=true.
 
-@mixin fontsize($size, $line, $margin:true){
+@mixin fontsize($size, $line){
   font-size:   $size + 0px;
   line-height: $line + 0px;
   font-size:   ($size / 16) + 0rem;
   line-height: ($line / 16) + 0rem;
-  @if $margin == true {
-    margin: (($line - $size) / 2 + 0px) auto;
-  }
-  @else {
-    margin: 0;
-  }
 }