Documentation for my projects & stuff, build using 11ty.
feat: add syntax highlighting
+72
+66
src/css/_highlight.scss
+66
src/css/_highlight.scss
···
1
+
/* Keywords, control flow, etc. */
2
+
.token.keyword,
3
+
.token.selector,
4
+
.token.important,
5
+
.token.atrule,
6
+
.token.bold {
7
+
color: var(--primary);
8
+
font-weight: bold;
9
+
}
10
+
11
+
/* Tags, attributes */
12
+
.token.tag,
13
+
.token.attr-name,
14
+
.token.property {
15
+
color: var(--tertiary);
16
+
}
17
+
18
+
/* Strings, functions, built-ins */
19
+
.token.string,
20
+
.token.function,
21
+
.token.builtin,
22
+
.token.symbol,
23
+
.token.char {
24
+
color: var(--secondary);
25
+
}
26
+
27
+
/* Inserted (addition) */
28
+
.token.inserted {
29
+
background-color: color-mix(
30
+
in srgb,
31
+
var(--tertiaryContainer) 40%,
32
+
transparent
33
+
);
34
+
color: var(--onTertiaryContainer);
35
+
}
36
+
37
+
/* Deleted (deletion) */
38
+
.token.deleted {
39
+
background-color: color-mix(in srgb, var(--errorContainer) 40%, transparent);
40
+
color: var(--onErrorContainer);
41
+
}
42
+
43
+
/* Comments */
44
+
.token.comment,
45
+
.token.prolog,
46
+
.token.doctype,
47
+
.token.cdata {
48
+
color: var(--outline);
49
+
font-style: italic;
50
+
}
51
+
52
+
/* Meta, decorators, annotations */
53
+
.token.decorator,
54
+
.token.annotation {
55
+
color: var(--tertiary);
56
+
}
57
+
58
+
/* Italic emphasis */
59
+
.token.italic {
60
+
font-style: italic;
61
+
}
62
+
63
+
/* Bold emphasis */
64
+
.token.bold {
65
+
font-weight: bold;
66
+
}
+6
src/css/_typography.scss
+6
src/css/_typography.scss
···
1
+
@use "highlight";
2
+
3
+
// ------- Highlight End -------
4
+
1
5
// Cantarell
2
6
@font-face {
3
7
font-family: "Cantarell";
···
30
34
--fontCantarell: "Cantarell";
31
35
--fontMonaspaceRadon: "Monaspace Radon";
32
36
}
37
+
38
+
// ------- Fonts End -------
33
39
34
40
body {
35
41
font-family: var(--fontCantarell), sans-serif;