blob: b095fafb5d91033e719054293e09bb36863ee797 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
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 };
|
