diff options
author | Fred Carlsen <fred@sjelfull.no> | 2018-12-10 21:48:57 +0800 |
---|---|---|
committer | Fred Carlsen <fred@sjelfull.no> | 2018-12-10 21:49:12 +0800 |
commit | 727ced0684244342f616455bb33ea5df5c061aa2 (patch) | |
tree | e0db331f13802baac4d4c0b72fa1f3a6b7efe486 /packages/website/ts/@next/components/banner.tsx | |
parent | 0ff13edb585bb2cf1ef5799cabed800d57f354f7 (diff) | |
download | dexon-0x-contracts-727ced0684244342f616455bb33ea5df5c061aa2.tar dexon-0x-contracts-727ced0684244342f616455bb33ea5df5c061aa2.tar.gz dexon-0x-contracts-727ced0684244342f616455bb33ea5df5c061aa2.tar.bz2 dexon-0x-contracts-727ced0684244342f616455bb33ea5df5c061aa2.tar.lz dexon-0x-contracts-727ced0684244342f616455bb33ea5df5c061aa2.tar.xz dexon-0x-contracts-727ced0684244342f616455bb33ea5df5c061aa2.tar.zst dexon-0x-contracts-727ced0684244342f616455bb33ea5df5c061aa2.zip |
Tweak banner
Diffstat (limited to 'packages/website/ts/@next/components/banner.tsx')
-rw-r--r-- | packages/website/ts/@next/components/banner.tsx | 15 |
1 files changed, 11 insertions, 4 deletions
diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx index 59fbf7fdc..848bba1c4 100644 --- a/packages/website/ts/@next/components/banner.tsx +++ b/packages/website/ts/@next/components/banner.tsx @@ -38,8 +38,8 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => { <Wrap> <CustomColumn colWidth="1/2" isPadLarge={true}> <WrapCentered> - <Heading isNoMargin={true}>{heading}</Heading> - {subline && <Paragraph isMuted={true} isNoMargin={true}>{subline}</Paragraph>} + <CustomHeading isNoMargin={true}>{heading}</CustomHeading> + {subline && <Paragraph isMuted={0.5} isNoMargin={true}>{subline}</Paragraph>} </WrapCentered> </CustomColumn> <CustomColumn colWidth="1/2" isPadLarge={true}> @@ -60,16 +60,23 @@ const CustomColumn = styled(Column)` padding: 95px 30px; `; +const CustomHeading = styled(Heading)` + --defaultHeading: 1.888888889rem; + font-weight: 400; + margin-bottom: 10px; +`; + // Note let's refactor this // is it absolutely necessary to have a stateless component // to pass props down into the styled icon? const Border = styled.div<BorderProps>` position: absolute; - background-image: url("data:image/svg+xml;utf8,<svg width='218' height='41' viewBox='0 0 218 41' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M109 39c59.094 0 107-47.906 107-107 0-59.095-47.906-107-107-107S2-127.095 2-68C2-8.907 49.906 39 109 39z' stroke='rgba(255, 255, 255, 0.1)' stroke-width='3' stroke-miterlimit='10'/><path d='M55 6.688L109-68l54 74.688-8.917 22.313H63.988L55 6.688zM109-68l22 97M109-68L87 29M164 6H55' stroke='rgba(255, 255, 255, 0.1)' stroke-width='3' stroke-miterlimit='10'/></svg>"); + background-image: ${props => props.isBottom ? 'url(/images/@next/banner/bottomofcta.png);': 'url(/images/@next/banner/topofcta.png);' }; + background-position: ${props => props.isBottom ? 'left top' : 'left bottom' }; left: 0; width: calc(100% + 214px); height: 40px; top: ${props => !props.isBottom && 0 }; bottom: ${props => props.isBottom && 0 }; - transform: ${props => props.isBottom ? 'rotate(180deg) translate(112px)' : 'translate(-112px)' }; + transform: translate(-112px); `; |