Refactor design of masthead

- Use inverse styles now provided by govuk-frontend
- Use larger fonts by default and remove --large modifier
- Apply margins in the same direction
- Do less modification of child elements

docs/examples/masthead.njk

@@ -5,7 +5,6 @@ title: Masthead example
 ---
 {% from "x-govuk/components/masthead/macro.njk" import xGovukMasthead %}
 {{ xGovukMasthead({
-  classes: "x-govuk-masthead--large",
   phaseBanner: {
     text: "This is a new service"
   },

x-govuk/components/masthead/_masthead.scss

@@ -1,33 +1,33 @@
 $x-govuk-masthead-background-colour: $govuk-brand-colour;
 $x-govuk-masthead-border-colour: govuk-tint($govuk-brand-colour, 25%);
-$x-govuk-masthead-colour: govuk-colour("white");
+$x-govuk-masthead-text-colour: govuk-colour("white");
 
-@import "./breadcrumbs";
-@import "./button";
 @import "./phase-banner";
 @import "./tag";
 
 .x-govuk-masthead {
-  @include govuk-responsive-padding(7, "bottom");
+  @include govuk-responsive-padding(4, "bottom");
   background-color: $x-govuk-masthead-background-colour;
-  color: $x-govuk-masthead-colour;
-  margin-top: govuk-spacing(-2);
-  padding-top: 0;
+  color: $x-govuk-masthead-text-colour;
+  display: flex; // Prevent margin collapse
+
+  > .govuk-width-container {
+    flex: 1;
+  }
 }
 
 .x-govuk-masthead__title {
-  @include govuk-font($size: 36, $weight: bold);
-  @include govuk-responsive-padding(6, "top");
-  margin-top: 0;
+  @include govuk-font($size: 48, $weight: "bold");
+  @include govuk-responsive-margin(6, "bottom");
+  @include govuk-responsive-margin(6, "top");
 }
 
 .x-govuk-masthead__description {
-  @include govuk-font($size: 19);
-  color: inherit;
-  margin-bottom: 0;
+  @include govuk-font($size: 24);
+  @include govuk-responsive-margin(6, "bottom");
 
-  a:not(:focus) {
-    color: inherit;
+  a {
+    @include govuk-link-style-inverse;
   }
 }
 
@@ -42,13 +42,3 @@ $x-govuk-masthead-colour: govuk-colour("white");
     display: none;
   }
 }
-
-.x-govuk-masthead--large {
-  .x-govuk-masthead__title {
-    @include govuk-font($size: 48, $weight: "bold");
-  }
-
-  .x-govuk-masthead__description {
-    @include govuk-font($size: 24);
-  }
-}

x-govuk/components/masthead/_phase-banner.scss

@@ -2,6 +2,6 @@
   border-bottom-color: $x-govuk-masthead-border-colour;
 
   .govuk-phase-banner__content {
-    color: $x-govuk-masthead-colour;
+    color: $x-govuk-masthead-text-colour;
   }
 }

x-govuk/components/masthead/_tag.scss

@@ -1,4 +1,4 @@
 .x-govuk-tag--inverse {
-  background-color: $x-govuk-masthead-colour;
+  background-color: $x-govuk-masthead-text-colour;
   color: $x-govuk-masthead-background-colour;
 }

x-govuk/components/masthead/template.njk

@@ -16,7 +16,7 @@
       attributes: params.phaseBanner.attributes
     }) if params.phaseBanner }}
     {{ govukBreadcrumbs({
-      classes: "x-govuk-breadcrumbs--inverse" + (" " + params.breadcrumbs.classes if params.breadcrumbs.classes),
+      classes: "govuk-breadcrumbs--inverse" + (" " + params.breadcrumbs.classes if params.breadcrumbs.classes),
       items: params.breadcrumbs.items,
       collapseOnMobile: params.breadcrumbs.collapseOnMobile,
       attributes: params.breadcrumbs.attributes
@@ -36,7 +36,7 @@
       {% endif %}
       {% if params.startButton %}
         {{ govukButton({
-          classes: "x-govuk-button--inverse" + (" " + params.startButton.classes if params.startButton.classes),
+          classes: "govuk-button--inverse" + (" " + params.startButton.classes if params.startButton.classes),
           text: params.startButton.text | default("Get started"),
           href: params.startButton.href,
           isStartButton: true,