jekyll-theme-chirpy 4.3.4 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +20 -162
  3. data/_config.yml +44 -18
  4. data/_data/assets/cross_origin.yml +62 -0
  5. data/_data/assets/self_host.yml +51 -0
  6. data/_data/locales/en.yml +3 -15
  7. data/_data/locales/id-ID.yml +2 -14
  8. data/_data/locales/ko-KR.yml +78 -0
  9. data/_data/locales/my-MM.yml +78 -0
  10. data/_data/locales/ru-RU.yml +78 -0
  11. data/_data/locales/uk-UA.yml +78 -0
  12. data/_data/locales/zh-CN.yml +2 -14
  13. data/_data/share.yml +1 -1
  14. data/_includes/assets-origin.html +12 -0
  15. data/_includes/{disqus.html → comments/disqus.html} +4 -4
  16. data/_includes/comments/giscus.html +56 -0
  17. data/_includes/comments/utterances.html +51 -0
  18. data/_includes/comments.html +5 -0
  19. data/_includes/footer.html +1 -1
  20. data/_includes/head.html +35 -20
  21. data/_includes/js-selector.html +43 -11
  22. data/_includes/jsdelivr-combine.html +32 -0
  23. data/_includes/mermaid.html +31 -3
  24. data/_includes/mode-toggle.html +49 -65
  25. data/_includes/post-sharing.html +2 -2
  26. data/_includes/read-time.html +3 -3
  27. data/_includes/refactor-content.html +160 -36
  28. data/_includes/related-posts.html +1 -1
  29. data/_includes/search-loader.html +1 -1
  30. data/_includes/search-results.html +0 -8
  31. data/_includes/sidebar.html +16 -17
  32. data/_includes/timeago.html +11 -23
  33. data/_includes/toc.html +16 -0
  34. data/_includes/topbar.html +2 -3
  35. data/_includes/trending-tags.html +14 -0
  36. data/_includes/update-list.html +16 -0
  37. data/_layouts/archives.html +5 -7
  38. data/_layouts/category.html +3 -5
  39. data/_layouts/default.html +10 -4
  40. data/_layouts/home.html +14 -11
  41. data/_layouts/page.html +47 -22
  42. data/_layouts/post.html +128 -127
  43. data/_layouts/tag.html +3 -5
  44. data/_sass/addon/commons.scss +276 -290
  45. data/_sass/addon/module.scss +67 -31
  46. data/_sass/addon/syntax.scss +90 -66
  47. data/_sass/addon/variables.scss +7 -7
  48. data/_sass/colors/dark-syntax.scss +4 -4
  49. data/_sass/colors/dark-typography.scss +21 -9
  50. data/_sass/colors/light-syntax.scss +9 -4
  51. data/_sass/colors/light-typography.scss +18 -6
  52. data/_sass/jekyll-theme-chirpy.scss +1 -1
  53. data/_sass/layout/home.scss +6 -2
  54. data/_sass/layout/post.scss +52 -46
  55. data/_tabs/about.md +2 -2
  56. data/assets/404.html +0 -2
  57. data/assets/js/data/search.json +1 -0
  58. data/assets/js/data/swcache.js +11 -20
  59. data/assets/js/dist/categories.min.js +2 -2
  60. data/assets/js/dist/commons.min.js +2 -2
  61. data/assets/js/dist/home.min.js +2 -2
  62. data/assets/js/dist/misc.min.js +6 -0
  63. data/assets/js/dist/page.min.js +2 -2
  64. data/assets/js/dist/post.min.js +2 -2
  65. data/assets/js/dist/pvreport.min.js +2 -2
  66. metadata +16 -6
  67. data/_includes/css-selector.html +0 -15
  68. data/_includes/no-zero-date.html +0 -13
  69. data/_includes/panel.html +0 -59
@@ -10,6 +10,39 @@
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: 1.25rem;
17
+
18
+ &:focus {
19
+ outline: none; /* avoid outline in Safari */
20
+ }
21
+ }
22
+ }
23
+
24
+ %anchor {
25
+ .anchor {
26
+ font-size: 80%;
27
+ }
28
+
29
+ @media (hover: hover) {
30
+ .anchor {
31
+ visibility: hidden;
32
+ opacity: 0;
33
+ transition: opacity 0.25s ease-in, visibility 0s ease-in 0.25s;
34
+ }
35
+
36
+ &:hover {
37
+ .anchor {
38
+ visibility: visible;
39
+ opacity: 1;
40
+ transition: opacity 0.25s ease-in, visibility 0s ease-in 0s;
41
+ }
42
+ }
43
+ }
44
+ }
45
+
13
46
  %tag-hover {
14
47
  background: var(--tag-hover);
15
48
  transition: background 0.35s ease-in-out;
@@ -39,30 +72,31 @@
39
72
  transition: color 0.35s ease-in-out;
40
73
  }
41
74
 
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
- }
75
+ %no-cursor {
76
+ user-select: none;
51
77
  }
52
78
 
53
- %anchor {
54
- padding-top: 3.5rem;
55
- margin-top: -2.5rem;
79
+ %no-bottom-border {
80
+ border-bottom: none;
56
81
  }
57
82
 
58
83
  %cursor-pointer {
59
84
  cursor: pointer;
60
85
  }
61
86
 
62
- /* ---------- scss mixin --------- */
87
+ %normal-font-style {
88
+ font-style: normal;
89
+ }
63
90
 
64
- @mixin no-text-decoration {
65
- text-decoration: none;
91
+ %img-caption {
92
+ + em {
93
+ display: block;
94
+ text-align: center;
95
+ font-style: normal;
96
+ font-size: 80%;
97
+ padding: 0;
98
+ color: #6d6c6c;
99
+ }
66
100
  }
67
101
 
68
102
  %sidebar-links {
@@ -70,6 +104,12 @@
70
104
  user-select: none;
71
105
  }
72
106
 
107
+ /* ---------- scss mixin --------- */
108
+
109
+ @mixin no-text-decoration {
110
+ text-decoration: none;
111
+ }
112
+
73
113
  @mixin ml-mr($value) {
74
114
  margin-left: $value;
75
115
  margin-right: $value;
@@ -84,28 +124,12 @@
84
124
  opacity: 0.6;
85
125
  }
86
126
 
87
- @mixin semi-bold {
88
- font-weight: 600;
89
- }
90
-
91
127
  @mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) {
92
128
  color: $color;
93
129
  font-size: $font-size;
94
130
  font-weight: $font-weight;
95
131
  }
96
132
 
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
133
  @mixin align-center {
110
134
  position: relative;
111
135
  left: 50%;
@@ -113,3 +137,15 @@
113
137
  -ms-transform: translateX(-50%);
114
138
  transform: translateX(-50%);
115
139
  }
140
+
141
+ @mixin prompt($type, $fw-icon, $icon-weight: 900) {
142
+ &.prompt-#{$type} {
143
+ background-color: var(--prompt-#{$type}-bg);
144
+
145
+ &::before {
146
+ content: $fw-icon;
147
+ color: var(--prompt-#{$type}-icon-color);
148
+ font-weight: $icon-weight;
149
+ }
150
+ }
151
+ }
@@ -5,23 +5,27 @@
5
5
  @import "colors/light-syntax";
6
6
  @import "colors/dark-syntax";
7
7
 
8
- html:not([mode]),
9
- html[mode=light] {
10
- @include light-syntax;
11
- }
12
-
13
- html[mode=dark] {
14
- @include dark-syntax;
15
- }
8
+ html {
9
+ @media (prefers-color-scheme: light) {
10
+ &:not([data-mode]),
11
+ [data-mode=light] {
12
+ @include light-syntax;
13
+ }
16
14
 
17
- @media (prefers-color-scheme: dark) {
18
- html:not([mode]),
19
- html[mode=dark] {
20
- @include dark-syntax;
15
+ &[data-mode=dark] {
16
+ @include dark-syntax;
17
+ }
21
18
  }
22
19
 
23
- html[mode=light] {
24
- @include light-syntax;
20
+ @media (prefers-color-scheme: dark) {
21
+ &:not([data-mode]),
22
+ &[data-mode=dark] {
23
+ @include dark-syntax;
24
+ }
25
+
26
+ &[data-mode=light] {
27
+ @include light-syntax;
28
+ }
25
29
  }
26
30
  }
27
31
 
@@ -38,13 +42,8 @@ $code-radius: 6px;
38
42
  }
39
43
 
40
44
  %code-snippet-padding {
41
- padding: 1.2rem;
42
- }
43
-
44
- div > pre {
45
- @extend %code-snippet-bg;
46
- @extend %code-snippet-radius;
47
- @extend %code-snippet-padding;
45
+ padding-left: 1rem;
46
+ padding-right: 1.5rem;
48
47
  }
49
48
 
50
49
  .highlighter-rouge {
@@ -65,6 +64,8 @@ div > pre {
65
64
  }
66
65
 
67
66
  overflow: auto;
67
+ padding-top: 0.5rem;
68
+ padding-bottom: 1rem;
68
69
 
69
70
  pre {
70
71
  margin-bottom: 0;
@@ -74,20 +75,12 @@ div > pre {
74
75
  }
75
76
 
76
77
  table {
77
- padding: 0;
78
- border: 0;
79
-
80
78
  td pre {
81
79
  overflow: visible; /* Fixed iOS safari overflow-x */
82
80
  word-break: normal; /* Fixed iOS safari linenos code break */
83
81
  }
84
82
  }
85
83
 
86
- td {
87
- padding: 0;
88
- border: 0;
89
- }
90
-
91
84
  .lineno {
92
85
  padding-right: 0.5rem;
93
86
  min-width: 2.2rem;
@@ -106,7 +99,7 @@ div > pre {
106
99
  user-select: none;
107
100
  }
108
101
 
109
- } //.highlight
102
+ } /* .highlight */
110
103
 
111
104
  code {
112
105
  -webkit-hyphens: none;
@@ -121,25 +114,38 @@ code {
121
114
  background-color: var(--inline-code-bg);
122
115
  }
123
116
 
124
- @at-root a > &.highlighter-rouge {
125
- padding-bottom: 0; // show link's underlinke
117
+ &.filepath {
118
+ background-color: inherit;
119
+ color: var(--filepath-text-color);
120
+ font-weight: 600;
121
+ padding: 0;
122
+ }
123
+
124
+ a > &.highlighter-rouge {
125
+ padding-bottom: 0; /* show link's underlinke */
126
126
  color: inherit;
127
127
  }
128
128
 
129
- @at-root a:hover > &.highlighter-rouge {
129
+ a:hover > &.highlighter-rouge {
130
130
  border-bottom: none;
131
131
  }
132
132
 
133
- blockquote &.highlighter-rouge {
133
+ blockquote & {
134
134
  color: inherit;
135
135
  }
136
+
137
+ .highlight > & {
138
+ color: transparent;
139
+ }
136
140
  }
137
141
 
138
142
  td.rouge-code {
139
- padding: 1.2rem 1.5rem 1.2rem 1rem;
143
+ @extend %code-snippet-padding;
140
144
 
141
- // Prevent some browser extends from
142
- // changing the URL string of code block.
145
+ /*
146
+ Prevent some browser extends from
147
+ changing the URL string of code block.
148
+ */
143
149
  a {
144
150
  color: inherit !important;
145
151
  border-bottom: none !important;
@@ -160,62 +166,80 @@ div {
160
166
  }
161
167
 
162
168
  td.rouge-code {
163
- @extend %code-snippet-padding;
169
+ padding-left: 1.5rem;
164
170
  }
165
171
  }
166
172
  }
167
173
 
168
174
  .code-header {
169
- background: var(--code-header-bg);
175
+ @extend %no-cursor;
176
+
177
+ $code-header-height: 2.25rem;
178
+
170
179
  border-top-left-radius: $code-radius;
171
180
  border-top-right-radius: $code-radius;
172
181
  display: flex;
173
182
  justify-content: space-between;
174
183
  align-items: center;
175
- line-height: 1.85rem;
176
-
177
- // icons
178
- i {
179
- font-size: 1rem;
180
- color: var(--lang-badge-muted-color);
181
-
182
- &.small {
183
- font-size: 70%;
184
- }
184
+ height: $code-header-height;
185
+
186
+ &::before {
187
+ $dot-size: 0.75rem;
188
+ $dot-margin: 0.5rem;
189
+
190
+ content: "";
191
+ display: inline-block;
192
+ margin-left: 1rem;
193
+ width: $dot-size;
194
+ height: $dot-size;
195
+ border-radius: 50%;
196
+ background-color: var(--code-header-muted-color);
197
+ box-shadow:
198
+ ($dot-size + $dot-margin) 0 0 var(--code-header-muted-color),
199
+ ($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
185
200
  }
186
201
 
187
- // the label block
202
+ /* the label block */
188
203
  span {
189
- padding-left: 0.35rem;
190
-
191
- &::after {
192
- content: attr(text-data);
193
- font-size: 0.85rem;
194
- font-weight: 600;
195
- color: var(--lang-badge-color);
196
- }
197
-
204
+ /* label icon */
198
205
  i {
199
- margin: 0 0.5rem;
206
+ font-size: 1rem;
207
+ margin-right: 0.4rem;
208
+ color: var(--code-header-icon-color);
209
+
210
+ &.small {
211
+ font-size: 70%;
212
+ }
200
213
  }
201
214
 
202
215
  @at-root [file] #{&} > i {
203
216
  position: relative;
204
- top: 1px; // center the file icon
205
- margin-left: 0.25rem;
217
+ top: 1px; /* center the file icon */
206
218
  }
207
219
 
220
+ /* label text */
221
+ &::after {
222
+ content: attr(data-label-text);
223
+ font-size: 0.85rem;
224
+ font-weight: 600;
225
+ color: var(--code-header-text-color);
226
+ }
208
227
  }
209
228
 
210
- // clipboard
229
+ /* clipboard */
211
230
  button {
212
- border: 1px solid var(--code-header-bg);
231
+ @extend %cursor-pointer;
232
+
233
+ border: 1px solid transparent;
213
234
  border-radius: $code-radius;
235
+ height: $code-header-height;
236
+ width: $code-header-height;
214
237
  padding: 0;
215
- width: 1.95rem;
216
238
  background-color: inherit;
217
239
 
218
- @extend %cursor-pointer;
240
+ i {
241
+ color: var(--code-header-icon-color);
242
+ }
219
243
 
220
244
  &[timeout] {
221
245
  &:hover {
@@ -4,30 +4,30 @@
4
4
 
5
5
  /* sidebar */
6
6
 
7
- $sidebar-width: 260px !default; // the basic width
8
- $sidebar-width-small: 210px !default; // screen width: >= 850px, <= 1199px (iPad landscape)
9
- $sidebar-width-large: 350px !default; // screen width: >= 1650px
7
+ $sidebar-width: 260px !default; /* the basic width */
8
+ $sidebar-width-small: 210px !default; /* screen width: >= 850px, <= 1199px (iPad landscape) */
9
+ $sidebar-width-large: 350px !default; /* screen width: >= 1650px */
10
10
 
11
11
  /* tabs of sidebar */
12
12
 
13
- $tab-count: 5 !default; // backward compatible (version <= 4.0.2)
13
+ $tab-count: 5 !default; /* backward compatible (version <= 4.0.2) */
14
14
  $tab-height: 3rem !default;
15
15
  $tab-cursor-height: 1.6rem !default;
16
16
 
17
- $cursor-width: 2px !default; // the cursor width of the selected tab
17
+ $cursor-width: 2px !default; /* the cursor width of the selected tab */
18
18
 
19
19
  /* other framework sizes */
20
20
 
21
21
  $topbar-height: 3rem !default;
22
22
 
23
23
  $footer-height: 5rem !default;
24
- $footer-height-mobile: 6rem !default; // screen width: <= 576px
24
+ $footer-height-mobile: 6rem !default; /* screen width: <= 576px */
25
25
 
26
26
  $main-content-max-width: 1150px !default;
27
27
 
28
28
  $panel-max-width: 300px !default;
29
29
 
30
- $post-extend-min-height: 35rem !default;
30
+ $bottom-min-height: 35rem !default;
31
31
 
32
32
  /* syntax highlight */
33
33
 
@@ -74,15 +74,15 @@
74
74
  --highlighter-rouge-color: #de6b18;
75
75
  --highlight-lineno-color: #6c6c6d;
76
76
  --inline-code-bg: #272822;
77
- --code-header-bg: #353535;
78
- --lang-badge-color: #858586;
79
- --lang-badge-muted-color: #6c6c6d;
77
+ --code-header-text-color: #6a6a6a;
78
+ --code-header-muted-color: rgb(60 60 60);
79
+ --code-header-icon-color: rgb(86 86 86);
80
80
  --clipboard-checked-color: #2bcc2b;
81
+ --filepath-text-color: #bdbdbd;
81
82
 
82
83
  .highlight {
83
84
  .gp { color: #818c96; }
84
85
  }
85
86
 
86
87
  pre { color: #bfbfbf; } /* override Bootstrap */
87
- kbd { background-color: black; }
88
88
  }
@@ -8,8 +8,6 @@
8
8
  --mask-bg: rgb(68, 69, 70);
9
9
  --main-wrapper-bg: rgb(27, 27, 30);
10
10
  --main-border-color: rgb(44, 45, 45);
11
- --scrollbar-track-bg: rgba(0, 0, 0, 0.3);
12
- --scrollbar-thumb-bg: rgb(173 171 171 / 50%);
13
11
 
14
12
  /* Common color */
15
13
  --text-color: rgb(175, 176, 177);
@@ -67,6 +65,19 @@
67
65
  --card-bg: rgb(39, 40, 43);
68
66
  --card-border-color: rgb(53, 53, 60);
69
67
  --card-box-shadow: var(--main-wrapper-bg);
68
+ --preview-img-bg: radial-gradient(circle, rgb(22 22 24) 0%, rgb(32 32 32) 100%);
69
+ --kbd-wrap-color: #6a6a6a;
70
+ --kbd-text-color: #d3d3d3;
71
+ --kbd-bg-color: #242424;
72
+ --prompt-text-color: rgb(216 212 212 / 75%);
73
+ --prompt-tip-bg: rgba(77, 187, 95, 0.2);
74
+ --prompt-tip-icon-color: rgb(5 223 5 / 68%);
75
+ --prompt-info-bg: rgb(7 59 104 / 80%);
76
+ --prompt-info-icon-color: #0075d1;
77
+ --prompt-warning-bg: rgb(90 69 3 / 95%);
78
+ --prompt-warning-icon-color: rgb(255 165 0 / 80%);
79
+ --prompt-danger-bg: rgb(86 28 8 / 80%);
80
+ --prompt-danger-icon-color: #cd0202;
70
81
 
71
82
  /* tags */
72
83
  --tag-border: rgb(59, 79, 88);
@@ -84,12 +95,8 @@
84
95
  --timeline-color: rgb(63, 65, 68);
85
96
  --timeline-year-dot-color: var(--timeline-color);
86
97
 
87
- /* Footer */
88
- --footer-bg-color: var(--main-wrapper-bg);
89
- --footer-link: rgb(171, 171, 171);
90
-
91
- .post-content img {
92
- filter: brightness(90%);
98
+ .post img[data-src] {
99
+ filter: brightness(95%);
93
100
  }
94
101
 
95
102
  hr {
@@ -139,7 +146,12 @@
139
146
  rgb(39, 39, 45),
140
147
  rgb(26, 26, 30)
141
148
  );
149
+ }
150
+
151
+ color-scheme: dark;
142
152
 
153
+ #disqus_thread {
154
+ color-scheme: none;
143
155
  }
144
156
 
145
- } // dark-scheme
157
+ } /* dark-scheme */
@@ -71,9 +71,14 @@
71
71
  --highlighter-rouge-color: #2f2f2f;
72
72
  --highlight-lineno-color: #c2c6cc;
73
73
  --inline-code-bg: #f3f3f3;
74
- --code-header-bg: #eaeaea;
75
- --lang-badge-color: rgb(128 128 128 / 87%);
76
- --lang-badge-muted-color: rgb(128 128 128 / 36%);
74
+ --code-header-text-color: #a3a3b1;
75
+ --code-header-muted-color: #ebebeb;
76
+ --code-header-icon-color: #d1d1d1;
77
77
  --clipboard-checked-color: #43c743;
78
78
 
79
- } // light-syntax
79
+ [class^=prompt-] {
80
+ --inline-code-bg: #fbfafa;
81
+ --highlighter-rouge-color: rgb(82 82 82);
82
+ }
83
+
84
+ } /* light-syntax */
@@ -8,8 +8,6 @@
8
8
  --mask-bg: #c1c3c5;
9
9
  --main-wrapper-bg: white;
10
10
  --main-border-color: #f3f3f3;
11
- --scrollbar-track-bg: rgba(0, 0, 0, 0.3);
12
- --scrollbar-thumb-bg: rgba(0, 0, 0, 0.3);
13
11
 
14
12
  /* Common color */
15
13
  --text-color: #34343c;
@@ -66,6 +64,23 @@
66
64
  --tb-odd-bg: #fbfcfd;
67
65
  --tb-border-color: #eaeaea;
68
66
  --dash-color: silver;
67
+ --preview-img-bg: radial-gradient(circle, rgb(255 255 255) 0%, rgb(249 249 249) 100%);
68
+ --kbd-wrap-color: #bdbdbd;
69
+ --kbd-text-color: var(--text-color);
70
+ --kbd-bg-color: white;
71
+ --prompt-text-color: rgb(46 46 46 / 77%);
72
+ --prompt-tip-bg: rgb(123 247 144 / 20%);
73
+ --prompt-tip-icon-color: #03b303;
74
+ --prompt-info-bg: #e1f5fe;
75
+ --prompt-info-icon-color: #0070cb;
76
+ --prompt-warning-bg: rgb(255 243 205);
77
+ --prompt-warning-icon-color: #ef9c03;
78
+ --prompt-danger-bg: rgb(248 215 218 / 56%);
79
+ --prompt-danger-icon-color: #df3c30;
80
+
81
+ [class^=prompt-] {
82
+ --link-underline-color: rgb(219 216 216);
83
+ }
69
84
 
70
85
  /* Categories */
71
86
  --categories-hover-bg: var(--btn-border-color);
@@ -76,7 +91,4 @@
76
91
  --timeline-node-bg: #c2c6cc;
77
92
  --timeline-year-dot-color: #ffffff;
78
93
 
79
- /* Footer */
80
- --footer-bg-color: #ffffff;
81
- --footer-link: #424242;
82
- } // light-scheme
94
+ } /* light-scheme */
@@ -1,7 +1,7 @@
1
1
  /*!
2
2
  * The styles for Jekyll theme Chirpy
3
3
  *
4
- * Chirpy v4.3.4 (https://github.com/cotes2020/jekyll-theme-chirpy)
4
+ * Chirpy v5.1.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
5
5
  * © 2019 Cotes Chung
6
6
  * MIT Licensed
7
7
  */
@@ -74,10 +74,14 @@
74
74
  .post-meta {
75
75
  i {
76
76
  font-size: 0.73rem;
77
+
78
+ &:not(:first-child) {
79
+ margin-left: 1.2rem;
80
+ }
77
81
  }
78
82
 
79
- span:not(:last-child) {
80
- margin-right: 1.2rem;
83
+ em {
84
+ @extend %normal-font-style;
81
85
  }
82
86
  }
83
87