diff --git a/src/components/PageLayout/PageLayout.js b/src/components/PageLayout/PageLayout.js index 6acff7200..a2a4012f1 100644 --- a/src/components/PageLayout/PageLayout.js +++ b/src/components/PageLayout/PageLayout.js @@ -18,7 +18,7 @@ const LAYOUTS = { grid-template-areas: 'page-header page-header' 'content related-content'; - grid-template-columns: minmax(0, 1fr) auto; + grid-template-columns: minmax(0, 1fr) 300px; grid-gap: 2rem; @media (max-width: 1240px) { diff --git a/src/components/PageLayout/RelatedContent.js b/src/components/PageLayout/RelatedContent.js index fbe9e6d02..5b680f9e5 100644 --- a/src/components/PageLayout/RelatedContent.js +++ b/src/components/PageLayout/RelatedContent.js @@ -4,6 +4,14 @@ import { css } from '@emotion/core'; import { graphql, useStaticQuery } from 'gatsby'; import { Button, ExternalLink, Icon } from '@newrelic/gatsby-theme-newrelic'; import usePageContext from '../../hooks/usePageContext'; +import styled from '@emotion/styled'; +import Tag from '../Tag'; + +const Section = styled.section` + &:not(:last-child) { + margin-bottom: 1rem; + } +`; const RelatedContent = ({ page }) => { const { site } = useStaticQuery(graphql` @@ -18,6 +26,7 @@ const RelatedContent = ({ page }) => { const { fileRelativePath } = usePageContext(); const { + frontmatter: { resources }, fields: { gitAuthorTime }, } = page; @@ -38,44 +47,80 @@ const RelatedContent = ({ page }) => { border-radius: 0.25rem; `} > -