jekyll-theme-chirpy 4.3.4 → 5.0.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.
Files changed (47) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +5 -5
  3. data/_config.yml +9 -5
  4. data/_data/locales/en.yml +2 -1
  5. data/_data/locales/id-ID.yml +2 -1
  6. data/_data/locales/ko-KR.yml +91 -0
  7. data/_data/locales/zh-CN.yml +2 -1
  8. data/_includes/{disqus.html → comments/disqus.html} +4 -4
  9. data/_includes/comments/utterances.html +51 -0
  10. data/_includes/comments.html +5 -0
  11. data/_includes/footer.html +1 -1
  12. data/_includes/js-selector.html +1 -1
  13. data/_includes/mermaid.html +28 -0
  14. data/_includes/mode-toggle.html +48 -65
  15. data/_includes/read-time.html +3 -3
  16. data/_includes/refactor-content.html +109 -35
  17. data/_includes/related-posts.html +1 -1
  18. data/_includes/search-results.html +0 -8
  19. data/_includes/sidebar.html +10 -11
  20. data/_includes/timeago.html +11 -12
  21. data/_includes/toc.html +16 -0
  22. data/_includes/topbar.html +1 -1
  23. data/_includes/trending-tags.html +14 -0
  24. data/_includes/update-list.html +16 -0
  25. data/_layouts/default.html +6 -2
  26. data/_layouts/home.html +12 -9
  27. data/_layouts/page.html +45 -22
  28. data/_layouts/post.html +128 -127
  29. data/_sass/addon/commons.scss +154 -175
  30. data/_sass/addon/module.scss +48 -28
  31. data/_sass/addon/syntax.scss +55 -44
  32. data/_sass/addon/variables.scss +1 -1
  33. data/_sass/colors/dark-syntax.scss +3 -4
  34. data/_sass/colors/dark-typography.scss +11 -8
  35. data/_sass/colors/light-syntax.scss +3 -3
  36. data/_sass/colors/light-typography.scss +4 -5
  37. data/_sass/jekyll-theme-chirpy.scss +1 -1
  38. data/_sass/layout/home.scss +6 -2
  39. data/_sass/layout/post.scss +52 -46
  40. data/assets/js/dist/categories.min.js +2 -2
  41. data/assets/js/dist/commons.min.js +2 -2
  42. data/assets/js/dist/home.min.js +2 -2
  43. data/assets/js/dist/page.min.js +2 -2
  44. data/assets/js/dist/post.min.js +2 -2
  45. data/assets/js/dist/pvreport.min.js +2 -2
  46. metadata +7 -4
  47. data/_includes/panel.html +0 -59
@@ -43,59 +43,20 @@ body {
43
43
  font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
44
44
  }
45
45
 
46
- /* --- Scrollbar --- */
47
-
48
- $scrollbar-size: 7px;
49
-
50
- ::-webkit-scrollbar {
51
- width: $scrollbar-size;
52
- height: $scrollbar-size;
53
- }
54
-
55
- ::-webkit-scrollbar-track {
56
- @at-root body#{&} {
57
- -webkit-box-shadow: inset 0 0 6px var(--scrollbar-track-bg);
58
- }
59
- }
60
-
61
- ::-webkit-scrollbar-thumb {
62
- background-color: var(--scrollbar-thumb-bg);
63
- border-radius: calc(#{$scrollbar-size} / 2);
64
- }
65
-
66
- .highlight {
67
- border-color: transparent;
68
- transition: border-color 0.5s ease;
69
-
70
- &:hover {
71
- border-color: var(--scrollbar-thumb-bg);
72
- transition: border-color 0.2s ease;
73
- }
74
-
75
- &::-webkit-scrollbar-thumb {
76
- /* add border to act as background-color */
77
- border-right-style: inset;
78
- border-right-width: calc(100vw + 100vh);
79
- border-color: inherit;
80
- background-color: var(--highlight-bg-color);
81
- }
82
-
83
- }
84
-
85
46
  /* --- Typography --- */
86
47
 
87
48
  h1 {
88
49
  @extend %heading;
89
50
 
90
- font-size: 1.8rem;
51
+ font-size: 1.9rem;
91
52
  }
92
53
 
93
54
  h2 {
94
55
  @extend %heading;
95
56
  @extend %section;
96
- @extend %anchor;
57
+ @extend %anchor-relative;
97
58
 
98
- font-size: 1.4rem;
59
+ font-size: 1.5rem;
99
60
  }
100
61
 
101
62
  h3 {
@@ -103,7 +64,7 @@ h3 {
103
64
  @extend %section;
104
65
  @extend %anchor;
105
66
 
106
- font-size: 1.25rem;
67
+ font-size: 1.2rem;
107
68
  }
108
69
 
109
70
  h4 {
@@ -146,7 +107,19 @@ blockquote {
146
107
  }
147
108
 
148
109
  kbd {
110
+ font-family: inherit;
111
+ display: inline-block;
112
+ vertical-align: middle;
113
+ line-height: 1.3rem;
114
+ min-width: 1.75rem;
115
+ text-align: center;
149
116
  margin: 0 0.3rem;
117
+ padding-top: 0.1rem;
118
+ color: var(--kbd-text-color);
119
+ background-color: var(--kbd-bg-color);
120
+ border-radius: 0.25rem;
121
+ border: solid 1px var(--kbd-wrap-color);
122
+ box-shadow: inset 0 -2px 0 var(--kbd-wrap-color);
150
123
  }
151
124
 
152
125
  footer {
@@ -155,8 +128,6 @@ footer {
155
128
  padding: 0 1rem;
156
129
  height: $footer-height;
157
130
  font-size: 0.8rem;
158
- color: #7a7b7d;
159
- background-color: var(--footer-bg-color);
160
131
 
161
132
  > div.d-flex {
162
133
  line-height: 1.2rem;
@@ -171,7 +142,7 @@ footer {
171
142
  }
172
143
 
173
144
  a {
174
- color: var(--footer-link);
145
+ @extend %text-color;
175
146
 
176
147
  &:link {
177
148
  @include no-text-decoration;
@@ -189,6 +160,40 @@ footer {
189
160
  }
190
161
  }
191
162
 
163
+ i { // fontawesome icons
164
+ &.far,
165
+ &.fas {
166
+ @extend %no-cursor;
167
+ }
168
+ }
169
+
170
+ @keyframes fade-in {
171
+ from { opacity: 0; }
172
+ to { opacity: 1; }
173
+ }
174
+
175
+ img[data-src] {
176
+ margin: 0.5rem 0;
177
+
178
+ &[data-loaded=true] {
179
+ animation: fade-in linear 0.5s;
180
+ }
181
+
182
+ &.left {
183
+ float: left;
184
+ margin: 0.75rem 1rem 1rem 0;
185
+ }
186
+
187
+ &.right {
188
+ float: right;
189
+ margin: 0.75rem 0 1rem 1rem;
190
+ }
191
+
192
+ &.shadow {
193
+ filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
194
+ }
195
+ }
196
+
192
197
  /* --- Panels --- */
193
198
 
194
199
  .access {
@@ -203,10 +208,6 @@ footer {
203
208
  position: sticky;
204
209
  }
205
210
 
206
- &.topbar-down {
207
- top: 6rem;
208
- }
209
-
210
211
  > div {
211
212
  padding-left: 1rem;
212
213
  border-left: 1px solid var(--main-border-color);
@@ -216,19 +217,16 @@ footer {
216
217
  }
217
218
  }
218
219
 
219
- span {
220
- @include panel-label;
221
- }
222
-
223
220
  .post-content {
224
221
  font-size: 0.9rem;
225
222
  }
226
223
 
227
224
  }
228
225
 
229
- #access-tags {
230
- > div.post-content > div {
231
- max-width: 80%;
226
+ #panel-wrapper {
227
+ // the headings
228
+ .panel-heading {
229
+ @include label(inherit);
232
230
  }
233
231
 
234
232
  .post-tag {
@@ -248,6 +246,10 @@ footer {
248
246
  transition: none;
249
247
  }
250
248
  }
249
+
250
+ &.topbar-down > div {
251
+ top: 6rem;
252
+ }
251
253
  }
252
254
 
253
255
  #access-lastmod {
@@ -293,7 +295,7 @@ footer {
293
295
  &[scroll-focus=true] > p {
294
296
  background-color: var(--footnote-target-bg);
295
297
  width: fit-content;
296
- -webkit-transition: background-color 1.5s ease-in-out; // Safari prior 6.1
298
+ -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
297
299
  transition: background-color 1.5s ease-in-out;
298
300
  }
299
301
  }
@@ -305,7 +307,7 @@ footer {
305
307
  @include pl-pr(2px);
306
308
 
307
309
  border-bottom-style: none !important;
308
- -webkit-transition: background-color 1.5s ease-in-out; // Safari prior 6.1
310
+ -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
309
311
  transition: background-color 1.5s ease-in-out;
310
312
  }
311
313
 
@@ -327,26 +329,10 @@ footer {
327
329
  }
328
330
  }
329
331
 
330
- .post {
331
- h1 {
332
- margin-top: 3rem;
333
- margin-bottom: 1rem;
334
- }
335
-
336
- em { /* MarkDown italic */
337
- padding-right: 0.2rem;
338
- }
339
-
340
- a:hover {
341
- code {
342
- @extend %link-hover;
343
- }
344
- }
345
- }
346
-
347
332
  /* --- Begin of Markdown table style --- */
348
333
 
349
- .table-wrapper { // it will be created by Liquid
334
+ // it will be created by Liquid
335
+ .table-wrapper {
350
336
  overflow-x: auto;
351
337
  margin-bottom: 1.5rem;
352
338
 
@@ -385,6 +371,35 @@ footer {
385
371
 
386
372
  /* --- post --- */
387
373
 
374
+ .post {
375
+ h1 {
376
+ margin-top: 3rem;
377
+ margin-bottom: 1.5rem;
378
+ }
379
+
380
+ a {
381
+ &.img-link {
382
+ @extend %no-cursor;
383
+ }
384
+
385
+ // created by `_includes/img-extra.html`
386
+ &.popup {
387
+ cursor: zoom-in;
388
+
389
+ > img[data-src]:not(.normal):not(.left):not(.right) {
390
+ @include align-center;
391
+ }
392
+ }
393
+
394
+ &:hover {
395
+ code {
396
+ @extend %link-hover;
397
+ }
398
+ }
399
+ } // a
400
+
401
+ }
402
+
388
403
  .pageviews .fa-spinner {
389
404
  font-size: 80%;
390
405
  }
@@ -394,9 +409,6 @@ footer {
394
409
  word-spacing: 1px;
395
410
 
396
411
  a {
397
- @extend %link-color;
398
- @extend %link-underline;
399
-
400
412
  &:not(:last-child) {
401
413
  margin-right: 2px;
402
414
  }
@@ -405,6 +417,10 @@ footer {
405
417
  @extend %link-hover;
406
418
  }
407
419
  }
420
+
421
+ em {
422
+ @extend %normal-font-style;
423
+ }
408
424
  }
409
425
 
410
426
  .post-content {
@@ -414,54 +430,8 @@ footer {
414
430
  overflow-wrap: break-word;
415
431
  word-wrap: break-word;
416
432
 
417
- @mixin caption {
418
- + em {
419
- display: block;
420
- text-align: center;
421
- font-style: normal;
422
- font-size: 80%;
423
- padding: 0;
424
- color: #6d6c6c;
425
- }
426
- }
427
-
428
- @keyframes fade-in {
429
- from { opacity: 0; }
430
- to { opacity: 1; }
431
- }
432
-
433
- img[data-src] {
434
- margin: 0.5rem 0;
435
-
436
- &[data-loaded=true] {
437
- animation: fade-in linear 0.5s;
438
- }
439
-
440
- &.left {
441
- float: left;
442
- margin: 0.75rem 1rem 1rem 0;
443
- }
444
-
445
- &.right {
446
- float: right;
447
- margin: 0.75rem 0 1rem 1rem;
448
- }
449
-
450
- &.shadow {
451
- filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
452
- }
453
-
454
- @include caption;
455
-
456
- }
457
-
458
433
  a {
459
- blockquote & {
460
- color: var(--link-color);
461
- }
462
-
463
434
  &:not(.img-link) {
464
- @extend %link-color;
465
435
  @extend %link-underline;
466
436
 
467
437
  &:hover {
@@ -469,19 +439,16 @@ footer {
469
439
  }
470
440
  }
471
441
 
472
- &.popup { // created by `_includes/img-extra.html`
473
- cursor: zoom-in;
474
-
475
- > img[data-src]:not(.normal):not(.left):not(.right) {
476
- @include align-center;
477
- }
478
- }
479
-
480
- &.img-link {
481
- @include caption;
442
+ &.img-link + em {
443
+ display: block;
444
+ text-align: center;
445
+ font-style: normal;
446
+ font-size: 80%;
447
+ padding: 0;
448
+ color: #6d6c6c;
482
449
  }
483
450
 
484
- } // a
451
+ }
485
452
 
486
453
  ul {
487
454
  // attribute 'hide-bullet' was added by liquid
@@ -574,10 +541,6 @@ footer {
574
541
 
575
542
  /* --- Effects classes --- */
576
543
 
577
- .semi-bold {
578
- font-weight: 600 !important;
579
- }
580
-
581
544
  .loaded {
582
545
  display: block !important;
583
546
 
@@ -825,7 +788,6 @@ $sidebar-display: "sidebar-display";
825
788
  } // ul
826
789
 
827
790
  .sidebar-bottom {
828
- font-size: 1.2rem;
829
791
  margin-bottom: 2.1rem;
830
792
 
831
793
  @include ml-mr(auto);
@@ -842,22 +804,31 @@ $sidebar-display: "sidebar-display";
842
804
  }
843
805
 
844
806
  i {
845
- line-height: 1.75rem; // default line-height in body
846
- vertical-align: middle;
807
+ font-size: 1.2rem;
808
+ line-height: 1.75rem;
847
809
  }
848
810
 
849
- #mode-toggle-wrapper {
811
+ .mode-toggle {
812
+ padding: 0;
813
+ border: 0;
814
+ margin-bottom: 1px;
815
+ background-color: transparent;
816
+
850
817
  @extend %icon;
818
+ @extend %sidebar-links;
851
819
 
852
- i {
853
- @extend %sidebar-links;
854
- @extend %cursor-pointer;
820
+ > i {
855
821
  @extend %clickable-transition;
856
822
  }
857
823
 
824
+ &:hover > i {
825
+ color: var(--sidebar-active-color);
826
+ }
858
827
  }
859
828
 
860
829
  .icon-border {
830
+ @extend %no-cursor;
831
+
861
832
  background-color: var(--sidebar-muted-color);
862
833
  content: "";
863
834
  width: 3px;
@@ -865,10 +836,6 @@ $sidebar-display: "sidebar-display";
865
836
  border-radius: 50%;
866
837
  }
867
838
 
868
- #mode-toggle-wrapper:hover > i {
869
- color: var(--sidebar-active-color);
870
- }
871
-
872
839
  } // .sidebar-bottom
873
840
 
874
841
  } // #sidebar
@@ -991,7 +958,11 @@ $sidebar-display: "sidebar-display";
991
958
  }
992
959
 
993
960
  #search-hints {
994
- display: none;
961
+ padding: 0 1rem;
962
+
963
+ h4 {
964
+ margin-bottom: 1.5rem;
965
+ }
995
966
 
996
967
  .post-tag {
997
968
  display: inline-block;
@@ -1000,13 +971,15 @@ $sidebar-display: "sidebar-display";
1000
971
  background: var(--search-tag-bg);
1001
972
  border: none;
1002
973
  padding: 0.5rem;
1003
- margin: 0 1rem 1rem 0;
974
+ margin: 0 1.25rem 1rem 0;
1004
975
 
1005
976
  &::before {
1006
977
  content: "#";
1007
978
  color: var(--text-muted-color);
1008
979
  padding-right: 0.2rem;
1009
980
  }
981
+
982
+ @extend %link-color;
1010
983
  }
1011
984
  }
1012
985
 
@@ -1063,7 +1036,9 @@ $sidebar-display: "sidebar-display";
1063
1036
  white-space: nowrap;
1064
1037
  }
1065
1038
 
1066
- #page {
1039
+ #core-wrapper {
1040
+ min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
1041
+
1067
1042
  .categories,
1068
1043
  #tags,
1069
1044
  #archives {
@@ -1100,20 +1075,24 @@ $sidebar-display: "sidebar-display";
1100
1075
  @include pl-pr(0);
1101
1076
  }
1102
1077
 
1103
- #main > div.row:first-child > div {
1104
- &:nth-child(1),
1105
- &:nth-child(2) {
1106
- margin-top: $topbar-height; /* same as the height of topbar */
1107
- }
1078
+ #main {
1079
+ .row:first-child {
1080
+ > div {
1081
+ &:nth-child(1),
1082
+ &:nth-child(2) {
1083
+ margin-top: $topbar-height; /* same as the height of topbar */
1084
+ }
1108
1085
 
1109
- &:first-child {
1110
- /* 3rem for topbar, 6rem for footer */
1111
- min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height});
1086
+ &:first-child {
1087
+ /* 3rem for topbar, 6rem for footer */
1088
+ min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height});
1089
+ }
1090
+ }
1112
1091
  }
1113
- }
1114
1092
 
1115
- #post-wrapper {
1116
- min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
1093
+ div.row:first-of-type:last-of-type { // alone
1094
+ margin-bottom: 4rem;
1095
+ }
1117
1096
  }
1118
1097
 
1119
1098
  #topbar-wrapper.row,
@@ -1170,12 +1149,12 @@ $sidebar-display: "sidebar-display";
1170
1149
  min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
1171
1150
  }
1172
1151
 
1173
- #post-wrapper {
1174
- min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
1152
+ #core-wrapper {
1153
+ min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
1175
1154
 
1176
1155
  h1 {
1177
1156
  margin-top: 2.2rem;
1178
- font-size: 1.55rem;
1157
+ font-size: 1.75rem;
1179
1158
  }
1180
1159
  }
1181
1160
 
@@ -1313,18 +1292,13 @@ $sidebar-display: "sidebar-display";
1313
1292
  letter-spacing: 0;
1314
1293
  }
1315
1294
 
1316
- #search-hints {
1317
- display: block;
1318
- padding: 0 1rem;
1319
- }
1320
-
1321
1295
  #tags {
1322
1296
  -webkit-box-pack: center !important;
1323
1297
  -ms-flex-pack: center !important;
1324
1298
  justify-content: center !important;
1325
1299
  }
1326
1300
 
1327
- #page h1.dynamic-title {
1301
+ h1.dynamic-title {
1328
1302
  display: none;
1329
1303
 
1330
1304
  ~ .post-content {
@@ -1518,6 +1492,10 @@ $sidebar-display: "sidebar-display";
1518
1492
  }
1519
1493
  }
1520
1494
 
1495
+ #search-hints {
1496
+ display: none;
1497
+ }
1498
+
1521
1499
  .post-content {
1522
1500
  font-size: 1.03rem;
1523
1501
  }
@@ -1677,6 +1655,7 @@ $sidebar-display: "sidebar-display";
1677
1655
  }
1678
1656
 
1679
1657
  > span,
1658
+ > button.mode-toggle,
1680
1659
  > a {
1681
1660
  @include ml-mr(0.15rem);
1682
1661
 
@@ -10,6 +10,46 @@
10
10
  font-family: 'Lato', 'Microsoft Yahei', sans-serif;
11
11
  }
12
12
 
13
+ %section {
14
+ #core-wrapper & {
15
+ margin-top: 2.5rem;
16
+ margin-bottom: 2rem;
17
+ }
18
+ }
19
+
20
+ %anchor {
21
+ .anchor {
22
+ font-size: 1rem;
23
+ margin-left: 0.5rem;
24
+ }
25
+
26
+ @media (hover: hover) {
27
+ .anchor {
28
+ border-bottom: none !important;
29
+ visibility: hidden;
30
+ opacity: 0;
31
+ transition: opacity 0.25s ease-in, visibility 0s ease-in 0.25s;
32
+ }
33
+
34
+ &:hover {
35
+ .anchor {
36
+ visibility: visible;
37
+ opacity: 1;
38
+ transition: opacity 0.25s ease-in, visibility 0s ease-in 0s;
39
+ }
40
+ }
41
+ }
42
+ }
43
+
44
+ %anchor-relative {
45
+ @extend %anchor;
46
+
47
+ .anchor {
48
+ position: relative;
49
+ bottom: 1px;
50
+ }
51
+ }
52
+
13
53
  %tag-hover {
14
54
  background: var(--tag-hover);
15
55
  transition: background 0.35s ease-in-out;
@@ -39,26 +79,22 @@
39
79
  transition: color 0.35s ease-in-out;
40
80
  }
41
81
 
42
- %no-bottom-border {
43
- border-bottom: none;
44
- }
45
-
46
- %section {
47
- #post-wrapper & {
48
- line-height: 1.2;
49
- margin-bottom: 1rem;
50
- }
82
+ %no-cursor {
83
+ user-select: none;
51
84
  }
52
85
 
53
- %anchor {
54
- padding-top: 3.5rem;
55
- margin-top: -2.5rem;
86
+ %no-bottom-border {
87
+ border-bottom: none;
56
88
  }
57
89
 
58
90
  %cursor-pointer {
59
91
  cursor: pointer;
60
92
  }
61
93
 
94
+ %normal-font-style {
95
+ font-style: normal;
96
+ }
97
+
62
98
  /* ---------- scss mixin --------- */
63
99
 
64
100
  @mixin no-text-decoration {
@@ -84,28 +120,12 @@
84
120
  opacity: 0.6;
85
121
  }
86
122
 
87
- @mixin semi-bold {
88
- font-weight: 600;
89
- }
90
-
91
123
  @mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) {
92
124
  color: $color;
93
125
  font-size: $font-size;
94
126
  font-weight: $font-weight;
95
127
  }
96
128
 
97
- @mixin panel-label {
98
- @include label(inherit);
99
-
100
- display: block;
101
- line-height: 1.2;
102
- padding-top: 0.5rem;
103
- padding-bottom: 0.5rem;
104
- margin-top: 0;
105
- margin-bottom: 0;
106
- letter-spacing: -0.02em;
107
- }
108
-
109
129
  @mixin align-center {
110
130
  position: relative;
111
131
  left: 50%;