From 8a06dccbbf7e95b4223446cbd018f55b90214a62 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 14 Dec 2018 14:00:12 +0100 Subject: Tweak launch kit --- packages/website/ts/@next/components/definition.tsx | 1 + packages/website/ts/@next/components/hero.tsx | 12 +++++++----- .../website/ts/@next/components/sections/landing/hero.tsx | 1 + 3 files changed, 9 insertions(+), 5 deletions(-) (limited to 'packages/website/ts/@next/components') diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx index f7998b841..1217bdc88 100644 --- a/packages/website/ts/@next/components/definition.tsx +++ b/packages/website/ts/@next/components/definition.tsx @@ -99,6 +99,7 @@ const TextWrap = styled.div` max-width: 560px; ul { + padding-top: 10px; padding-left: 1rem; } diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx index 1ccef77d0..34f33d641 100644 --- a/packages/website/ts/@next/components/hero.tsx +++ b/packages/website/ts/@next/components/hero.tsx @@ -5,6 +5,8 @@ import {addFadeInAnimation, fadeIn} from 'ts/@next/constants/animations'; interface Props { title: string; + isLargeTitle?: boolean; + isFullWidth?: boolean; description: string; figure?: React.ReactNode; actions?: React.ReactNode; @@ -12,7 +14,7 @@ interface Props { export const Hero = (props: Props) => (
- + {props.figure && {props.figure} @@ -20,7 +22,7 @@ export const Hero = (props: Props) => ( } - + <Title isLarge={props.isLargeTitle}> {props.title} @@ -46,12 +48,12 @@ const Section = styled.section` } `; -const Wrap = styled.div<{ isCentered?: boolean }>` +const Wrap = styled.div<{ isCentered?: boolean; isFullWidth?: boolean }>` width: calc(100% - 60px); margin: 0 auto; @media (min-width: 768px) { - max-width: 1136px; + max-width: ${props => !props.isFullWidth ? '895px' : '1136px'}; flex-direction: row-reverse; display: flex; align-items: center; @@ -65,7 +67,7 @@ const Wrap = styled.div<{ isCentered?: boolean }>` `; const Title = styled.h1<{ isLarge?: any }>` - font-size: ${props => props.isLarge ? '80px' : '58px'}; + font-size: ${props => props.isLarge ? '80px' : '50px'}; font-weight: 300; line-height: 1.1; margin-bottom: 30px; diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx index 8c9d4376f..504ee6025 100644 --- a/packages/website/ts/@next/components/sections/landing/hero.tsx +++ b/packages/website/ts/@next/components/sections/landing/hero.tsx @@ -9,6 +9,7 @@ import {HeroAnimation} from 'ts/@next/components/heroAnimation'; export const SectionLandingHero = () => ( } />} actions={} -- cgit v1.2.3