diff options
Diffstat (limited to 'packages/dev-tools-pages/ts/components/Intro.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/Intro.tsx | 47 |
1 files changed, 30 insertions, 17 deletions
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx index e5c95d4c2..a5a7e9dc4 100644 --- a/packages/dev-tools-pages/ts/components/Intro.tsx +++ b/packages/dev-tools-pages/ts/components/Intro.tsx @@ -4,6 +4,7 @@ import { media, colors } from '../variables'; import { Alpha, Lead } from './Typography'; import Container from './Container'; +import Breakout from './Breakout'; const Main = styled.div` background-color: ${colors.lightGray}; @@ -17,12 +18,6 @@ const Main = styled.div` `}; `; -const Inner = styled.div` - display: flex; - flex-direction: column; - width: 100%; -`; - const Title = styled(Alpha)` margin-bottom: 2.5rem; @@ -32,38 +27,56 @@ const Title = styled(Alpha)` const Blocks = styled.div` display: flex; justify-content: space-between; + width: 100%; ${media.small`display: block;`}; `; -const IntroLead = styled(Lead)` + +const StyledIntroLead = styled(Lead)` max-width: 25.9375rem; ${media.small`margin-bottom: 1.5625rem;`}; `; -const IntroAside = styled.div` + +const StyledIntroAside = styled.div` max-width: 32.5rem; position: relative; - - ${media.small` - margin-left: -30px; - width: calc(100% + 60px); - `}; `; interface IntroProps { + children?: React.ReactNode; +} + +interface IntroLeadProps { title: string; children?: React.ReactNode; } +function IntroLead(props: IntroLeadProps) { + return ( + <StyledIntroLead> + <Title>{props.title}</Title> + {props.children} + </StyledIntroLead> + ) +} + +function IntroAside(props: IntroProps) { + return ( + <Breakout> + <StyledIntroAside> + {props.children} + </StyledIntroAside> + </Breakout> + ) +} + function Intro(props: IntroProps) { return ( <Container wide> <Main> - <Inner> - <Title>{props.title}</Title> - <Blocks>{props.children}</Blocks> - </Inner> + <Blocks>{props.children}</Blocks> </Main> </Container> ); |