writr 2.0.3 → 3.0.1

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.
@@ -1,919 +0,0 @@
1
- * {
2
- margin:0;
3
- box-sizing: border-box;
4
- }
5
-
6
- .hidden {
7
- display: none;
8
- }
9
-
10
- .fixed {
11
- position: fixed;
12
- top: 0;
13
- width: 100%;
14
- }
15
-
16
- .icon {
17
- background-color: transparent;
18
- border: none;
19
- cursor: pointer;
20
- }
21
-
22
- body {
23
- position: relative;
24
- font-family: var(--font-family);
25
- color: var(--color-text);
26
- font-size: 16px;
27
- background-color: var(--background);
28
- min-height: 100vh;
29
- }
30
-
31
- a {
32
- text-decoration: none;
33
- color: inherit;
34
- }
35
-
36
- header {
37
- z-index: 2;
38
- width: 100%;
39
- top: 0;
40
- position: relative;
41
- background: var(--header-background);
42
- }
43
-
44
- button {
45
- font-family: var(--font-family);
46
- font-size: 14px;
47
- }
48
-
49
- hr {
50
- border-top: 0;
51
- border-bottom: 1px solid var(--border);
52
- margin: 12px 0;
53
- }
54
-
55
- .nav {
56
- padding-left: 16px;
57
- padding-right: 16px;
58
- height: 72px;
59
- display: flex;
60
- justify-content: space-between;
61
- align-items: center;
62
- width: 100%;
63
- border-bottom: 1px solid var(--border);
64
- z-index: 3;
65
- white-space: nowrap;
66
- flex-grow: 1;
67
- }
68
-
69
- .menu-btn {
70
- margin-right: 22px;
71
- }
72
-
73
- .menu-btn svg {
74
- width: 20px;
75
- height: 20px;
76
- margin-right: 8px;
77
- }
78
-
79
- .menu-btn span {
80
- text-transform: uppercase;
81
- font-size: 10px;
82
- vertical-align: super;
83
- color: var(--color-text);
84
- }
85
-
86
- .nav-list {
87
- padding-left: 0;
88
- }
89
-
90
- .nav-list li {
91
- margin-top: 24px;
92
- color: var(--sidebar-text);
93
- list-style: none;
94
- }
95
-
96
- .nav-list .active {
97
- color: var(--sidebar-text-active);
98
- }
99
-
100
- .child-list li {
101
- color: var(--sidebar-text);
102
- opacity: 0.8;
103
- }
104
-
105
- .search-btn {
106
- transition-duration: .3s;
107
- transition-timing-function: cubic-bezier(.4,0,.2,1);
108
- transition-property: all;
109
- width: 100%;
110
- outline: none;
111
- height: 48px;
112
- display: flex;
113
- justify-content: flex-start;
114
- align-items: center;
115
- color: var(--color-text);
116
- }
117
-
118
-
119
- .search-text {
120
- margin-top: 4px;
121
- margin-left: 16px;
122
- line-height: 1;
123
- text-overflow: ellipsis;
124
- white-space: nowrap;
125
- overflow: hidden;
126
- }
127
-
128
- .search-btn svg {
129
- width: 18px;
130
- height: 22px;
131
- opacity: .75;
132
- fill: var(--color-text);
133
- }
134
-
135
- .sidebar {
136
- background: var(--sidebar-background);
137
- z-index: 4;
138
- width: 100%;
139
- top: 0;
140
- height: 100vh;
141
- flex-direction: column;
142
- flex-shrink: 0;
143
- position: fixed;
144
- font-family: var(--font-family);
145
- border-right: 1px solid var(--border);
146
- }
147
-
148
- .sidebar-container {
149
- overflow-y: auto;
150
- width: inherit;
151
- flex-grow: 1;
152
- position: relative;
153
- }
154
-
155
- .sidebar-content {
156
- padding: 48px 40px 24px;
157
- overflow-y: auto;
158
- font-size: 14px;
159
- height: 90vh;
160
- }
161
-
162
- .close-btn {
163
- transition: all .2s ease-out;
164
- color: var(--sidebar-text);
165
- margin-top: 48px;
166
- display: flex;
167
- align-items: center;
168
- position: absolute;
169
- right: 0;
170
- top: 0;
171
- margin-right: 40px;
172
- }
173
-
174
- .close-btn svg {
175
- width: 16px;
176
- height: 16px;
177
- fill: currentColor;
178
- margin-right: 16px;
179
- }
180
-
181
- .main-container {
182
- width: 100%;
183
- overflow-x: hidden;
184
- padding-top: 100px;
185
- }
186
-
187
- .main-content {
188
- padding: 0 24px;
189
- display: flex;
190
- }
191
-
192
-
193
- .header-search {
194
- overflow: hidden;
195
- }
196
-
197
- .header {
198
- height: 72px;
199
- position: fixed;
200
- top: 0;
201
- }
202
-
203
- .sidebar-logo {
204
- display: none;
205
- }
206
-
207
- .bottom {
208
- z-index: -12;
209
- }
210
-
211
- .content {
212
- width: 100%;
213
- }
214
-
215
- .content h1 {
216
- letter-spacing: -.5px;
217
- font-weight: 700;
218
- font-size: 24px;
219
- line-height: 48px;
220
- }
221
-
222
- .content a > code , code {
223
- padding: 4px 8px;
224
- border-radius: 2px;
225
- background-color: var(--code);
226
- }
227
-
228
- .content table {
229
- margin: 16px 0;
230
- display: block;
231
- overflow-x: auto;
232
- white-space: nowrap;
233
- }
234
-
235
- .content table thead {
236
- color: var(--color-primary);
237
- }
238
-
239
- .content table, tr, td {
240
- border: none;
241
- }
242
-
243
- .content tr {
244
- border-bottom: 1px;
245
- border-color: rgba(90,94,154,.1);
246
- border-style: solid;
247
- }
248
-
249
- .content tr td, .content tr th {
250
- vertical-align: middle;
251
- text-align: left;
252
- }
253
-
254
- .content tr th {
255
- padding: 16px;
256
- }
257
-
258
- .content tr td {
259
- padding: 16px;
260
- }
261
-
262
- .content tr th:first-child, .content tr td:first-child {
263
- padding-left: 0;
264
- }
265
-
266
- .content table tbody tr td:first-child {
267
- width: 98px;
268
- }
269
-
270
- .items-start {
271
- display: flex;
272
- justify-content: space-between;
273
- align-items: flex-start;
274
- margin-bottom: 4px;
275
- }
276
-
277
- .breadcrumb {
278
- line-height: 16px;
279
- font-size: 10px;
280
- letter-spacing: 1.5px;
281
- text-transform: uppercase;
282
- font-weight: 600;
283
- }
284
-
285
- .content h2 {
286
- font-size: 20px;
287
- line-height: 32px;
288
- padding-top: 68px;
289
- margin-bottom: 0;
290
- font-weight: 600;
291
- }
292
-
293
- .content h3 {
294
- font-size: 18px;
295
- line-height: 24px;
296
- padding-top: 48px;
297
- margin-bottom: 0;
298
- font-weight: 600;
299
- }
300
-
301
- .content h4, .content h5, .content h6 {
302
- padding-top: 30px;
303
- }
304
-
305
- .content h4, .content h5, .content h6 {
306
- font-weight: 600;
307
- }
308
-
309
- .content > ul, .content > ol {
310
- margin-top: 12px;
311
- padding-left: 16px;
312
- }
313
-
314
- .content > ul {
315
- list-style: none;
316
- }
317
-
318
- .content > ul li, .content > ol li {
319
- margin: 8px 0;
320
- }
321
- .content > ul li::before {
322
- content: "\2022";
323
- text-indent: -16px;
324
- display: inline-block;
325
- color: var(--color-secondary);
326
- float: left;
327
- }
328
-
329
- .content li {
330
- line-height: 1.5;
331
- }
332
-
333
- .content pre {
334
- margin-top: 22px;
335
- margin-bottom: 32px;
336
- }
337
-
338
- .content p {
339
- margin-top: 16px;
340
- line-height: 24px;
341
- }
342
-
343
- .sidebar-footer {
344
- padding: 16px 40px;
345
- display: flex;
346
- align-items: center;
347
- flex-wrap: wrap;
348
- font-size: 14px;
349
- border-top: 1px solid var(--border);
350
- justify-content: space-between;
351
- position: absolute;
352
- bottom: 0;
353
- background-color: var(--sidebar-background);
354
- width: 100%;
355
- }
356
-
357
- .sidebar-footer a {
358
- font-size: 12px;
359
- color: var(--sidebar-text);
360
- }
361
-
362
- .sidebar-footer a:first-child {
363
- margin-right: 32px
364
- }
365
-
366
- .on-page-container {
367
- padding-top: 28px;
368
- padding-bottom: 28px;
369
- }
370
-
371
- .on-page-container h5 {
372
- text-transform: uppercase;
373
- letter-spacing: 1.5px;
374
- margin-bottom: 16px;
375
- font-size: 10px;
376
- font-weight: 600;
377
- color: var(--color-secondary);
378
- }
379
-
380
- .on-page-container .toc {
381
- list-style: none;
382
- line-height: 24px;
383
- padding-left: 0;
384
- width: 100%;
385
- font-size: 14px;
386
- }
387
-
388
- .on-page-container ol {
389
- padding-left: 0;
390
- list-style: none;
391
- width: 100%;
392
- }
393
-
394
- .on-page-container ol > li {
395
- display: flex;
396
- align-items: baseline;
397
- position: relative;
398
- }
399
-
400
- .on-page-container ol > li > a {
401
- transition: all .2s ease-out;
402
- color: var(--color-secondary);
403
- padding: 8px 0;
404
- display: flex;
405
- align-items: center;
406
- justify-content: space-between;
407
- width: 100%;
408
- overflow: hidden;
409
- text-overflow: ellipsis;
410
- white-space: initial;
411
- }
412
-
413
- .on-page-container ol > li:hover > a {
414
- transform: translateX(4px);
415
- }
416
-
417
- .on-page-main ol > li > a::after {
418
- position: absolute;
419
- right: 0;
420
- content: '';
421
- display: inline-block;
422
- width: 4px;
423
- height: 4px;
424
- border-right: 1px solid var(--color-secondary);
425
- border-bottom: 1px solid var(--color-secondary);
426
- transform: rotate(-45deg);
427
- }
428
-
429
- .on-page-list {
430
- margin-left: 8px;
431
- font-size: 12px;
432
- }
433
-
434
- .header-menu {
435
- display: flex;
436
- align-items: center;
437
- }
438
-
439
- .header-logo {
440
- flex-shrink: 0;
441
- margin-right: 24px;
442
- display: block;
443
- }
444
-
445
- .header-logo img {
446
- width: 48px;
447
- height: 48px;
448
- }
449
-
450
- .child-list {
451
- padding-left: 18px;
452
- }
453
-
454
-
455
- .breadcrumb a:hover {
456
- text-decoration: underline;
457
- }
458
-
459
- details > summary {
460
- cursor: pointer;
461
- list-style: none;
462
- }
463
-
464
- /*search-modal*/
465
- .search-modal {
466
- position: fixed;
467
- top: 0;
468
- left: 0;
469
- width: 100%;
470
- height: 100%;
471
- background: rgba(0,0,0,.4);
472
- display: none;
473
- overflow-y: auto;
474
- transition: all 0.3s linear;
475
- z-index: 999;
476
- }
477
-
478
- .show-modal {
479
- display: flex;
480
- z-index: 100;
481
- }
482
-
483
- .search-container {
484
- width: 100%;
485
- height: 100%;
486
- background-color: transparent;
487
- }
488
-
489
- .search-box {
490
- height: 72px;
491
- box-shadow: 0 8px 22px 0 rgb(37 44 97 / 15%), 0 4px 6px 0 rgb(93 100 148 / 20%);
492
- position: fixed;
493
- top: 0;
494
- width: 100%;
495
- }
496
-
497
- .close-modal-btn {
498
- opacity: .3;
499
- display: flex;
500
- align-items: center;
501
- justify-content: center;
502
- border-radius: 50%;
503
- border: 1px solid var(--color-text);
504
- position: absolute;
505
- right: 22px;
506
- top: 50%;
507
- transform: translateY(-50%);
508
- z-index: 8;
509
- width: 24px;
510
- height: 24px;
511
- cursor: pointer;
512
- }
513
-
514
- .close-modal-btn svg {
515
- width: 10px;
516
- height: 10px;
517
- fill: currentColor;
518
- }
519
-
520
-
521
- .search-box .ais-SearchBox-form {
522
- height: 100%;
523
- background-color: transparent;
524
- }
525
-
526
- .ais-Hits-item, .ais-InfiniteHits-item {
527
- background: var(--search-input-background) !important;
528
- }
529
-
530
- .search-box input {
531
- height: 72px !important;
532
- width: 100%;
533
- padding-left: 48px;
534
- padding-right: 16px;
535
- outline: none;
536
- display: flex;
537
- justify-content: flex-start;
538
- align-items: center;
539
- color: var(--color-text);
540
- background-color: var(--search-input-background);
541
- border-bottom-left-radius: 0 !important;
542
- border-bottom-right-radius: 0 !important;
543
- }
544
-
545
- .search-content {
546
- background-color: var(--search-input-background);
547
- }
548
-
549
- .search-box input::placeholder {
550
- opacity: 0.8;
551
- }
552
-
553
- .search-results {
554
- margin-top: 72px;
555
- }
556
-
557
- .search-content {
558
- height: 100%;
559
- width: 100%;
560
- }
561
-
562
- .search-result {
563
- padding: 24px 0;
564
- }
565
-
566
- .search-result h2 {
567
- padding-bottom: 32px;
568
- color: var(--color-secondary);
569
- }
570
-
571
- .ais-Hits--empty {
572
- padding-top: 32px;
573
- text-align: center;
574
- word-break: break-word;
575
- }
576
-
577
- .ais-Highlight-highlighted, .ais-Snippet-highlighted {
578
- background-color: var(--background-search-highlight) !important;
579
- color: var(--color-search-highlight) !important;
580
- }
581
-
582
- .content table td {
583
- max-width: 200px;
584
- min-width: 120px;
585
- white-space: initial;
586
- overflow-wrap: break-word;
587
- word-wrap: break-word;
588
- word-break: break-word;
589
- }
590
-
591
- @media screen and (min-width: 576px) {
592
- .date {
593
- display: flex;
594
- position: relative;
595
- text-transform: uppercase;
596
- letter-spacing: 1.5px;
597
- color: var(--color-secondary);
598
- font-size: 10px;
599
- font-weight: 600;
600
- }
601
-
602
- .date span::before {
603
- position: absolute;
604
- content: '';
605
- background-image: url("data:image/svg+xml,%3Csvg class='block h-full' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 22A11 11 0 1 1 22 11 11 11 0 0 1 11 22ZM11 2a9 9 0 1 0 9 9A9 9 0 0 0 11 2Z'%3E%3C/path%3E%3Cpath d='M15 14a.93.93 0 0 1-.45-.11l-4-2A1 1 0 0 1 10 11V5a1 1 0 0 1 2 0v5.38l3.45 1.73a1 1 0 0 1 .44 1.34A1 1 0 0 1 15 14Z'%3E%3C/path%3E%3C/svg%3E");
606
- left: -24px;
607
- width: 12px;
608
- height: 12px;
609
- }
610
-
611
- .content h2 {
612
- font-size: 24px;
613
- }
614
-
615
- .nav {
616
- padding-left: 32px;
617
- padding-right: 32px;
618
- }
619
- }
620
-
621
-
622
- @media screen and (min-width: 768px) {
623
- .main-content {
624
- padding: 0 56px 24px;
625
- }
626
-
627
- .main-container {
628
- padding-top: 120px;
629
- }
630
-
631
- .nav {
632
- padding-left: 56px;
633
- padding-right: 56px;
634
- }
635
-
636
- .content h1 {
637
- font-size: 30px;
638
- }
639
-
640
- .search-text {
641
- display: inline;
642
- }
643
- }
644
-
645
- @media screen and (min-width: 992px) {
646
- .hide-d {
647
- display: none;
648
- }
649
-
650
- .nav {
651
- height: auto;
652
- box-shadow: none;
653
- padding-right: 16px;
654
- z-index: 30;
655
- }
656
-
657
- .sidebar {
658
- width: 324px;
659
- display: flex;
660
- height: 100%;
661
- z-index: 20;
662
- }
663
-
664
- .close-btn {
665
- display: none;
666
- }
667
-
668
- .sidebar-content {
669
- padding-top: 24px;
670
- height: 100%;
671
- }
672
-
673
- .nav-list {
674
- margin-top: 0;
675
- }
676
-
677
- .main-container {
678
- margin-top: 48px;
679
- padding-top: 0;
680
- }
681
-
682
- .header-link {
683
- margin-top: 20px;
684
- }
685
-
686
- .header-link img {
687
- width: 180px;
688
- }
689
-
690
- .layout {
691
- display: grid;
692
- grid-template-columns: 324px 1fr;
693
- grid-template-rows: 72px 1fr;
694
- grid-gap: 0;
695
- }
696
-
697
- .header {
698
- grid-area: 1 / 2 / 2 / 3;
699
- z-index: 40;
700
- left: 324px;
701
- background-color: var(--search-input-background)
702
- }
703
-
704
- aside {
705
- grid-area: 1 / 1 / 3 / 2;
706
- position: fixed;
707
- top: 200px;
708
- left: 0;
709
- z-index: 40;
710
- height: 100%;
711
- width: 324px;
712
- }
713
-
714
- .main-container {
715
- grid-area: 2 / 2 / 3 / 3;
716
- }
717
-
718
- .sidebar-logo {
719
- position: sticky;
720
- top: 0;
721
- left: 0;
722
- z-index: 80;
723
- width: 324px;
724
- background-color: var(--sidebar-background);
725
- display: flex;
726
- align-items: center;
727
- justify-content: center;
728
- border-right: 1px solid var(--border);
729
- }
730
-
731
-
732
- .sidebar-logo svg {
733
- width: 32px;
734
- height: 32px;
735
- }
736
-
737
- .header-content {
738
- display: flex;
739
- height: 100%;
740
- }
741
-
742
- .nav {
743
- justify-content: flex-start;
744
- padding-left: 56px;
745
- z-index: 30;
746
- }
747
-
748
- .nav-list {
749
- padding-left: 0;
750
- }
751
-
752
- .content h1 {
753
- font-size: 30px;
754
- }
755
-
756
- .on-page--desktop ~ .on-page-list {
757
- margin-left: 0;
758
- }
759
-
760
- .search-box, .search-box input {
761
- border: none;
762
- font-size: 24px;
763
- }
764
-
765
- .search-box {
766
- border-bottom: 1px solid rgba(119,122,175,.1);
767
- box-shadow: none;
768
- }
769
-
770
- .search-box .ais-SearchBox-form {
771
- border-top-right-radius: 8px;
772
- border-top-left-radius: 8px;
773
- }
774
-
775
- .search-container {
776
- height: 580px;
777
- width: 780px;
778
- position: absolute;
779
- top: 50%;
780
- left: 50%;
781
- transform: translate(-50%, -50%);
782
- display: flex;
783
- flex-direction: column;
784
- }
785
-
786
- .search-content {
787
- border-radius: 8px;
788
- }
789
-
790
- .search-matches {
791
- max-height: 580px;
792
- overflow-y: auto;
793
- border-radius: 8px;
794
- }
795
-
796
- .content > ul, .content > ol {
797
- padding-left: 32px;
798
- }
799
-
800
- .content table td {
801
- max-width: 380px;
802
- }
803
-
804
- .sidebar-footer {
805
- position: sticky;
806
- }
807
-
808
- }
809
-
810
- @media screen and (min-width: 1200px) {
811
- .search-container {
812
- max-width: 1040px;
813
- }
814
- }
815
-
816
- @media screen and (min-width: 1458px) {
817
- .on-page--desktop ol {
818
- font-size: 12px;
819
- }
820
-
821
- .on-page--desktop ol li a {
822
- padding: 4px 0;
823
- }
824
-
825
- .on-page--desktop {
826
- width: 100%;
827
- position: relative;
828
- transition: all .3s ease-in;
829
- display: flex;
830
- justify-content: flex-end;
831
- }
832
-
833
- .on-page-fixed {
834
- position: fixed;
835
- max-width: 200px
836
- }
837
-
838
- .content {
839
- max-width: 750px;
840
- }
841
-
842
- .main-content {
843
- padding: 0 56px 24px;
844
-
845
- }
846
- }
847
-
848
- @media screen and (min-width: 1600px) {
849
- .layout {
850
- grid-template-columns: 380px 1fr;
851
- }
852
-
853
- .header {
854
- left: 380px;
855
- }
856
-
857
- .sidebar, aside, .sidebar-logo {
858
- width: 380px;
859
- }
860
-
861
- .sidebar-logo, .sidebar-content, .sidebar-footer {
862
- padding-left: 54px;
863
- padding-right: 54px;
864
- }
865
-
866
- .main-content {
867
- padding-left: 72px;
868
- padding-right: 72px;
869
- }
870
-
871
- .on-page--desktop {
872
- justify-content: center;
873
- }
874
-
875
- }
876
-
877
- @media screen and (min-width: 1800px) {
878
- .layout {
879
- grid-template-columns: 460px 1fr;
880
- }
881
-
882
- .header {
883
- left: 460px;
884
- }
885
-
886
- .sidebar, aside, .sidebar-logo {
887
- width: 460px;
888
- }
889
-
890
- .sidebar-logo, .sidebar-content, .sidebar-footer {
891
- padding-left: 88px;
892
- padding-right: 88px;
893
- }
894
-
895
- }
896
-
897
-
898
- @media screen and (min-width: 2400px) {
899
- .layout {
900
- grid-template-columns: 600px 1fr;
901
- }
902
-
903
- .header {
904
- left: 600px;
905
- }
906
-
907
- .sidebar, aside, .sidebar-logo {
908
- width: 600px;
909
- }
910
-
911
- .sidebar-logo, .sidebar-content, .sidebar-footer {
912
- padding-left: 120px;
913
- padding-right: 120px;
914
- }
915
-
916
- .content {
917
- max-width: 880px;
918
- }
919
- }