diff --git a/src/components/GuideListing/GuideListing.js b/src/components/GuideListing/GuideListing.js index e307facbc..bcd8df409 100644 --- a/src/components/GuideListing/GuideListing.js +++ b/src/components/GuideListing/GuideListing.js @@ -1,12 +1,13 @@ +import React from 'react'; +import cx from 'classnames'; import Heading from './Heading'; import Description from './Description'; import List from './List'; import PropTypes from 'prop-types'; -import React from 'react'; import styles from './GuideListing.module.scss'; -const GuideListing = ({ children }) => ( -
{children}
+const GuideListing = ({ className, children }) => ( +
{children}
); GuideListing.Heading = Heading; @@ -14,6 +15,7 @@ GuideListing.Description = Description; GuideListing.List = List; GuideListing.propTypes = { + className: PropTypes.string, children: PropTypes.node.isRequired, }; diff --git a/src/components/Section.module.scss b/src/components/Section.module.scss index 31e4ba9b2..5a2d92dc4 100644 --- a/src/components/Section.module.scss +++ b/src/components/Section.module.scss @@ -4,11 +4,13 @@ .backgroundBanner { position: absolute; - background-color: var(--color-neutrals-100); - width: 100%; - transform: skewY(-2deg) translateY(-58px); + top: -2rem; + bottom: -2rem; + left: -2rem; + right: -2rem; z-index: -1; + background-color: var(--color-neutrals-100); @media (max-width: 500px) { background-color: var(--color-white); } diff --git a/src/pages/index.js b/src/pages/index.js index a242dd6b8..3c1c1949b 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -5,6 +5,7 @@ import SEO from '../components/Seo'; import GuideListing from '../components/GuideListing/GuideListing'; import GuideTile from '../components/GuideTile'; import PageTitle from '../components/PageTitle'; +import Section from '../components/Section'; import Video from '../components/Video'; import ExternalLink from '../components/ExternalLink'; import { PageContext } from '../components/PageContext'; @@ -75,9 +76,6 @@ const IndexPage = ({ pageContext }) => ( Best of all? This site is built in open source. Submit ideas, feedback, and comments directly to our engineers.

- - -