jekyll-theme-chirpy-customized-by-alazaroc 5.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (110) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE +21 -0
  3. data/README.md +106 -0
  4. data/_data/assets/cross_origin.yml +62 -0
  5. data/_data/assets/self_host.yml +51 -0
  6. data/_data/authors.yml +17 -0
  7. data/_data/contact.yml +30 -0
  8. data/_data/locales/ar.yml +93 -0
  9. data/_data/locales/bg-BG.yml +83 -0
  10. data/_data/locales/cs-CZ.yml +91 -0
  11. data/_data/locales/de-DE.yml +82 -0
  12. data/_data/locales/en.yml +93 -0
  13. data/_data/locales/es-ES.yml +79 -0
  14. data/_data/locales/fi-FI.yml +92 -0
  15. data/_data/locales/fr-FR.yml +79 -0
  16. data/_data/locales/hu-HU.yml +81 -0
  17. data/_data/locales/id-ID.yml +79 -0
  18. data/_data/locales/it-IT.yml +93 -0
  19. data/_data/locales/ko-KR.yml +86 -0
  20. data/_data/locales/my-MM.yml +79 -0
  21. data/_data/locales/pt-BR.yml +79 -0
  22. data/_data/locales/ru-RU.yml +79 -0
  23. data/_data/locales/tr-TR.yml +79 -0
  24. data/_data/locales/uk-UA.yml +79 -0
  25. data/_data/locales/vi-VN.yml +77 -0
  26. data/_data/locales/zh-CN.yml +85 -0
  27. data/_data/share.yml +27 -0
  28. data/_includes/assets-origin.html +12 -0
  29. data/_includes/comments/disqus.html +54 -0
  30. data/_includes/comments/giscus.html +56 -0
  31. data/_includes/comments/utterances.html +51 -0
  32. data/_includes/comments.html +5 -0
  33. data/_includes/datetime.html +15 -0
  34. data/_includes/embed/twitch.html +4 -0
  35. data/_includes/embed/youtube.html +6 -0
  36. data/_includes/favicons.html +17 -0
  37. data/_includes/footer.html +36 -0
  38. data/_includes/google-analytics.html +14 -0
  39. data/_includes/head.html +115 -0
  40. data/_includes/js-selector.html +99 -0
  41. data/_includes/jsdelivr-combine.html +32 -0
  42. data/_includes/language-alias.html +70 -0
  43. data/_includes/mermaid.html +59 -0
  44. data/_includes/mode-toggle.html +129 -0
  45. data/_includes/no-linenos.html +10 -0
  46. data/_includes/post-nav.html +30 -0
  47. data/_includes/post-paginator.html +88 -0
  48. data/_includes/post-sharing.html +27 -0
  49. data/_includes/read-time.html +30 -0
  50. data/_includes/refactor-content.html +330 -0
  51. data/_includes/related-posts.html +103 -0
  52. data/_includes/search-loader.html +46 -0
  53. data/_includes/search-results.html +11 -0
  54. data/_includes/sidebar.html +103 -0
  55. data/_includes/toc.html +16 -0
  56. data/_includes/topbar.html +70 -0
  57. data/_includes/trending-tags.html +50 -0
  58. data/_includes/update-list.html +40 -0
  59. data/_layouts/archives.html +34 -0
  60. data/_layouts/categories.html +118 -0
  61. data/_layouts/category.html +22 -0
  62. data/_layouts/compress.html +10 -0
  63. data/_layouts/default.html +71 -0
  64. data/_layouts/home.html +94 -0
  65. data/_layouts/page.html +63 -0
  66. data/_layouts/post.html +141 -0
  67. data/_layouts/tag.html +21 -0
  68. data/_layouts/tags.html +23 -0
  69. data/_sass/addon/commons.scss +1740 -0
  70. data/_sass/addon/module.scss +163 -0
  71. data/_sass/addon/syntax.scss +275 -0
  72. data/_sass/addon/variables.scss +30 -0
  73. data/_sass/colors/dark-syntax.scss +87 -0
  74. data/_sass/colors/dark-typography.scss +170 -0
  75. data/_sass/colors/light-syntax.scss +83 -0
  76. data/_sass/colors/light-typography.scss +104 -0
  77. data/_sass/jekyll-theme-chirpy-customized-by-alazaroc.scss +24 -0
  78. data/_sass/layout/archives.scss +136 -0
  79. data/_sass/layout/categories.scss +66 -0
  80. data/_sass/layout/category-tag.scss +73 -0
  81. data/_sass/layout/home.scss +178 -0
  82. data/_sass/layout/post.scss +387 -0
  83. data/_sass/layout/tags.scss +19 -0
  84. data/_sass/variables-hook.scss +3 -0
  85. data/assets/404.html +14 -0
  86. data/assets/css/style.scss +12 -0
  87. data/assets/feed.xml +61 -0
  88. data/assets/img/favicons/android-chrome-192x192.png +0 -0
  89. data/assets/img/favicons/android-chrome-512x512.png +0 -0
  90. data/assets/img/favicons/apple-touch-icon.png +0 -0
  91. data/assets/img/favicons/browserconfig.xml +13 -0
  92. data/assets/img/favicons/favicon-16x16.png +0 -0
  93. data/assets/img/favicons/favicon-32x32.png +0 -0
  94. data/assets/img/favicons/favicon.ico +0 -0
  95. data/assets/img/favicons/mstile-150x150.png +0 -0
  96. data/assets/img/favicons/site.webmanifest +26 -0
  97. data/assets/js/data/search.json +20 -0
  98. data/assets/js/data/swcache.js +54 -0
  99. data/assets/js/dist/categories.min.js +6 -0
  100. data/assets/js/dist/commons.min.js +6 -0
  101. data/assets/js/dist/home.min.js +6 -0
  102. data/assets/js/dist/misc.min.js +6 -0
  103. data/assets/js/dist/page.min.js +6 -0
  104. data/assets/js/dist/post.min.js +6 -0
  105. data/assets/js/dist/pvreport.min.js +6 -0
  106. data/assets/js/pwa/app.js +47 -0
  107. data/assets/js/pwa/sw.js +90 -0
  108. data/assets/js/pwa/unregister.js +12 -0
  109. data/assets/robots.txt +10 -0
  110. metadata +242 -0
@@ -0,0 +1,1740 @@
1
+ /*
2
+ The common styles
3
+ */
4
+
5
+ html {
6
+ @media (prefers-color-scheme: light) {
7
+ &:not([data-mode]),
8
+ &[data-mode="light"] {
9
+ @include light-scheme;
10
+ }
11
+
12
+ &[data-mode="dark"] {
13
+ @include dark-scheme;
14
+ }
15
+ }
16
+
17
+ @media (prefers-color-scheme: dark) {
18
+ &:not([data-mode]),
19
+ &[data-mode="dark"] {
20
+ @include dark-scheme;
21
+ }
22
+
23
+ &[data-mode="light"] {
24
+ @include light-scheme;
25
+ }
26
+ }
27
+
28
+ font-size: 16px;
29
+ }
30
+
31
+ body {
32
+ background: var(--body-bg);
33
+ color: var(--text-color);
34
+ -webkit-font-smoothing: antialiased;
35
+ font-family: "Source Sans Pro", "Microsoft Yahei", sans-serif;
36
+ line-height: 1.75;
37
+ }
38
+
39
+ /* --- Typography --- */
40
+
41
+ h1 {
42
+ @extend %heading;
43
+
44
+ font-size: 1.9rem;
45
+ }
46
+
47
+ h2 {
48
+ @extend %heading;
49
+ @extend %section;
50
+ @extend %anchor;
51
+
52
+ font-size: 1.5rem;
53
+ }
54
+
55
+ h3 {
56
+ @extend %heading;
57
+ @extend %section;
58
+ @extend %anchor;
59
+
60
+ font-size: 1.2rem;
61
+ }
62
+
63
+ h4 {
64
+ @extend %heading;
65
+ @extend %section;
66
+ @extend %anchor;
67
+
68
+ font-size: 1.15rem;
69
+ }
70
+
71
+ h5 {
72
+ @extend %heading;
73
+ @extend %section;
74
+ @extend %anchor;
75
+
76
+ font-size: 1.1rem;
77
+ }
78
+
79
+ a {
80
+ @extend %link-color;
81
+ }
82
+
83
+ img {
84
+ max-width: 100%;
85
+ height: auto;
86
+
87
+ &[data-src] {
88
+ &.lazyloaded {
89
+ -webkit-animation: fade-in 0.4s ease-in;
90
+ animation: fade-in 0.4s ease-in;
91
+ }
92
+
93
+ &[data-lqip="true"] {
94
+ &.lazyload,
95
+ &.lazyloading {
96
+ -webkit-filter: blur(20px);
97
+ filter: blur(20px);
98
+ }
99
+ }
100
+
101
+ &:not([data-lqip="true"]) {
102
+ &.lazyload,
103
+ &.lazyloading {
104
+ background: var(--img-bg);
105
+ }
106
+ }
107
+
108
+ &.shadow {
109
+ -webkit-filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
110
+ filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
111
+ box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */
112
+ }
113
+
114
+ @extend %img-caption;
115
+ }
116
+
117
+ @-webkit-keyframes fade-in {
118
+ from { opacity: 0; }
119
+ to { opacity: 1; }
120
+ }
121
+
122
+ @keyframes fade-in {
123
+ from { opacity: 0; }
124
+ to { opacity: 1; }
125
+ }
126
+ }
127
+
128
+ blockquote {
129
+ border-left: 5px solid var(--blockquote-border-color);
130
+ padding-left: 1rem;
131
+ color: var(--blockquote-text-color);
132
+
133
+ &[class^="prompt-"] {
134
+ display: flex;
135
+ border-left: 0;
136
+ padding: 1rem;
137
+ color: var(--prompt-text-color);
138
+
139
+ @extend %rounded;
140
+
141
+ &::before {
142
+ text-align: center;
143
+ width: 1.25rem;
144
+ margin-right: 0.75rem;
145
+ position: relative;
146
+ top: 0.4rem;
147
+ text-rendering: auto;
148
+ -webkit-font-smoothing: antialiased;
149
+ }
150
+
151
+ > div {
152
+ max-width: calc(100% - 2rem);
153
+
154
+ > :last-child {
155
+ margin-bottom: 0;
156
+ }
157
+ }
158
+ }
159
+
160
+ @include prompt("tip", "\f0eb", "regular");
161
+ @include prompt("info", "\f06a");
162
+ @include prompt("warning", "\f06a");
163
+ @include prompt("danger", "\f071");
164
+ }
165
+
166
+ mjx-container {
167
+ overflow-x: auto;
168
+ overflow-y: hidden;
169
+ }
170
+
171
+ kbd {
172
+ font-family: inherit;
173
+ display: inline-block;
174
+ vertical-align: middle;
175
+ line-height: 1.3rem;
176
+ min-width: 1.75rem;
177
+ text-align: center;
178
+ margin: 0 0.3rem;
179
+ padding-top: 0.1rem;
180
+ color: var(--kbd-text-color);
181
+ background-color: var(--kbd-bg-color);
182
+ border-radius: 0.25rem;
183
+ border: solid 1px var(--kbd-wrap-color);
184
+ box-shadow: inset 0 -2px 0 var(--kbd-wrap-color);
185
+ }
186
+
187
+ footer {
188
+ font-size: 0.8rem;
189
+ background-color: var(--main-bg);
190
+
191
+ div.d-flex {
192
+ height: $footer-height;
193
+ line-height: 1.2rem;
194
+ padding-bottom: 1rem;
195
+ border-top: 1px solid var(--main-border-color);
196
+
197
+ > div {
198
+ width: 350px;
199
+ }
200
+ }
201
+
202
+ a {
203
+ @extend %text-color;
204
+
205
+ &:link {
206
+ @include no-text-decoration;
207
+ }
208
+
209
+ &:hover {
210
+ @extend %link-hover;
211
+ @include no-text-decoration;
212
+ }
213
+ }
214
+
215
+ .footer-right {
216
+ text-align: right;
217
+ }
218
+ }
219
+
220
+ i { /* fontawesome icons */
221
+ &.far,
222
+ &.fas {
223
+ @extend %no-cursor;
224
+ }
225
+ }
226
+
227
+ /* --- Panels --- */
228
+
229
+ .access {
230
+ top: 2rem;
231
+ transition: top 0.2s ease-in-out;
232
+ margin-top: 3rem;
233
+ margin-bottom: 4rem;
234
+
235
+ &:only-child {
236
+ position: -webkit-sticky;
237
+ position: sticky;
238
+ }
239
+
240
+ > div {
241
+ padding-left: 1rem;
242
+ border-left: 1px solid var(--main-border-color);
243
+
244
+ &:not(:last-child) {
245
+ margin-bottom: 4rem;
246
+ }
247
+ }
248
+
249
+ .post-content {
250
+ font-size: 0.9rem;
251
+ }
252
+ }
253
+
254
+ #panel-wrapper {
255
+ /* the headings */
256
+ .panel-heading {
257
+ @include label(inherit);
258
+ }
259
+
260
+ .post-tag {
261
+ display: inline-block;
262
+ line-height: 1rem;
263
+ font-size: 0.85rem;
264
+ background: none;
265
+ border: 1px solid var(--btn-border-color);
266
+ border-radius: 0.8rem;
267
+ padding: 0.3rem 0.5rem;
268
+ margin: 0 0.35rem 0.5rem 0;
269
+
270
+ &:hover {
271
+ background-color: #2a408e;
272
+ border-color: #2a408e;
273
+ color: #ffffff;
274
+ transition: none;
275
+ }
276
+ }
277
+
278
+ [data-topbar-visible="true"] & > div {
279
+ top: 6rem;
280
+ }
281
+ }
282
+
283
+ #access-lastmod {
284
+ li {
285
+ height: 1.8rem;
286
+ overflow: hidden;
287
+ text-overflow: ellipsis;
288
+ display: -webkit-box;
289
+ -webkit-line-clamp: 1;
290
+ -webkit-box-orient: vertical;
291
+ list-style: none;
292
+ }
293
+
294
+ a {
295
+ &:hover {
296
+ @extend %link-hover;
297
+ }
298
+
299
+ @extend %no-bottom-border;
300
+
301
+ color: inherit;
302
+ }
303
+ }
304
+
305
+ .footnotes > ol {
306
+ padding-left: 2rem;
307
+ margin-top: 0.5rem;
308
+
309
+ > li {
310
+ &:not(:last-child) {
311
+ margin-bottom: 0.3rem;
312
+ }
313
+
314
+ > p {
315
+ margin-left: 0.25em;
316
+ margin-top: 0;
317
+ margin-bottom: 0;
318
+ }
319
+
320
+ /* [scroll-focus] added by `smooth-scroll.js` */
321
+ &:target:not([scroll-focus]),
322
+ &[scroll-focus="true"] > p {
323
+ background-color: var(--footnote-target-bg);
324
+ width: -moz-fit-content;
325
+ width: -webkit-fit-content;
326
+ width: fit-content;
327
+ transition: background-color 1.5s ease-in-out;
328
+ }
329
+ }
330
+ }
331
+
332
+ .footnote {
333
+ @at-root a#{&} {
334
+ @include ml-mr(1px);
335
+ @include pl-pr(2px);
336
+
337
+ border-bottom-style: none !important;
338
+ transition: background-color 1.5s ease-in-out;
339
+ }
340
+
341
+ /* [scroll-focus] added by `smooth-scroll.js` */
342
+ @at-root sup:target:not([scroll-focus]),
343
+ sup[scroll-focus=true] > a#{&} {
344
+ background-color: var(--footnote-target-bg);
345
+ }
346
+ }
347
+
348
+ .reversefootnote {
349
+ @at-root a#{&} {
350
+ font-size: 0.6rem;
351
+ line-height: 1;
352
+ position: relative;
353
+ bottom: 0.25em;
354
+ margin-left: 0.25em;
355
+ border-bottom-style: none !important;
356
+ }
357
+ }
358
+
359
+ /* --- Begin of Markdown table style --- */
360
+
361
+ /* it will be created by Liquid */
362
+ .table-wrapper {
363
+ overflow-x: auto;
364
+ margin-bottom: 1.5rem;
365
+
366
+ > table {
367
+ min-width: 100%;
368
+ overflow-x: auto;
369
+ border-spacing: 0;
370
+
371
+ thead {
372
+ border-bottom: solid 2px rgba(210, 215, 217, 0.75);
373
+
374
+ th {
375
+ @extend %table-cell;
376
+ }
377
+ }
378
+
379
+ tbody {
380
+ tr {
381
+ border-bottom: 1px solid var(--tb-border-color);
382
+
383
+ &:nth-child(2n) {
384
+ background-color: var(--tb-even-bg);
385
+ }
386
+
387
+ &:nth-child(2n + 1) {
388
+ background-color: var(--tb-odd-bg);
389
+ }
390
+
391
+ td {
392
+ @extend %table-cell;
393
+ }
394
+ }
395
+ } /* tbody */
396
+ }/* table */
397
+ }
398
+
399
+ /* --- post --- */
400
+
401
+ .post {
402
+ h1 {
403
+ margin-top: 3rem;
404
+ margin-bottom: 1.5rem;
405
+ }
406
+
407
+ p {
408
+ > img[data-src],
409
+ > a.popup {
410
+ &:not(.normal):not(.left):not(.right) {
411
+ @include align-center;
412
+ }
413
+ }
414
+ }
415
+ }
416
+
417
+ .pageviews .fa-spinner {
418
+ font-size: 80%;
419
+ }
420
+
421
+ .post-meta {
422
+ font-size: 0.85rem;
423
+ word-spacing: 1px;
424
+
425
+ a {
426
+ &:not(:last-child) {
427
+ margin-right: 2px;
428
+ }
429
+
430
+ &:not([class]):hover {
431
+ @extend %link-hover;
432
+ }
433
+ }
434
+
435
+ em {
436
+ @extend %normal-font-style;
437
+ }
438
+ }
439
+
440
+ .post-content {
441
+ font-size: 1.08rem;
442
+ margin-top: 2rem;
443
+ overflow-wrap: break-word;
444
+
445
+ a {
446
+ &.popup {
447
+ @extend %no-cursor;
448
+ @extend %img-caption;
449
+ @include mt-mb(0.5rem);
450
+
451
+ cursor: zoom-in;
452
+ }
453
+
454
+ &:not(.img-link) {
455
+ @extend %link-underline;
456
+
457
+ &:hover {
458
+ @extend %link-hover;
459
+ }
460
+ }
461
+ }
462
+
463
+ ol,
464
+ ul {
465
+ &:not([class]),
466
+ &.task-list {
467
+ -webkit-padding-start: 1.75rem;
468
+ padding-inline-start: 1.75rem;
469
+
470
+ li {
471
+ margin: 0.25rem 0;
472
+ padding-left: 0.25rem;
473
+ }
474
+
475
+ ol,
476
+ ul {
477
+ -webkit-padding-start: 1.25rem;
478
+ padding-inline-start: 1.25rem;
479
+ margin: 0.5rem 0;
480
+ }
481
+ }
482
+ }
483
+
484
+ ul.task-list {
485
+ -webkit-padding-start: 1.25rem;
486
+ padding-inline-start: 1.25rem;
487
+
488
+ li {
489
+ list-style-type: none;
490
+ padding-left: 0;
491
+
492
+ > i { /* checkbox icon */
493
+ width: 2rem;
494
+ margin-left: -1.25rem;
495
+ color: var(--checkbox-color);
496
+
497
+ &.checked {
498
+ color: var(--checkbox-checked-color);
499
+ }
500
+ }
501
+
502
+ ul {
503
+ -webkit-padding-start: 1.75rem;
504
+ padding-inline-start: 1.75rem;
505
+ }
506
+ }
507
+
508
+ input[type="checkbox"] {
509
+ margin: 0 0.5rem 0.2rem -1.3rem;
510
+ vertical-align: middle;
511
+ }
512
+ } /* ul */
513
+
514
+ dl > dd {
515
+ margin-left: 1rem;
516
+ }
517
+ } /* .post-content */
518
+
519
+ .tag:hover {
520
+ @extend %tag-hover;
521
+ }
522
+
523
+ .post-tag {
524
+ display: inline-block;
525
+ min-width: 2rem;
526
+ text-align: center;
527
+ background: var(--tag-bg);
528
+ border-radius: 0.3rem;
529
+ padding: 0 0.4rem;
530
+ color: inherit;
531
+ line-height: 1.3rem;
532
+
533
+ &:not(:last-child) {
534
+ margin-right: 0.2rem;
535
+ }
536
+
537
+ &:hover {
538
+ @extend %tag-hover;
539
+
540
+ border-bottom: none;
541
+ text-decoration: none;
542
+ color: #d2603a;
543
+ }
544
+ }
545
+
546
+ .rounded-10 {
547
+ border-radius: 10px !important;
548
+ }
549
+
550
+ .img-link {
551
+ color: transparent;
552
+ display: inline-flex;
553
+ overflow: hidden;
554
+ }
555
+
556
+ .shimmer {
557
+ overflow: hidden;
558
+ position: relative;
559
+ background: var(--img-bg);
560
+
561
+ &::before {
562
+ content: "";
563
+ position: absolute;
564
+ background: var(--shimmer-bg);
565
+ height: 100%;
566
+ width: 100%;
567
+ -webkit-animation: shimmer 1s infinite;
568
+ animation: shimmer 1s infinite;
569
+ }
570
+
571
+ @-webkit-keyframes shimmer {
572
+ 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
573
+ 100% { -webkit-transform: translateX(100%); transform: translateX(100%); }
574
+ }
575
+
576
+ @keyframes shimmer {
577
+ 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
578
+ 100% { -webkit-transform: translateX(100%); transform: translateX(100%); }
579
+ }
580
+ }
581
+
582
+ .embed-video {
583
+ width: 100%;
584
+ height: 100%;
585
+ margin-bottom: 1rem;
586
+
587
+ @extend %rounded;
588
+
589
+ &.youtube {
590
+ aspect-ratio: 16 / 9;
591
+ }
592
+
593
+ &.twitch {
594
+ aspect-ratio: 310 / 189;
595
+ }
596
+ }
597
+
598
+ /* --- buttons --- */
599
+ .btn-lang {
600
+ border: 1px solid !important;
601
+ padding: 1px 3px;
602
+ border-radius: 3px;
603
+ color: var(--link-color);
604
+
605
+ &:focus {
606
+ box-shadow: none;
607
+ }
608
+ }
609
+
610
+ /* --- Effects classes --- */
611
+
612
+ .loaded {
613
+ display: block !important;
614
+
615
+ @at-root .d-flex#{&} {
616
+ display: flex !important;
617
+ }
618
+ }
619
+
620
+ .unloaded {
621
+ display: none !important;
622
+ }
623
+
624
+ .visible {
625
+ visibility: visible !important;
626
+ }
627
+
628
+ .hidden {
629
+ visibility: hidden !important;
630
+ }
631
+
632
+ .flex-grow-1 {
633
+ flex-grow: 1 !important;
634
+ }
635
+
636
+ .btn-box-shadow {
637
+ box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important;
638
+ }
639
+
640
+ .no-text-decoration {
641
+ @include no-text-decoration;
642
+ }
643
+
644
+ .tooltip-inner { /* Overrided BS4 Tooltip */
645
+ font-size: 0.7rem;
646
+ max-width: 220px;
647
+ text-align: left;
648
+ }
649
+
650
+ .disabled {
651
+ color: rgb(206, 196, 196);
652
+ pointer-events: auto;
653
+ cursor: not-allowed;
654
+ }
655
+
656
+ .hide-border-bottom {
657
+ border-bottom: none !important;
658
+ }
659
+
660
+ .input-focus {
661
+ box-shadow: none;
662
+ border-color: var(--input-focus-border-color) !important;
663
+ background: center !important;
664
+ transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
665
+ }
666
+
667
+ .left {
668
+ float: left;
669
+ margin: 0.75rem 1rem 1rem 0 !important;
670
+ }
671
+
672
+ .right {
673
+ float: right;
674
+ margin: 0.75rem 0 1rem 1rem !important;
675
+ }
676
+
677
+ /* --- Overriding --- */
678
+
679
+ /* magnific-popup */
680
+ figure .mfp-title {
681
+ text-align: center;
682
+ padding-right: 0;
683
+ margin-top: 0.5rem;
684
+ }
685
+
686
+ /* mermaid */
687
+ .mermaid {
688
+ text-align: center;
689
+ }
690
+
691
+ /* --- sidebar layout --- */
692
+
693
+ $sidebar-display: "sidebar-display";
694
+
695
+ #sidebar {
696
+ @include pl-pr(0);
697
+
698
+ position: fixed;
699
+ top: 0;
700
+ left: 0;
701
+ height: 100%;
702
+ overflow-y: auto;
703
+ width: $sidebar-width;
704
+ z-index: 99;
705
+ background: var(--sidebar-bg);
706
+
707
+ /* Hide scrollbar for Chrome, Safari and Opera */
708
+ &::-webkit-scrollbar {
709
+ display: none;
710
+ }
711
+
712
+ /* Hide scrollbar for IE, Edge and Firefox */
713
+ -ms-overflow-style: none; /* IE and Edge */
714
+ scrollbar-width: none; /* Firefox */
715
+
716
+ a {
717
+ @extend %sidebar-links;
718
+
719
+ &:hover {
720
+ @include no-text-decoration;
721
+
722
+ color: var(--sidebar-active-color) !important;
723
+ }
724
+ }
725
+
726
+ #avatar {
727
+ > a {
728
+ display: block;
729
+ width: 6rem;
730
+ height: 6rem;
731
+ border-radius: 50%;
732
+ border: 2px solid rgba(222, 222, 222, 0.7);
733
+ overflow: hidden;
734
+ -webkit-transform: translateZ(0);
735
+ transform: translateZ(0); /* fixed the zoom in Safari */
736
+ transition: border-color 0.35s ease-in-out;
737
+
738
+ &:hover {
739
+ border-color: white;
740
+ }
741
+ }
742
+
743
+ img {
744
+ width: 100%;
745
+ height: 100%;
746
+ transition: -webkit-transform 0.5s;
747
+ transition: transform 0.5s;
748
+ transition: transform 0.5s, -webkit-transform 0.5s;
749
+
750
+ &:hover {
751
+ -webkit-transform: scale(1.2);
752
+ transform: scale(1.2);
753
+ }
754
+ }
755
+ } /* #avatar */
756
+
757
+ .site-title {
758
+ margin-top: 0.55rem;
759
+
760
+ a {
761
+ @extend %clickable-transition;
762
+
763
+ font-weight: 900;
764
+ font-size: 1.5rem;
765
+ letter-spacing: 0.5px;
766
+ color: rgba(134, 133, 133, 0.99);
767
+ }
768
+ }
769
+
770
+ .site-subtitle {
771
+ font-size: 95%;
772
+ color: var(--sidebar-muted-color);
773
+ line-height: 1.25rem;
774
+ word-spacing: 1px;
775
+ margin: 0.2rem 1.5rem 0.5rem 1.5rem;
776
+ min-height: 3rem; /* avoid vertical shifting in multi-line words */
777
+ -webkit-user-select: none;
778
+ -moz-user-select: none;
779
+ user-select: none;
780
+ }
781
+
782
+ .nav-link {
783
+ border-radius: 0;
784
+ font-size: 0.95rem;
785
+ font-weight: 600;
786
+ letter-spacing: 1px;
787
+ display: table-cell;
788
+ vertical-align: middle;
789
+ }
790
+
791
+ .nav-item {
792
+ text-align: center;
793
+ display: table;
794
+ height: $tab-height;
795
+
796
+ &.active {
797
+ .nav-link {
798
+ color: var(--sidebar-active-color);
799
+ }
800
+ }
801
+
802
+ &:not(.active) > a {
803
+ @extend %clickable-transition;
804
+ }
805
+ }
806
+
807
+ ul {
808
+ height: $tab-height * $tab-count;
809
+ margin-bottom: 2rem;
810
+ padding-left: 0;
811
+
812
+ li {
813
+ width: 100%;
814
+
815
+ &:last-child {
816
+ a {
817
+ position: relative;
818
+ left: calc($cursor-width / 2);
819
+ width: 100%;
820
+ }
821
+
822
+ &::after { /* the cursor */
823
+ display: table;
824
+ visibility: hidden;
825
+ content: "";
826
+ position: relative;
827
+ right: 1px;
828
+ width: $cursor-width;
829
+ height: $tab-cursor-height;
830
+ border-radius: 1px;
831
+ background-color: var(--nav-cursor-color);
832
+ pointer-events: none;
833
+ }
834
+ }
835
+ } /* li */
836
+
837
+ @mixin fix-cursor($top) {
838
+ top: $top;
839
+ visibility: visible;
840
+ }
841
+
842
+ @for $i from 1 through $tab-count {
843
+ $offset: $tab-count - $i;
844
+ $top: calc(-#{$offset} * #{$tab-height} + (#{$tab-height} - #{$tab-cursor-height}) / 2);
845
+
846
+ @if $i < $tab-count {
847
+ > li.active:nth-child(#{$i}),
848
+ > li.nav-item:nth-child(#{$i}):hover {
849
+ ~ li:last-child::after {
850
+ @include fix-cursor($top);
851
+ }
852
+ }
853
+ } @else {
854
+ > li.active:nth-child(#{$i}):last-child::after,
855
+ > li.nav-item:nth-child(#{$i}):last-child:hover::after {
856
+ @include fix-cursor($top);
857
+ }
858
+ }
859
+ } /* @for */
860
+ } /* ul */
861
+
862
+ .sidebar-bottom {
863
+ margin-bottom: 2.1rem;
864
+
865
+ @include ml-mr(auto);
866
+ @include pl-pr(1rem);
867
+
868
+ %icon {
869
+ width: 2.4rem;
870
+ text-align: center;
871
+ }
872
+
873
+ a {
874
+ @extend %icon;
875
+ @extend %clickable-transition;
876
+ }
877
+
878
+ i {
879
+ font-size: 1.2rem;
880
+ line-height: 1.75rem;
881
+ }
882
+
883
+ .mode-toggle {
884
+ padding: 0;
885
+ border: 0;
886
+ margin-bottom: 1px;
887
+ background-color: transparent;
888
+
889
+ @extend %icon;
890
+ @extend %sidebar-links;
891
+
892
+ > i {
893
+ @extend %clickable-transition;
894
+ }
895
+
896
+ &:hover > i {
897
+ color: var(--sidebar-active-color);
898
+ }
899
+ }
900
+
901
+ .icon-border {
902
+ @extend %no-cursor;
903
+
904
+ background-color: var(--sidebar-muted-color);
905
+ content: "";
906
+ width: 3px;
907
+ height: 3px;
908
+ border-radius: 50%;
909
+ }
910
+ } /* .sidebar-bottom */
911
+ } /* #sidebar */
912
+
913
+ @media (hover: hover) {
914
+ #sidebar ul > li:last-child::after {
915
+ transition: top 0.5s ease;
916
+ }
917
+ }
918
+
919
+ .profile-wrapper {
920
+ margin-top: 2rem;
921
+ width: 100%;
922
+ }
923
+
924
+ #search-result-wrapper {
925
+ display: none;
926
+ height: 100%;
927
+ width: 100%;
928
+ overflow: auto;
929
+
930
+ .post-content {
931
+ margin-top: 2rem;
932
+ }
933
+ }
934
+
935
+ /* --- top-bar --- */
936
+
937
+ #topbar-wrapper {
938
+ height: $topbar-height;
939
+ position: fixed;
940
+ top: 0;
941
+ left: $sidebar-width; /* same as sidebar width */
942
+ right: 0;
943
+ transition: top 0.2s ease-in-out;
944
+ z-index: 50;
945
+ border-bottom: 1px solid rgba(0, 0, 0, 0.07);
946
+ background-color: var(--topbar-wrapper-bg);
947
+
948
+ [data-topbar-visible="false"] & {
949
+ top: -$topbar-height; /* same as topbar height. */
950
+ }
951
+ }
952
+
953
+ #topbar {
954
+ i { /* icons */
955
+ color: #999999;
956
+ }
957
+
958
+ #breadcrumb {
959
+ font-size: 1rem;
960
+ color: gray;
961
+ padding-left: 0.5rem;
962
+
963
+ a:hover {
964
+ @extend %link-hover;
965
+ }
966
+
967
+ span {
968
+ &:not(:last-child) {
969
+ &::after {
970
+ content: "›";
971
+ padding: 0 0.3rem;
972
+ }
973
+ }
974
+ }
975
+ }
976
+ } /* #topbar */
977
+
978
+ #sidebar-trigger,
979
+ #search-trigger {
980
+ display: none;
981
+ }
982
+
983
+ #search-wrapper {
984
+ display: flex;
985
+ width: 100%;
986
+ border-radius: 1rem;
987
+ border: 1px solid var(--search-wrapper-border-color);
988
+ background: var(--search-wrapper-bg);
989
+ padding: 0 0.5rem;
990
+
991
+ i {
992
+ z-index: 2;
993
+ font-size: 0.9rem;
994
+ color: var(--search-icon-color);
995
+ }
996
+ }
997
+
998
+ #search-cancel { /* 'Cancel' link */
999
+ color: var(--link-color);
1000
+ margin-left: 1rem;
1001
+ display: none;
1002
+
1003
+ @extend %cursor-pointer;
1004
+ }
1005
+
1006
+ #search-input {
1007
+ background: center;
1008
+ border: 0;
1009
+ border-radius: 0;
1010
+ padding: 0.18rem 0.3rem;
1011
+ color: var(--text-color);
1012
+ height: auto;
1013
+
1014
+ &:focus {
1015
+ box-shadow: none;
1016
+ background: center;
1017
+
1018
+ &.form-control {
1019
+ &::-moz-placeholder { @include input-placeholder; }
1020
+ &::-webkit-input-placeholder { @include input-placeholder; }
1021
+ &::placeholder { @include input-placeholder; }
1022
+ }
1023
+ }
1024
+ }
1025
+
1026
+ #search-hints {
1027
+ padding: 0 1rem;
1028
+
1029
+ h4 {
1030
+ margin-bottom: 1.5rem;
1031
+ }
1032
+
1033
+ .post-tag {
1034
+ display: inline-block;
1035
+ line-height: 1rem;
1036
+ font-size: 1rem;
1037
+ background: var(--search-tag-bg);
1038
+ border: none;
1039
+ padding: 0.5rem;
1040
+ margin: 0 1.25rem 1rem 0;
1041
+
1042
+ &::before {
1043
+ content: "#";
1044
+ color: var(--text-muted-color);
1045
+ padding-right: 0.2rem;
1046
+ }
1047
+
1048
+ @extend %link-color;
1049
+ }
1050
+ }
1051
+
1052
+ #search-results {
1053
+ padding-bottom: 3rem;
1054
+
1055
+ a {
1056
+ &:hover {
1057
+ @extend %link-hover;
1058
+ }
1059
+
1060
+ @extend %link-color;
1061
+ @extend %no-bottom-border;
1062
+ @extend %heading;
1063
+
1064
+ font-size: 1.4rem;
1065
+ line-height: 2.5rem;
1066
+ }
1067
+
1068
+ > div {
1069
+ width: 100%;
1070
+
1071
+ &:not(:last-child) {
1072
+ margin-bottom: 1rem;
1073
+ }
1074
+
1075
+ i { /* icons */
1076
+ color: #818182;
1077
+ margin-right: 0.15rem;
1078
+ font-size: 80%;
1079
+ }
1080
+
1081
+ > p {
1082
+ overflow: hidden;
1083
+ text-overflow: ellipsis;
1084
+ display: -webkit-box;
1085
+ -webkit-line-clamp: 3;
1086
+ -webkit-box-orient: vertical;
1087
+ }
1088
+ }
1089
+ } /* #search-results */
1090
+
1091
+ #topbar-title {
1092
+ display: none;
1093
+ font-size: 1.1rem;
1094
+ font-weight: 600;
1095
+ font-family: sans-serif;
1096
+ color: var(--topbar-text-color);
1097
+ text-align: center;
1098
+ width: 70%;
1099
+ overflow: hidden;
1100
+ text-overflow: ellipsis;
1101
+ word-break: keep-all;
1102
+ white-space: nowrap;
1103
+ }
1104
+
1105
+ #core-wrapper {
1106
+ .categories,
1107
+ #tags,
1108
+ #archives {
1109
+ a:not(:hover) {
1110
+ @extend %no-bottom-border;
1111
+ }
1112
+ }
1113
+
1114
+ @at-root .row:only-child > #{&} {
1115
+ padding-bottom: 3rem;
1116
+ }
1117
+ }
1118
+
1119
+ #mask {
1120
+ display: none;
1121
+ position: fixed;
1122
+ top: 0;
1123
+ right: 0;
1124
+ bottom: 0;
1125
+ left: 0;
1126
+ height: 100%;
1127
+ width: 100%;
1128
+ z-index: 1;
1129
+
1130
+ @at-root [#{$sidebar-display}] & {
1131
+ display: block !important;
1132
+ }
1133
+ }
1134
+
1135
+ /* --- main wrapper --- */
1136
+
1137
+ #main-wrapper {
1138
+ background-color: var(--main-bg);
1139
+ position: relative;
1140
+ min-height: calc(100vh - #{$footer-height});
1141
+
1142
+ @include pl-pr(0);
1143
+ }
1144
+
1145
+ #core-wrapper,
1146
+ #panel-wrapper {
1147
+ margin-top: $topbar-height; /* same as the height of topbar */
1148
+ }
1149
+
1150
+ #topbar-wrapper.row,
1151
+ #main > .row,
1152
+ #search-result-wrapper > .row {
1153
+ @include ml-mr(0);
1154
+ }
1155
+
1156
+ /* --- button back-to-top --- */
1157
+
1158
+ #back-to-top {
1159
+ $size: 2.7em;
1160
+
1161
+ display: none;
1162
+ z-index: 1;
1163
+ cursor: pointer;
1164
+ position: fixed;
1165
+ background: var(--button-bg);
1166
+ color: var(--btn-backtotop-color);
1167
+ padding: 0;
1168
+ width: $size;
1169
+ height: $size;
1170
+ border-radius: 50%;
1171
+ border: 1px solid var(--btn-backtotop-border-color);
1172
+ transition: -webkit-transform 0.2s ease-out;
1173
+ transition: transform 0.2s ease-out;
1174
+ transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
1175
+ -webkit-transition: transform 0.2s ease-out;
1176
+
1177
+ i {
1178
+ line-height: $size;
1179
+ position: relative;
1180
+ bottom: 2px;
1181
+ }
1182
+ }
1183
+
1184
+ #back-to-top:hover {
1185
+ transform: translate3d(0, -5px, 0);
1186
+ -webkit-transform: translate3d(0, -5px, 0);
1187
+ }
1188
+
1189
+ #notification {
1190
+ @-webkit-keyframes popup {
1191
+ from {
1192
+ opacity: 0;
1193
+ bottom: 0;
1194
+ }
1195
+ }
1196
+
1197
+ @keyframes popup {
1198
+ from {
1199
+ opacity: 0;
1200
+ bottom: 0;
1201
+ }
1202
+ }
1203
+
1204
+ .toast-header {
1205
+ background: none;
1206
+ border-bottom: none;
1207
+ color: inherit;
1208
+ }
1209
+
1210
+ .toast-body {
1211
+ font-family: Lato, sans-serif;
1212
+ line-height: 1.25rem;
1213
+
1214
+ button {
1215
+ font-size: 90%;
1216
+ min-width: 4rem;
1217
+ }
1218
+ }
1219
+
1220
+ &.toast {
1221
+ display: none;
1222
+
1223
+ &.show {
1224
+ display: block;
1225
+ min-width: 20rem;
1226
+ border-radius: 0.5rem;
1227
+ -webkit-backdrop-filter: blur(10px);
1228
+ backdrop-filter: blur(10px);
1229
+ background-color: rgba(255, 255, 255, 0.5);
1230
+ color: #1b1b1eba;
1231
+ position: fixed;
1232
+ left: 50%;
1233
+ bottom: 20%;
1234
+ -webkit-transform: translateX(-50%);
1235
+ transform: translateX(-50%);
1236
+ -webkit-animation: popup 0.8s;
1237
+ animation: popup 0.8s;
1238
+ }
1239
+ }
1240
+ }
1241
+
1242
+ /*
1243
+ Responsive Design:
1244
+
1245
+ {sidebar, content, panel} >= 1120px screen width
1246
+ {sidebar, content} >= 850px screen width
1247
+ {content} <= 849px screen width
1248
+
1249
+ */
1250
+
1251
+ @media all and (max-width: 576px) {
1252
+ footer {
1253
+ height: $footer-height-mobile;
1254
+
1255
+ div.d-flex {
1256
+ padding: 1.5rem 0;
1257
+ line-height: 1.65;
1258
+ flex-wrap: wrap;
1259
+ justify-content: space-around !important;
1260
+ }
1261
+
1262
+ .footer-left,
1263
+ .footer-right {
1264
+ text-align: center;
1265
+ }
1266
+ }
1267
+
1268
+ #main-wrapper {
1269
+ min-height: calc(100vh - #{$footer-height-mobile});
1270
+ }
1271
+
1272
+ #core-wrapper {
1273
+ min-height: calc(100vh - #{$topbar-height} - #{$footer-height-mobile}) !important;
1274
+
1275
+ h1 {
1276
+ margin-top: 2.2rem;
1277
+ font-size: 1.75rem;
1278
+ }
1279
+
1280
+ .post-content {
1281
+ > blockquote[class^="prompt-"] {
1282
+ @include pl-pr(1.25rem);
1283
+ @include ml-mr(-1.25rem);
1284
+
1285
+ border-radius: 0;
1286
+ max-width: none;
1287
+ }
1288
+ }
1289
+ }
1290
+
1291
+ #avatar > a {
1292
+ width: 5rem;
1293
+ height: 5rem;
1294
+ }
1295
+
1296
+ .site-subtitle {
1297
+ @include ml-mr(1.8rem);
1298
+ }
1299
+ }
1300
+
1301
+ @media all and (max-width: 768px) {
1302
+ %full-width {
1303
+ max-width: 100%;
1304
+ }
1305
+
1306
+ #topbar {
1307
+ @extend %full-width;
1308
+ }
1309
+
1310
+ #main {
1311
+ @extend %full-width;
1312
+ @include pl-pr(0);
1313
+ }
1314
+ }
1315
+
1316
+ /* hide sidebar and panel */
1317
+ @media all and (max-width: 849px) {
1318
+ @mixin slide($append: null) {
1319
+ $basic: transform 0.4s ease;
1320
+
1321
+ @if $append {
1322
+ transition: $basic, $append;
1323
+ } @else {
1324
+ transition: $basic;
1325
+ }
1326
+ }
1327
+
1328
+ html,
1329
+ body {
1330
+ overflow-x: hidden;
1331
+ }
1332
+
1333
+ footer {
1334
+ @include slide;
1335
+ }
1336
+
1337
+ [#{$sidebar-display}] {
1338
+ #sidebar {
1339
+ -webkit-transform: translateX(0);
1340
+ transform: translateX(0);
1341
+ }
1342
+
1343
+ #topbar-wrapper,
1344
+ #main-wrapper,
1345
+ footer {
1346
+ -webkit-transform: translateX(#{$sidebar-width});
1347
+ transform: translateX(#{$sidebar-width});
1348
+ }
1349
+ }
1350
+
1351
+ #sidebar {
1352
+ @include slide;
1353
+
1354
+ transform: translateX(-#{$sidebar-width}); /* hide */
1355
+ -webkit-transform: translateX(-#{$sidebar-width});
1356
+
1357
+ .cursor {
1358
+ transition: none;
1359
+ }
1360
+ }
1361
+
1362
+ #main-wrapper {
1363
+ @include slide;
1364
+
1365
+ padding-top: $topbar-height;
1366
+ }
1367
+
1368
+ #topbar,
1369
+ #main,
1370
+ footer > .container {
1371
+ max-width: 100%;
1372
+ }
1373
+
1374
+ #search-result-wrapper {
1375
+ width: 100%;
1376
+ }
1377
+
1378
+ #breadcrumb,
1379
+ #search-wrapper {
1380
+ display: none;
1381
+ }
1382
+
1383
+ #topbar-wrapper {
1384
+ @include slide(top 0.2s ease);
1385
+
1386
+ left: 0;
1387
+ }
1388
+
1389
+ #core-wrapper,
1390
+ #panel-wrapper {
1391
+ margin-top: 0;
1392
+ }
1393
+
1394
+ #topbar-title,
1395
+ #sidebar-trigger,
1396
+ #search-trigger {
1397
+ display: block;
1398
+ }
1399
+
1400
+ #search-result-wrapper .post-content {
1401
+ letter-spacing: 0;
1402
+ }
1403
+
1404
+ #tags {
1405
+ justify-content: center !important;
1406
+ }
1407
+
1408
+ h1.dynamic-title {
1409
+ display: none;
1410
+
1411
+ ~ .post-content {
1412
+ margin-top: 3rem;
1413
+ }
1414
+ }
1415
+ } /* max-width: 849px */
1416
+
1417
+ @media all and (max-width: 849px) and (orientation: portrait) {
1418
+ [data-topbar-visible="false"] #topbar-wrapper {
1419
+ top: 0;
1420
+ }
1421
+ }
1422
+
1423
+ /* Phone & Pad */
1424
+ @media all and (min-width: 577px) and (max-width: 1199px) {
1425
+ footer .d-flex > div {
1426
+ width: 312px;
1427
+ }
1428
+ }
1429
+
1430
+ /* Sidebar is visible */
1431
+ @media all and (min-width: 850px) {
1432
+ /* Solved jumping scrollbar */
1433
+ html {
1434
+ overflow-y: scroll;
1435
+ }
1436
+
1437
+ #main-wrapper,
1438
+ footer {
1439
+ margin-left: $sidebar-width;
1440
+ }
1441
+
1442
+ .profile-wrapper {
1443
+ margin-top: 3rem;
1444
+ }
1445
+
1446
+ #search-hints {
1447
+ display: none;
1448
+ }
1449
+
1450
+ #search-wrapper {
1451
+ max-width: $search-max-width;
1452
+ }
1453
+
1454
+ #search-result-wrapper {
1455
+ margin-top: 3rem;
1456
+ max-width: $main-content-max-width;
1457
+ }
1458
+
1459
+ div.post-content .table-wrapper > table {
1460
+ min-width: 70%;
1461
+ }
1462
+
1463
+ /* button 'back-to-Top' position */
1464
+ #back-to-top {
1465
+ bottom: 5.5rem;
1466
+ right: 5%;
1467
+ }
1468
+
1469
+ #topbar-title {
1470
+ text-align: left;
1471
+ }
1472
+ }
1473
+
1474
+ /* Pad horizontal */
1475
+ @media all and (min-width: 992px) and (max-width: 1199px) {
1476
+ #main .col-lg-11 {
1477
+ flex: 0 0 96%;
1478
+ max-width: 96%;
1479
+ }
1480
+ }
1481
+
1482
+ /* Compact icons in sidebar & panel hidden */
1483
+ @media all and (min-width: 850px) and (max-width: 1199px) {
1484
+ #sidebar {
1485
+ width: $sidebar-width-small;
1486
+
1487
+ .site-subtitle {
1488
+ margin-left: 1rem;
1489
+ margin-right: 1rem;
1490
+ }
1491
+
1492
+ .sidebar-bottom {
1493
+ a,
1494
+ span {
1495
+ width: 2rem;
1496
+ }
1497
+
1498
+ .icon-border {
1499
+ left: -3px;
1500
+ }
1501
+ }
1502
+ }
1503
+
1504
+ #topbar-wrapper {
1505
+ left: $sidebar-width-small;
1506
+ }
1507
+
1508
+ #search-results > div {
1509
+ max-width: 700px;
1510
+ }
1511
+
1512
+ .site-title {
1513
+ font-size: 1.3rem;
1514
+ margin-left: 0 !important;
1515
+ }
1516
+
1517
+ .site-subtitle {
1518
+ @include ml-mr(1rem);
1519
+
1520
+ font-size: 90%;
1521
+ }
1522
+
1523
+ #main-wrapper,
1524
+ footer {
1525
+ margin-left: $sidebar-width-small;
1526
+ }
1527
+
1528
+ #breadcrumb {
1529
+ width: 65%;
1530
+ overflow: hidden;
1531
+ text-overflow: ellipsis;
1532
+ word-break: keep-all;
1533
+ white-space: nowrap;
1534
+ }
1535
+ }
1536
+
1537
+ /* panel hidden */
1538
+ @media all and (max-width: 1199px) {
1539
+ #panel-wrapper {
1540
+ display: none;
1541
+ }
1542
+
1543
+ #main > div.row {
1544
+ justify-content: center !important;
1545
+ }
1546
+ }
1547
+
1548
+ /* --- desktop mode, both sidebar and panel are visible --- */
1549
+
1550
+ @media all and (min-width: 1200px) {
1551
+ #back-to-top {
1552
+ bottom: 6.5rem;
1553
+ }
1554
+
1555
+ #search-wrapper {
1556
+ margin-right: 4rem;
1557
+ }
1558
+
1559
+ #search-input {
1560
+ transition: all 0.3s ease-in-out;
1561
+ }
1562
+
1563
+ #search-results > div {
1564
+ width: 46%;
1565
+
1566
+ &:nth-child(odd) {
1567
+ margin-right: 1.5rem;
1568
+ }
1569
+
1570
+ &:nth-child(even) {
1571
+ margin-left: 1.5rem;
1572
+ }
1573
+
1574
+ &:last-child:nth-child(odd) {
1575
+ position: relative;
1576
+ right: 24.3%;
1577
+ }
1578
+ }
1579
+
1580
+ .post-content {
1581
+ font-size: 1.03rem;
1582
+ }
1583
+
1584
+ footer {
1585
+ div.d-felx {
1586
+ width: 85%;
1587
+ }
1588
+ }
1589
+ }
1590
+
1591
+ @media all and (min-width: 1400px) {
1592
+ #back-to-top {
1593
+ right: calc((100vw - #{$sidebar-width} - 1140px) / 2 + 3rem);
1594
+ }
1595
+ }
1596
+
1597
+ @media all and (min-width: 1650px) {
1598
+ #main-wrapper,
1599
+ footer {
1600
+ margin-left: $sidebar-width-large;
1601
+ }
1602
+
1603
+ #topbar-wrapper {
1604
+ left: $sidebar-width-large;
1605
+ }
1606
+
1607
+ #search-wrapper {
1608
+ margin-right: calc(#{$main-content-max-width} * 0.25 - #{$search-max-width});
1609
+ }
1610
+
1611
+ #topbar,
1612
+ #main,
1613
+ footer > .container {
1614
+ max-width: $main-content-max-width;
1615
+ }
1616
+
1617
+ #core-wrapper,
1618
+ #tail-wrapper {
1619
+ padding-right: 4.5rem !important;
1620
+ }
1621
+
1622
+ #back-to-top {
1623
+ right: calc((100vw - #{$sidebar-width-large} - #{$main-content-max-width}) / 2 + 2rem);
1624
+ }
1625
+
1626
+ #sidebar {
1627
+ width: $sidebar-width-large;
1628
+
1629
+ .profile-wrapper {
1630
+ margin-top: 4rem;
1631
+ margin-bottom: 1rem;
1632
+
1633
+ &.text-center {
1634
+ text-align: left !important;
1635
+ }
1636
+
1637
+ %profile-ml {
1638
+ margin-left: 4.5rem;
1639
+ }
1640
+
1641
+ #avatar {
1642
+ @extend %profile-ml;
1643
+
1644
+ > a {
1645
+ width: 6.2rem;
1646
+ height: 6.2rem;
1647
+
1648
+ &.mx-auto {
1649
+ margin-left: 0 !important;
1650
+ }
1651
+ }
1652
+ }
1653
+
1654
+ .site-title {
1655
+ @extend %profile-ml;
1656
+
1657
+ margin-top: 0.4rem;
1658
+
1659
+ a {
1660
+ font-size: 1.7rem;
1661
+ letter-spacing: 1px;
1662
+ }
1663
+ }
1664
+
1665
+ .site-subtitle {
1666
+ @extend %profile-ml;
1667
+
1668
+ word-spacing: 0;
1669
+ margin-top: 0;
1670
+ }
1671
+ } /* .profile-wrapper (min-width: 1650px) */
1672
+
1673
+ ul {
1674
+ padding-left: 2.5rem;
1675
+
1676
+ > li:last-child {
1677
+ > a {
1678
+ position: static;
1679
+ }
1680
+ }
1681
+
1682
+ .nav-item {
1683
+ text-align: left;
1684
+
1685
+ .nav-link {
1686
+ > span {
1687
+ letter-spacing: 2px;
1688
+ }
1689
+
1690
+ > i {
1691
+ &.unloaded {
1692
+ display: inline-block !important;
1693
+ }
1694
+ }
1695
+ }
1696
+ }
1697
+ }
1698
+
1699
+ .sidebar-bottom {
1700
+ padding-left: 3.5rem;
1701
+ width: 100%;
1702
+
1703
+ $icon-block-size: 2rem;
1704
+
1705
+ &.justify-content-center {
1706
+ justify-content: flex-start !important;
1707
+ }
1708
+
1709
+ > span,
1710
+ > button.mode-toggle,
1711
+ > a {
1712
+ @include ml-mr(0.15rem);
1713
+
1714
+ height: $icon-block-size;
1715
+ margin-bottom: 0.5rem; /* wrap line */
1716
+ }
1717
+
1718
+ i {
1719
+ background-color: var(--sidebar-btn-bg);
1720
+ font-size: 1rem;
1721
+ width: $icon-block-size;
1722
+ height: $icon-block-size;
1723
+ border-radius: 50%;
1724
+ position: relative;
1725
+
1726
+ &::before {
1727
+ position: absolute;
1728
+ top: 50%;
1729
+ left: 50%;
1730
+ -webkit-transform: translate(-50%, -50%);
1731
+ transform: translate(-50%, -50%);
1732
+ }
1733
+ }
1734
+
1735
+ .icon-border {
1736
+ top: 0.9rem;
1737
+ }
1738
+ } /* .sidebar-bottom */
1739
+ } /* #sidebar */
1740
+ } /* min-width: 1650px */