@defra/docusaurus-theme-govuk 0.0.19-alpha → 0.0.21-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/docusaurus-theme-govuk",
-  "version": "0.0.19-alpha",
+  "version": "0.0.21-alpha",
   "description": "A Docusaurus theme implementing the GOV.UK Design System for consistent, accessible documentation sites",
   "main": "index.js",
   "license": "MIT",

package/src/css/components.scss

@@ -5,6 +5,7 @@
 .app-layout-sidebar {
   display: flex;
   gap: 2rem;
+  width: 100%;
 }
 
 .app-layout-sidebar__nav {

package/src/css/prose-scope.scss

@@ -5,15 +5,15 @@
 .app-prose-scope {
   // Headings
   h1:not(.app-no-prose *) {
-    @extend %govuk-heading-xl;
+    @extend %govuk-heading-l;
   }
 
   h2:not(.app-no-prose *) {
-    @extend %govuk-heading-l;
+    @extend %govuk-heading-m;
   }
 
   h3:not(.app-no-prose *) {
-    @extend %govuk-heading-m;
+    @extend %govuk-heading-s;
   }
 
   h4:not(.app-no-prose *) {

package/src/css/theme.scss

@@ -70,10 +70,23 @@ body,
 }
 
 .govuk-template__body-inner > .govuk-width-container {
-  flex: 1 0 auto;
   width: calc(100% - 30px);
 }
 
+.govuk-template__body-inner > main {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+
+  > *:last-child {
+    flex: 1;
+  }
+}
+
+.govuk-template__body-inner > .govuk-width-container:has(main) {
+  flex: 1 0 auto;
+}
+
 @media (min-width: 40.0625em) {
   .govuk-template__body-inner > .govuk-width-container {
     width: calc(100% - 60px);

package/src/theme/Heading/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 
 const headingClasses = {
-  h1: 'govuk-heading-xl',
-  h2: 'govuk-heading-l',
-  h3: 'govuk-heading-m',
+  h1: 'govuk-heading-l',
+  h2: 'govuk-heading-m',
+  h3: 'govuk-heading-s',
   h4: 'govuk-heading-s',
   h5: 'govuk-heading-s',
   h6: 'govuk-heading-s',

package/src/theme/Layout/index.js

@@ -308,40 +308,53 @@ export default function Layout(props) {
           </div>
         )}
 
-        {phaseBanner && (
+        {isHomepage ? (
+          <>
+            {phaseBanner && (
+              <div className="govuk-width-container">
+                <PhaseBanner phase={phaseBanner.phase}>
+                  {phaseBanner.text}{' '}
+                  {phaseBanner.feedbackHref && (
+                    <a href={phaseBanner.feedbackHref} className="govuk-link">
+                      feedback
+                    </a>
+                  )}
+                </PhaseBanner>
+              </div>
+            )}
+            <main id="main-content">
+              {children}
+            </main>
+          </>
+        ) : (
           <div className="govuk-width-container">
-            <PhaseBanner phase={phaseBanner.phase}>
-              {phaseBanner.text}{' '}
-              {phaseBanner.feedbackHref && (
-                <a href={phaseBanner.feedbackHref} className="govuk-link">
-                  feedback
-                </a>
+            {phaseBanner && (
+              <PhaseBanner phase={phaseBanner.phase}>
+                {phaseBanner.text}{' '}
+                {phaseBanner.feedbackHref && (
+                  <a href={phaseBanner.feedbackHref} className="govuk-link">
+                    feedback
+                  </a>
+                )}
+              </PhaseBanner>
+            )}
+            <main id="main-content" className="govuk-main-wrapper">
+              {sidebarItems ? (
+                <div className="app-layout-sidebar">
+                  <aside className="app-layout-sidebar__nav">
+                    <SidebarNav items={sidebarItems} />
+                  </aside>
+                  <div className="app-layout-sidebar__content">
+                    {children}
+                  </div>
+                </div>
+              ) : (
+                children
               )}
-            </PhaseBanner>
+            </main>
           </div>
         )}
 
-        <main id="main-content" className={isHomepage ? undefined : 'govuk-main-wrapper'}>
-          {sidebarItems ? (
-            <div className="govuk-width-container">
-              <div className="app-layout-sidebar">
-                <aside className="app-layout-sidebar__nav">
-                  <SidebarNav items={sidebarItems} />
-                </aside>
-                <div className="app-layout-sidebar__content">
-                  {children}
-                </div>
-              </div>
-            </div>
-          ) : isHomepage ? (
-            children
-          ) : (
-            <div className="govuk-width-container">
-              {children}
-            </div>
-          )}
-        </main>
-
         {!noFooter && (
           <Footer rebrand meta={footer.meta} />
         )}