@defra/docusaurus-theme-govuk 0.0.18-alpha → 0.0.20-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/docusaurus-theme-govuk",
-  "version": "0.0.18-alpha",
+  "version": "0.0.20-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 {
@@ -26,6 +27,7 @@
     overflow: auto !important;
     margin-left: -16px;
     padding-left: 16px;
+    margin-top: govuk-spacing(1) * -1;
   }
 }
 
@@ -153,19 +155,25 @@
   border-bottom: 1px solid #cecece;
 
   position: relative;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  margin-bottom: 5px;
-  font-size: 1rem;
+  padding-top: govuk-spacing(2);
+  padding-bottom: govuk-spacing(2);
+  margin-bottom: 0;
+
+  font-size: 1.1875rem;
   padding-left: 0;
   margin-left: 0;
-  
+
   @media (min-width: 48.125em) {
+    font-size: 1rem;
+    padding-top: govuk-spacing(1);
+    padding-bottom: govuk-spacing(1);
+    margin-bottom: govuk-spacing(1);
     border-bottom: 0;
 
     &:after {
       border-bottom: 0;
     }
+
   }
 
   .not-govuk-navigation-menu__list__link {
@@ -192,7 +200,7 @@
 
   .not-govuk-navigation-menu__list__item {
     padding: 5px 0;
-    margin-bottom: 5px;
+    margin-bottom: 0;
     border-left-width: 0px;
     border-left-style: solid;
   }
@@ -299,6 +307,27 @@
   }
 }
 
+// Lock service navigation to 1.1875rem on all devices, including mobile where
+// govuk-font(19) would otherwise drop to 1rem. Parent selector raises
+// specificity to (0,2,0) to beat the govuk-frontend mobile breakpoint rule.
+.govuk-service-navigation .govuk-service-navigation__list,
+.govuk-service-navigation .govuk-service-navigation__toggle,
+.govuk-service-navigation .govuk-service-navigation__service-name {
+  font-size: 1.1875rem;
+}
+
+// Sidebar nav links and headings: 1.1875rem on mobile, 1rem on larger devices.
+// Two-class specificity (0,2,0) beats the not-govuk `aside a` rule at (0,1,1).
+.app-layout-sidebar__nav .not-govuk-navigation-menu__list__link,
+.app-layout-sidebar__nav .not-govuk-navigation-menu__list__heading,
+.app-layout-sidebar__nav .not-govuk-navigation-menu__list__heading-toggle {
+  font-size: 1.1875rem;
+
+  @media (min-width: 48.125em) {
+    font-size: 1rem;
+  }
+}
+
 // Pagination
 .app-pagination__container {
   display: flex;

package/src/css/prose-scope.scss

@@ -110,6 +110,21 @@
     }
   }
 
+  // Override GDS Transport on all prose elements. This must come after the
+  // @extend rules above (which bake in "GDS Transport" from govuk-frontend) so
+  // that cascade order wins at equal specificity. app-no-prose content is
+  // excluded so host apps can render GDS Transport there if licensed.
+  h1:not(.app-no-prose *),
+  h2:not(.app-no-prose *),
+  h3:not(.app-no-prose *),
+  h4:not(.app-no-prose *),
+  p:not(.app-no-prose *),
+  li:not(.app-no-prose *),
+  a:not(.app-no-prose *) {
+    font-family: Helvetica, Arial, sans-serif;
+  }
+
+
   // Code block copy button
   .app-code-block__copy {
     font-size: 0.9rem;

package/src/css/theme.scss

@@ -23,6 +23,14 @@ body,
   font-family: Helvetica, Arial, sans-serif;
 }
 
+// Restore GDS Transport inside .app-no-prose containers (e.g. map examples in
+// host apps that load the font separately and need the real GDS type stack).
+.app-no-prose,
+.app-no-prose [class^="govuk-"],
+.app-no-prose [class*=" govuk-"] {
+  font-family: "GDS Transport", arial, sans-serif;
+}
+
 /* Wider page width — overrides the 960px default from govuk-frontend.
  * !important is needed because @not-govuk/width-container injects its CSS
  * via the JS bundle, which loads after static stylesheets and wins the cascade.
@@ -62,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/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} />
         )}