From 8ed78ca3b98c4ceba242311223c87701179a3e38 Mon Sep 17 00:00:00 2001
From: Matt Hill <matt.hill@digital.cabinet-office.gov.uk>
Date: Fri, 12 Apr 2024 12:26:34 +0100
Subject: [PATCH] Increase font size and image size in organisational logos

The original treatment for logos used multiple sizes and screen density media queries to send low/high resolution images depending on the screen density. By increasing the size of the logos, the low resolution images are now too small so support for those has been dropped and we now use only the larger sizes. These larger images are scaled down by the browser and so will look sharper enough on low density screens.

The mixin for the crest was also changed to allow the passing of different offsets, as some logos now need small adjustments to optically match the alignment with the text.
---
 .../components/_organisation-logo.scss        | 65 ++++++-------------
 1 file changed, 19 insertions(+), 46 deletions(-)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss b/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss
index 893c57ee3a..3566401ac4 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss
@@ -2,16 +2,12 @@
 
 // Default logo corresponds with the "medium stacked" Whitehall equivalent
 .gem-c-organisation-logo {
-  font-size: 13px;
+  @include govuk-font($size: 19);
   font-weight: 400;
   line-height: 1.35;
   // When this is a heading the margin needs to be set to stop it from
   // inheriting the browser's default margin:
   margin: 0;
-
-  @include govuk-media-query($from: tablet) {
-    font-size: 18px;
-  }
 }
 
 .gem-c-organisation-logo__container {
@@ -39,13 +35,8 @@
 .gem-c-organisation-logo__crest {
   // Default brand colour
   border-left: 2px solid govuk-colour("black");
-  padding-top: 23px;
-  padding-left: 6px;
-
-  @include govuk-media-query($from: tablet) {
-    padding-top: 28px;
-    padding-left: 7px;
-  }
+  padding-top: 35px;
+  padding-left: 8px;
 
   .brand--executive-office & {
     border-left-width: 0;
@@ -81,80 +72,62 @@
   }
 }
 
-@mixin crest($crest) {
-  background: url("govuk_publishing_components/crests/#{$crest}_13px.png") no-repeat 5px 0;
-  background-size: auto 20px;
-
-  @include govuk-device-pixel-ratio {
-    background-image: url("govuk_publishing_components/crests/#{$crest}_13px_x2.png");
-  }
-
-  @include govuk-media-query($from: tablet) {
-    background: url("govuk_publishing_components/crests/#{$crest}_18px.png") no-repeat 6px 0;
-    background-size: auto 26px;
-
-    @include govuk-device-pixel-ratio {
-      background-image: url("govuk_publishing_components/crests/#{$crest}_18px_x2.png");
-    }
-  }
+@mixin crest($crest, $xpos:0, $ypos:0) {
+  background: url("govuk_publishing_components/crests/#{$crest}_18px_x2.png") no-repeat $xpos $ypos;
+  background-size: auto 32px;
 }
 
 @mixin tall-crest {
-  padding-top: 25px;
-  background-size: auto 25px;
-
-  @include govuk-media-query($from: tablet) {
-    padding-top: 35px;
-    background-size: auto 34px;
-  }
+  padding-top: 39px;
+  background-size: auto 34px;
 }
 
 .gem-c-organisation-logo__crest--dbt {
-  @include crest("dbt_crest");
+  @include crest($crest: "dbt_crest", $xpos: 9px);
 }
 
 .gem-c-organisation-logo__crest--bis {
-  @include crest("bis_crest");
+  @include crest($crest: "bis_crest", $xpos: 9px);
 }
 
 .gem-c-organisation-logo__crest--hmrc {
-  @include crest("hmrc_crest");
+  @include crest($crest: "hmrc_crest", $xpos: 8px);
 }
 
 .gem-c-organisation-logo__crest--ho {
-  @include crest("ho_crest");
+  @include crest($crest: "ho_crest", $xpos: 9px);
   @include tall-crest;
 }
 
 .gem-c-organisation-logo__crest--mod {
-  @include crest("mod_crest");
+  @include crest($crest: "mod_crest", $xpos: 9px);
   @include tall-crest;
 }
 
 .gem-c-organisation-logo__crest--single-identity,
 .gem-c-organisation-logo__crest--eo,
 .gem-c-organisation-logo__crest--org {
-  @include crest("org_crest");
+  @include crest($crest: "org_crest", $xpos: 8px);
 }
 
 .gem-c-organisation-logo__crest--portcullis {
-  @include crest("portcullis");
+  @include crest($crest: "portcullis", $xpos: 9px);
 }
 
 .gem-c-organisation-logo__crest--so {
-  @include crest("so_crest");
+  @include crest($crest: "so_crest", $xpos: 9px);
 }
 
 .gem-c-organisation-logo__crest--ukaea {
-  @include crest("ukaea_crest");
+  @include crest($crest: "ukaea_crest", $xpos: 9px);
 }
 
 .gem-c-organisation-logo__crest--ukho {
-  @include crest("ukho");
+  @include crest($crest: "ukho", $xpos: 8px);
   @include tall-crest;
 }
 
 .gem-c-organisation-logo__crest--wales {
-  @include crest("wales_crest");
+  @include crest($crest: "wales_crest", $xpos: 9px);
   @include tall-crest;
 }