feat: include header within title bar

src/scss/layout/header/_header.scss

@@ -1,4 +1,5 @@
 @use "../../tokens/color" as *;
+@use "../../tokens/screens" as *;
 @use "../../tokens/spacing" as *;
 @use "../../base/mixins";
 
@@ -8,27 +9,53 @@
   background-color: $color-teal-90;
   background-color: white;
   flex-wrap: wrap;
+  padding: $padding-block 3rem 0 3rem;
 
   &__logo {
-    max-height: 60px;
+    height: 40px;
     max-width: 100%;
+    margin-bottom: $padding-block;
+
+    @media (min-width: $screen-sm) {
+      height: 56px;
+    }
   }
 
   &__nav {
     @include mixins.unstyled-list();
+    align-self: flex-end;
   }
 
   &__nav-item {
     display: inline-block;
-    font-size: 1.1rem;
+    position: relative;
+    margin: 0 0.2rem;
 
     & a {
+      display: inline-block;
+      padding: $padding-block 0.2rem;
+      color: $color-grey-90;
+      font-weight: 400;
+      letter-spacing: 0.1rem;
       text-decoration: none;
-      padding: 0.5rem;
+      text-transform: uppercase;
+    }
+
+    &::after {
+      position: absolute;
+      content: "";
+      background-color: $color-teal-30;
+      bottom: 0;
+      height: 4px;
+      right: 0;
+      width: 0;
+      transition: all ease-out 0.3s;
+    }
 
-      &:hover {
-        border-bottom: 4px solid currentColor;
-      }
+    &:hover::after {
+      width: 100%;
+      left: 0;
+      right: auto;
     }
   }
 }

src/scss/layout/page/page.stories.ts

@@ -2,8 +2,7 @@ import type { Meta, StoryObj } from "@storybook/web-components";
 import { html } from "lit";
 
 import { Footer } from "../footer/footer.stories";
-import { Header } from "../header/header.stories";
-import { TitleBar } from "../title-bar/title-bar.stories";
+import { WithHeader as TitleBarWithHeader } from "../title-bar/title-bar.stories";
 
 const meta: Meta = {
   title: "Layout/Page",
@@ -14,7 +13,7 @@ type Story = StoryObj;
 
 export const Page: Story = {
   render: (args) => html`
-    ${Header.render?.call({ ...args })} ${TitleBar.render?.call({ ...args })}
+    ${TitleBarWithHeader.render?.call({ ...args })}
     <main class="iati-main">
       <h1>Page heading</h1>
       <p>Page contents</p>

src/scss/layout/title-bar/_title-bar.scss

@@ -1,37 +1,51 @@
 @use "../../tokens/color" as *;
+@use "../../tokens/screens" as *;
 @use "../../tokens/spacing" as *;
 @use "../../base/mixins";
 
 .iati-title-bar {
-  background-color: $color-teal-90;
+  position: relative;
+  background-image: linear-gradient(
+    0deg,
+    darken($color-teal-90, 4%) 4%,
+    $color-teal-90 20%
+  );
+
+  &::after {
+    content: "";
+    position: absolute;
+    pointer-events: none;
+    top: 0px;
+    left: 0px;
+    height: 100%;
+    width: 100%;
+    opacity: 25%;
+    background-image: url("http://styles.iatistandard.org/assets/svg/source/marque-white.svg");
+    background-repeat: no-repeat;
+    background-position: right center;
+    background-size: 90%;
+
+    @media (min-width: $screen-lg) {
+      background-size: 50%;
+    }
+  }
 
   &__title {
+    display: block;
     @include mixins.page-width-container();
     color: white;
-    font-weight: bold;
-    font-size: 2.5rem;
-    padding: 1.2em $padding-block;
+    font-weight: 500;
+    font-size: 2.25rem;
+    padding: $padding-block;
+    padding-top: 3rem;
+    padding-bottom: 2rem;
     position: relative;
+    text-decoration: none;
 
-    &:before {
-      content: "";
-      border-left: $border-width solid $color-teal-50;
-      padding: $padding-block;
-    }
-
-    &:after {
+    &::before {
       content: "";
-      position: absolute;
-      top: 0px;
-      right: 0px;
-      bottom: 0px;
-      left: 0px;
-      background-image: url("http://styles.iatistandard.org/assets/svg/source/marque-white.svg");
-      background-repeat: no-repeat;
-      background-position: right center;
-      background-size: 300px;
-      opacity: 0.2;
-      pointer-events: none;
+      border-left: $border-width solid $color-teal-30;
+      padding: 0 $padding-block;
     }
   }
 }

src/scss/layout/title-bar/title-bar.stories.ts

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from "@storybook/web-components";
 
 import { html } from "lit";
 
+import { Header } from "../header/header.stories";
+
 const meta: Meta = {
   title: "Layout/Title Bar",
 };
@@ -16,3 +18,12 @@ export const TitleBar: Story = {
     </div>
   `,
 };
+
+export const WithHeader: Story = {
+  render: (args) => html`
+    <div class="iati-title-bar">
+      ${Header.render?.call({ ...args })}
+      <div class="iati-title-bar__title">Title</div>
+    </div>
+  `,
+};

src/scss/tokens/_index.scss

@@ -1,3 +1,4 @@
 @forward "color";
 @forward "font";
+@forward "screens";
 @forward "spacing";

src/scss/tokens/_screens.scss

@@ -0,0 +1,5 @@
+$screen-sm: 640px;
+$screen-md: 768px;
+$screen-lg: 1024px;
+$screen-xl: 1280px;
+$screen-2xl: 1536px;

src/scss/tokens/_spacing.scss

@@ -1,5 +1,7 @@
+@use "screens" as *;
+
 $border-width: 4px;
 
 $padding-block: 1rem;
 
-$page-width-max: 1280px;
+$page-width-max: $screen-xl;