jekyll-theme-chirpy 4.3.1 → 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 (53) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +32 -32
  3. data/_config.yml +12 -8
  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/language-alias.html +1 -3
  14. data/_includes/mermaid.html +28 -0
  15. data/_includes/mode-toggle.html +48 -65
  16. data/_includes/read-time.html +3 -3
  17. data/_includes/refactor-content.html +109 -35
  18. data/_includes/related-posts.html +1 -1
  19. data/_includes/search-loader.html +1 -1
  20. data/_includes/search-results.html +0 -8
  21. data/_includes/sidebar.html +10 -11
  22. data/_includes/timeago.html +11 -12
  23. data/_includes/toc.html +16 -0
  24. data/_includes/topbar.html +1 -1
  25. data/_includes/trending-tags.html +14 -0
  26. data/_includes/update-list.html +16 -0
  27. data/_layouts/default.html +6 -2
  28. data/_layouts/home.html +12 -9
  29. data/_layouts/page.html +45 -22
  30. data/_layouts/post.html +128 -127
  31. data/_sass/addon/commons.scss +198 -187
  32. data/_sass/addon/module.scss +48 -28
  33. data/_sass/addon/syntax.scss +56 -43
  34. data/_sass/addon/variables.scss +1 -1
  35. data/_sass/colors/dark-syntax.scss +3 -4
  36. data/_sass/colors/dark-typography.scss +23 -15
  37. data/_sass/colors/light-syntax.scss +3 -3
  38. data/_sass/colors/light-typography.scss +4 -5
  39. data/_sass/jekyll-theme-chirpy.scss +1 -1
  40. data/_sass/layout/archives.scss +5 -1
  41. data/_sass/layout/category-tag.scss +3 -2
  42. data/_sass/layout/home.scss +15 -4
  43. data/_sass/layout/post.scss +70 -46
  44. data/_sass/layout/tags.scss +1 -0
  45. data/assets/js/data/search.json +1 -1
  46. data/assets/js/dist/categories.min.js +2 -2
  47. data/assets/js/dist/commons.min.js +2 -2
  48. data/assets/js/dist/home.min.js +2 -2
  49. data/assets/js/dist/page.min.js +2 -2
  50. data/assets/js/dist/post.min.js +2 -2
  51. data/assets/js/dist/pvreport.min.js +2 -2
  52. metadata +12 -9
  53. data/_includes/panel.html +0 -59
@@ -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%;
@@ -38,13 +38,8 @@ $code-radius: 6px;
38
38
  }
39
39
 
40
40
  %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;
41
+ padding-left: 1rem;
42
+ padding-right: 1.5rem;
48
43
  }
49
44
 
50
45
  .highlighter-rouge {
@@ -65,6 +60,8 @@ div > pre {
65
60
  }
66
61
 
67
62
  overflow: auto;
63
+ padding-top: 0.5rem;
64
+ padding-bottom: 1rem;
68
65
 
69
66
  pre {
70
67
  margin-bottom: 0;
@@ -74,19 +71,12 @@ div > pre {
74
71
  }
75
72
 
76
73
  table {
77
- padding: 0;
78
- border: 0;
79
74
  td pre {
80
75
  overflow: visible; /* Fixed iOS safari overflow-x */
81
76
  word-break: normal; /* Fixed iOS safari linenos code break */
82
77
  }
83
78
  }
84
79
 
85
- td {
86
- padding: 0;
87
- border: 0;
88
- }
89
-
90
80
  .lineno {
91
81
  padding-right: 0.5rem;
92
82
  min-width: 2.2rem;
@@ -120,22 +110,26 @@ code {
120
110
  background-color: var(--inline-code-bg);
121
111
  }
122
112
 
123
- @at-root a > &.highlighter-rouge {
113
+ a > &.highlighter-rouge {
124
114
  padding-bottom: 0; // show link's underlinke
125
115
  color: inherit;
126
116
  }
127
117
 
128
- @at-root a:hover > &.highlighter-rouge {
118
+ a:hover > &.highlighter-rouge {
129
119
  border-bottom: none;
130
120
  }
131
121
 
132
122
  blockquote &.highlighter-rouge {
133
123
  color: inherit;
134
124
  }
125
+
126
+ .highlight > & {
127
+ color: transparent;
128
+ }
135
129
  }
136
130
 
137
131
  td.rouge-code {
138
- padding: 1.2rem 1.5rem 1.2rem 1rem;
132
+ @extend %code-snippet-padding;
139
133
 
140
134
  // Prevent some browser extends from
141
135
  // changing the URL string of code block.
@@ -157,63 +151,82 @@ div {
157
151
  pre.lineno {
158
152
  display: none;
159
153
  }
154
+
160
155
  td.rouge-code {
161
- @extend %code-snippet-padding;
156
+ padding-left: 1.5rem;
162
157
  }
163
158
  }
164
159
  }
165
160
 
166
161
  .code-header {
167
- background: var(--code-header-bg);
162
+ @extend %no-cursor;
163
+
164
+ $code-header-height: 2.25rem;
165
+
168
166
  border-top-left-radius: $code-radius;
169
167
  border-top-right-radius: $code-radius;
170
168
  display: flex;
171
169
  justify-content: space-between;
172
170
  align-items: center;
173
- line-height: 1.85rem;
174
-
175
- // icons
176
- i {
177
- font-size: 1rem;
178
- color: var(--lang-badge-muted-color);
179
-
180
- &.small {
181
- font-size: 70%;
182
- }
171
+ height: $code-header-height;
172
+
173
+ &::before {
174
+ $dot-size: 0.75rem;
175
+ $dot-margin: 0.5rem;
176
+
177
+ content: "";
178
+ display: inline-block;
179
+ margin-left: 1rem;
180
+ width: $dot-size;
181
+ height: $dot-size;
182
+ border-radius: 50%;
183
+ background-color: var(--code-header-muted-color);
184
+ box-shadow:
185
+ ($dot-size + $dot-margin) 0 0 var(--code-header-muted-color),
186
+ ($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
183
187
  }
184
188
 
185
189
  // the label block
186
190
  span {
187
- padding-left: 0.35rem;
188
-
189
- &::after {
190
- content: attr(text-data);
191
- font-size: 0.85rem;
192
- font-weight: 600;
193
- color: var(--lang-badge-color);
194
- }
195
-
191
+ // label icon
196
192
  i {
197
- margin: 0 0.5rem;
193
+ font-size: 1rem;
194
+ margin-right: 0.4rem;
195
+ color: var(--code-header-icon-color);
196
+
197
+ &.small {
198
+ font-size: 70%;
199
+ }
198
200
  }
199
201
 
200
202
  @at-root [file] #{&} > i {
201
203
  position: relative;
202
204
  top: 1px; // center the file icon
203
- margin-left: 0.25rem;
204
205
  }
205
206
 
207
+ // label text
208
+ &::after {
209
+ content: attr(label-text);
210
+ font-size: 0.85rem;
211
+ font-weight: 600;
212
+ color: var(--code-header-text-color);
213
+ }
206
214
  }
207
215
 
208
216
  // clipboard
209
217
  button {
210
- border: 1px solid var(--code-header-bg);
218
+ @extend %cursor-pointer;
219
+
220
+ border: 1px solid transparent;
211
221
  border-radius: $code-radius;
222
+ height: $code-header-height;
223
+ width: $code-header-height;
212
224
  padding: 0;
213
- width: 1.95rem;
214
225
  background-color: inherit;
215
226
 
216
- @extend %cursor-pointer;
227
+ i {
228
+ color: var(--code-header-icon-color);
229
+ }
217
230
 
218
231
  &[timeout] {
219
232
  &:hover {
@@ -27,7 +27,7 @@ $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,9 +74,9 @@
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
81
 
82
82
  .highlight {
@@ -84,5 +84,4 @@
84
84
  }
85
85
 
86
86
  pre { color: #bfbfbf; } /* override Bootstrap */
87
- kbd { background-color: black; }
88
87
  }
@@ -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,10 @@
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;
70
72
 
71
73
  /* tags */
72
74
  --tag-border: rgb(59, 79, 88);
@@ -84,12 +86,8 @@
84
86
  --timeline-color: rgb(63, 65, 68);
85
87
  --timeline-year-dot-color: var(--timeline-color);
86
88
 
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%);
89
+ .post img[data-src] {
90
+ filter: brightness(95%);
93
91
  }
94
92
 
95
93
  hr {
@@ -116,11 +114,13 @@
116
114
  .card-header {
117
115
  background-color: var(--card-header-bg);
118
116
  }
117
+
119
118
  .list-group-item {
120
119
  border-left: none;
121
120
  border-right: none;
122
121
  padding-left: 2rem;
123
122
  border-color: var(--categories-border);
123
+
124
124
  &:last-child {
125
125
  border-bottom-color: var(--card-bg);
126
126
  }
@@ -128,13 +128,21 @@
128
128
  }
129
129
 
130
130
  #archives li:nth-child(odd) {
131
- background-image: linear-gradient(
132
- to left,
133
- rgb(26, 26, 30),
134
- rgb(39, 39, 45),
135
- rgb(39, 39, 45),
136
- rgb(39, 39, 45),
137
- rgb(26, 26, 30));
131
+ background-image:
132
+ linear-gradient(
133
+ to left,
134
+ rgb(26, 26, 30),
135
+ rgb(39, 39, 45),
136
+ rgb(39, 39, 45),
137
+ rgb(39, 39, 45),
138
+ rgb(26, 26, 30)
139
+ );
140
+ }
141
+
142
+ color-scheme: dark;
143
+
144
+ #disqus_thread {
145
+ color-scheme: none;
138
146
  }
139
147
 
140
148
  } // dark-scheme
@@ -71,9 +71,9 @@
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
79
  } // 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,10 @@
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;
69
71
 
70
72
  /* Categories */
71
73
  --categories-hover-bg: var(--btn-border-color);
@@ -76,7 +78,4 @@
76
78
  --timeline-node-bg: #c2c6cc;
77
79
  --timeline-year-dot-color: #ffffff;
78
80
 
79
- /* Footer */
80
- --footer-bg-color: #ffffff;
81
- --footer-link: #424242;
82
81
  } // light-scheme
@@ -1,7 +1,7 @@
1
1
  /*!
2
2
  * The styles for Jekyll theme Chirpy
3
3
  *
4
- * Chirpy v4.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
4
+ * Chirpy v5.0.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
5
5
  * © 2019 Cotes Chung
6
6
  * MIT Licensed
7
7
  */
@@ -41,6 +41,7 @@
41
41
  &:not(:first-child) {
42
42
  position: relative;
43
43
  left: 4px;
44
+
44
45
  &::after {
45
46
  left: 67px;
46
47
  }
@@ -98,6 +99,7 @@
98
99
  .date {
99
100
  white-space: nowrap;
100
101
  display: inline-block;
102
+
101
103
  &.month {
102
104
  width: 1.4rem;
103
105
  text-align: center;
@@ -120,6 +122,7 @@
120
122
  z-index: 1;
121
123
  }
122
124
  }
125
+
123
126
  &.day {
124
127
  font-size: 85%;
125
128
  font-family: 'Lato', sans-serif;
@@ -127,7 +130,7 @@
127
130
  margin-right: -2px;
128
131
  width: 1.2rem;
129
132
  position: relative;
130
- left: -.15rem;
133
+ left: -0.15rem;
131
134
  }
132
135
  } // #archives .date
133
136
 
@@ -136,6 +139,7 @@
136
139
  @media all and (max-width: 576px) {
137
140
  #archives {
138
141
  margin-top: -1rem;
142
+
139
143
  ul {
140
144
  letter-spacing: 0;
141
145
  }
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  .dash {
6
- margin: 0 .5rem .6rem .5rem;
6
+ margin: 0 0.5rem 0.6rem 0.5rem;
7
7
  border-bottom: 2px dotted var(--dash-color);
8
8
  }
9
9
 
@@ -60,8 +60,9 @@
60
60
  #page-tag {
61
61
  ul > li {
62
62
  &::before {
63
- margin: 0 .5rem;
63
+ margin: 0 0.5rem;
64
64
  }
65
+
65
66
  > a {
66
67
  white-space: nowrap;
67
68
  overflow: hidden;
@@ -22,24 +22,29 @@
22
22
  border-radius: 50%;
23
23
  border: 1px solid var(--btn-paginator-border-color);
24
24
  background-color: var(--button-bg);
25
+
25
26
  &:hover {
26
27
  background-color: var(--btn-paginator-hover-color);
27
28
  }
28
29
  }
30
+
29
31
  &.active {
30
32
  .page-link {
31
33
  background-color: var(--btn-paginator-hover-color);
32
34
  color: var(--btn-text-color);
33
35
  }
34
36
  }
37
+
35
38
  &.disabled {
36
39
  cursor: not-allowed;
40
+
37
41
  .page-link {
38
42
  color: rgba(108, 117, 125, 0.57);
39
43
  border-color: var(--btn-paginator-border-color);
40
44
  background-color: var(--button-bg);
41
45
  }
42
46
  }
47
+
43
48
  &:first-child .page-link,
44
49
  &:last-child .page-link {
45
50
  border-radius: 50%;
@@ -69,9 +74,14 @@
69
74
  .post-meta {
70
75
  i {
71
76
  font-size: 0.73rem;
77
+
78
+ &:not(:first-child) {
79
+ margin-left: 1.2rem;
80
+ }
72
81
  }
73
- span:not(:last-child) {
74
- margin-right: 1.2rem;
82
+
83
+ em {
84
+ @extend %normal-font-style;
75
85
  }
76
86
  }
77
87
 
@@ -79,6 +89,7 @@
79
89
  margin-top: 0.6rem;
80
90
  margin-bottom: 0.6rem;
81
91
  color: var(--post-list-text-color);
92
+
82
93
  > p {
83
94
  /* Make preview shorter on the homepage */
84
95
  margin: 0;
@@ -96,13 +107,13 @@
96
107
  padding-left: 3px;
97
108
  color: var(--pin-color);
98
109
  }
110
+
99
111
  > span {
100
112
  display: none;
101
113
  }
102
114
  }
103
115
 
104
116
  } // .post-preview
105
-
106
117
  } // #post-list
107
118
 
108
119
  /* Hide SideBar and TOC */
@@ -122,9 +133,9 @@
122
133
 
123
134
  /* Sidebar is visible */
124
135
  @media all and (min-width: 831px) {
125
-
126
136
  #post-list {
127
137
  margin-top: 1.5rem;
138
+
128
139
  .post-preview .post-meta {
129
140
  .pin {
130
141
  background: var(--pin-bg);