From abdf91c691b924b75d71db49fba296da9c8ddcac Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 20 Dec 2018 16:01:53 -0800 Subject: feat: move all @next files to non @next directory --- packages/website/ts/constants/globalStyle.tsx | 109 ++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 packages/website/ts/constants/globalStyle.tsx (limited to 'packages/website/ts/constants/globalStyle.tsx') diff --git a/packages/website/ts/constants/globalStyle.tsx b/packages/website/ts/constants/globalStyle.tsx new file mode 100644 index 000000000..b095fafb5 --- /dev/null +++ b/packages/website/ts/constants/globalStyle.tsx @@ -0,0 +1,109 @@ +import { createGlobalStyle, withTheme } from 'styled-components'; +import { cssReset } from 'ts/@next/constants/cssReset'; + +export interface GlobalStyle { + theme: { + bgColor: string; + textColor: string; + linkColor: string; + dropdownButtonBg: string; + }; +} + +const GlobalStyles = withTheme( + createGlobalStyle < + GlobalStyle > + ` + ${cssReset}; + + html { + font-size: 18px; + background-color: ${props => props.theme.bgColor}; + overflow-x: hidden; + } + + @media (min-width: 768px) { + :root { + --smallHeading: 20px; + --defaultHeading: 28px; + --mediumHeading: 50px; + --largeHeading: 80px; + --smallHeadingHeight: 1.4em; + --defaultHeadingHeight: 1.357142857em; + --mediumHeadingHeight: 1.16em; + --largeHeadingHeight: 1em; + --smallParagraph: 14px; + --defaultParagraph: 18px; + --mediumParagraph: 22px; + --largeParagraph: 28px; + --smallIcon: 75px; + --mediumIcon: 85px; + --largeIcon: 145px; + --heroIcon: 282px; + } + } + + @media (max-width: 1170px) { + :root { + --largeHeading: 60px; + } + } + + @media (max-width: 768px) { + :root { + --smallHeading: 18px; + --defaultHeading: 18px; + --mediumHeading: 40px; + --largeHeading: 46px; + --smallHeadingHeight: 1.4em; // TO DO + --defaultHeadingHeight: 1.357142857em; // TO DO + --mediumHeadingHeight: 1.16em; // TO DO + --largeHeadingHeight: 1.108695652em; // TO DO + --smallParagraph: 14px; // TO DO + --defaultParagraph: 16px; // TO DO + --mediumParagraph: 20px; // TO DO + --largeParagraph: 20px; // TO DO + --smallIcon: 55px; + --mediumIcon: 85px; + --largeIcon: 115px; + } + } + + body { + font-family: 'Formular', sans-serif !important; + -webkit-font-smoothing: antialiased; + color: ${props => props.theme.textColor}; + font-feature-settings: "zero"; + scroll-behavior: smooth; + } + + .visuallyHidden { + position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + padding:0 !important; + border:0 !important; + height: 1px !important; + width: 1px !important; + overflow: hidden; + } + + img, svg { + max-width: 100%; + object-fit: contain; + } + + a, button { + text-decoration: none; + font-family: inherit; + outline: none; + } + + svg + p, + img + p { + padding-top: 30px; + } +`, +); + +export { GlobalStyles }; -- cgit v1.2.3 From a67b34700e48cdf9a54c601af4ec9b9112fe4803 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 20 Dec 2018 16:03:06 -0800 Subject: feat: remove @next directory from all imports --- packages/website/ts/constants/globalStyle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/constants/globalStyle.tsx') diff --git a/packages/website/ts/constants/globalStyle.tsx b/packages/website/ts/constants/globalStyle.tsx index b095fafb5..5abb758c5 100644 --- a/packages/website/ts/constants/globalStyle.tsx +++ b/packages/website/ts/constants/globalStyle.tsx @@ -1,5 +1,5 @@ import { createGlobalStyle, withTheme } from 'styled-components'; -import { cssReset } from 'ts/@next/constants/cssReset'; +import { cssReset } from 'ts/constants/cssReset'; export interface GlobalStyle { theme: { -- cgit v1.2.3