1:root {
2 --secondary: #a291ff;
3}
4main {
5 font-weight: 350;
6 color: #e9eaff;
7}
8h1, .description {
9 color: var(--primary);
10}
11h1 {
12 margin-bottom: 0.5rem;
13}
14p {
15 line-height: 1.6;
16}
17.description {
18 margin-top: 0.5rem;
19 margin-bottom: 0.5rem;
20 font-style: italic;
21}
22.tag-list {
23 display: flex;
24 gap: 0.5rem;
25 font-size: 80%;
26 flex-wrap: wrap;
27 .tag {
28 background-color: #0005;
29 border-radius: 8px;
30 padding: 0 0.6rem;
31 color: lch(from var(--fg) calc(l + 10) calc(c + 5) h / 80%);
32 height: 1.6rem;
33 display: inline-flex;
34 justify-content: center;
35 align-items: center;
36 }
37 .lang-original {
38 --primary: var(--secondary);
39 }
40 .lang {
41 color: var(--primary);
42 }
43 .lang:not(.active) {
44 text-decoration: underline;
45 text-underline-offset: 4px;
46 }
47 .active {
48 border: 2px solid var(--primary);
49 }
50 .square {
51 background-color: transparent;
52 border: 3px solid #0005;
53 padding: 0;
54 width: 1.6rem;
55 }
56}
57
58hr {
59 margin: 1rem 0;
60 border: 2px solid var(--primary);
61}
62img {
63 width: 100%;
64 border-radius: 8px;
65}
66
67h3 {
68 --primary: var(--secondary);
69}
70h2, h3 {
71 color: var(--primary);
72 text-decoration: underline;
73 text-decoration-color: var(--primary);
74 text-decoration-thickness: 2px;
75 text-underline-offset: 2px;
76 a.return {
77 display: inline-block;
78 font-size: 1rem;
79 margin-right: 0.1rem;
80 transform: translateY(-4px);
81 }
82}
83
84b {
85 color: var(--secondary);
86 &.server {
87 color: #ff7770;
88 }
89 &.client {
90 color: #ffcd70;
91 }
92}
93
94blockquote {
95 & > :first-child {
96 margin-top: 0;
97 }
98 & > :last-child {
99 margin-bottom: 0;
100 }
101 figure.code {
102 border: none;
103 pre {
104 padding: 0;
105 }
106 }
107 background-color: #0008;
108 border-radius: 8px;
109 padding: 1rem;
110 border-left: 4px solid var(--secondary);
111 border-top-left-radius: 0;
112 border-bottom-left-radius: 0;
113}
114
115code, kbd {
116 /* box-decoration-break: clone; */
117 border: 1px solid rgb(from var(--secondary) r g b / 0.8);
118 border-radius: 4px;
119 padding: 1px 5px;
120 background-color: #0008;
121}
122kbd {
123 /* box-decoration-break: clone; */
124 border-color: white;
125}
126a > code {
127 --secondary: var(--primary);
128}
129figure.code {
130 border: 4px solid var(--secondary);
131 background-color: lch(from var(--secondary) 4 2 h);
132
133 &:has(figcaption) {
134 border-top: none;
135 }
136
137 &.server {
138 --secondary: #ff7770;
139 }
140 &.client {
141 --secondary: #ffcd70;
142
143 pre > code {
144 color: #fff2d2;
145
146 .keyword {
147 color: #f4c755;
148 }
149 .string {
150 color: #d6e85e;
151 }
152 .constant {
153 color: #ffd978;
154 }
155 .method {
156 color: #ffab72;
157 }
158 .builtin {
159 color: #f0e46d;
160 }
161 .variable {
162 color: #9fe36f;
163 }
164 .comment {
165 color: #baa98b;
166 }
167 .property, .parameter {
168 color: #ffe5ad;
169 }
170 }
171 }
172 figcaption {
173 padding: 0.5rem;
174 font-family: "rmo", monospace;
175 font-weight: bold;
176 color: black;
177 background-color: rgb(from var(--secondary) r g b / 100%);
178 }
179 pre {
180 padding: 0.5rem;
181 overflow-x: auto;
182 font-size: 95%;
183 }
184 pre > code {
185 border: unset;
186 border-radius: unset;
187 padding: unset;
188 background-color: unset;
189
190 color: lch(from var(--secondary) 90 10 h);
191
192 .keyword {
193 color: lch(from var(--secondary) 72 c h);
194 font-weight: bold;
195 }
196 .string {
197 color: lch(from var(--secondary) 84 calc(c + 18) calc(h + 26));
198 }
199 .constant {
200 color: lch(from var(--secondary) 86 calc(c + 10) calc(h - 18));
201 }
202 .method {
203 color: lch(from var(--secondary) 78 calc(c + 8) calc(h + 18));
204 }
205 .builtin {
206 color: lch(from var(--secondary) 82 calc(c + 12) calc(h - 32));
207 }
208 .variable {
209 color: lch(from var(--secondary) 78 calc(c + 16) calc(h + 50));
210 }
211 .comment {
212 color: lch(from var(--secondary) 72 22 h / 85%);
213 }
214 .property, .parameter {
215 color: lch(from var(--secondary) 88 calc(c - 14) h);
216 }
217 }
218}
219
220.meta {
221 display: flex;
222 gap: 0.5rem;
223 margin-bottom: 8px;
224 color: lch(from var(--fg) l calc(c + 10) h / 50%);
225 .meta-author {
226 font-weight: bold;
227 --primary: var(--secondary);
228 }
229 .meta-translate {
230 --primary: #ffcd70;
231 }
232}