1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | :root {
|
8 | --primary: __primary__;
|
9 | --absolute: #000;
|
10 | --contrast: #fff;
|
11 |
|
12 | --text: rgba(0, 0, 0, 0.84);
|
13 | --link: var(--primary);
|
14 | --grey: #6f6f6f;
|
15 |
|
16 | --bg: #fbfcfc;
|
17 | --box: #f2f3f4;
|
18 | --code: #f7f9f9;
|
19 | --button: #eee;
|
20 |
|
21 | --border: #e5e7e9;
|
22 | --shadow: #eee;
|
23 | --glow: transparent;
|
24 |
|
25 | --scroll: #e9e9e9;
|
26 | --hover: #dedede;
|
27 |
|
28 | --code-lang: #555;
|
29 | --hljs-html: #000080;
|
30 | --hljs-attr: #008080;
|
31 | --hljs-obj: #2c426b;
|
32 | --hljs-string: #d14;
|
33 | --hljs-builtin: #0086b3;
|
34 | --hljs-keyword: rgba(0, 0, 0, 0.84);
|
35 | --hljs-selector: #900;
|
36 | --hljs-type: #458;
|
37 | --hljs-regex: #009926;
|
38 | --hljs-symbol: #990073;
|
39 | --hljs-meta: #999;
|
40 | --hljs-comment: #707070;
|
41 | --hljs-deletion: #e8b9b8;
|
42 | --hljs-deletion-text: #4c232d;
|
43 | --hljs-addition: #b9e0d3;
|
44 | --hljs-addition-text: #1e4839;
|
45 | }
|
46 |
|
47 | @media (prefers-color-scheme: dark) {
|
48 | :root {
|
49 | --absolute: #fff;
|
50 | --contrast: #000;
|
51 |
|
52 | --text: #ddd;
|
53 | --link: lighten(__primary__, 22.5%);
|
54 | --grey: #52555c;
|
55 |
|
56 | --bg: #0e0f0f;
|
57 | --box: #050505;
|
58 | --code: #000;
|
59 | --button: #2d2d2d;
|
60 |
|
61 | --border: #2d2e2f;
|
62 | --shadow: #070707;
|
63 | --glow: var(--primary);
|
64 |
|
65 | --scroll: #202225;
|
66 | --hover: #36393f;
|
67 |
|
68 | --code-lang: #ccc;
|
69 | --hljs-html: #46db8c;
|
70 | --hljs-attr: #dd1111;
|
71 | --hljs-obj: #c6cbda;
|
72 | --hljs-string: #abcdef;
|
73 | --hljs-builtin: #b8528d;
|
74 | --hljs-keyword: #2d8b59;
|
75 | --hljs-comment: #a0a0a0;
|
76 | --hljs-deletion: #4c232d;
|
77 | --hljs-deletion-text: #e8b9b8;
|
78 | --hljs-addition: #1e4839;
|
79 | --hljs-addition-text: #b9e0d3;
|
80 | }
|
81 | }
|
82 |
|
83 | * {
|
84 | box-sizing: border-box;
|
85 | word-break: break-word;
|
86 | text-decoration: none;
|
87 | text-size-adjust: 100%;
|
88 | }
|
89 | html,
|
90 | body {
|
91 | width: 100%;
|
92 | height: 100%;
|
93 | margin: 0;
|
94 | padding: 0;
|
95 | }
|
96 | body {
|
97 | color: var(--text);
|
98 | background-color: var(--bg);
|
99 | font-family: 'Nunito Sans', sans-serif;
|
100 | }
|
101 |
|
102 | ::-webkit-scrollbar {
|
103 | width: 2px;
|
104 | height: 2px;
|
105 | }
|
106 | ::-webkit-scrollbar-corner,
|
107 | ::-webkit-scrollbar-track {
|
108 | background-color: transparent;
|
109 | }
|
110 | ::-webkit-scrollbar-thumb {
|
111 | background-color: var(--scroll);
|
112 | border-radius: 5px;
|
113 | }
|
114 | ::-webkit-scrollbar-thumb:hover {
|
115 | background: var(--hover);
|
116 | }
|
117 |
|
118 | aside {
|
119 | display: flex;
|
120 | flex-direction: column;
|
121 | background-color: var(--box);
|
122 | overflow-x: auto;
|
123 |
|
124 | .title {
|
125 | display: flex;
|
126 | flex-direction: row;
|
127 | h1 {
|
128 | font: 1.8em 'Source Code Pro', monospace;
|
129 | margin: 0 0 1em 1.5rem;
|
130 | padding: 1em 8px 2.5px 0;
|
131 | letter-spacing: -2px;
|
132 | border-bottom: 5px solid var(--primary);
|
133 | color: var(--absolute);
|
134 | }
|
135 | .icon {
|
136 | margin: auto 0.5em;
|
137 | img {
|
138 | width: 2.5em;
|
139 | margin: auto 0.5em;
|
140 |
|
141 | }
|
142 | }
|
143 | }
|
144 |
|
145 | > ul:first-child > li:first-child {
|
146 | padding-top: 1em;
|
147 | }
|
148 | ul {
|
149 | list-style-type: none;
|
150 | padding-inline-start: 0;
|
151 | margin: 0;
|
152 | li {
|
153 | p {
|
154 | font-weight: bold;
|
155 | letter-spacing: -0.5px;
|
156 | margin-bottom: 0;
|
157 | padding: 2px 1.3em;
|
158 | font-size: 1.1em;
|
159 | color: var(--hljs-comment);
|
160 |
|
161 | }
|
162 | a {
|
163 | color: var(--text);
|
164 | padding-bottom: 0.1em 5em;
|
165 | display: block;
|
166 | padding: 2px 1.5em;
|
167 | &:hover,
|
168 | &:active {
|
169 | background: var(--scroll);
|
170 | }
|
171 | &.active {
|
172 | color: var(--link);
|
173 | font-weight: bold;
|
174 | text-shadow: 0 0 0.75em var(--glow);
|
175 | }
|
176 | }
|
177 | &.entry > a {
|
178 | text-decoration: underline var(--border);
|
179 | }
|
180 | &.level-1 > a {
|
181 | padding-left: 1.75em;
|
182 | }
|
183 | &.level-2 > a {
|
184 | padding-left: calc(1.5em + calc(0.75em * 1));
|
185 | }
|
186 | &.level-3 > a {
|
187 | padding-left: calc(1.5em + calc(0.75em * 2));
|
188 | }
|
189 | &.level-4 > a {
|
190 | padding-left: calc(1.5em + calc(0.75em * 3));
|
191 | }
|
192 | &.level-5 > a {
|
193 | padding-left: calc(1.5em + calc(0.75em * 4));
|
194 | }
|
195 | &.level-6 > a {
|
196 | padding-left: calc(1.5em + calc(0.75em * 5));
|
197 | }
|
198 | }
|
199 | }
|
200 |
|
201 | .mark {
|
202 | text-align: right;
|
203 | margin-top: auto;
|
204 | padding: 1.5em 1.5em 2px 1.5em;
|
205 | font-size: 0.8em;
|
206 | a {
|
207 | color: var(--grey);
|
208 | }
|
209 | }
|
210 | }
|
211 |
|
212 | .wrapper {
|
213 | height: 100%;
|
214 | width: 100%;
|
215 | overflow-y: hidden;
|
216 |
|
217 | .documentative {
|
218 | height: 100%;
|
219 | overflow-y: auto;
|
220 | padding: 0 1.5em;
|
221 | padding-bottom: 4em;
|
222 | display: flex;
|
223 | flex-direction: column;
|
224 |
|
225 | .block {
|
226 | margin: 1.5em;
|
227 | word-wrap: break-word;
|
228 | &:first-child {
|
229 | margin: 0 1.5em 1.5em 1.5em;
|
230 | }
|
231 | }
|
232 | .example {
|
233 | margin-top: 1em;
|
234 | padding: 1em;
|
235 | background-color: var(--box);
|
236 | box-shadow: 0.4em 0.4em 1em var(--shadow);
|
237 | p:first-child {
|
238 | margin-top: 0;
|
239 | }
|
240 | p:last-child {
|
241 | margin-bottom: 0;
|
242 | }
|
243 | }
|
244 | nav {
|
245 | width: 75%;
|
246 | position: fixed;
|
247 | bottom: 1em;
|
248 | right: 0;
|
249 | pointer-events: none;
|
250 | .prev {
|
251 | float: left;
|
252 | padding-right: 0.13em;
|
253 | }
|
254 | .next {
|
255 | float: right;
|
256 | padding-left: 0.13em;
|
257 | }
|
258 | .prev,
|
259 | .next {
|
260 | opacity: 1;
|
261 | transition: opacity 200ms ease;
|
262 | pointer-events: all;
|
263 | border-radius: 50%;
|
264 | width: 1.75em;
|
265 | height: 1.75em;
|
266 | margin: 0 1em;
|
267 | font: 1.5em 'Source Code Pro', monospace;
|
268 | line-height: 1.75em;
|
269 | text-align: center;
|
270 | color: var(--text);
|
271 | text-shadow: none !important;
|
272 | background-color: var(--button);
|
273 | }
|
274 | }
|
275 | .footer {
|
276 | text-align: right;
|
277 | color: var(--grey);
|
278 | margin: auto 1.5em 0;
|
279 | hr {
|
280 | border-color: var(--grey);
|
281 | }
|
282 | a {
|
283 | color: var(--grey);
|
284 | font-weight: bold;
|
285 | text-shadow: none;
|
286 | text-decoration: dotted underline;
|
287 | }
|
288 | }
|
289 | h1,
|
290 | h2,
|
291 | h3,
|
292 | h4,
|
293 | h5,
|
294 | h6 {
|
295 | margin: 0;
|
296 | padding-top: 1em;
|
297 | a {
|
298 | color: var(--text);
|
299 | text-shadow: none;
|
300 | }
|
301 | }
|
302 | h1 {
|
303 | padding-top: 1.5em;
|
304 | }
|
305 | a {
|
306 | color: var(--link);
|
307 | text-shadow: 0 0 0.75em var(--glow);
|
308 | }
|
309 | img {
|
310 | max-width: 100%;
|
311 | }
|
312 | blockquote {
|
313 | margin-left: 0;
|
314 | padding-left: 1em;
|
315 | border-left: 0.25em solid var(--border);
|
316 | }
|
317 | h1 + table,
|
318 | h2 + table,
|
319 | h3 + table,
|
320 | h4 + table,
|
321 | h5 + table,
|
322 | h6 + table {
|
323 | margin-top: 1em;
|
324 | }
|
325 | table {
|
326 | width: 100%;
|
327 | border-collapse: collapse;
|
328 | }
|
329 | table,
|
330 | th,
|
331 | td {
|
332 | padding: 0.2em 0.7em;
|
333 | border: 1px solid var(--border);
|
334 | }
|
335 | code {
|
336 | font-size: 0.8em;
|
337 | background-color: var(--code);
|
338 | overflow-x: auto;
|
339 | position: relative;
|
340 | display: block;
|
341 | font-family: 'Source Code Pro', monospace;
|
342 | }
|
343 | *:not(pre) > code {
|
344 | padding: 0.275em 0.35em;
|
345 | border-radius: 2px;
|
346 | display: inline;
|
347 | }
|
348 | pre {
|
349 | position: relative;
|
350 | code {
|
351 | padding: 1.8em;
|
352 | border-radius: 5px;
|
353 | position: static;
|
354 | &::before {
|
355 | position: absolute;
|
356 | right: 0;
|
357 | top: 0;
|
358 | color: var(--code-lang);
|
359 | font-size: 0.65em;
|
360 | padding: 0.5em 0.8em;
|
361 | }
|
362 | }
|
363 | }
|
364 | }
|
365 | }
|
366 |
|
367 | @media (min-width: 769px) {
|
368 | body {
|
369 | display: grid;
|
370 | grid-template-columns: 25% 75%;
|
371 | }
|
372 | aside::-webkit-scrollbar-corner,
|
373 | aside::-webkit-scrollbar-track {
|
374 | background-color: var(--bg);
|
375 | }
|
376 | .toggle {
|
377 | display: none;
|
378 | }
|
379 | }
|
380 |
|
381 | @media (max-width: 768px) {
|
382 | aside {
|
383 | z-index: 1;
|
384 | height: 100%;
|
385 | display: flex;
|
386 | position: fixed;
|
387 | top: 0;
|
388 |
|
389 | left: calc(4.5em - 100%);
|
390 | width: calc(100% - 4.5em);
|
391 | transition: left 300ms ease;
|
392 | }
|
393 | .wrapper {
|
394 | display: flex;
|
395 | flex-direction: column;
|
396 | position: fixed;
|
397 | top: 0;
|
398 | left: 0;
|
399 | transition: left 300ms ease;
|
400 | .documentative {
|
401 | flex-shrink: 1;
|
402 | nav {
|
403 | width: 100%;
|
404 | }
|
405 | }
|
406 | .toggle {
|
407 | display: flex;
|
408 | flex-direction: row;
|
409 | flex-shrink: 0;
|
410 | padding: 0.8em 0;
|
411 | background-color: var(--box);
|
412 | h1 {
|
413 | letter-spacing: -2px;
|
414 | font-size: 1.8em;
|
415 | padding-top: 1.5px;
|
416 | margin: auto 1.5rem auto 0;
|
417 | }
|
418 | button {
|
419 | font-size: 1.8em;
|
420 | width: 2.5em;
|
421 | margin: auto 0.5em;
|
422 | color: var(--absolute);
|
423 | &:hover,
|
424 | &:focus {
|
425 | color: var(--text);
|
426 | }
|
427 | border: none;
|
428 | background: none;
|
429 | text-align: center;
|
430 | transition: transform 150ms ease;
|
431 | -webkit-appearance: none;
|
432 | -moz-appearance: none;
|
433 | &:active {
|
434 | transform: scale(0.95);
|
435 | }
|
436 | }
|
437 | }
|
438 | }
|
439 | .mobilemenu {
|
440 | aside {
|
441 | left: 0;
|
442 |
|
443 | }
|
444 | .wrapper {
|
445 | left: calc(100% - 4.75em);
|
446 | .prev,
|
447 | .next {
|
448 | opacity: 0 !important;
|
449 | pointer-events: none !important;
|
450 | }
|
451 | }
|
452 | }
|
453 | }
|
454 |
|
455 | .hljs-subst {
|
456 | color: var(--text);
|
457 | }
|
458 | .hljs-comment,
|
459 | .hljs-quote {
|
460 | color: var(--hljs-comment);
|
461 | font-style: italic;
|
462 | }
|
463 | .hljs-keyword,
|
464 | .hljs-selector-tag {
|
465 | color: var(--hljs-keyword);
|
466 | font-weight: bold;
|
467 | }
|
468 | .hljs-attr {
|
469 | color: var(--hljs-obj);
|
470 | }
|
471 | .hljs-number,
|
472 | .hljs-literal,
|
473 | .hljs-variable,
|
474 | .hljs-template-variable,
|
475 | .hljs-tag .hljs-attr {
|
476 | color: var(--hljs-attr);
|
477 | }
|
478 | .hljs-string,
|
479 | .hljs-doctag {
|
480 | color: var(--hljs-string);
|
481 | }
|
482 | .hljs-name,
|
483 | .hljs-attribute {
|
484 | color: var(--hljs-html);
|
485 | }
|
486 | .hljs-built_in,
|
487 | .hljs-builtin-name {
|
488 | color: var(--hljs-builtin);
|
489 | }
|
490 | .hljs-title,
|
491 | .hljs-section,
|
492 | .hljs-selector-id {
|
493 | color: var(--hljs-selector);
|
494 | font-weight: bold;
|
495 | }
|
496 | .hljs-type,
|
497 | .hljs-class .hljs-title {
|
498 | color: var(--hljs-type);
|
499 | font-weight: bold;
|
500 | }
|
501 | .hljs-regexp,
|
502 | .hljs-link {
|
503 | color: var(--hljs-regex);
|
504 | }
|
505 | .hljs-symbol,
|
506 | .hljs-bullet {
|
507 | color: var(--hljs-symbol);
|
508 | }
|
509 | .hljs-meta {
|
510 | color: var(--hljs-meta);
|
511 | font-weight: bold;
|
512 | }
|
513 | .hljs-deletion {
|
514 | background: var(--hljs-deletion);
|
515 | color: var(--hljs-deletion-text);
|
516 | }
|
517 | .hljs-addition {
|
518 | background: var(--hljs-addition);
|
519 | color: var(--hljs-addition-text);
|
520 | }
|
521 | .hljs-emphasis {
|
522 | font-style: italic;
|
523 | }
|
524 | .hljs-strong {
|
525 | font-weight: bold;
|
526 | }
|