fix: Design Q&A follow up issues

adobe · Oct 18, 2020 · 35f825c · 35f825c
1 parent f8fc3e3
commit 35f825c
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 14 deletions.
diff --git a/packages/gatsby-theme-parliament/src/components/Heading/index.js b/packages/gatsby-theme-parliament/src/components/Heading/index.js
@@ -58,10 +58,6 @@ const createHeading = (level, { id, children, className, css: styles, ...props }
   const heading2Overrides = `
     margin-top: var(--spectrum-global-dimension-size-800);
     margin-bottom: var(--spectrum-global-dimension-size-100) !important;
-
-    &:first-of-type {
-      margin-top: 0;
-    }
   `;
   const heading3Overrides = `
     color: var(--spectrum-global-color-gray-800);

diff --git a/packages/gatsby-theme-parliament/src/components/Hero/index.js b/packages/gatsby-theme-parliament/src/components/Hero/index.js
@@ -49,7 +49,7 @@ const HeroButtons = ({ buttons, variants = ['cta', 'primary'], quiets = [true, t
     </ButtonGroup>
   ) : null;
 
-const HeroImage = ({ image }) =>
+const HeroImage = ({ image, styles }) =>
   image
     ? React.cloneElement(image, {
         css: css`
@@ -58,6 +58,7 @@ const HeroImage = ({ image }) =>
           justify-content: center;
           height: 100%;
           margin-top: 0;
+          ${styles}
 
           & > img {
             width: 100%;
@@ -118,13 +119,23 @@ const Hero = ({
       <section
         className={`spectrum--${theme}`}
         css={css`
+          position: relative;
           height: var(--spectrum-global-dimension-size-3400);
           margin-bottom: var(--spectrum-global-dimension-size-400);
           background: ${background ?? 'rgb( 29, 125, 238)'};
           width: 100%;
-          display: inline-flex;
-          flex-direction: row-reverse;
+          display: flex;
+
+          & + div h2:first-of-type {
+            margin-top: 0 !important;
+          }
+
+          @media screen and (max-width: ${LARGE_SCREEN_WIDTH}) {
+            overflow: auto;
+            height: 100vh;
+          }
         `}>
+        <HeroImage image={image} styles={`position: absolute;`} />
         <div
           css={css`
             margin: auto;
@@ -140,8 +151,6 @@ const Hero = ({
               margin-top: 0 !important;
             }
           `}>
-          <HeroImage image={image} />
-
           <div
             css={css`
               width: calc(5 * 100% / 12);
@@ -156,7 +165,7 @@ const Hero = ({
 
               @media screen and (max-width: ${LARGE_SCREEN_WIDTH}) {
                 width: auto;
-                margin-left: var(--spectrum-global-dimension-size-400);
+                padding: 0 var(--spectrum-global-dimension-size-400);
               }
             `}>
             <HeroHeading heading={heading} variant={variant} />

diff --git a/packages/gatsby-theme-parliament/src/components/InlineCode/index.js b/packages/gatsby-theme-parliament/src/components/InlineCode/index.js
@@ -26,7 +26,6 @@ export const InlineCode = ({ children, className, ...props }) => (
       margin: 0;
       display: inline-block;
       min-width: auto;
-      word-break: break-all;
     `}>
     {children}
   </code>

diff --git a/packages/gatsby-theme-parliament/src/components/Layout/index.js b/packages/gatsby-theme-parliament/src/components/Layout/index.js
@@ -231,7 +231,7 @@ export default ({ children, pageContext, location }) => {
 
                 @media screen and (max-width: ${LARGE_SCREEN_WIDTH}) {
                   #Layout-grid {
-                    grid-template-columns: auto !important;
+                    grid-template-columns: 0px auto !important;
                   }
 
                   #Layout-sidenav {

diff --git a/packages/gatsby-theme-parliament/src/components/MDXFilter/index.js b/packages/gatsby-theme-parliament/src/components/MDXFilter/index.js
@@ -241,7 +241,7 @@ export default ({ children, pageContext, query }) => {
                 ? 'width: var(--spectrum-global-dimension-static-grid-fluid-width);'
                 : `
                 max-width: var(--spectrum-global-dimension-static-grid-fixed-max-width);
-                margin: 0 var(--spectrum-global-dimension-size-800);'
+                margin: 0 var(--spectrum-global-dimension-size-800);
                 `}
 
               @media screen and (max-width: ${LARGE_SCREEN_WIDTH}) {

diff --git a/packages/gatsby-theme-parliament/src/components/SideNav/index.js b/packages/gatsby-theme-parliament/src/components/SideNav/index.js
@@ -59,7 +59,11 @@ const SideNav = ({ selectedPages, selectedSubPages, searchIndex }) => {
                 {page.title}
               </a>
             ) : (
-              <GatsbyLink to={page.path} className="spectrum-SideNav-itemLink" role="treeitem" aria-level={level}>
+              <GatsbyLink
+                to={page.path.endsWith('/') ? page.path : `${page.path}/`}
+                className="spectrum-SideNav-itemLink"
+                role="treeitem"
+                aria-level={level}>
                 {page.title}
               </GatsbyLink>
             )}