Merge pull request #237 from alphagov/logo-fixes

Logo fixes

source/assets/stylesheets/_core-print.scss

@@ -37,23 +37,21 @@ img { max-width: 100% !important; }
 select { background: white; }
 
 #global-header {
-  color: #000;
-  font-weight: bold;
-  font-size: 24px;
-  margin-bottom: 1em;
+  margin: 3px 0 1em; // 3px additional space at top for countering -3px re-positioning of #logo img
 
   #logo {
-    @include core-48;
+    @include bold-48;
     font-size: 28pt;
-    font-weight: bold;
+    /* `bold-80` can be used instead when govuk_frontend_toolkit gem is >= 4.18.2,
+       see https://github.com/alphagov/govuk_frontend_toolkit/pull/328 */
     text-rendering: optimizeLegibility;
 
     img {
-      width: 46px;
+      width: 45px;
       height: 40px;
-      padding-right: 6px;
-      display: block;
-      float: left;
+      position: relative;
+      top: -3px; // aligns bottom of img with bottom of "G"
+      vertical-align: bottom;
     }
   }
 

source/assets/stylesheets/_header.scss

@@ -40,7 +40,7 @@
         }
       }
       .header-logo {
-        margin: 5px 0 2px;
+        margin-top: 2px;
       }
     }
   }
@@ -71,44 +71,26 @@
 
   #logo {
     float: left;
-    position: relative;
-    top: -1px;
-
-    height: 30px;
     overflow: visible;
-    vertical-align: baseline;
 
     color: $white;
     font-weight: bold;
     font-size: 30px;
-    line-height: 1em;
+    line-height: 1;
     text-decoration: none;
     text-rendering: optimizeLegibility;
-    margin-bottom: -3px;
-    padding-top: 2px;
     border-bottom: 1px solid transparent;
 
     background: image-url('images/gov.uk_logotype_crown.png') no-repeat;
-    background-size: 35px 31px;
+    background-size: 36px 32px;
     background-position: 0 0;
     @include ie-lte(8) {
       background-image: image-url('images/gov.uk_logotype_crown-1x.png');
     }
 
     img {
-      position: relative;
-      top: -2px;
-
-      width: 35px;
-      height: 31px;
-
-      padding-right: 6px;
-
-      float: left;
-      display: inline;
-      line-height: inherit;
-      border: none;
-
+      margin: 2px 1px 0 0; // top margin aligns bottom of img with bottom of "G"
+      vertical-align: bottom;
       visibility: hidden;
     }
 

source/views/layouts/govuk_template.html.erb

@@ -54,7 +54,7 @@
         <div class="header-global">
           <div class="header-logo">
             <a href="<%= content_for?(:homepage_url) ? yield(:homepage_url) : "https://www.gov.uk/" %>" title="<%= content_for?(:logo_link_title) ? yield(:logo_link_title) : "Go to the GOV.UK homepage" %>" id="logo" class="content">
-              <img src="<%= asset_path 'gov.uk_logotype_crown_invert_trans.png' %>" width="35" height="31" alt=""> <%= content_for?(:global_header_text) ? yield(:global_header_text) : "GOV.UK" %>
+              <img src="<%= asset_path 'gov.uk_logotype_crown_invert_trans.png' %>" width="36" height="32" alt=""> <%= content_for?(:global_header_text) ? yield(:global_header_text) : "GOV.UK" %>
             </a>
           </div>
           <%= yield :inside_header %>