jekyll-theme-chirpy 5.6.1 → 6.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (81) hide show
  1. checksums.yaml +4 -4
  2. data/_data/locales/ar.yml +5 -7
  3. data/_data/locales/bg-BG.yml +1 -3
  4. data/_data/locales/cs-CZ.yml +5 -7
  5. data/_data/locales/de-DE.yml +1 -3
  6. data/_data/locales/el-GR.yml +6 -8
  7. data/_data/locales/en.yml +5 -7
  8. data/_data/locales/es-ES.yml +2 -4
  9. data/_data/locales/fi-FI.yml +5 -7
  10. data/_data/locales/fr-FR.yml +0 -2
  11. data/_data/locales/hu-HU.yml +4 -6
  12. data/_data/locales/id-ID.yml +1 -3
  13. data/_data/locales/it-IT.yml +5 -8
  14. data/_data/locales/ko-KR.yml +3 -5
  15. data/_data/locales/my-MM.yml +1 -3
  16. data/_data/locales/pt-BR.yml +1 -3
  17. data/_data/locales/ru-RU.yml +1 -3
  18. data/_data/locales/sl-SI.yml +91 -0
  19. data/_data/locales/sv-SE.yml +91 -0
  20. data/_data/locales/tr-TR.yml +1 -3
  21. data/_data/locales/uk-UA.yml +1 -3
  22. data/_data/locales/vi-VN.yml +2 -3
  23. data/_data/locales/zh-CN.yml +3 -5
  24. data/_data/locales/zh-TW.yml +83 -0
  25. data/_data/{assets/cross_origin.yml → origin/cors.yml} +12 -12
  26. data/_includes/comments/giscus.html +39 -31
  27. data/_includes/datetime.html +10 -6
  28. data/_includes/footer.html +24 -26
  29. data/_includes/head.html +9 -9
  30. data/_includes/js-selector.html +44 -27
  31. data/_includes/jsdelivr-combine.html +0 -6
  32. data/_includes/lang.html +8 -0
  33. data/_includes/mermaid.html +28 -29
  34. data/_includes/metadata-hook.html +1 -0
  35. data/_includes/mode-toggle.html +44 -21
  36. data/_includes/{assets-origin.html → origin-type.html} +5 -4
  37. data/_includes/post-nav.html +27 -20
  38. data/_includes/post-paginator.html +13 -12
  39. data/_includes/post-sharing.html +21 -13
  40. data/_includes/read-time.html +17 -10
  41. data/_includes/refactor-content.html +31 -27
  42. data/_includes/related-posts.html +35 -34
  43. data/_includes/search-loader.html +23 -24
  44. data/_includes/search-results.html +3 -4
  45. data/_includes/sidebar.html +50 -52
  46. data/_includes/toc.html +2 -5
  47. data/_includes/topbar.html +47 -47
  48. data/_includes/trending-tags.html +13 -17
  49. data/_includes/update-list.html +13 -14
  50. data/_layouts/archives.html +5 -3
  51. data/_layouts/categories.html +97 -77
  52. data/_layouts/category.html +10 -8
  53. data/_layouts/default.html +34 -29
  54. data/_layouts/home.html +35 -18
  55. data/_layouts/page.html +38 -33
  56. data/_layouts/post.html +17 -15
  57. data/_layouts/tag.html +10 -8
  58. data/_layouts/tags.html +4 -5
  59. data/_sass/addon/commons.scss +260 -439
  60. data/_sass/addon/module.scss +18 -8
  61. data/_sass/addon/syntax.scss +42 -41
  62. data/_sass/addon/variables.scss +8 -11
  63. data/_sass/colors/dark-syntax.scss +1 -0
  64. data/_sass/colors/dark-typography.scss +16 -24
  65. data/_sass/colors/light-syntax.scss +3 -3
  66. data/_sass/colors/light-typography.scss +16 -15
  67. data/_sass/jekyll-theme-chirpy.scss +14 -19
  68. data/_sass/layout/categories.scss +20 -4
  69. data/_sass/layout/home.scss +111 -94
  70. data/_sass/layout/post.scss +35 -32
  71. data/assets/404.html +3 -1
  72. data/assets/css/style.scss +1 -7
  73. data/assets/feed.xml +1 -1
  74. data/assets/js/dist/categories.min.js +2 -2
  75. data/assets/js/dist/commons.min.js +2 -2
  76. data/assets/js/dist/home.min.js +6 -0
  77. data/assets/js/dist/misc.min.js +2 -2
  78. data/assets/js/dist/page.min.js +2 -2
  79. data/assets/js/dist/post.min.js +2 -2
  80. metadata +11 -5
  81. /data/_data/{assets/self_host.yml → origin/basic.yml} +0 -0
@@ -34,64 +34,46 @@ body {
34
34
  env(safe-area-inset-bottom) env(safe-area-inset-left);
35
35
  color: var(--text-color);
36
36
  -webkit-font-smoothing: antialiased;
37
- font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
38
- line-height: 1.75;
37
+ font-family: $font-family-base;
39
38
  }
40
39
 
41
40
  /* --- Typography --- */
42
41
 
43
- h1 {
44
- @extend %heading;
45
-
46
- font-size: 1.9rem;
47
- }
48
-
49
- h2 {
50
- @extend %heading;
51
- @extend %section;
52
- @extend %anchor;
53
-
54
- font-size: 1.5rem;
55
- }
56
-
57
- h3 {
58
- @extend %heading;
59
- @extend %section;
60
- @extend %anchor;
61
-
62
- font-size: 1.2rem;
63
- }
42
+ @for $i from 1 through 5 {
43
+ h#{$i} {
44
+ @extend %heading;
64
45
 
65
- h4 {
66
- @extend %heading;
67
- @extend %section;
68
- @extend %anchor;
46
+ @if $i > 1 {
47
+ @extend %section;
48
+ @extend %anchor;
49
+ }
69
50
 
70
- font-size: 1.15rem;
71
- }
51
+ @if $i < 5 {
52
+ $factor: 0.18rem;
72
53
 
73
- h5 {
74
- @extend %heading;
75
- @extend %section;
76
- @extend %anchor;
54
+ @if $i == 1 {
55
+ $factor: 0.23rem;
56
+ }
77
57
 
78
- font-size: 1.1rem;
58
+ font-size: 1rem + (5 - $i) * $factor;
59
+ } @else {
60
+ font-size: 1rem;
61
+ }
62
+ }
79
63
  }
80
64
 
81
65
  a {
82
66
  @extend %link-color;
67
+
68
+ text-decoration: none;
83
69
  }
84
70
 
85
71
  img {
86
72
  max-width: 100%;
87
73
  height: auto;
74
+ transition: all 0.35s ease-in-out;
88
75
 
89
76
  &[data-src] {
90
- &.lazyloaded {
91
- -webkit-animation: fade-in 0.4s ease-in;
92
- animation: fade-in 0.4s ease-in;
93
- }
94
-
95
77
  &[data-lqip='true'] {
96
78
  &.lazyload,
97
79
  &.lazyloading {
@@ -105,6 +87,11 @@ img {
105
87
  &.lazyloading {
106
88
  background: var(--img-bg);
107
89
  }
90
+
91
+ &.lazyloaded {
92
+ -webkit-animation: fade-in 0.35s ease-in;
93
+ animation: fade-in 0.35s ease-in;
94
+ }
108
95
  }
109
96
 
110
97
  &.shadow {
@@ -194,27 +181,21 @@ footer {
194
181
  line-height: 1.2rem;
195
182
  padding-bottom: 1rem;
196
183
  border-top: 1px solid var(--main-border-color);
197
-
198
- > div {
199
- width: 350px;
200
- }
184
+ flex-wrap: wrap;
201
185
  }
202
186
 
203
187
  a {
204
188
  @extend %text-color;
205
189
 
206
- &:link {
207
- @include no-text-decoration;
208
- }
209
-
210
190
  &:hover {
211
191
  @extend %link-hover;
212
- @include no-text-decoration;
213
192
  }
214
193
  }
215
194
 
216
- .footer-right {
217
- text-align: right;
195
+ p {
196
+ width: 100%;
197
+ text-align: center;
198
+ margin-bottom: 0;
218
199
  }
219
200
  }
220
201
 
@@ -260,39 +241,20 @@ i {
260
241
  }
261
242
 
262
243
  .post-tag {
263
- display: inline-block;
264
- line-height: 1rem;
244
+ line-height: 1.05rem;
265
245
  font-size: 0.85rem;
266
- background: none;
267
246
  border: 1px solid var(--btn-border-color);
268
247
  border-radius: 0.8rem;
269
248
  padding: 0.3rem 0.5rem;
270
249
  margin: 0 0.35rem 0.5rem 0;
271
250
 
272
251
  &:hover {
273
- background-color: #2a408e;
274
- border-color: #2a408e;
275
- color: #ffffff;
276
- transition: none;
252
+ transition: all 0.3s ease-in;
277
253
  }
278
254
  }
279
-
280
- [data-topbar-visible='true'] & > div {
281
- top: 6rem;
282
- }
283
255
  }
284
256
 
285
257
  #access-lastmod {
286
- li {
287
- height: 1.8rem;
288
- overflow: hidden;
289
- text-overflow: ellipsis;
290
- display: -webkit-box;
291
- -webkit-line-clamp: 1;
292
- -webkit-box-orient: vertical;
293
- list-style: none;
294
- }
295
-
296
258
  a {
297
259
  &:hover {
298
260
  @extend %link-hover;
@@ -400,9 +362,35 @@ i {
400
362
 
401
363
  /* --- post --- */
402
364
 
365
+ .post-preview {
366
+ @extend %rounded;
367
+
368
+ border: 0;
369
+ background: var(--card-bg);
370
+ box-shadow: var(--card-shadow);
371
+
372
+ &::before {
373
+ @extend %rounded;
374
+
375
+ content: '';
376
+ width: 100%;
377
+ height: 100%;
378
+ position: absolute;
379
+ background-color: var(--card-hovor-bg);
380
+ opacity: 0;
381
+ transition: opacity 0.35s ease-in-out;
382
+ }
383
+
384
+ &:hover {
385
+ &::before {
386
+ opacity: 0.3;
387
+ }
388
+ }
389
+ }
390
+
403
391
  .post {
404
392
  h1 {
405
- margin-top: 3rem;
393
+ margin-top: 2rem;
406
394
  margin-bottom: 1.5rem;
407
395
  }
408
396
 
@@ -422,7 +410,6 @@ i {
422
410
 
423
411
  .post-meta {
424
412
  font-size: 0.85rem;
425
- word-spacing: 1px;
426
413
 
427
414
  a {
428
415
  &:not([class]):hover {
@@ -513,6 +500,10 @@ i {
513
500
  dl > dd {
514
501
  margin-left: 1rem;
515
502
  }
503
+
504
+ ::marker {
505
+ color: var(--text-muted-color);
506
+ }
516
507
  } /* .post-content */
517
508
 
518
509
  .tag:hover {
@@ -523,7 +514,6 @@ i {
523
514
  display: inline-block;
524
515
  min-width: 2rem;
525
516
  text-align: center;
526
- background: var(--tag-bg);
527
517
  border-radius: 0.3rem;
528
518
  padding: 0 0.4rem;
529
519
  color: inherit;
@@ -532,14 +522,6 @@ i {
532
522
  &:not(:last-child) {
533
523
  margin-right: 0.2rem;
534
524
  }
535
-
536
- &:hover {
537
- @extend %tag-hover;
538
-
539
- border-bottom: none;
540
- text-decoration: none;
541
- color: #d2603a;
542
- }
543
525
  }
544
526
 
545
527
  .rounded-10 {
@@ -549,7 +531,6 @@ i {
549
531
  .img-link {
550
532
  color: transparent;
551
533
  display: inline-flex;
552
- overflow: hidden;
553
534
  }
554
535
 
555
536
  .shimmer {
@@ -569,22 +550,18 @@ i {
569
550
 
570
551
  @-webkit-keyframes shimmer {
571
552
  0% {
572
- -webkit-transform: translateX(-100%);
573
553
  transform: translateX(-100%);
574
554
  }
575
555
  100% {
576
- -webkit-transform: translateX(100%);
577
556
  transform: translateX(100%);
578
557
  }
579
558
  }
580
559
 
581
560
  @keyframes shimmer {
582
561
  0% {
583
- -webkit-transform: translateX(-100%);
584
562
  transform: translateX(-100%);
585
563
  }
586
564
  100% {
587
- -webkit-transform: translateX(100%);
588
565
  transform: translateX(100%);
589
566
  }
590
567
  }
@@ -648,17 +625,25 @@ i {
648
625
  box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important;
649
626
  }
650
627
 
651
- .no-text-decoration {
652
- @include no-text-decoration;
628
+ /* overwrite bootstrap muted */
629
+ .text-muted {
630
+ color: var(--text-muted-color) !important;
653
631
  }
654
632
 
655
- /* Overrided BS4 Tooltip */
633
+ /* Overwrite bootstrap tooltip */
656
634
  .tooltip-inner {
657
635
  font-size: 0.7rem;
658
636
  max-width: 220px;
659
637
  text-align: left;
660
638
  }
661
639
 
640
+ /* Overwrite bootstrap outline button */
641
+ .btn.btn-outline-primary {
642
+ &:not(.disabled):hover {
643
+ border-color: #007bff !important;
644
+ }
645
+ }
646
+
662
647
  .disabled {
663
648
  color: rgb(206, 196, 196);
664
649
  pointer-events: auto;
@@ -689,12 +674,17 @@ i {
689
674
  /* --- Overriding --- */
690
675
 
691
676
  /* magnific-popup */
677
+
692
678
  figure .mfp-title {
693
679
  text-align: center;
694
680
  padding-right: 0;
695
681
  margin-top: 0.5rem;
696
682
  }
697
683
 
684
+ .mfp-img {
685
+ transition: none;
686
+ }
687
+
698
688
  /* mermaid */
699
689
  .mermaid {
700
690
  text-align: center;
@@ -709,6 +699,9 @@ mjx-container {
709
699
  /* --- sidebar layout --- */
710
700
 
711
701
  $sidebar-display: 'sidebar-display';
702
+ $btn-gap: 0.8rem; // for the bottom icons
703
+ $btn-border-width: 3px;
704
+ $btn-mb: 0.5rem;
712
705
 
713
706
  #sidebar {
714
707
  @include pl-pr(0);
@@ -731,202 +724,173 @@ $sidebar-display: 'sidebar-display';
731
724
  -ms-overflow-style: none; /* IE and Edge */
732
725
  scrollbar-width: none; /* Firefox */
733
726
 
734
- a {
735
- @extend %sidebar-links;
736
-
727
+ %sidebar-link-hover {
737
728
  &:hover {
738
- @include no-text-decoration;
739
-
740
- color: var(--sidebar-active-color) !important;
729
+ color: var(--sidebar-active-color);
741
730
  }
742
731
  }
743
732
 
744
- #avatar {
745
- > a {
746
- display: block;
747
- width: 6rem;
748
- height: 6rem;
749
- border-radius: 50%;
750
- border: 2px solid rgba(222, 222, 222, 0.7);
751
- overflow: hidden;
752
- -webkit-transform: translateZ(0);
753
- transform: translateZ(0); /* fixed the zoom in Safari */
754
- transition: border-color 0.35s ease-in-out;
733
+ a {
734
+ @extend %sidebar-links;
735
+ }
755
736
 
756
- &:hover {
757
- border-color: white;
758
- }
759
- }
737
+ #avatar {
738
+ display: block;
739
+ width: 7rem;
740
+ height: 7rem;
741
+ overflow: hidden;
742
+ box-shadow: var(--avatar-border-color) 0 0 0 2px;
743
+ transform: translateZ(0); /* fixed the zoom in Safari */
760
744
 
761
745
  img {
762
- width: 100%;
763
- height: 100%;
764
- transition: -webkit-transform 0.5s;
765
746
  transition: transform 0.5s;
766
- transition: transform 0.5s, -webkit-transform 0.5s;
767
747
 
768
748
  &:hover {
769
- -webkit-transform: scale(1.2);
770
749
  transform: scale(1.2);
771
750
  }
772
751
  }
773
- } /* #avatar */
752
+ }
753
+
754
+ .profile-wrapper {
755
+ @include mt-mb(2.5rem);
756
+ @extend %clickable-transition;
757
+
758
+ padding-left: 2.5rem;
759
+ padding-right: 1.25rem;
760
+ width: 100%;
761
+ }
774
762
 
775
763
  .site-title {
776
- margin-top: 0.55rem;
764
+ font-weight: 900;
765
+ font-size: 1.75rem;
766
+ line-height: 1.2;
767
+ letter-spacing: 0.25px;
768
+ color: rgba(134, 133, 133, 0.99);
769
+ margin-top: 1.25rem;
770
+ margin-bottom: 0.5rem;
777
771
 
778
772
  a {
779
773
  @extend %clickable-transition;
780
-
781
- font-weight: 900;
782
- font-size: 1.5rem;
783
- letter-spacing: 0.5px;
784
- color: rgba(134, 133, 133, 0.99);
774
+ @extend %sidebar-link-hover;
785
775
  }
786
776
  }
787
777
 
788
778
  .site-subtitle {
789
779
  font-size: 95%;
790
780
  color: var(--sidebar-muted-color);
791
- line-height: 1.25rem;
781
+ margin-top: 0.25rem;
792
782
  word-spacing: 1px;
793
- margin: 0.2rem 1.5rem 0.5rem 1.5rem;
794
- min-height: 3rem; /* avoid vertical shifting in multi-line words */
795
783
  -webkit-user-select: none;
796
784
  -moz-user-select: none;
797
785
  -ms-user-select: none;
798
786
  user-select: none;
799
787
  }
800
788
 
801
- .nav-link {
802
- border-radius: 0;
803
- font-size: 0.95rem;
804
- font-weight: 600;
805
- letter-spacing: 1px;
806
- display: table-cell;
807
- vertical-align: middle;
808
- }
809
-
810
- .nav-item {
811
- text-align: center;
812
- display: table;
813
- height: $tab-height;
814
-
815
- &.active {
816
- .nav-link {
817
- color: var(--sidebar-active-color);
818
- }
819
- }
820
-
821
- &:not(.active) > a {
822
- @extend %clickable-transition;
823
- }
824
- }
825
-
826
789
  ul {
827
- height: $tab-height * $tab-count;
828
790
  margin-bottom: 2rem;
829
- padding-left: 0;
830
791
 
831
- li {
792
+ li.nav-item {
793
+ opacity: 0.9;
832
794
  width: 100%;
795
+ padding-left: 1.5rem;
796
+ padding-right: 1.5rem;
833
797
 
834
- &:last-child {
835
- a {
836
- position: relative;
837
- left: calc($cursor-width / 2);
838
- width: 100%;
798
+ a.nav-link {
799
+ @include pt-pb(0.6rem);
800
+
801
+ display: flex;
802
+ align-items: center;
803
+ border-radius: 0.75rem;
804
+ font-weight: 600;
805
+
806
+ &:hover {
807
+ background-color: var(--sidebar-hover-bg);
839
808
  }
840
809
 
841
- /* the cursor */
842
- &::after {
843
- display: table;
844
- visibility: hidden;
845
- content: '';
846
- position: relative;
847
- right: 1px;
848
- width: $cursor-width;
849
- height: $tab-cursor-height;
850
- border-radius: 1px;
851
- background-color: var(--nav-cursor-color);
852
- pointer-events: none;
810
+ i {
811
+ font-size: 95%;
812
+ opacity: 0.8;
813
+ margin-right: 1.5rem;
853
814
  }
854
- }
855
- } /* li */
856
815
 
857
- @mixin fix-cursor($top) {
858
- top: $top;
859
- visibility: visible;
860
- }
816
+ span {
817
+ font-size: 90%;
818
+ letter-spacing: 0.2px;
819
+ }
820
+ }
861
821
 
862
- @for $i from 1 through $tab-count {
863
- $offset: $tab-count - $i;
864
- $top: (-$offset * $tab-height) +
865
- (($tab-height - $tab-cursor-height) * 0.5);
822
+ &.active {
823
+ .nav-link {
824
+ color: var(--sidebar-active-color);
825
+ background-color: var(--sidebar-hover-bg);
866
826
 
867
- @if $i < $tab-count {
868
- > li.active:nth-child(#{$i}),
869
- > li.nav-item:nth-child(#{$i}):hover {
870
- ~ li:last-child::after {
871
- @include fix-cursor($top);
827
+ span {
828
+ opacity: 1;
872
829
  }
873
830
  }
874
- } @else {
875
- > li.active:nth-child(#{$i}):last-child::after,
876
- > li.nav-item:nth-child(#{$i}):last-child:hover::after {
877
- @include fix-cursor($top);
878
- }
879
831
  }
880
- } /* @for */
881
- } /* ul */
832
+
833
+ &:not(:first-child) {
834
+ margin-top: 0.25rem;
835
+ }
836
+ }
837
+ }
882
838
 
883
839
  .sidebar-bottom {
884
- margin-bottom: 2.1rem;
840
+ @include pl-pr(2rem);
885
841
 
886
- @include ml-mr(auto);
887
- @include pl-pr(1rem);
842
+ margin-bottom: 1.5rem;
888
843
 
889
- %icon {
890
- width: 2.4rem;
844
+ %button {
845
+ width: 1.75rem;
846
+ height: 1.75rem;
847
+ margin-bottom: $btn-mb; // multi line gap
848
+ border-radius: 50%;
849
+ color: var(--sidebar-btn-color);
850
+ background-color: var(--sidebar-btn-bg);
891
851
  text-align: center;
852
+ display: flex;
853
+ align-items: center;
854
+ justify-content: center;
855
+
856
+ &:hover {
857
+ background-color: var(--sidebar-hover-bg);
858
+ }
892
859
  }
893
860
 
894
861
  a {
895
- @extend %icon;
862
+ @extend %button;
863
+ @extend %sidebar-link-hover;
896
864
  @extend %clickable-transition;
865
+
866
+ &:not(:last-child) {
867
+ margin-right: $btn-gap;
868
+ }
897
869
  }
898
870
 
899
871
  i {
900
- font-size: 1.2rem;
901
872
  line-height: 1.75rem;
902
873
  }
903
874
 
904
875
  .mode-toggle {
905
876
  padding: 0;
906
877
  border: 0;
907
- margin-bottom: 1px;
908
- background-color: transparent;
909
878
 
910
- @extend %icon;
879
+ @extend %button;
911
880
  @extend %sidebar-links;
912
-
913
- > i {
914
- @extend %clickable-transition;
915
- }
916
-
917
- &:hover > i {
918
- color: var(--sidebar-active-color);
919
- }
881
+ @extend %sidebar-link-hover;
920
882
  }
921
883
 
922
884
  .icon-border {
923
885
  @extend %no-cursor;
886
+ @include ml-mr(calc(($btn-gap - $btn-border-width) / 2));
924
887
 
925
888
  background-color: var(--sidebar-muted-color);
926
889
  content: '';
927
- width: 3px;
928
- height: 3px;
890
+ width: $btn-border-width;
891
+ height: $btn-border-width;
929
892
  border-radius: 50%;
893
+ margin-bottom: $btn-mb;
930
894
  }
931
895
  } /* .sidebar-bottom */
932
896
  } /* #sidebar */
@@ -935,11 +899,14 @@ $sidebar-display: 'sidebar-display';
935
899
  #sidebar ul > li:last-child::after {
936
900
  transition: top 0.5s ease;
937
901
  }
938
- }
939
902
 
940
- .profile-wrapper {
941
- margin-top: 2rem;
942
- width: 100%;
903
+ .nav-link {
904
+ transition: background-color 0.3s ease-in-out;
905
+ }
906
+
907
+ .post-preview {
908
+ transition: background-color 0.35s ease-in-out;
909
+ }
943
910
  }
944
911
 
945
912
  #search-result-wrapper {
@@ -957,18 +924,7 @@ $sidebar-display: 'sidebar-display';
957
924
 
958
925
  #topbar-wrapper {
959
926
  height: $topbar-height;
960
- position: fixed;
961
- top: 0;
962
- left: $sidebar-width; /* same as sidebar width */
963
- right: 0;
964
- transition: top 0.2s ease-in-out;
965
- z-index: 50;
966
- border-bottom: 1px solid rgba(0, 0, 0, 0.07);
967
- background-color: var(--topbar-wrapper-bg);
968
-
969
- [data-topbar-visible='false'] & {
970
- top: -$topbar-height; /* same as topbar height. */
971
- }
927
+ background-color: var(--topbar-bg);
972
928
  }
973
929
 
974
930
  #topbar {
@@ -1007,7 +963,7 @@ $sidebar-display: 'sidebar-display';
1007
963
  width: 100%;
1008
964
  border-radius: 1rem;
1009
965
  border: 1px solid var(--search-wrapper-border-color);
1010
- background: var(--search-wrapper-bg);
966
+ background: var(--main-bg);
1011
967
  padding: 0 0.5rem;
1012
968
 
1013
969
  i {
@@ -1036,7 +992,6 @@ $sidebar-display: 'sidebar-display';
1036
992
 
1037
993
  &:focus {
1038
994
  box-shadow: none;
1039
- background: center;
1040
995
 
1041
996
  &.form-control {
1042
997
  &::-moz-placeholder {
@@ -1139,6 +1094,8 @@ $sidebar-display: 'sidebar-display';
1139
1094
  }
1140
1095
 
1141
1096
  #core-wrapper {
1097
+ line-height: 1.75;
1098
+
1142
1099
  .categories,
1143
1100
  #tags,
1144
1101
  #archives {
@@ -1146,10 +1103,6 @@ $sidebar-display: 'sidebar-display';
1146
1103
  @extend %no-bottom-border;
1147
1104
  }
1148
1105
  }
1149
-
1150
- @at-root .row:only-child > #{&} {
1151
- padding-bottom: 3rem;
1152
- }
1153
1106
  }
1154
1107
 
1155
1108
  #mask {
@@ -1170,16 +1123,11 @@ $sidebar-display: 'sidebar-display';
1170
1123
  #main-wrapper {
1171
1124
  background-color: var(--main-bg);
1172
1125
  position: relative;
1173
- min-height: calc(100vh - #{$footer-height});
1126
+ min-height: calc(100vh - $footer-height-mobile);
1174
1127
 
1175
1128
  @include pl-pr(0);
1176
1129
  }
1177
1130
 
1178
- #core-wrapper,
1179
- #panel-wrapper {
1180
- margin-top: $topbar-height; /* same as the height of topbar */
1181
- }
1182
-
1183
1131
  #topbar-wrapper.row,
1184
1132
  #main > .row,
1185
1133
  #search-result-wrapper > .row {
@@ -1189,12 +1137,14 @@ $sidebar-display: 'sidebar-display';
1189
1137
  /* --- button back-to-top --- */
1190
1138
 
1191
1139
  #back-to-top {
1192
- $size: 2.7em;
1140
+ $size: 3rem;
1193
1141
 
1194
1142
  display: none;
1195
1143
  z-index: 1;
1196
1144
  cursor: pointer;
1197
1145
  position: fixed;
1146
+ right: 1rem;
1147
+ bottom: 2rem;
1198
1148
  background: var(--button-bg);
1199
1149
  color: var(--btn-backtotop-color);
1200
1150
  padding: 0;
@@ -1202,11 +1152,14 @@ $sidebar-display: 'sidebar-display';
1202
1152
  height: $size;
1203
1153
  border-radius: 50%;
1204
1154
  border: 1px solid var(--btn-backtotop-border-color);
1205
- transition: -webkit-transform 0.2s ease-out;
1206
1155
  transition: transform 0.2s ease-out;
1207
- transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
1208
1156
  -webkit-transition: transform 0.2s ease-out;
1209
1157
 
1158
+ &:hover {
1159
+ transform: translate3d(0, -5px, 0);
1160
+ -webkit-transform: translate3d(0, -5px, 0);
1161
+ }
1162
+
1210
1163
  i {
1211
1164
  line-height: $size;
1212
1165
  position: relative;
@@ -1214,11 +1167,6 @@ $sidebar-display: 'sidebar-display';
1214
1167
  }
1215
1168
  }
1216
1169
 
1217
- #back-to-top:hover {
1218
- transform: translate3d(0, -5px, 0);
1219
- -webkit-transform: translate3d(0, -5px, 0);
1220
- }
1221
-
1222
1170
  #notification {
1223
1171
  @-webkit-keyframes popup {
1224
1172
  from {
@@ -1251,8 +1199,6 @@ $sidebar-display: 'sidebar-display';
1251
1199
  }
1252
1200
 
1253
1201
  &.toast {
1254
- display: none;
1255
-
1256
1202
  &.show {
1257
1203
  display: block;
1258
1204
  min-width: 20rem;
@@ -1264,7 +1210,6 @@ $sidebar-display: 'sidebar-display';
1264
1210
  position: fixed;
1265
1211
  left: 50%;
1266
1212
  bottom: 20%;
1267
- -webkit-transform: translateX(-50%);
1268
1213
  transform: translateX(-50%);
1269
1214
  -webkit-animation: popup 0.8s;
1270
1215
  animation: popup 0.8s;
@@ -1275,29 +1220,13 @@ $sidebar-display: 'sidebar-display';
1275
1220
  /*
1276
1221
  Responsive Design:
1277
1222
 
1278
- {sidebar, content, panel} >= 1120px screen width
1223
+ {sidebar, content, panel} >= 1200px screen width
1279
1224
  {sidebar, content} >= 850px screen width
1280
1225
  {content} <= 849px screen width
1281
1226
 
1282
1227
  */
1283
1228
 
1284
1229
  @media all and (max-width: 576px) {
1285
- footer {
1286
- height: $footer-height-mobile;
1287
-
1288
- div.d-flex {
1289
- padding: 1.5rem 0;
1290
- line-height: 1.65;
1291
- flex-wrap: wrap;
1292
- justify-content: space-around !important;
1293
- }
1294
-
1295
- .footer-left,
1296
- .footer-right {
1297
- text-align: center;
1298
- }
1299
- }
1300
-
1301
1230
  #main-wrapper {
1302
1231
  min-height: calc(100vh - #{$footer-height-mobile});
1303
1232
  }
@@ -1307,11 +1236,6 @@ $sidebar-display: 'sidebar-display';
1307
1236
  100vh - #{$topbar-height} - #{$footer-height-mobile}
1308
1237
  ) !important;
1309
1238
 
1310
- h1 {
1311
- margin-top: 2.2rem;
1312
- font-size: 1.75rem;
1313
- }
1314
-
1315
1239
  .post-content {
1316
1240
  > blockquote[class^='prompt-'] {
1317
1241
  @include ml-mr(-1.25rem);
@@ -1322,14 +1246,10 @@ $sidebar-display: 'sidebar-display';
1322
1246
  }
1323
1247
  }
1324
1248
 
1325
- #avatar > a {
1249
+ #avatar {
1326
1250
  width: 5rem;
1327
1251
  height: 5rem;
1328
1252
  }
1329
-
1330
- .site-subtitle {
1331
- @include ml-mr(1.8rem);
1332
- }
1333
1253
  }
1334
1254
 
1335
1255
  @media all and (max-width: 768px) {
@@ -1366,20 +1286,29 @@ $sidebar-display: 'sidebar-display';
1366
1286
 
1367
1287
  footer {
1368
1288
  @include slide;
1289
+
1290
+ height: $footer-height-mobile;
1291
+
1292
+ div.d-flex {
1293
+ padding: 1.5rem 0;
1294
+ line-height: 1.65;
1295
+ flex-wrap: wrap;
1296
+ }
1369
1297
  }
1370
1298
 
1371
1299
  [#{$sidebar-display}] {
1372
1300
  #sidebar {
1373
- -webkit-transform: translateX(0);
1374
1301
  transform: translateX(0);
1375
1302
  }
1376
1303
 
1377
- #topbar-wrapper,
1378
1304
  #main-wrapper,
1379
1305
  footer {
1380
- -webkit-transform: translateX(#{$sidebar-width});
1381
1306
  transform: translateX(#{$sidebar-width});
1382
1307
  }
1308
+
1309
+ #back-to-top {
1310
+ visibility: hidden;
1311
+ }
1383
1312
  }
1384
1313
 
1385
1314
  #sidebar {
@@ -1387,16 +1316,10 @@ $sidebar-display: 'sidebar-display';
1387
1316
 
1388
1317
  transform: translateX(-#{$sidebar-width}); /* hide */
1389
1318
  -webkit-transform: translateX(-#{$sidebar-width});
1390
-
1391
- .cursor {
1392
- transition: none;
1393
- }
1394
1319
  }
1395
1320
 
1396
1321
  #main-wrapper {
1397
1322
  @include slide;
1398
-
1399
- padding-top: $topbar-height;
1400
1323
  }
1401
1324
 
1402
1325
  #topbar,
@@ -1443,17 +1366,11 @@ $sidebar-display: 'sidebar-display';
1443
1366
  display: none;
1444
1367
 
1445
1368
  ~ .post-content {
1446
- margin-top: 3rem;
1369
+ margin-top: 2.5rem;
1447
1370
  }
1448
1371
  }
1449
1372
  } /* max-width: 849px */
1450
1373
 
1451
- @media all and (max-width: 849px) and (orientation: portrait) {
1452
- [data-topbar-visible='false'] #topbar-wrapper {
1453
- top: 0;
1454
- }
1455
- }
1456
-
1457
1374
  /* Phone & Pad */
1458
1375
  @media all and (min-width: 577px) and (max-width: 1199px) {
1459
1376
  footer .d-flex > div {
@@ -1473,8 +1390,27 @@ $sidebar-display: 'sidebar-display';
1473
1390
  margin-left: $sidebar-width;
1474
1391
  }
1475
1392
 
1476
- .profile-wrapper {
1477
- margin-top: 3rem;
1393
+ #main-wrapper {
1394
+ min-height: calc(100vh - $footer-height);
1395
+ }
1396
+
1397
+ footer {
1398
+ p {
1399
+ width: auto;
1400
+ &:last-child {
1401
+ &::before {
1402
+ content: '-';
1403
+ margin: 0 0.75rem;
1404
+ opacity: 0.8;
1405
+ }
1406
+ }
1407
+ }
1408
+ }
1409
+
1410
+ #sidebar {
1411
+ .profile-wrapper {
1412
+ margin-top: 3rem;
1413
+ }
1478
1414
  }
1479
1415
 
1480
1416
  #search-hints {
@@ -1486,8 +1422,14 @@ $sidebar-display: 'sidebar-display';
1486
1422
  }
1487
1423
 
1488
1424
  #search-result-wrapper {
1489
- margin-top: 3rem;
1490
1425
  max-width: $main-content-max-width;
1426
+ justify-content: start !important;
1427
+ }
1428
+
1429
+ .post {
1430
+ h1 {
1431
+ margin-top: 3rem;
1432
+ }
1491
1433
  }
1492
1434
 
1493
1435
  div.post-content .table-wrapper > table {
@@ -1515,50 +1457,10 @@ $sidebar-display: 'sidebar-display';
1515
1457
 
1516
1458
  /* Compact icons in sidebar & panel hidden */
1517
1459
  @media all and (min-width: 850px) and (max-width: 1199px) {
1518
- #sidebar {
1519
- width: $sidebar-width-small;
1520
-
1521
- .site-subtitle {
1522
- margin-left: 1rem;
1523
- margin-right: 1rem;
1524
- }
1525
-
1526
- .sidebar-bottom {
1527
- a,
1528
- span {
1529
- width: 2rem;
1530
- }
1531
-
1532
- .icon-border {
1533
- left: -3px;
1534
- }
1535
- }
1536
- }
1537
-
1538
- #topbar-wrapper {
1539
- left: $sidebar-width-small;
1540
- }
1541
-
1542
1460
  #search-results > div {
1543
1461
  max-width: 700px;
1544
1462
  }
1545
1463
 
1546
- .site-title {
1547
- font-size: 1.3rem;
1548
- margin-left: 0 !important;
1549
- }
1550
-
1551
- .site-subtitle {
1552
- @include ml-mr(1rem);
1553
-
1554
- font-size: 90%;
1555
- }
1556
-
1557
- #main-wrapper,
1558
- footer {
1559
- margin-left: $sidebar-width-small;
1560
- }
1561
-
1562
1464
  #breadcrumb {
1563
1465
  width: 65%;
1564
1466
  overflow: hidden;
@@ -1629,6 +1531,8 @@ $sidebar-display: 'sidebar-display';
1629
1531
  }
1630
1532
 
1631
1533
  @media all and (min-width: 1650px) {
1534
+ $icon-gap: 1rem;
1535
+
1632
1536
  #main-wrapper,
1633
1537
  footer {
1634
1538
  margin-left: $sidebar-width-large;
@@ -1640,14 +1544,15 @@ $sidebar-display: 'sidebar-display';
1640
1544
 
1641
1545
  #search-wrapper {
1642
1546
  margin-right: calc(
1643
- #{$main-content-max-width} * 0.25 - #{$search-max-width}
1547
+ #{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem
1644
1548
  );
1645
1549
  }
1646
1550
 
1647
- #topbar,
1648
1551
  #main,
1649
1552
  footer > .container {
1650
1553
  max-width: $main-content-max-width;
1554
+ padding-left: 1.75rem !important;
1555
+ padding-right: 1.75rem !important;
1651
1556
  }
1652
1557
 
1653
1558
  #core-wrapper,
@@ -1664,115 +1569,31 @@ $sidebar-display: 'sidebar-display';
1664
1569
  #sidebar {
1665
1570
  width: $sidebar-width-large;
1666
1571
 
1667
- .profile-wrapper {
1668
- margin-top: 4rem;
1669
- margin-bottom: 1rem;
1670
-
1671
- &.text-center {
1672
- text-align: left !important;
1673
- }
1674
-
1675
- %profile-ml {
1676
- margin-left: 4.5rem;
1677
- }
1678
-
1679
- #avatar {
1680
- @extend %profile-ml;
1681
-
1682
- > a {
1683
- width: 6.2rem;
1684
- height: 6.2rem;
1572
+ $icon-gap: 1rem; // for the bottom icons
1685
1573
 
1686
- &.mx-auto {
1687
- margin-left: 0 !important;
1688
- }
1689
- }
1690
- }
1691
-
1692
- .site-title {
1693
- @extend %profile-ml;
1694
-
1695
- margin-top: 0.4rem;
1696
-
1697
- a {
1698
- font-size: 1.7rem;
1699
- letter-spacing: 1px;
1700
- }
1701
- }
1702
-
1703
- .site-subtitle {
1704
- @extend %profile-ml;
1705
-
1706
- word-spacing: 0;
1707
- margin-top: 0;
1708
- }
1709
- } /* .profile-wrapper (min-width: 1650px) */
1574
+ .profile-wrapper {
1575
+ margin-top: 3.5rem;
1576
+ margin-bottom: 2.5rem;
1577
+ padding-left: 3.5rem;
1578
+ }
1710
1579
 
1711
1580
  ul {
1712
- padding-left: 2.5rem;
1713
-
1714
- > li:last-child {
1715
- > a {
1716
- position: static;
1717
- }
1718
- }
1719
-
1720
- .nav-item {
1721
- text-align: left;
1722
-
1723
- .nav-link {
1724
- > span {
1725
- letter-spacing: 2px;
1726
- }
1727
-
1728
- > i {
1729
- &.unloaded {
1730
- display: inline-block !important;
1731
- }
1732
- }
1733
- }
1581
+ li.nav-item {
1582
+ @include pl-pr(2.75rem);
1734
1583
  }
1735
1584
  }
1736
1585
 
1737
1586
  .sidebar-bottom {
1738
- padding-left: 3.5rem;
1739
- width: 100%;
1740
-
1741
- $icon-block-size: 2rem;
1742
-
1743
- &.justify-content-center {
1744
- justify-content: flex-start !important;
1745
- }
1746
-
1747
- > span,
1748
- > button.mode-toggle,
1749
- > a {
1750
- @include ml-mr(0.15rem);
1587
+ padding-left: 2.75rem;
1588
+ margin-bottom: 1.75rem;
1751
1589
 
1752
- height: $icon-block-size;
1753
- margin-bottom: 0.5rem; /* wrap line */
1754
- }
1755
-
1756
- i {
1757
- background-color: var(--sidebar-btn-bg);
1758
- font-size: 1rem;
1759
- width: $icon-block-size;
1760
- height: $icon-block-size;
1761
- border-radius: 50%;
1762
- position: relative;
1763
-
1764
- &::before {
1765
- position: absolute;
1766
- top: 50%;
1767
- left: 50%;
1768
- -webkit-transform: translate(-50%, -50%);
1769
- transform: translate(-50%, -50%);
1770
- }
1590
+ a:not(:last-child) {
1591
+ margin-right: $icon-gap;
1771
1592
  }
1772
1593
 
1773
1594
  .icon-border {
1774
- top: 0.9rem;
1595
+ @include ml-mr(calc(($icon-gap - $btn-border-width) / 2));
1775
1596
  }
1776
- } /* .sidebar-bottom */
1777
- } /* #sidebar */
1597
+ }
1598
+ }
1778
1599
  } /* min-width: 1650px */