-
Notifications
You must be signed in to change notification settings - Fork 0
/
styles.css
115 lines (108 loc) · 3.06 KB
/
styles.css
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
110
111
112
113
114
115
:root {
--gray-50: hsl(0 0% 97.5%);
--gray-100: hsl(240 4.8% 95.9%);
--gray-200: hsl(240 5.9% 90%);
--gray-300: hsl(240 4.9% 83.9%);
--gray-400: hsl(240 5% 64.9%);
--gray-500: hsl(240 3.8% 46.1%);
--gray-600: hsl(240 5.2% 33.9%);
--gray-700: hsl(240 5.3% 26.1%);
--gray-800: hsl(240 3.7% 15.9%);
--gray-900: hsl(240 5.9% 10%);
--gray-950: hsl(240 7.3% 8%);
--primary-50: rgb(248 249 255);
--primary-100: rgb(231 236 255);
--primary-200: rgb(212 221 255);
--primary-300: rgb(192 205 255);
--primary-400: rgb(164 183 255);
--primary-500: rgb(128 154 255);
--primary-600: rgb(87 121 255);
--primary-700: rgb(49 90 251);
--primary-800: rgb(41 75 207);
--primary-900: rgb(29 53 148);
--primary-950: rgb(18 33 92);
--yellow-50: hsl(54.5 91.7% 95.3%);
--yellow-100: hsl(54.9 96.7% 88%);
--yellow-200: hsl(52.8 98.3% 76.9%);
--yellow-300: hsl(50.4 97.8% 63.5%);
--yellow-400: hsl(47.9 95.8% 53.1%);
--yellow-500: hsl(45.4 93.4% 47.5%);
--yellow-600: hsl(40.6 96.1% 40.4%);
--yellow-700: hsl(35.5 91.7% 32.9%);
--yellow-800: hsl(31.8 81% 28.8%);
--yellow-900: hsl(28.4 72.5% 25.7%);
--yellow-950: hsl(33.1 69% 13.9%);
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: var(--gray-800);
padding: 24px;
margin: 0 auto;
max-width: 1400px;
line-height: 1.5;
}
a[href] {
color: var(--primary-600);
}
a:not([href]) {
color: var(--gray-400);
}
h1 {
font-size: 2.5em;
font-weight: 800;
}
h2 {
margin-top: 90px;
padding-top: 78px;
border-top: 2px solid var(--gray-100);
font-size: 2em;
text-align: center;
}
h3 {
margin-top: 78px;
font-size: 1.5em;
font-weight: 600;
}
#header {
text-align: center;
padding: 48px 0;
}
@media (min-width: 900px) {
.group {
display: grid;
grid-template-columns: auto 60%;
gap: 24px;
}
}
.group p {
margin-bottom: 30px;
}
code {
background-color: var(--yellow-300);
border-radius: 4px;
padding: 2px 4px;
font-family: 'Roboto Mono', monospace;
font-size: 0.9em;
color: var(--gray-800);
white-space: nowrap;
}
playground-ide {
--playground-code-font-family: 'Roboto Mono', monospace;
--playground-highlight-color: var(--primary-800);
--playground-code-linenumber-color: var(--gray-300);
--playground-tab-bar-background: var(--gray-100);
--playground-code-atom-color: rgb(108, 140, 213);
--playground-code-attribute-color: rgb(127, 0, 127);
--playground-code-builtin-color: rgb(126, 166, 86);
--playground-code-comment-color: rgb(0, 128, 255);
--playground-code-def-color: rgb(0, 0, 0);
--playground-code-keyword-color: rgb(90, 92, 173);
--playground-code-meta-color: rgb(255, 255, 0);
--playground-code-qualifier-color: rgb(128, 128, 128);
--playground-code-string-color: rgb(255, 0, 0);
--playground-code-string-2-color: rgb(0, 0, 0);
--playground-code-tag-color: rgb(63, 127, 127);
--playground-code-type-color: rgb(0, 0, 0);
--playground-code-variable-2-color: rgb(0, 0, 0);
--playground-code-variable-3-color: rgb(0, 0, 0)
}