this repo has no description
altagos.dev
1code {
2 font-family: "TX-02", monospace;
3 font-size: var(--medium-size);
4
5 padding: 3px 8px;
6 overflow-wrap: anywhere;
7
8 background-color: var(--palette0);
9 border-radius: 5px;
10}
11
12pre:has(code) {
13 font-family: "TX-02", monospace;
14 line-height: 1.4;
15
16 background-color: var(--palette0);
17 border-radius: 5px;
18
19 padding: 10px 15px;
20 overflow-y: auto;
21
22 code {
23 padding: unset;
24 border-radius: unset;
25 }
26}
27
28.block:has(pre > code) {
29 pre {
30 margin: 0 16px;
31 }
32}
33
34figure:has(pre > code) {
35 margin: auto;
36
37 figcaption {
38 text-align: center;
39 }
40}
41
42@mixin style($color: --none, $font-weight: 400, $font-style: normal) {
43 color: var($color);
44 font-weight: $font-weight;
45 font-style: $font-style;
46
47 &::selection {
48 background-color: var($color);
49 color: var(--selection-foreground);
50 }
51
52 &::-moz-selection {
53 background-color: var($color);
54 color: var(--selection-foreground);
55 }
56}
57
58// Syntax
59
60code > .variable {
61 // color: var(--fg);
62 @include style($color: --fg);
63}
64
65code > .variable_builtin {
66 // color: var(--syn-special2);
67 // font-style: italic;
68 @include style($color: --syn-special2, $font-style: bold);
69}
70
71code > .comment {
72 // color: var(--syn-comment);
73 @include style($color: --syn-comment, $font-style: italic);
74}
75
76code > .constant,
77code > .markup_math,
78code > .attribute {
79 // color: var(--syn-constant);
80 @include style($color: --syn-constant);
81}
82
83code > .string,
84code > .character,
85code > .markup_raw {
86 // color: var(--syn-string);
87 @include style($color: --syn-string);
88}
89
90code > .number,
91code > .float {
92 // color: var(--syn-number);
93 @include style($color: --syn-number);
94}
95
96code > .boolean {
97 // color: var(--syn-constant);
98 // font-weight: bold;
99 @include style($color: --syn-constant, $font-weight: bold);
100}
101
102code > .identifier {
103 // color: var(--syn-identifier);
104 @include style($color: --syn-identifier);
105}
106
107code > .function,
108code > .function_call,
109code > .markup_heading {
110 // color: var(--syn-fun);
111 @include style($color: --syn-fun);
112}
113
114code > .statement,
115code > .module {
116 // color: var(--syn-statement);
117 @include style($color: --syn-statement);
118}
119
120code > .operator {
121 // color: var(--syn-operator);
122 @include style($color: --syn-operator);
123}
124
125code > .keyword,
126code > .markup_environment {
127 // color: var(--syn-keyword);
128 @include style($color: --syn-keyword);
129}
130
131code > .preproc,
132code > .keyword_import {
133 // color: var(--syn-preproc);
134 @include style($color: --syn-preproc);
135}
136
137code > .type,
138code > .constructor.constant {
139 // color: var(--syn-type);
140 @include style($color: --syn-type);
141}
142
143code > .type_builtin,
144code > .function_builtin {
145 @include style($color: --syn-keyword);
146}
147
148code > .special {
149 // color: var(--syn-special1);
150 @include style($color: --syn-special1);
151}
152
153code > .delimiter {
154 // color: var(--syn-punct);
155 @include style($color: --syn-punct);
156}
157
158code > .underlined {
159 // color: var(--syn-special1);
160 text-decoration: underline;
161 @include style($color: --syn-special1);
162}
163
164code > .bold {
165 // font-weight: bold;
166 @include style($font-weight: bold);
167}
168
169code > .italic {
170 // font-style: italic;
171 @include style($font-style: italic);
172}
173
174code > .error {
175 // color: var(--diag-error);
176 @include style($color: --diag-error);
177}
178
179code > .todo {
180 // color: var(--fg-reverse);
181 background-color: var(--diag-info);
182 // font-weight: bold;
183 @include style($color: --fg-reverse, $font-weight: bold);
184}
185
186// Treesitter
187
188code > .variable_parameter {
189 // color: var(--syn-parameter);
190 @include style($color: --syn-parameter);
191}
192
193code > .variable_member,
194code > .property,
195code > .tag_attribute {
196 // color: var(--syn-identifier);
197 @include style($color: --syn-identifier);
198}
199
200code > .string_regexp {
201 // color: var(--syn-regex);
202 @include style($color: --syn-regex);
203}
204
205code > .string_escape {
206 // color: var(--syn-regex);
207 // font-weight: bold;
208 @include style($color: --syn-regex, $font-weight: bold);
209}
210
211code > .string_special_symbol {
212 // color: var(--syn-identifier);
213 @include style($color: --syn-identifier);
214}
215
216code > .string_special_url,
217code > .markup_link_url {
218 // color: var(--syn-special1);
219 text-decoration: wavy;
220 @include style($color: --syn-special1);
221}
222
223code > .constructor {
224 // color: var(--syn-special1);
225 @include style($color: --syn-special1);
226}
227
228code > .keyword_operator {
229 // color: var(--syn-operator);
230 // font-weight: bold;
231 @include style($color: --syn-operator, $font-weight: bold);
232}
233
234code > .keyword_modifier,
235code > .keyword_function,
236code > .keyword_type {
237 @include style($color: --syn-keyword);
238}
239
240code > .keyword_return {
241 @include style($color: --syn-special3);
242}
243
244code > .keyword_conditional {
245 @include style($color: --syn-keyword);
246}
247
248code > .keyword_exception {
249 @include style($color: --syn-special3, $font-weight: bold);
250}
251
252code > .punctuation_delimiter,
253code > .punctuation_bracket,
254code > .tag_delimiter {
255 @include style($color: --syn-punct);
256}
257
258code > .punctuation_special {
259 @include style($color: --syn-special1);
260}
261
262code > .comment_error {
263 background-color: var(--diag-error);
264 @include style($color: --fg, $font-weight: bold);
265}
266
267code > .comment_warning {
268 background-color: var(--diag-warning);
269 @include style($color: --fg, $font-weight: bold);
270}
271
272code > .comment_note {
273 color: var(--fg);
274 background-color: var(--diag-hint);
275 font-weight: bold;
276 @include style($color: --syn-constant);
277}
278
279code > .markup_strong {
280 @include style($font-weight: bold);
281}
282
283code > .markup_italic {
284 @include style($font-style: italic);
285
286 &::selection {
287 background-color: var(--selection-background);
288 color: var(--selection-foreground);
289 }
290
291 &::-moz-selection {
292 background-color: var(--selection-background);
293 color: var(--selection-foreground);
294 }
295}
296
297code > .markup_strikethrough {
298 text-decoration: line-through;
299}
300
301code > .markup_quote {
302 @include style($color: --syn-parameter);
303}
304
305code > .diff_plus {
306 // color: var(--vcs-added);
307 @include style($color: --syn-added);
308}
309
310code > .diff_minus {
311 @include style($color: --syn-removed);
312}
313
314code > .diff_delta {
315 @include style($color: --syn-changed);
316}