diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/website/ts/@next/components/button.tsx | 4 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/logo.tsx | 9 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/text.tsx | 4 | ||||
| -rw-r--r-- | packages/website/ts/@next/constants/globalStyle.tsx | 10 | ||||
| -rw-r--r-- | 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<ButtonInterface>` 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<HeadingProps>` 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<HeadingProps> = 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<GlobalStyle> ` --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<GlobalStyle> ` 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 @@ -<svg width="81" height="40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.402 25.28l3.105-3.212-3.86-5.209-4.915-6.954A19.904 19.904 0 0 0 0 20c0 6.1 2.732 11.562 7.04 15.23l6.239-4.408a12.796 12.796 0 0 1-4.877-5.541zM14.72 8.402l3.212 3.105 5.209-3.86 6.954-4.915A19.904 19.904 0 0 0 20 0C13.9 0 8.438 2.732 4.77 7.04l4.408 6.239a12.795 12.795 0 0 1 5.541-4.877zM28.493 17.932l3.86 5.209 4.915 6.954A19.904 19.904 0 0 0 40 20c0-6.1-2.732-11.562-7.04-15.23L26.72 9.178a12.796 12.796 0 0 1 4.877 5.541l-3.105 3.213zM35.23 32.96l-4.408-6.239a12.795 12.795 0 0 1-5.541 4.877l-3.213-3.105-5.209 3.86-6.954 4.915A19.904 19.904 0 0 0 20 40c6.1 0 11.562-2.732 15.23-7.04z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M51.726 19.689c0-6.471 2.704-9.689 6.912-9.689 4.19 0 6.947 3.27 6.947 9.689 0 6.418-2.758 9.671-6.947 9.671-4.19 0-6.912-3.253-6.912-9.671zm6.894-7.59c-3.04 0-4.543 2.815-4.543 7.607 0 2.256.336 4.005.972 5.282l5.975-12.085c-.69-.542-1.485-.804-2.404-.804zm-2.351 14.428c.672.507 1.45.77 2.369.77 3.04 0 4.578-2.834 4.578-7.59 0-2.204-.318-3.936-.972-5.247l-5.975 12.067zm24.377-10.93l-3.853 6.47L81 29.027h-2.581l-3.377-5.63h-.954l-3.447 5.63h-2.51l4.224-6.872-3.8-6.559h2.44l3.11 5.334h.973l3.182-5.334h2.386z" fill="#fff"/></svg>
\ No newline at end of file +<svg width="81" height="40" viewBox="0 0 81 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.402 25.28l3.105-3.212-3.86-5.209-4.915-6.954A19.904 19.904 0 0 0 0 20c0 6.1 2.732 11.562 7.04 15.23l6.239-4.408a12.796 12.796 0 0 1-4.877-5.541zM14.72 8.402l3.212 3.105 5.209-3.86 6.954-4.915A19.904 19.904 0 0 0 20 0C13.9 0 8.438 2.732 4.77 7.04l4.408 6.239a12.795 12.795 0 0 1 5.541-4.877zM28.493 17.932l3.86 5.209 4.915 6.954A19.904 19.904 0 0 0 40 20c0-6.1-2.732-11.562-7.04-15.23L26.72 9.178a12.796 12.796 0 0 1 4.877 5.541l-3.105 3.213zM35.23 32.96l-4.408-6.239a12.795 12.795 0 0 1-5.541 4.877l-3.213-3.105-5.209 3.86-6.954 4.915A19.904 19.904 0 0 0 20 40c6.1 0 11.562-2.732 15.23-7.04z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M51.726 19.689c0-6.471 2.704-9.689 6.912-9.689 4.19 0 6.947 3.27 6.947 9.689 0 6.418-2.758 9.671-6.947 9.671-4.19 0-6.912-3.253-6.912-9.671zm6.894-7.59c-3.04 0-4.543 2.815-4.543 7.607 0 2.256.336 4.005.972 5.282l5.975-12.085c-.69-.542-1.485-.804-2.404-.804zm-2.351 14.428c.672.507 1.45.77 2.369.77 3.04 0 4.578-2.834 4.578-7.59 0-2.204-.318-3.936-.972-5.247l-5.975 12.067zm24.377-10.93l-3.853 6.47L81 29.027h-2.581l-3.377-5.63h-.954l-3.447 5.63h-2.51l4.224-6.872-3.8-6.559h2.44l3.11 5.334h.973l3.182-5.334h2.386z" fill="#fff"/></svg>
\ No newline at end of file |
