aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components
diff options
context:
space:
mode:
authorFred Carlsen <fred@sjelfull.no>2018-12-18 21:30:10 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-12-19 05:03:42 +0800
commit342ecae34d80579560703b6912ac9219fcda0c72 (patch)
tree33eebd7a611487554439f1fede7e423dc35ba6d8 /packages/website/ts/@next/components
parentb40551e2dfdae276850be1f38bd0eaeaafe02749 (diff)
downloaddexon-sol-tools-342ecae34d80579560703b6912ac9219fcda0c72.tar
dexon-sol-tools-342ecae34d80579560703b6912ac9219fcda0c72.tar.gz
dexon-sol-tools-342ecae34d80579560703b6912ac9219fcda0c72.tar.bz2
dexon-sol-tools-342ecae34d80579560703b6912ac9219fcda0c72.tar.lz
dexon-sol-tools-342ecae34d80579560703b6912ac9219fcda0c72.tar.xz
dexon-sol-tools-342ecae34d80579560703b6912ac9219fcda0c72.tar.zst
dexon-sol-tools-342ecae34d80579560703b6912ac9219fcda0c72.zip
Left-align hero on mobile
Diffstat (limited to 'packages/website/ts/@next/components')
-rw-r--r--packages/website/ts/@next/components/hero.tsx11
1 files changed, 8 insertions, 3 deletions
diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx
index 290c57bcb..c79e2a6eb 100644
--- a/packages/website/ts/@next/components/hero.tsx
+++ b/packages/website/ts/@next/components/hero.tsx
@@ -9,6 +9,7 @@ interface Props {
maxWidthHeading?: string;
isLargeTitle?: boolean;
isFullWidth?: boolean;
+ isCenteredMobile?: boolean;
description: string;
figure?: React.ReactNode;
actions?: React.ReactNode;
@@ -16,7 +17,7 @@ interface Props {
export const Hero = (props: Props) => (
<Section>
- <Wrap isCentered={!props.figure} isFullWidth={props.isFullWidth}>
+ <Wrap isCentered={!props.figure} isFullWidth={props.isFullWidth} isCenteredMobile={props.isCenteredMobile}>
{props.figure &&
<Content width="400px">
{props.figure}
@@ -42,6 +43,10 @@ export const Hero = (props: Props) => (
</Section>
);
+Hero.defaultProps = {
+ isCenteredMobile: true,
+};
+
const Section = styled.section`
padding: 120px 0;
@@ -50,7 +55,7 @@ const Section = styled.section`
}
`;
-const Wrap = styled.div<{ isCentered?: boolean; isFullWidth?: boolean }>`
+const Wrap = styled.div<{ isCentered?: boolean; isFullWidth?: boolean; isCenteredMobile?: boolean }>`
width: calc(100% - 60px);
margin: 0 auto;
@@ -64,7 +69,7 @@ const Wrap = styled.div<{ isCentered?: boolean; isFullWidth?: boolean }>`
}
@media (max-width: 768px) {
- text-align: center;
+ text-align: ${props => props.isCenteredMobile ? `center` : 'left'};
}
`;