4fr

1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;
4

5
.prose code {
6
	@apply before:hidden after:hidden text-brand-800 dark:text-brand-300 font-light;
7
}
8
.prose strong code {
9
	@apply font-bold text-yellow-600 dark:text-yellow-400;
10
}
11

12
.burger-icon {
13
	@apply relative inline-block w-4 h-4 mr-3;
14
}
15

16
.burger-icon div {
17
	@apply absolute bg-gray-400 rounded transition-all transform w-full h-[2px];
18
}
19

20
.burger-icon div:nth-child(1) {
21
	@apply left-0 top-0;
22
}
23

24
.burger-icon div:nth-child(2) {
25
	@apply left-0 top-[7px];
26
}
27

28
.burger-icon div:nth-child(3) {
29
	@apply left-0 bottom-0;
30
}
31

32
.menu-state:checked ~ nav {
33
	@apply block;
34
}
35

36
.menu-state:checked ~ label .burger-icon div:nth-child(1) {
37
	@apply -rotate-45 scale-x-[0.7] top-[7px] left-[-3px];
38
}
39
.menu-state:checked ~ label .burger-icon div:nth-child(2) {
40
	@apply scale-0 duration-75;
41
}
42
.menu-state:checked ~ label .burger-icon div:nth-child(3) {
43
	@apply rotate-45 scale-x-[0.7] top-[7px] left-[4px];
44
}
45

46
.token.comment,
47
.token.prolog,
48
.token.doctype,
49
.token.cdata,
50
.token.punctuation {
51
	@apply text-gray-700 dark:text-gray-300;
52
}
53

54
.token.punctuation {
55
	@apply text-brand-800 dark:text-brand-200;
56
}
57

58
.token.delimiter.important,
59
.token.selector .parent,
60
.token.tag,
61
.token.tag .token.punctuation {
62
	@apply text-brand-600 dark:text-brand-300 font-semibold;
63
}
64

65
.token.attr-name,
66
.token.boolean,
67
.token.boolean.important,
68
.token.number,
69
.token.constant,
70
.token.selector .token.attribute {
71
	@apply font-normal text-yellow-600 dark:text-yellow-500;
72
}
73

74
.token.class-name,
75
.token.key,
76
.token.parameter,
77
.token.property,
78
.token.property-access,
79
.token.variable {
80
	@apply text-yellow-600 dark:text-yellow-400;
81
}
82

83
.token.attr-value,
84
.token.inserted,
85
.token.color,
86
.token.selector .token.value,
87
.token.string,
88
.token.string .token.url-link {
89
	@apply text-brand-800 dark:text-brand-300 font-normal;
90
}
91

92
.token.builtin,
93
.token.keyword-array,
94
.token.package,
95
.token.regex {
96
	color: #af00af;
97
}
98

99
.token.function,
100
.token.selector .token.class,
101
.token.selector .token.id {
102
	color: #7c00aa;
103
}
104

105
.token.atrule .token.rule,
106
.token.combinator,
107
.token.keyword,
108
.token.operator,
109
.token.pseudo-class,
110
.token.pseudo-element,
111
.token.selector,
112
.token.unit {
113
	@apply text-pink-700 dark:text-pink-300;
114
}
115

116
.token.deleted,
117
.token.important {
118
	color: #c22f2e;
119
}
120

121
.token.keyword-this,
122
.token.this {
123
	color: #005a8e;
124
}
125

126
.token.important,
127
.token.keyword-this,
128
.token.this,
129
.token.bold {
130
	font-weight: bold;
131
}
132

133
.token.delimiter.important {
134
	font-weight: inherit;
135
}
136

137
.token.italic {
138
	font-style: italic;
139
}
140

141
.token.entity {
142
	cursor: help;
143
}
144

145
.language-markdown .token.title,
146
.language-markdown .token.title .token.punctuation {
147
	color: #005a8e;
148
	font-weight: bold;
149
}
150

151
.language-markdown .token.blockquote.punctuation {
152
	color: #af00af;
153
}
154

155
.language-markdown .token.code {
156
	color: #006d6d;
157
}
158

159
.language-markdown .token.hr.punctuation {
160
	color: #005a8e;
161
}
162

163
.language-markdown .token.url > .token.content {
164
	color: #116b00;
165
}
166

167
.language-markdown .token.url-link {
168
	color: #755f00;
169
}
170

171
.language-markdown .token.list.punctuation {
172
	color: #af00af;
173
}
174

175
.language-markdown .token.table-header {
176
	color: #111b27;
177
}
178

179
.language-json .token.operator {
180
	color: #111b27;
181
}
182

183
.language-scss .token.variable {
184
	color: #006d6d;
185
}
186

187
/* overrides color-values for the Show Invisibles plugin
188
 * https://prismjs.com/plugins/show-invisibles/
189
 */
190
.token.tab:not(:empty):before,
191
.token.cr:before,
192
.token.lf:before,
193
.token.space:before {
194
	color: #3c526d;
195
}
196

197
.header-anchor {
198
	@apply pointer-events-none;
199
}
200
.header-anchor::before {
201
	@apply content-[''] block h-24 -mt-24 invisible md:h-16 md:-mt-16;
202
}
203