kitten.sh
1import { createGlobalStyle } from 'styled-components';
2
3export const GlobalStyle = createGlobalStyle`
4 * {
5 box-sizing: inherit;
6 min-width: 0;
7 }
8
9 html {
10 box-sizing: border-box;
11 font-size: 62.5%;
12 overflow-x: hidden;
13 }
14
15 body {
16 background: ${p => p.theme.colors.passiveBg};
17 color: ${p => p.theme.colors.text};
18 font-family: ${p => p.theme.fonts.body};
19 line-height: ${p => p.theme.lineHeights.body};
20 font-weight: ${p => p.theme.fontWeights.body};
21 text-rendering: optimizeLegibility;
22 margin: 0;
23 padding: 0;
24
25 font-size: ${p => p.theme.fontSizes.bodySmall};
26 @media ${p => p.theme.media.lg} {
27 font-size: ${p => p.theme.fontSizes.body};
28 }
29 }
30
31 a {
32 color: ${p => p.theme.colors.accent};
33 font-weight: ${p => p.theme.fontWeights.links};
34 }
35
36 table, pre, p, h1, h2, h3 {
37 margin: 0 0 ${p => p.theme.spacing.md} 0;
38 }
39
40 h1, h2, h3 {
41 font-family: ${p => p.theme.fonts.heading};
42 font-weight: ${p => p.theme.fontWeights.heading};
43 line-height: ${p => p.theme.lineHeights.heading};
44 color: ${p => p.theme.colors.heading};
45 }
46
47 h1 {
48 font-size: ${p => p.theme.fontSizes.h1};
49 }
50
51 h2 {
52 font-size: ${p => p.theme.fontSizes.h2};
53 }
54
55 h3 {
56 font-size: ${p => p.theme.fontSizes.h3};
57 }
58
59 img {
60 max-width: 100%;
61 }
62`;