feat: add page layout template

src/scss/base/_reset.scss

@@ -16,3 +16,13 @@ strong {
 em {
   font-style: italic;
 }
+
+html {
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+}

src/scss/layout/_index.scss

@@ -1,3 +1,4 @@
 @forward "footer/footer";
 @forward "header/header";
 @forward "title-bar/title-bar";
+@forward "page/page";

src/scss/layout/page/_page.scss

@@ -0,0 +1,6 @@
+@use "../../base/mixins";
+
+.iati-main {
+  @include mixins.page-width-container();
+  flex: 1;
+}

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

@@ -0,0 +1,24 @@
+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";
+
+const meta: Meta = {
+  title: "Layout/Page",
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Page: Story = {
+  render: (args) => html`
+    ${Header.render?.call({ ...args })} ${TitleBar.render?.call({ ...args })}
+    <main class="iati-main">
+      <h1>Page heading</h1>
+      <p>Page contents</p>
+    </main>
+    ${Footer.render?.call({ ...args })}
+  `,
+};