Update homepage header

ds_judgements_public_ui/sass/includes/_header.scss

@@ -1,12 +1,12 @@
 .page-header {
   background-color: $color__almost-black;
-  padding: 0 0 calc($spacer__unit * 1.25);
+  padding: 0;
 
   &__breadcrumb {
 
-    display: block;
-    position: relative;
-    padding: calc($spacer__unit / 2) calc($spacer__unit * 2);
+    display: flex;
+    align-items: center;
+    padding: calc($spacer__unit / 2) 0;
 
     ol {
       list-style-type: none;
@@ -25,13 +25,15 @@
       position: relative;
       margin-right: calc($spacer__unit / 2);
       color: $color__white;
+      break-inside: avoid;
+      line-height: 1.3rem;
 
       &:not(:nth-child(1)) {
         padding-left: $spacer__unit;
 
         &::before {
           content: "";
-          display: block;
+          display: inline-block;
           position: absolute;
           top: 0;
           bottom: 0;
@@ -49,24 +51,61 @@
       }
     }
 
+    @media only screen and (max-width: $grid__breakpoint-medium) {
+      ol, li {
+        display: block;
+      }
+      li {
+        &:not(:nth-child(1)) {
+          &::before {
+            display: none;
+          }
+        }
+      }
+    }
+
     &-you-are-in {
       color: $color__white;
-      font-size: 0.9rem;
       margin-right: calc($spacer__unit / 2);
     }
   }
 
   &__container {
     @include container;
-    display: flex;
-    justify-content: center;
+    display:flex;
+    justify-content: space-between;
+    @media only screen and (max-width: $grid__breakpoint-medium) {
+      flex-direction: column-reverse;
+      text-align: center;
+    }
+    @media (min-width: $grid__breakpoint-extra-large) {
+      padding-left: calc(7.25 * $spacer__unit);
+      padding-right: calc(7.25 * $spacer__unit);
   }
+}
 
   &__logo {
-    height: 5.5rem;
-    margin: calc($spacer__unit / 2) auto;
+    width: 250px;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+    @media only screen and (max-width: $grid__breakpoint-medium) {
+      max-width: 200px;
+    }
   }
 
+
+
+  &__logo-block {
+    font-size: 0.9rem;
+    color: $color__white;
+    text-align: right;
+    padding: 1rem 0;
+    @media only screen and (max-width: $grid__breakpoint-medium) {
+      text-align: center;
+      padding-bottom: 0;
+   }
+ }
+
   &__logo-link {
 
     &:focus {

ds_judgements_public_ui/sass/includes/_mixins.scss

@@ -49,7 +49,7 @@
   }
 
   @media (min-width: $grid__breakpoint-extra-large) {
-    max-width: 65rem;
+    max-width: 1400px;
   }
 }
 

ds_judgements_public_ui/sass/includes/_phase_banner.scss

@@ -31,4 +31,8 @@
     margin: 0;
     display: inline;
   }
+
+  &__container {
+    @include container;
+  }
 }

ds_judgements_public_ui/sass/includes/_service_introduction.scss

@@ -1,11 +1,7 @@
 .service-introduction {
   background-color: $color__almost-black;
   padding: 0 0 2rem;
-
-  &__container {
-    @include container;
-    text-align: center;
-  }
+  flex-grow: 1;
 
   &__header {
     font-size: 2.5rem;
@@ -23,6 +19,8 @@
     font-size: 1.2rem;
     font-family: $font__roboto;
     color: $color__yellow;
+    line-height: 1.6rem;
+    margin: 0 auto;
   }
 
   &__further-information {
@@ -32,19 +30,20 @@
 
   &__what-to-expect {
     @include link-on-dark-bg;
+    background: transparent url($fa_chevron_right_white) 0 0.2rem no-repeat;
+    background-size: 0.7rem;
     display: inline-block;
-    padding: 0 0 calc($spacer__unit / 2);
+    padding: 0 0 0 calc($spacer__unit / 1);
     color: $color__white;
     margin: calc($spacer__unit * 1.6) 0 0;
     font-weight: bold;
-    text-decoration: none;
     font-size: 1.1rem;
-    border-bottom: 0.125rem solid $color__white;
+    text-decoration: underline;
+
+
 
     &:hover {
-      border-bottom-color: transparent;
-      text-decoration: underline;
-      border-bottom: 0.125rem solid $color__white;
+      text-decoration: none;
     }
 
     &:active {

ds_judgements_public_ui/templates/includes/breadcrumbs.html

@@ -1,9 +1,9 @@
 {% load i18n %}
 <div class="page-header__breadcrumb">
   <nav class="page-header__breadcrumb-container" aria-label="Breadcrumb">
-    <span class="page-header__breadcrumb-you-are-in">You are in:</span>
     <ol>
       <li>
+        <span class="page-header__breadcrumb-you-are-in">You are in:</span>
         {% if current == "home" %}
           {% translate "common.findcaselaw" %}
         {% else %}

ds_judgements_public_ui/templates/includes/logo.html

@@ -1,11 +1,12 @@
 {% load static %}
-<div class="page-header__container">
-  <a class="page-header__logo-link"
-     href="https://www.nationalarchives.gov.uk">
+<div class="page-header__logo-block">
+  Delivered by
+  <br>
+  <a href="https://www.nationalarchives.gov.uk">
     <img class="page-header__logo"
          src="{% static 'images/tna_logo.svg' %}"
-         alt="The National Archives home"
-         width="88"
-         height="88" />
+         alt="The National Archives"
+         height="34"
+         width="250" />
   </a>
 </div>

ds_judgements_public_ui/templates/layout_judgment_html.html

@@ -29,8 +29,10 @@
     {% include "includes/gtm/gtm_body.html" %}
     {% include "includes/phase_banner.html" %}
     <header class="page-header">
-      {% include "includes/breadcrumbs.html" with current=context.page_title title=context.page_title link=request.path %}
-      {% include "includes/logo.html" %}
+      <div class="page-header__container">
+        {% include "includes/breadcrumbs.html" with current=context.page_title title=context.page_title link=request.path %}
+        {% include "includes/logo.html" %}
+      </div>
     </header>
     {% include "includes/judgment_text_toolbar.html" %}
     <main id="main-content">