[WEBSITE-806][WEBSITE-789] Refactoring of markup/css (#117)

* [WEBSITE-806] Removed unnecessary span within header * [WEBSITE-789] Refactoring of typography * [WEBSITE-789] Refactoring of typography
ukparliament · Mar 21, 2017 · aeec3c7 · aeec3c7
1 parent 1a6668a
commit aeec3c7
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 62 deletions.
diff --git a/src/components/header.pug b/src/components/header.pug
@@ -1,8 +1,7 @@
 header
-  .container--full-screen.header
-    .container--full-grid
-      .row--indent-horizontal
-        .header__logo
-            span
-              +link('/', 'UK Parliament')
-            //+image('../images/parliament-uk--white.png', 'Parliament UK')(srcset='../images/parliament-uk--white.svg', width='268px', height='50px')
+	.container--full-screen.header
+		.container--full-grid
+			.row--indent-horizontal
+				.header__logo
+					+link('/', 'UK Parliament')
+					//+image('../images/parliament-uk--white.png', 'Parliament UK')(srcset='../images/parliament-uk--white.svg', width='268px', height='50px')
diff --git a/src/stylesheets/components/_header.scss b/src/stylesheets/components/_header.scss
@@ -6,13 +6,11 @@
   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;
-      }
+    a {
+      text-decoration: none;
+      color: $headings;
+      @include fontsize(36, 52);
+      font-weight: bold;
     }
   }
 }

diff --git a/src/stylesheets/elements/_typography.scss b/src/stylesheets/elements/_typography.scss
@@ -25,67 +25,34 @@ p, a, ol, ul, dl {
 }
 
 // Fontsize Mixin Creates 'font-size' & 'line-height' in REM with PX fallback
-
-// Base Typography Settings - Non-Media Query Browsers and Tablet dimensions (pixels)
+// Base Typography Settings (pixels)
 h1 {
-  @include fontsize(36, 44);
-  @include fontmargin(36, 44);
-}
-h2 {
   @include fontsize(32, 40);
   @include fontmargin(32, 40);
 }
+h2 {
+  @include fontsize(28, 36);
+  @include fontmargin(28, 36);
+}
 h3 {
-  @include fontsize(26, 34);
-  @include fontmargin(26, 34);
+  @include fontsize(24, 32);
+  @include fontmargin(24, 32);
 }
 h4 {
-  @include fontsize(22, 30);
-  @include fontmargin(22, 30);
+  @include fontsize(21, 32);
+  @include fontmargin(21, 32);
 }
 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);
+h6 {
+  @include fontsize(16, 23);
+  @include fontmargin(16, 23);
 }
-
-// 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);
-  }
+.lead {
+  @include fontsize(18, 27);
+  @include fontmargin(18, 27);
 }
 
 // Desktop Typography Settings (pixels)