From eb137cf576ab0e6adf3743ea30bef06fb7a8512f Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 7 Dec 2018 11:00:34 +0100 Subject: Mobile tweaks --- packages/website/ts/@next/components/button.tsx | 4 ++++ packages/website/ts/@next/components/logo.tsx | 9 +++++++++ packages/website/ts/@next/components/text.tsx | 4 ++++ packages/website/ts/@next/constants/globalStyle.tsx | 10 +++++----- packages/website/ts/@next/icons/logo-with-type.svg | 2 +- 5 files changed, 23 insertions(+), 6 deletions(-) diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index b2ce9eb73..fa830f42c 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -30,6 +30,10 @@ export const Button = styled.button` text-align: center; font-size: 18px; text-decoration: none; + + @media (max-width: 768px) { + padding: ${props => !props.isNoPadding && '6% 10%'}; + } `; export const Link = (props: ButtonInterface) => { diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx index 9f147e3fb..96658a4b2 100644 --- a/packages/website/ts/@next/components/logo.tsx +++ b/packages/website/ts/@next/components/logo.tsx @@ -14,6 +14,15 @@ interface LogoInterface { // to pass props down into the styled icon? const StyledLogo = styled.div` text-align: left; + position: relative; + + @media (max-width: 768px) { + z-index: 2; + + svg { + width: 60px; + } + } `; const Icon = styled(LogoIcon)` diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 3fcd5c776..8584a093c 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -27,6 +27,10 @@ const StyledHeading = styled.h1` margin-bottom: ${props => !props.isNoMargin && '30px'}; text-align: ${props => props.isCentered && 'center'}; font-weight: 300; + + @media (max-width: 768px) { + text-align: center; + } `; export const Heading: React.StatelessComponent = props => { diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index 82dfcd84f..38077c78c 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -56,11 +56,11 @@ const GlobalStyles = withTheme(createGlobalStyle ` --smallHeadingHeight: 1.4em; // TO DO --defaultHeadingHeight: 1.357142857em; // TO DO --mediumHeadingHeight: 1.16em; // TO DO - --largeHeadingHeight: 1em; // TO DO + --largeHeadingHeight: 1.108695652em; // TO DO --smallParagraph: 14px; // TO DO - --defaultParagraph: 18px; // TO DO - --mediumParagraph: 22px; // TO DO - --largeParagraph: 28px; // TO DO + --defaultParagraph: 16px; // TO DO + --mediumParagraph: 16px; // TO DO + --largeParagraph: 18px; // TO DO } } @@ -82,7 +82,7 @@ const GlobalStyles = withTheme(createGlobalStyle ` overflow: hidden; } - img { + img, svg { max-width: 100%; object-fit: contain; } diff --git a/packages/website/ts/@next/icons/logo-with-type.svg b/packages/website/ts/@next/icons/logo-with-type.svg index a7a59a2af..25abf149e 100644 --- a/packages/website/ts/@next/icons/logo-with-type.svg +++ b/packages/website/ts/@next/icons/logo-with-type.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file -- cgit