aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/constants
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/constants')
-rw-r--r--packages/website/ts/constants/.gitkeep0
-rw-r--r--packages/website/ts/constants/animations.tsx18
-rw-r--r--packages/website/ts/constants/cssReset.js50
-rw-r--r--packages/website/ts/constants/globalStyle.tsx109
-rw-r--r--packages/website/ts/constants/utilities.tsx22
5 files changed, 199 insertions, 0 deletions
diff --git a/packages/website/ts/constants/.gitkeep b/packages/website/ts/constants/.gitkeep
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/packages/website/ts/constants/.gitkeep
diff --git a/packages/website/ts/constants/animations.tsx b/packages/website/ts/constants/animations.tsx
new file mode 100644
index 000000000..6a58c4b40
--- /dev/null
+++ b/packages/website/ts/constants/animations.tsx
@@ -0,0 +1,18 @@
+import { css, keyframes } from 'styled-components';
+
+export const fadeIn = keyframes`
+ 0% {
+ transform: translateY(10px);
+ opacity: 0;
+ }
+ 100% {
+ transform: translateY(0);
+ opacity: 1;
+ }
+`;
+
+export const addFadeInAnimation = (duration: string = '0.5s', delay: string = '0s') => css`
+ opacity: 0;
+ transform: translateY(10px);
+ animation: ${fadeIn} ${duration} ${delay} forwards;
+`;
diff --git a/packages/website/ts/constants/cssReset.js b/packages/website/ts/constants/cssReset.js
new file mode 100644
index 000000000..4c5105b50
--- /dev/null
+++ b/packages/website/ts/constants/cssReset.js
@@ -0,0 +1,50 @@
+export const cssReset = `
+ *,
+ *:before,
+ *:after {
+ box-sizing: border-box;
+ }
+ html, body, div, span, applet, object, iframe,
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+ a, abbr, acronym, address, big, cite, code,
+ del, dfn, em, img, ins, kbd, q, s, samp,
+ small, strike, strong, sub, sup, tt, var,
+ b, u, i, center,
+ dl, dt, dd, ol, ul, li,
+ fieldset, form, label, legend,
+ table, caption, tbody, tfoot, thead, tr, th, td,
+ article, aside, canvas, details, embed,
+ figure, figcaption, footer, header, hgroup,
+ menu, nav, output, ruby, section, summary,
+ time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+ }
+ /* HTML5 display-role reset for older browsers */
+ article, aside, details, figcaption, figure,
+ footer, header, hgroup, menu, nav, section {
+ display: block;
+ }
+ body {
+ line-height: 1;
+ }
+ ol, ul {
+ list-style: none;
+ }
+ blockquote, q {
+ quotes: none;
+ }
+ blockquote:before, blockquote:after,
+ q:before, q:after {
+ content: '';
+ content: none;
+ }
+ table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ }
+`;
diff --git a/packages/website/ts/constants/globalStyle.tsx b/packages/website/ts/constants/globalStyle.tsx
new file mode 100644
index 000000000..5abb758c5
--- /dev/null
+++ b/packages/website/ts/constants/globalStyle.tsx
@@ -0,0 +1,109 @@
+import { createGlobalStyle, withTheme } from 'styled-components';
+import { cssReset } from 'ts/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 };
diff --git a/packages/website/ts/constants/utilities.tsx b/packages/website/ts/constants/utilities.tsx
new file mode 100644
index 000000000..ee5c5b4ce
--- /dev/null
+++ b/packages/website/ts/constants/utilities.tsx
@@ -0,0 +1,22 @@
+export interface PaddingInterface {
+ padding?: number | Array<'large' | 'default' | 'small' | number>;
+ margin?: number | Array<'large' | 'default' | 'small' | number>;
+}
+
+interface PaddingSizes {
+ [key: string]: string;
+}
+
+export const PADDING_SIZES: PaddingSizes = {
+ default: '30px',
+ large: '60px',
+ small: '15px',
+};
+
+export const getCSSPadding = (value: number | Array<string | number> = 0): string => {
+ if (Array.isArray(value)) {
+ return value.map(val => PADDING_SIZES[val] || `${val}px`).join(' ');
+ } else {
+ return `${value}px`;
+ }
+};