hotdocs 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,697 @@
1
+ /* CSS: UNRESET */
2
+
3
+ .article * {
4
+ all: revert-layer; /* With revert svg path is unset */
5
+ }
6
+
7
+ .article {
8
+ .anchor-link {
9
+ margin-left: 0.5ch;
10
+ opacity: 0;
11
+ text-decoration: none;
12
+ transition-duration: 0.2s;
13
+ transition-property: opacity;
14
+ transition-timing-function: ease-in-out;
15
+
16
+ &:hover {
17
+ text-decoration: underline;
18
+ }
19
+ }
20
+
21
+ h1:hover .anchor-link,
22
+ h2:hover .anchor-link,
23
+ h3:hover .anchor-link,
24
+ h4:hover .anchor-link,
25
+ h5:hover .anchor-link,
26
+ h6:hover .anchor-link {
27
+ opacity: 1;
28
+ }
29
+ }
30
+
31
+ /* CSS: GLOBAL */
32
+
33
+ :root {
34
+ --background-color: white;
35
+ --column-border-color: #dadada;
36
+ --content-padding-bottom: 2rem;
37
+ --link-active-color: black;
38
+ --link-color: #707070;
39
+ --nav-height: 3.75rem;
40
+ --text-color: #1c1e21;
41
+ }
42
+
43
+ [data-theme=dark]:root {
44
+ --background-color: #1b1b1d;
45
+ --column-border-color: #535353;
46
+ --link-active-color: white;
47
+ --link-color: #909090;
48
+ --text-color: #e3e1de;
49
+ }
50
+
51
+ html {
52
+ -webkit-font-smoothing: antialiased;
53
+ background-color: var(--background-color);
54
+ color: var(--text-color);
55
+ scroll-padding-top: calc(var(--nav-height) + 0.2rem);
56
+ text-rendering: optimizelegibility;
57
+ }
58
+
59
+ /* Sticky footer */
60
+
61
+ html, body {
62
+ min-height: 100vh;
63
+ }
64
+
65
+ body {
66
+ display: flex;
67
+ flex-direction: column;
68
+ }
69
+
70
+ /* CSS: NAV */
71
+
72
+ :root {
73
+ --nav-background-color: white;
74
+ --nav-link-active-color: var(--link-active-color);
75
+ --nav-link-color: var(--link-color);
76
+ --nav-padding-horizontal: 1rem;
77
+ --nav-padding-vertical: 0.5rem;
78
+ --nav-shadow: 0 1px 2px 0 #0000001a;
79
+ --nav-title-color: #1c1e21;
80
+ --nav-toggle-color: rgb(28, 30, 33);
81
+ --sidenav-padding-horizontal: 0.75rem;
82
+ }
83
+
84
+ [data-theme=dark]:root {
85
+ --nav-background-color: #242526;
86
+ --nav-link-active-color: var(--link-active-color);
87
+ --nav-link-color: var(--link-color);
88
+ --nav-title-color: #e3e1de;
89
+ --nav-toggle-color: rgb(227, 225, 222);
90
+ }
91
+
92
+ /* Added to <body> */
93
+ .sidenav--open {
94
+ overflow: hidden;
95
+ }
96
+
97
+ .nav {
98
+ align-items: center;
99
+ background-color: var(--nav-background-color);
100
+ box-shadow: var(--nav-shadow);
101
+ display: flex;
102
+ flex: 0 0 auto;
103
+ height: var(--nav-height);
104
+ justify-content: space-between;
105
+ padding: var(--nav-padding-vertical) var(--nav-padding-horizontal);
106
+ position: sticky;
107
+ top: 0;
108
+ z-index: 10;
109
+ }
110
+
111
+ .nav__section {
112
+ align-items: center;
113
+ display: flex;
114
+ gap: 1.5rem;
115
+ }
116
+
117
+ .nav__links {
118
+ display: none;
119
+
120
+ @media (min-width: 64rem) {
121
+ align-items: center;
122
+ display: flex;
123
+ gap: 1.5rem;
124
+ }
125
+ }
126
+
127
+ .nav__link {
128
+ color: var(--nav-link-color);
129
+
130
+ &.active {
131
+ color: var(--nav-link-active-color);
132
+ }
133
+
134
+ &:hover {
135
+ color: var(--nav-link-active-color);
136
+ }
137
+ }
138
+
139
+ .nav__brand {
140
+ align-items: center;
141
+ display: flex;
142
+ gap: 0.5rem;
143
+ }
144
+
145
+ .nav__logo-wrapper {
146
+ height: 2rem;
147
+ width: 2rem;
148
+ }
149
+
150
+ .nav__logo {
151
+ height: 100%;
152
+ width: 100%;
153
+ }
154
+
155
+ .nav__title {
156
+ color: var(--nav-title-color);
157
+ font-weight: bold;
158
+ }
159
+
160
+ .nav__toggle {
161
+ color: var(--nav-toggle-color);
162
+ height: 1.5rem;
163
+ width: 1.5rem;
164
+
165
+ @media (min-width: 64rem) {
166
+ display: none;
167
+ }
168
+ }
169
+
170
+ .sidenav-backdrop {
171
+ background-color: rgba(0, 0, 0, .6);
172
+ inset: 0;
173
+ opacity: 0;
174
+ position: fixed;
175
+ transition-duration: 0.2s;
176
+ transition-property: visibility, opacity;
177
+ transition-timing-function: ease-in-out;
178
+ visibility: hidden;
179
+ }
180
+
181
+ .sidenav--open .sidenav-backdrop {
182
+ opacity: 1;
183
+ visibility: visible;
184
+ }
185
+
186
+ .sidenav {
187
+ background-color: var(--nav-background-color);
188
+ bottom: 0;
189
+ left: 0;
190
+ opacity: 0;
191
+ overflow-x: hidden;
192
+ position: fixed;
193
+ top: 0;
194
+ transform: translate(-100%);
195
+ transition-duration: 0.2s;
196
+ transition-property: transform, visibility, opacity;
197
+ transition-timing-function: ease-in-out;
198
+ visibility: hidden;
199
+ width: 85vw;
200
+ }
201
+
202
+ .sidenav--open .sidenav {
203
+ opacity: 1;
204
+ transform: translate(0, 0);
205
+ visibility: visible;
206
+ }
207
+
208
+ .sidenav__header {
209
+ align-items: center;
210
+ background-color: var(--nav-background-color);
211
+ box-shadow: var(--nav-shadow);
212
+ display: flex;
213
+ height: var(--nav-height);
214
+ justify-content: space-between;
215
+ padding: var(--nav-padding-vertical) var(--nav-padding-horizontal);
216
+ position: sticky;
217
+ top: 0;
218
+ z-index: 10;
219
+ }
220
+
221
+ .sidenav__toggle {
222
+ color: var(--nav-toggle-color);
223
+ height: 1rem;
224
+ width: 1rem;
225
+ }
226
+
227
+ .sidenav__sections {
228
+ display: flex;
229
+ transform: translate(-85vw);
230
+ transition-duration: 0.2s;
231
+ transition-property: transform;
232
+ transition-timing-function: ease-in-out;
233
+ }
234
+
235
+ .sidenav__sections--main {
236
+ transform: translate(0);
237
+ }
238
+
239
+ .sidenav__section {
240
+ flex-shrink: 0;
241
+ padding: 0.5rem;
242
+ width: 85vw;
243
+ }
244
+
245
+ .sidenav__back-button {
246
+ font-weight: bold;
247
+ }
248
+
249
+ /* CSS: MENU */
250
+
251
+ :root {
252
+ --menu-accordion-color: #7f7f7f;
253
+ --menu-border-color: var(--column-border-color);
254
+ --menu-link-active-color: var(--link-active-color);
255
+ --menu-link-hover-background-color: rgba(0, 0, 0, .05);
256
+ --menu-link-color: var(--link-color);
257
+ }
258
+
259
+ [data-theme=dark]:root {
260
+ --menu-accordion-color: #a0a0a0;
261
+ --menu-link-active-color: var(--link-active-color);
262
+ --menu-link-hover-background-color: rgba(255, 255, 255, .05);
263
+ --menu-link-color: var(--link-color);
264
+ }
265
+
266
+ .menu {
267
+ border-right: 1px solid var(--menu-border-color);
268
+ display: none;
269
+ width: 20rem;
270
+
271
+ @media (min-width: 64rem) {
272
+ display: initial;
273
+ }
274
+ }
275
+
276
+ .menu__sections {
277
+ padding-bottom: var(--content-padding-bottom);
278
+ position: sticky;
279
+ top: var(--nav-height);
280
+ }
281
+
282
+ .menu__section {
283
+ padding: 0.5rem;
284
+ }
285
+
286
+ .menu__section .menu__section {
287
+ display: none;
288
+ padding: 0;
289
+ padding-left: 1.5rem;
290
+ }
291
+
292
+ .menu__row--expanded ~ .menu__section {
293
+ display: revert;
294
+ }
295
+
296
+ .menu__row {
297
+ align-items: center;
298
+ display: flex;
299
+ height: 2.5rem;
300
+ justify-content: space-between;
301
+ }
302
+
303
+ .menu__link {
304
+ border-radius: 0.25rem;
305
+ color: var(--menu-link-color);
306
+ display: inline-block;
307
+ flex: 1 0 0;
308
+ overflow: hidden;
309
+ padding: 0.375rem 1rem;
310
+ text-overflow: ellipsis;
311
+ white-space: nowrap;
312
+
313
+ &.active {
314
+ color: var(--menu-link-active-color);
315
+ }
316
+
317
+ &:hover {
318
+ background-color: var(--menu-link-hover-background-color);
319
+ }
320
+ }
321
+
322
+ .menu__toggle {
323
+ align-items: center;
324
+ align-self: stretch;
325
+ border-radius: 0.25rem;
326
+ display: flex;
327
+ flex: 0 0 auto;
328
+ justify-content: center;
329
+
330
+ &:hover {
331
+ background-color: var(--menu-link-hover-background-color);
332
+ }
333
+ }
334
+
335
+ /* Do not display the toggle... */
336
+ .menu__toggle {
337
+ display: none;
338
+ }
339
+
340
+ /* ...unless it has a sibling section. */
341
+ .menu__row:has(~ .menu__section) .menu__toggle {
342
+ display: revert;
343
+ }
344
+
345
+ .menu__toggle-icon {
346
+ color: var(--menu-accordion-color);
347
+ transform: rotate(90deg);
348
+ height: 2rem;
349
+ width: 2rem;
350
+ }
351
+
352
+ .menu__row--expanded .menu__toggle-icon {
353
+ transform: rotate(180deg);
354
+ }
355
+
356
+ /* CSS: CONTENT */
357
+
358
+ .content {
359
+ display: flex;
360
+ flex: 1 0 auto;
361
+ }
362
+
363
+ .main {
364
+ display: flex;
365
+ flex-grow: 1;
366
+ max-width: 100%;
367
+ padding-bottom: var(--content-padding-bottom);
368
+
369
+ @media (min-width: 64rem) {
370
+ width: calc(100% - 20rem);
371
+ }
372
+ }
373
+
374
+ .central {
375
+ flex-grow: 1;
376
+ max-width: 100%;
377
+ padding-inline: var(--nav-padding-horizontal);
378
+
379
+ @media (min-width: 64rem) {
380
+ padding-inline: 2rem;
381
+ width: 75%;
382
+ }
383
+ }
384
+
385
+ /* CSS: TOC */
386
+
387
+ :root {
388
+ --sidetoc-code-background-color: var(--toc-code-background-color);
389
+ --sidetoc-code-border-color: var(--toc-code-border-color);
390
+ --sidetoc-link-color: var(--link-color);
391
+ --sidetoc-link-active-color: var(--link-active-color);
392
+ --toc-background-color: #e9e9e9;
393
+ --toc-code-background-color: #eee;
394
+ --toc-code-border-color: #00000022;
395
+ --toc-divider-color: #b0b0b0;
396
+ --toc-link-active-color: black;
397
+ --toc-link-color: #606060;
398
+ }
399
+
400
+ [data-theme=dark]:root {
401
+ --sidetoc-code-background-color: var(--toc-code-background-color);
402
+ --sidetoc-code-border-color: var(--toc-code-border-color);
403
+ --sidetoc-link-color: var(--link-color);
404
+ --sidetoc-link-active-color: var(--link-active-color);
405
+ --toc-background-color: #444444;
406
+ --toc-code-background-color: #2b2b2b;
407
+ --toc-code-border-color: #ffffff22;
408
+ --toc-divider-color: #909090;
409
+ --toc-link-active-color: white;
410
+ --toc-link-color: #c0c0c0;
411
+ }
412
+
413
+ .toc {
414
+ background-color: var(--toc-background-color);
415
+ border-radius: 5px;
416
+ cursor: pointer;
417
+ margin-block: 1rem;
418
+ user-select: none;
419
+
420
+ @media (min-width: 85rem) {
421
+ display: none;
422
+ }
423
+
424
+ &::details-content {
425
+ height: 0;
426
+ overflow: hidden;
427
+ transition-property: height, content-visibility;
428
+ transition-duration: 0.5s;
429
+ transition-behavior: allow-discrete;
430
+ }
431
+
432
+ &[open]::details-content {
433
+ height: auto;
434
+ /* On supported browsers, allow transition to height: auto; */
435
+ height: calc-size(auto, size);
436
+ }
437
+ }
438
+
439
+ .toc__label {
440
+ padding: 0.3rem 0.6rem;
441
+ }
442
+
443
+ .toc__entries {
444
+ border-top: 1px solid var(--toc-divider-color);
445
+ display: flex;
446
+ flex-direction: column;
447
+ font-size: 0.9rem;
448
+ padding: 0.5rem 0.6rem;
449
+ gap: 0.4rem;
450
+ }
451
+
452
+ .toc__link {
453
+ color: var(--toc-link-color);
454
+ display: inline-block;
455
+
456
+ &.h2 {
457
+ margin-left: 1rem;
458
+ }
459
+
460
+ &.h3 {
461
+ margin-left: 2rem;
462
+ }
463
+
464
+ &.h4 {
465
+ margin-left: 3rem;
466
+ }
467
+
468
+ &.h5 {
469
+ margin-left: 4rem;
470
+ }
471
+
472
+ &.h6 {
473
+ margin-left: 5rem;
474
+ }
475
+
476
+ &.active {
477
+ color: var(--toc-link-active-color);
478
+ }
479
+
480
+ &:hover {
481
+ color: var(--toc-link-active-color);
482
+ }
483
+
484
+ code {
485
+ background: var(--toc-code-background-color);
486
+ border-radius: 5px;
487
+ border: .1rem solid var(--toc-code-border-color);
488
+ padding: 0.1rem 0.2rem;
489
+ word-break: break-all;
490
+ }
491
+ }
492
+
493
+ .sidetoc {
494
+ display: none;
495
+ flex: 0 0 25%;
496
+ max-width: 25%;
497
+
498
+ @media (min-width: 85rem) {
499
+ display: initial;
500
+ }
501
+ }
502
+
503
+ .sidetoc__entries {
504
+ border-left: 1px solid var(--column-border-color);
505
+ display: flex;
506
+ flex-direction: column;
507
+ font-size: 0.9rem;
508
+ gap: 0.4rem;
509
+ padding: 0 1.5rem;
510
+ position: sticky;
511
+ top: calc(var(--nav-height) + 0.5rem + 0.375rem); /* Align with menu */
512
+ }
513
+
514
+ .sidetoc__link {
515
+ color: var(--sidetoc-link-color);
516
+ display: inline-block;
517
+
518
+ &.h2 {
519
+ margin-left: 1rem;
520
+ }
521
+
522
+ &.h3 {
523
+ margin-left: 2rem;
524
+ }
525
+
526
+ &.h4 {
527
+ margin-left: 3rem;
528
+ }
529
+
530
+ &.h5 {
531
+ margin-left: 4rem;
532
+ }
533
+
534
+ &.h6 {
535
+ margin-left: 5rem;
536
+ }
537
+
538
+ &.active {
539
+ color: var(--sidetoc-link-active-color);
540
+ }
541
+
542
+ &:hover {
543
+ color: var(--sidetoc-link-active-color);
544
+ }
545
+
546
+ code {
547
+ background: var(--sidetoc-code-background-color);
548
+ border-radius: 5px;
549
+ border: .1rem solid var(--sidetoc-code-border-color);
550
+ padding: 0.1rem 0.2rem;
551
+ word-break: break-all;
552
+ }
553
+ }
554
+
555
+ /* CSS: FOOTER */
556
+
557
+ :root {
558
+ --footer-background-color: #e9e9e9;
559
+ }
560
+
561
+ [data-theme=dark]:root {
562
+ --footer-background-color: #444444;
563
+ }
564
+
565
+ .footer {
566
+ background-color: var(--footer-background-color);
567
+ flex: 0 0 auto;
568
+ padding: 4rem 1rem;
569
+ }
570
+
571
+ .footer__sections {
572
+ display: grid;
573
+ gap: 1.5rem;
574
+ grid-template-columns: 1fr;
575
+ max-width: 1200px;
576
+ margin: auto;
577
+
578
+ @media (min-width: 40rem) {
579
+ grid-template-columns: repeat(2, 1fr);
580
+ }
581
+
582
+ @media (min-width: 64rem) {
583
+ grid-template-columns: repeat(4, 1fr);
584
+ }
585
+ }
586
+
587
+ .footer__section {
588
+ flex: 1 1 0;
589
+ }
590
+
591
+ .footer__heading {
592
+ font-weight: bold;
593
+ }
594
+
595
+ .footer__link:hover {
596
+ text-decoration: underline;
597
+ }
598
+
599
+ .footer__logo {
600
+ margin: 3rem auto;
601
+ height: 8rem;
602
+ width: 8rem;
603
+ }
604
+
605
+ .credits {
606
+ text-align: center;
607
+ }
608
+
609
+ .credits__link {
610
+ text-decoration: underline;
611
+ }
612
+
613
+ .credits__logo {
614
+ display: inline-block;
615
+ height: 2rem;
616
+ margin-left: 0.8rem;
617
+ width: 2rem;
618
+ }
619
+
620
+ /* CSS: HELPERS */
621
+
622
+ .external-link {
623
+ align-items: center;
624
+ display: inline-flex;
625
+ gap: 0.3rem;
626
+ margin-right: 0.5ch;
627
+ }
628
+
629
+ .external-link__icon {
630
+ height: 0.6rem;
631
+ width: 0.6rem;
632
+ }
633
+
634
+ .edit-link {
635
+ align-items: center;
636
+ display: inline-flex;
637
+ gap: 0.3rem;
638
+ margin-left: 0.5ch;
639
+ margin-top: 4rem;
640
+ }
641
+
642
+ .edit-link__icon {
643
+ height: 1rem;
644
+ width: 1rem;
645
+ }
646
+
647
+ /* CSS: ADMONITIONS */
648
+
649
+ .admonition {
650
+ border: 1px solid;
651
+ border-left: 0.5rem solid;
652
+ border-radius: 0.375rem;
653
+ margin-bottom: 1rem;
654
+ padding: 1rem;
655
+ }
656
+
657
+ .admonition--tip {
658
+ background: #00940011;
659
+ border-color: #009400;
660
+ }
661
+
662
+ .admonition--info {
663
+ background: #87cef911;
664
+ border-color: #87cef9;
665
+ }
666
+
667
+ .admonition--warning {
668
+ background: #fea50011;
669
+ border-color: #fea500;
670
+ }
671
+
672
+ .admonition--danger {
673
+ background: #db153b11;
674
+ border-color: #db153b;
675
+ }
676
+
677
+ .admonition__header {
678
+ align-items: center;
679
+ display: flex;
680
+ gap: 0.5ch;
681
+ margin-bottom: 1rem;
682
+ }
683
+
684
+ .admonition__icon {
685
+ height: 1rem;
686
+ width: 1rem;
687
+ }
688
+
689
+ .admonition__label {
690
+ font-weight: bold;
691
+ margin: 0;
692
+ text-transform: uppercase;
693
+ }
694
+
695
+ .admonition__content > :last-of-type {
696
+ margin-bottom: 0;
697
+ }