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
|
@import "./chroma_dark.css";
@import "./chroma.css";
@import "./highlight.css";
/* Some contrast ratio fixes as reported by Google Page Speed. */
.chroma .c1 {
@apply text-gray-500;
}
.dark .chroma .c1 {
@apply text-gray-400;
}
.highlight code {
@apply text-sm/6;
}
.content {
@apply prose prose-sm sm:prose-base prose-stone max-w-none dark:prose-invert dark:text-slate-200;
/* headings */
@apply prose-headings:font-semibold;
/* lead */
@apply prose-lead:text-slate-500 prose-lead:text-xl prose-lead:mt-2 sm:prose-lead:mt-4 prose-lead:leading-relaxed dark:prose-lead:text-slate-400;
/* links */
@apply prose-a:text-primary dark:prose-a:text-blue-500 prose-a:hover:text-blue-500 dark:prose-a:hover:text-blue-400 prose-a:underline;
@apply prose-a:prose-code:underline prose-a:prose-code:hover:text-blue-500 prose-a:prose-code:hover:underline;
/* pre */
@apply prose-pre:text-gray-800 prose-pre:border-1 prose-pre:border-gray-100 prose-pre:bg-light dark:prose-pre:bg-dark dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10;
/* code */
@apply prose-code:px-0.5 prose-code:text-gray-500 prose-code:dark:text-gray-300 border-none;
@apply prose-code:before:hidden prose-code:after:hidden prose-code:font-mono;
@apply prose-table:prose-th:prose-code:text-white;
/* tables */
@apply prose-table:w-auto prose-table:border-2 prose-table:border-gray-100 prose-table:dark:border-gray-800 prose-table:prose-th:font-bold prose-table:prose-th:bg-blue-500 dark:prose-table:prose-th:bg-blue-500/50 prose-table:prose-th:p-2 prose-table:prose-td:p-2 prose-table:prose-th:text-white;
/* hr */
@apply dark:prose-hr:border-slate-800;
/* ol */
@apply prose-ol:marker:prose dark:prose-ol:marker:text-gray-300;
/* ul */
@apply prose-ul:marker:text-gray-500 dark:prose-ul:marker:text-gray-300;
}
/* This will not match highlighting inside e.g. the code-toggle shortcode. */
/* For more fine grained control of this, see components/shortcodes.css. */
.content > .highlight,
.content dd > .highlight,
.content li > .highlight {
@apply border-1 border-gray-200 dark:border-slate-600 mt-6 mb-8;
}
|
