|
1 | 1 | @layer components { |
2 | | - .highlight { |
3 | | - @apply mt-4; |
4 | | - } |
5 | | - |
6 | | - pre { |
7 | | - @apply grid; |
8 | | - code { |
9 | | - @apply text-grey-30 overflow-x-auto rounded-none border-0 p-6! text-sm; |
10 | | - background-color: #22272e; |
11 | | - mix-blend-mode: unset; |
12 | | - line-height: 1.5em; |
13 | | - word-break: normal; |
14 | | - } |
15 | | - code:first-child { |
16 | | - @apply rounded-t-sm; |
| 2 | + .markdown-content { |
| 3 | + .highlight { |
| 4 | + @apply mt-4; |
17 | 5 | } |
18 | | - code:last-child { |
19 | | - @apply rounded-b-sm; |
20 | | - } |
21 | | - code.language-apiheader { |
22 | | - @apply border-b-grey-80 border-b-1; |
23 | | - } |
24 | | - } |
25 | 6 |
|
26 | | - pre code .code-callout { |
27 | | - @apply ml-1; |
28 | | - user-select: none; |
29 | | - &::after { |
30 | | - content: attr(data-index); |
| 7 | + pre { |
| 8 | + @apply grid; |
| 9 | + code { |
| 10 | + @apply text-grey-30 overflow-x-auto rounded-none border-0 p-6! text-sm; |
| 11 | + background-color: #22272e; |
| 12 | + mix-blend-mode: unset; |
| 13 | + line-height: 1.5em; |
| 14 | + word-break: normal; |
| 15 | + } |
| 16 | + code:first-child { |
| 17 | + @apply rounded-t-sm; |
| 18 | + } |
| 19 | + code:last-child { |
| 20 | + @apply rounded-b-sm; |
| 21 | + } |
| 22 | + code.language-apiheader { |
| 23 | + @apply border-b-grey-80 border-b-1; |
| 24 | + } |
31 | 25 | } |
32 | | - } |
33 | 26 |
|
34 | | - ol.code-callouts { |
35 | | - li { |
36 | | - @apply relative pl-1; |
37 | | - counter-increment: code-callout-counter; |
38 | | - list-style-type: none; |
| 27 | + pre code .code-callout { |
| 28 | + @apply ml-1; |
| 29 | + user-select: none; |
| 30 | + &::after { |
| 31 | + content: attr(data-index); |
| 32 | + } |
39 | 33 | } |
40 | 34 |
|
41 | | - li::before { |
42 | | - content: counter(code-callout-counter); |
43 | | - position: absolute; |
44 | | - top: 1px; |
45 | | - left: calc(-1 * var(--spacing) * 6); |
| 35 | + ol.code-callouts { |
| 36 | + li { |
| 37 | + @apply relative pl-1; |
| 38 | + counter-increment: code-callout-counter; |
| 39 | + list-style-type: none; |
| 40 | + } |
| 41 | + |
| 42 | + li::before { |
| 43 | + content: counter(code-callout-counter); |
| 44 | + position: absolute; |
| 45 | + top: 1px; |
| 46 | + left: calc(-1 * var(--spacing) * 6); |
| 47 | + } |
46 | 48 | } |
47 | | - } |
48 | 49 |
|
49 | | - pre code .code-callout .hljs-number { |
50 | | - @apply text-white!; |
51 | | - } |
| 50 | + pre code .code-callout .hljs-number { |
| 51 | + @apply text-white!; |
| 52 | + } |
52 | 53 |
|
53 | | - pre code .code-callout, |
54 | | - ol.code-callouts li::before { |
55 | | - @apply bg-blue-elastic inline-flex size-4.5 items-center justify-center rounded-full font-mono text-xs! text-white!; |
56 | | - } |
| 54 | + pre code .code-callout, |
| 55 | + ol.code-callouts li::before { |
| 56 | + @apply bg-blue-elastic inline-flex size-4.5 items-center justify-center rounded-full font-mono text-xs! text-white!; |
| 57 | + } |
57 | 58 |
|
58 | | - code { |
59 | | - @apply bg-grey-10 border-grey-20 rounded-xs border-1 font-mono; |
60 | | - font-size: 0.875em; |
61 | | - line-height: 1.4em; |
62 | | - padding-left: 0.2em; |
63 | | - padding-right: 0.2em; |
64 | | - text-decoration: inherit; |
65 | | - font-weight: inherit; |
66 | | - mix-blend-mode: multiply; |
67 | | - word-break: break-word; |
68 | | - } |
| 59 | + code { |
| 60 | + @apply bg-grey-10 border-grey-20 rounded-xs border-1 font-mono; |
| 61 | + font-size: 0.875em; |
| 62 | + line-height: 1.4em; |
| 63 | + padding-left: 0.2em; |
| 64 | + padding-right: 0.2em; |
| 65 | + text-decoration: inherit; |
| 66 | + font-weight: inherit; |
| 67 | + mix-blend-mode: multiply; |
| 68 | + word-break: break-word; |
| 69 | + } |
69 | 70 |
|
70 | | - .hljs-built_in, |
71 | | - .hljs-selector-tag, |
72 | | - .hljs-section, |
73 | | - .hljs-link { |
74 | | - color: var(--color-blue-elastic-70); |
75 | | - } |
| 71 | + .hljs-built_in, |
| 72 | + .hljs-selector-tag, |
| 73 | + .hljs-section, |
| 74 | + .hljs-link { |
| 75 | + color: var(--color-blue-elastic-70); |
| 76 | + } |
76 | 77 |
|
77 | | - .hljs-keyword { |
78 | | - color: var(--color-blue-elastic-70); |
79 | | - } |
| 78 | + .hljs-keyword { |
| 79 | + color: var(--color-blue-elastic-70); |
| 80 | + } |
80 | 81 |
|
81 | | - .hljs { |
82 | | - color: var(--color-blue-elastic-30) !important; |
83 | | - } |
84 | | - .hljs-subst { |
85 | | - color: var(--color-purple-60); |
86 | | - } |
87 | | - .hljs-function { |
88 | | - color: var(--color-purple-60); |
89 | | - } |
| 82 | + .hljs { |
| 83 | + color: var(--color-blue-elastic-30) !important; |
| 84 | + } |
| 85 | + .hljs-subst { |
| 86 | + color: var(--color-purple-60); |
| 87 | + } |
| 88 | + .hljs-function { |
| 89 | + color: var(--color-purple-60); |
| 90 | + } |
90 | 91 |
|
91 | | - .hljs-title, |
92 | | - .hljs-title.function, |
93 | | - .hljs-attr, |
94 | | - .hljs-meta-keyword { |
95 | | - color: var(--color-yellow-50); |
96 | | - } |
| 92 | + .hljs-title, |
| 93 | + .hljs-title.function, |
| 94 | + .hljs-attr, |
| 95 | + .hljs-meta-keyword { |
| 96 | + color: var(--color-yellow-50); |
| 97 | + } |
97 | 98 |
|
98 | | - .hljs-string { |
99 | | - color: var(--color-green-50); |
100 | | - } |
101 | | - .hljs-operator { |
102 | | - color: var(--color-yellow-50); |
103 | | - } |
| 99 | + .hljs-string { |
| 100 | + color: var(--color-green-50); |
| 101 | + } |
| 102 | + .hljs-operator { |
| 103 | + color: var(--color-yellow-50); |
| 104 | + } |
104 | 105 |
|
105 | | - .hljs-meta, |
106 | | - .hljs-name, |
107 | | - .hljs-bullet, |
108 | | - .hljs-addition, |
109 | | - .hljs-template-tag, |
110 | | - .hljs-template-variable { |
111 | | - color: var(--color-yellow-50); |
112 | | - } |
| 106 | + .hljs-meta, |
| 107 | + .hljs-name, |
| 108 | + .hljs-bullet, |
| 109 | + .hljs-addition, |
| 110 | + .hljs-template-tag, |
| 111 | + .hljs-template-variable { |
| 112 | + color: var(--color-yellow-50); |
| 113 | + } |
113 | 114 |
|
114 | | - .hljs-type, |
115 | | - .hljs-symbol { |
116 | | - color: var(--color-teal-50); |
117 | | - } |
118 | | - .hljs-variable { |
119 | | - color: var(--color-purple-50); |
120 | | - } |
| 115 | + .hljs-type, |
| 116 | + .hljs-symbol { |
| 117 | + color: var(--color-teal-50); |
| 118 | + } |
| 119 | + .hljs-variable { |
| 120 | + color: var(--color-purple-50); |
| 121 | + } |
121 | 122 |
|
122 | | - .hljs-comment, |
123 | | - .hljs-quote, |
124 | | - .hljs-deletion { |
125 | | - color: var(--color-grey-70); |
126 | | - } |
| 123 | + .hljs-comment, |
| 124 | + .hljs-quote, |
| 125 | + .hljs-deletion { |
| 126 | + color: var(--color-grey-70); |
| 127 | + } |
127 | 128 |
|
128 | | - .hljs-punctuation { |
129 | | - color: var(--color-grey-50); |
130 | | - font-weight: bold; |
131 | | - } |
| 129 | + .hljs-punctuation { |
| 130 | + color: var(--color-grey-50); |
| 131 | + font-weight: bold; |
| 132 | + } |
132 | 133 |
|
133 | | - .hljs-keyword, |
134 | | - .hljs-selector-tag, |
135 | | - .hljs-literal, |
136 | | - .hljs-title, |
137 | | - .hljs-section, |
138 | | - .hljs-doctag, |
139 | | - .hljs-type, |
140 | | - .hljs-name, |
141 | | - .hljs-strong { |
142 | | - font-weight: bold; |
143 | | - } |
| 134 | + .hljs-keyword, |
| 135 | + .hljs-selector-tag, |
| 136 | + .hljs-literal, |
| 137 | + .hljs-title, |
| 138 | + .hljs-section, |
| 139 | + .hljs-doctag, |
| 140 | + .hljs-type, |
| 141 | + .hljs-name, |
| 142 | + .hljs-strong { |
| 143 | + font-weight: bold; |
| 144 | + } |
144 | 145 |
|
145 | | - .hljs-literal { |
146 | | - color: var(--color-pink-50); |
147 | | - } |
148 | | - .hljs-number { |
149 | | - color: var(--color-red-50); |
150 | | - } |
| 146 | + .hljs-literal { |
| 147 | + color: var(--color-pink-50); |
| 148 | + } |
| 149 | + .hljs-number { |
| 150 | + color: var(--color-red-50); |
| 151 | + } |
151 | 152 |
|
152 | | - .hljs-emphasis { |
153 | | - font-style: italic; |
| 153 | + .hljs-emphasis { |
| 154 | + font-style: italic; |
| 155 | + } |
154 | 156 | } |
155 | 157 | } |
0 commit comments