jekyll-theme-chirpy 7.1.1 → 7.2.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 (72) hide show
  1. checksums.yaml +4 -4
  2. data/_data/locales/hu-HU.yml +20 -7
  3. data/_data/origin/cors.yml +4 -4
  4. data/_includes/analytics/cloudflare.html +0 -1
  5. data/_includes/analytics/fathom.html +2 -3
  6. data/_includes/analytics/google.html +1 -1
  7. data/_includes/analytics/matomo.html +6 -7
  8. data/_includes/comments/disqus.html +36 -29
  9. data/_includes/comments/giscus.html +14 -30
  10. data/_includes/comments/utterances.html +26 -37
  11. data/_includes/head.html +24 -3
  12. data/_includes/js-selector.html +3 -26
  13. data/_includes/jsdelivr-combine.html +4 -4
  14. data/_includes/search-loader.html +22 -20
  15. data/_includes/sidebar.html +1 -3
  16. data/_includes/toc-status.html +10 -0
  17. data/_includes/toc.html +4 -8
  18. data/_layouts/default.html +8 -4
  19. data/_layouts/home.html +26 -19
  20. data/_layouts/post.html +29 -2
  21. data/_sass/abstracts/_breakpoints.scss +73 -0
  22. data/_sass/abstracts/_index.scss +4 -0
  23. data/_sass/abstracts/_mixins.scss +80 -0
  24. data/_sass/{addon/module.scss → abstracts/_placeholders.scss} +22 -55
  25. data/_sass/{addon/variables.scss → abstracts/_variables.scss} +0 -4
  26. data/_sass/base/_base.scss +476 -0
  27. data/_sass/base/_index.scss +4 -0
  28. data/_sass/base/_reset.scss +41 -0
  29. data/_sass/{addon/syntax.scss → base/_syntax.scss} +46 -85
  30. data/_sass/base/_typography.scss +266 -0
  31. data/_sass/components/_buttons.scss +51 -0
  32. data/_sass/components/_index.scss +2 -0
  33. data/_sass/components/_popups.scss +172 -0
  34. data/_sass/layout/_footer.scss +36 -0
  35. data/_sass/layout/_index.scss +4 -0
  36. data/_sass/layout/_panel.scss +70 -0
  37. data/_sass/layout/_sidebar.scss +258 -0
  38. data/_sass/layout/_topbar.scss +86 -0
  39. data/_sass/main.bundle.scss +2 -2
  40. data/_sass/main.scss +4 -13
  41. data/_sass/{layout/archives.scss → pages/_archives.scss} +12 -16
  42. data/_sass/{layout/categories.scss → pages/_categories.scss} +5 -6
  43. data/_sass/{layout/category-tag.scss → pages/_category-tag.scss} +11 -20
  44. data/_sass/{layout/home.scss → pages/_home.scss} +54 -70
  45. data/_sass/pages/_index.scss +7 -0
  46. data/_sass/{layout/post.scss → pages/_post.scss} +183 -45
  47. data/_sass/pages/_search.scss +184 -0
  48. data/_sass/{layout/tags.scss → pages/_tags.scss} +7 -3
  49. data/_sass/{colors/typography-dark.scss → themes/_dark.scss} +163 -7
  50. data/_sass/themes/_light.scss +313 -0
  51. data/_sass/vendors/_bootstrap.scss +5 -0
  52. data/assets/css/jekyll-theme-chirpy.scss +1 -1
  53. data/assets/feed.xml +1 -1
  54. data/assets/js/dist/app.min.js +1 -1
  55. data/assets/js/dist/categories.min.js +2 -2
  56. data/assets/js/dist/commons.min.js +2 -2
  57. data/assets/js/dist/home.min.js +2 -2
  58. data/assets/js/dist/misc.min.js +2 -2
  59. data/assets/js/dist/page.min.js +2 -2
  60. data/assets/js/dist/post.min.js +2 -2
  61. data/assets/js/dist/sw.min.js +1 -1
  62. data/assets/js/dist/theme.min.js +4 -0
  63. metadata +35 -22
  64. data/_includes/mermaid.html +0 -62
  65. data/_includes/mode-toggle.html +0 -116
  66. data/_sass/addon/commons.scss +0 -1542
  67. data/_sass/colors/syntax-dark.scss +0 -164
  68. data/_sass/colors/syntax-light.scss +0 -210
  69. data/_sass/colors/typography-light.scss +0 -112
  70. data/_sass/dist/bootstrap.css +0 -5
  71. data/_sass/variables-hook.scss +0 -3
  72. /data/_includes/{comments.html → comment.html} +0 -0
@@ -0,0 +1,476 @@
1
+ @use '../abstracts/variables' as v;
2
+ @use '../abstracts/breakpoints' as bp;
3
+ @use '../abstracts/mixins' as mx;
4
+ @use '../abstracts/placeholders';
5
+ @use '../themes/light';
6
+ @use '../themes/dark';
7
+
8
+ :root {
9
+ font-size: 16px;
10
+ }
11
+
12
+ html {
13
+ @media (prefers-color-scheme: light) {
14
+ &:not([data-mode]),
15
+ &[data-mode='light'] {
16
+ @include light.styles;
17
+ }
18
+
19
+ &[data-mode='dark'] {
20
+ @include dark.styles;
21
+ }
22
+ }
23
+
24
+ @media (prefers-color-scheme: dark) {
25
+ &:not([data-mode]),
26
+ &[data-mode='dark'] {
27
+ @include dark.styles;
28
+ }
29
+
30
+ &[data-mode='light'] {
31
+ @include light.styles;
32
+ }
33
+ }
34
+
35
+ @include bp.lg {
36
+ overflow-y: scroll;
37
+ }
38
+ }
39
+
40
+ body {
41
+ background: var(--main-bg);
42
+ padding: env(safe-area-inset-top) env(safe-area-inset-right)
43
+ env(safe-area-inset-bottom) env(safe-area-inset-left);
44
+ color: var(--text-color);
45
+ -webkit-font-smoothing: antialiased;
46
+ font-family: v.$font-family-base;
47
+ }
48
+
49
+ h1.dynamic-title {
50
+ @include bp.lt(bp.get(lg)) {
51
+ display: none;
52
+
53
+ ~ .content {
54
+ margin-top: 2.5rem;
55
+ }
56
+ }
57
+ }
58
+
59
+ main {
60
+ &.col-12 {
61
+ @include bp.xxxl {
62
+ padding-right: 4.5rem !important;
63
+ }
64
+ }
65
+ }
66
+
67
+ .preview-img {
68
+ aspect-ratio: 40 / 21;
69
+ width: 100%;
70
+ height: 100%;
71
+ overflow: hidden;
72
+
73
+ @extend %rounded;
74
+
75
+ &:not(.no-bg) {
76
+ background: var(--img-bg);
77
+ }
78
+
79
+ img {
80
+ height: 100%;
81
+ -o-object-fit: cover;
82
+ object-fit: cover;
83
+
84
+ @extend %rounded;
85
+
86
+ @at-root #post-list & {
87
+ width: 100%;
88
+ }
89
+ }
90
+ }
91
+
92
+ .post-preview {
93
+ @extend %rounded;
94
+
95
+ border: 0;
96
+ background: var(--card-bg);
97
+ box-shadow: var(--card-shadow);
98
+
99
+ &::before {
100
+ @extend %rounded;
101
+
102
+ content: '';
103
+ width: 100%;
104
+ height: 100%;
105
+ position: absolute;
106
+ background-color: var(--card-hovor-bg);
107
+ opacity: 0;
108
+ transition: opacity 0.35s ease-in-out;
109
+ }
110
+
111
+ &:hover {
112
+ &::before {
113
+ opacity: 0.3;
114
+ }
115
+ }
116
+ }
117
+
118
+ .post-meta {
119
+ @extend %text-sm;
120
+
121
+ a {
122
+ &:not([class]):hover {
123
+ @extend %link-hover;
124
+ }
125
+ }
126
+
127
+ em {
128
+ @extend %normal-font-style;
129
+ }
130
+ }
131
+
132
+ .content {
133
+ font-size: 1.08rem;
134
+ margin-top: 2rem;
135
+ overflow-wrap: break-word;
136
+
137
+ @include bp.xl {
138
+ font-size: 1.03rem;
139
+ }
140
+
141
+ a {
142
+ &.popup {
143
+ @extend %no-cursor;
144
+ @extend %img-caption;
145
+ @include mx.mt-mb(0.5rem);
146
+
147
+ cursor: zoom-in;
148
+ }
149
+
150
+ &:not(.img-link) {
151
+ @extend %link-underline;
152
+
153
+ &:hover {
154
+ @extend %link-hover;
155
+ }
156
+ }
157
+ }
158
+
159
+ ol,
160
+ ul {
161
+ &:not([class]),
162
+ &.task-list {
163
+ -webkit-padding-start: 1.75rem;
164
+ padding-inline-start: 1.75rem;
165
+
166
+ li {
167
+ margin: 0.25rem 0;
168
+ padding-left: 0.25rem;
169
+ }
170
+
171
+ ol,
172
+ ul {
173
+ -webkit-padding-start: 1.25rem;
174
+ padding-inline-start: 1.25rem;
175
+ margin: 0.5rem 0;
176
+ }
177
+ }
178
+ }
179
+
180
+ ul.task-list {
181
+ -webkit-padding-start: 1.25rem;
182
+ padding-inline-start: 1.25rem;
183
+
184
+ li {
185
+ list-style-type: none;
186
+ padding-left: 0;
187
+
188
+ /* checkbox icon */
189
+ > i {
190
+ width: 2rem;
191
+ margin-left: -1.25rem;
192
+ color: var(--checkbox-color);
193
+
194
+ &.checked {
195
+ color: var(--checkbox-checked-color);
196
+ }
197
+ }
198
+
199
+ ul {
200
+ -webkit-padding-start: 1.75rem;
201
+ padding-inline-start: 1.75rem;
202
+ }
203
+ }
204
+
205
+ input[type='checkbox'] {
206
+ margin: 0 0.5rem 0.2rem -1.3rem;
207
+ vertical-align: middle;
208
+ }
209
+ } /* ul */
210
+
211
+ dl > dd {
212
+ margin-left: 1rem;
213
+ }
214
+
215
+ ::marker {
216
+ color: var(--text-muted-color);
217
+ }
218
+
219
+ .table-wrapper > table {
220
+ @include bp.lg {
221
+ min-width: 70%;
222
+ }
223
+ }
224
+ } /* .content */
225
+
226
+ .tag:hover {
227
+ @extend %tag-hover;
228
+ }
229
+
230
+ .post-tag {
231
+ display: inline-block;
232
+ min-width: 2rem;
233
+ text-align: center;
234
+ border-radius: 0.5rem;
235
+ border: 1px solid var(--btn-border-color);
236
+ padding: 0 0.4rem;
237
+ color: var(--text-muted-color);
238
+ line-height: 1.3rem;
239
+
240
+ &:not(:last-child) {
241
+ margin-right: 0.2rem;
242
+ }
243
+ }
244
+
245
+ .rounded-10 {
246
+ border-radius: 10px !important;
247
+ }
248
+
249
+ .img-link {
250
+ color: transparent;
251
+ display: inline-flex;
252
+ }
253
+
254
+ .shimmer {
255
+ overflow: hidden;
256
+ position: relative;
257
+ background: var(--img-bg);
258
+
259
+ &::before {
260
+ content: '';
261
+ position: absolute;
262
+ background: var(--shimmer-bg);
263
+ height: 100%;
264
+ width: 100%;
265
+ -webkit-animation: shimmer 1.3s infinite;
266
+ animation: shimmer 1.3s infinite;
267
+ }
268
+
269
+ @-webkit-keyframes shimmer {
270
+ 0% {
271
+ transform: translateX(-100%);
272
+ }
273
+
274
+ 100% {
275
+ transform: translateX(100%);
276
+ }
277
+ }
278
+
279
+ @keyframes shimmer {
280
+ 0% {
281
+ transform: translateX(-100%);
282
+ }
283
+
284
+ 100% {
285
+ transform: translateX(100%);
286
+ }
287
+ }
288
+ }
289
+
290
+ .embed-video {
291
+ width: 100%;
292
+ height: 100%;
293
+ margin-bottom: 1rem;
294
+ aspect-ratio: 16 / 9;
295
+
296
+ @extend %rounded;
297
+
298
+ &.twitch {
299
+ aspect-ratio: 310 / 189;
300
+ }
301
+
302
+ &.file {
303
+ display: block;
304
+ width: auto;
305
+ height: auto;
306
+ max-width: 100%;
307
+ max-height: 100%;
308
+ margin: auto;
309
+ margin-bottom: 0;
310
+ }
311
+
312
+ @extend %img-caption;
313
+ }
314
+
315
+ .embed-audio {
316
+ width: 100%;
317
+ display: block;
318
+
319
+ @extend %img-caption;
320
+ }
321
+
322
+ /* --- Effects classes --- */
323
+
324
+ .flex-grow-1 {
325
+ flex-grow: 1 !important;
326
+ }
327
+
328
+ .btn-box-shadow {
329
+ box-shadow: var(--card-shadow);
330
+ }
331
+
332
+ /* overwrite bootstrap muted */
333
+ .text-muted {
334
+ color: var(--text-muted-color) !important;
335
+ }
336
+
337
+ /* Overwrite bootstrap tooltip */
338
+ .tooltip-inner {
339
+ font-size: 0.7rem;
340
+ max-width: 220px;
341
+ text-align: left;
342
+ }
343
+
344
+ /* Overwrite bootstrap outline button */
345
+ .btn.btn-outline-primary {
346
+ &:not(.disabled):hover {
347
+ border-color: #007bff !important;
348
+ }
349
+ }
350
+
351
+ .disabled {
352
+ color: rgb(206, 196, 196);
353
+ pointer-events: auto;
354
+ cursor: not-allowed;
355
+ }
356
+
357
+ .hide-border-bottom {
358
+ border-bottom: none !important;
359
+ }
360
+
361
+ .input-focus {
362
+ box-shadow: none;
363
+ border-color: var(--input-focus-border-color) !important;
364
+ background: center !important;
365
+ transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
366
+ }
367
+
368
+ .left {
369
+ float: left;
370
+ margin: 0.75rem 1rem 1rem 0;
371
+ }
372
+
373
+ .right {
374
+ float: right;
375
+ margin: 0.75rem 0 1rem 1rem;
376
+ }
377
+
378
+ /* --- Overriding --- */
379
+
380
+ /* mermaid */
381
+ .mermaid {
382
+ text-align: center;
383
+ }
384
+
385
+ /* MathJax */
386
+ mjx-container {
387
+ overflow-y: hidden;
388
+ min-width: auto !important;
389
+ }
390
+
391
+ @media (hover: hover) {
392
+ #sidebar ul > li:last-child::after {
393
+ transition: top 0.5s ease;
394
+ }
395
+
396
+ .nav-link {
397
+ transition: background-color 0.3s ease-in-out;
398
+ }
399
+
400
+ .post-preview {
401
+ transition: background-color 0.35s ease-in-out;
402
+ }
403
+ }
404
+
405
+ #mask {
406
+ inset: 0 0 0 0;
407
+ }
408
+
409
+ #main-wrapper {
410
+ position: relative;
411
+
412
+ @include mx.pl-pr(0);
413
+
414
+ @include bp.lt(bp.get(lg)) {
415
+ @include mx.slide;
416
+ }
417
+
418
+ @include bp.lg {
419
+ margin-left: v.$sidebar-width;
420
+ }
421
+
422
+ @include bp.xxxl {
423
+ margin-left: v.$sidebar-width-large;
424
+ }
425
+
426
+ > .container {
427
+ min-height: 100vh;
428
+
429
+ @include bp.lte(bp.get(md)) {
430
+ @include mx.max-w-100;
431
+ @include mx.pl-pr(0);
432
+ }
433
+
434
+ @include bp.lt(bp.get(lg)) {
435
+ max-width: 100%;
436
+ }
437
+
438
+ /* Pad horizontal */
439
+ @include bp.between(992px, calc(#{bp.get(xl)} - 1px)) {
440
+ .col-lg-11 {
441
+ flex: 0 0 96%;
442
+ max-width: 96%;
443
+ }
444
+ }
445
+
446
+ @include bp.lt(bp.get(xl)) {
447
+ > .row {
448
+ justify-content: center !important;
449
+ }
450
+ }
451
+
452
+ @include bp.xxxl {
453
+ max-width: v.$main-content-max-width;
454
+
455
+ @include mx.pl-pr(1.75rem, true);
456
+ }
457
+ }
458
+ }
459
+
460
+ /* --- basic wrappers --- */
461
+
462
+ #topbar-wrapper.row,
463
+ #main-wrapper > .container > .row,
464
+ #search-result-wrapper > .row {
465
+ @include mx.ml-mr(0);
466
+ }
467
+
468
+ #tail-wrapper {
469
+ @include bp.xxxl {
470
+ padding-right: 4.5rem !important;
471
+ }
472
+
473
+ > :not(script) {
474
+ margin-top: 3rem;
475
+ }
476
+ }
@@ -0,0 +1,4 @@
1
+ @forward 'reset';
2
+ @forward 'base';
3
+ @forward 'typography';
4
+ @forward 'syntax';
@@ -0,0 +1,41 @@
1
+ @use '../abstracts/mixins' as *;
2
+
3
+ ::-webkit-input-placeholder {
4
+ @include placeholder;
5
+ }
6
+
7
+ ::-moz-placeholder {
8
+ @include placeholder;
9
+ }
10
+
11
+ :-ms-input-placeholder {
12
+ @include placeholder;
13
+ }
14
+
15
+ ::-ms-input-placeholder {
16
+ @include placeholder;
17
+ }
18
+
19
+ ::placeholder {
20
+ @include placeholder;
21
+ }
22
+
23
+ :focus::-webkit-input-placeholder {
24
+ @include placeholder-focus;
25
+ }
26
+
27
+ :focus::-moz-placeholder {
28
+ @include placeholder-focus;
29
+ }
30
+
31
+ :focus:-ms-input-placeholder {
32
+ @include placeholder-focus;
33
+ }
34
+
35
+ :focus::-ms-input-placeholder {
36
+ @include placeholder-focus;
37
+ }
38
+
39
+ :focus::placeholder {
40
+ @include placeholder-focus;
41
+ }
@@ -1,44 +1,7 @@
1
- /*
2
- * The syntax highlight.
3
- */
4
-
5
- @import 'colors/syntax-light';
6
- @import 'colors/syntax-dark';
7
-
8
- html {
9
- @media (prefers-color-scheme: light) {
10
- &:not([data-mode]),
11
- &[data-mode='light'] {
12
- @include light-syntax;
13
- }
14
-
15
- &[data-mode='dark'] {
16
- @include dark-syntax;
17
- }
18
- }
19
-
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
- }
29
- }
30
- }
31
-
32
- /* -- code snippets -- */
33
-
34
- %code-snippet-bg {
35
- background-color: var(--highlight-bg-color);
36
- }
37
-
38
- %code-snippet-padding {
39
- padding-left: 1rem;
40
- padding-right: 1.5rem;
41
- }
1
+ @use '../abstracts/variables' as v;
2
+ @use '../abstracts/breakpoints' as bp;
3
+ @use '../abstracts/mixins' as mx;
4
+ @use '../abstracts/placeholders';
42
5
 
43
6
  .highlighter-rouge {
44
7
  color: var(--highlighter-rouge-color);
@@ -59,7 +22,7 @@ html {
59
22
 
60
23
  pre {
61
24
  margin-bottom: 0;
62
- font-size: $code-font-size;
25
+ font-size: v.$code-font-size;
63
26
  line-height: 1.4rem;
64
27
  word-wrap: normal; /* Fixed Safari overflow-x */
65
28
  }
@@ -101,10 +64,10 @@ code {
101
64
  color: var(--code-color);
102
65
 
103
66
  &.highlighter-rouge {
104
- font-size: $code-font-size;
67
+ font-size: v.$code-font-size;
105
68
  padding: 3px 5px;
106
69
  word-break: break-word;
107
- border-radius: $radius-sm;
70
+ border-radius: v.$radius-sm;
108
71
  background-color: var(--inline-code-bg);
109
72
  }
110
73
 
@@ -150,9 +113,42 @@ div[class^='language-'] {
150
113
  box-shadow: var(--language-border-color) 0 0 0 1px;
151
114
 
152
115
  .content > & {
153
- @include ml-mr(-1rem);
116
+ @include mx.ml-mr(-1rem);
154
117
 
155
118
  border-radius: 0;
119
+
120
+ @include bp.sm {
121
+ @include mx.ml-mr(0);
122
+
123
+ border-radius: v.$radius-lg;
124
+ }
125
+ }
126
+
127
+ .code-header {
128
+ @include bp.sm {
129
+ @include mx.ml-mr(0);
130
+
131
+ $dot-margin: 1rem;
132
+
133
+ &::before {
134
+ content: '';
135
+ display: inline-block;
136
+ margin-left: $dot-margin;
137
+ width: v.$code-dot-size;
138
+ height: v.$code-dot-size;
139
+ border-radius: 50%;
140
+ background-color: var(--code-header-muted-color);
141
+ box-shadow: (v.$code-dot-size + v.$code-dot-gap) 0 0
142
+ var(--code-header-muted-color),
143
+ (v.$code-dot-size + v.$code-dot-gap) * 2 0 0
144
+ var(--code-header-muted-color);
145
+ }
146
+
147
+ span {
148
+ // center the text of label
149
+ margin-left: calc(($dot-margin + v.$code-dot-size) / 2 * -1);
150
+ }
151
+ }
156
152
  }
157
153
 
158
154
  .highlight {
@@ -184,18 +180,18 @@ div {
184
180
  display: flex;
185
181
  justify-content: space-between;
186
182
  align-items: center;
187
- height: $code-header-height;
183
+ height: v.$code-header-height;
188
184
  margin-left: 0.75rem;
189
185
  margin-right: 0.25rem;
190
186
 
191
187
  /* the label block */
192
188
  span {
193
- line-height: $code-header-height;
189
+ line-height: v.$code-header-height;
194
190
 
195
191
  /* label icon */
196
192
  i {
197
193
  font-size: 1rem;
198
- width: $code-icon-width;
194
+ width: v.$code-icon-width;
199
195
  color: var(--code-header-icon-color);
200
196
 
201
197
  &.small {
@@ -223,8 +219,8 @@ div {
223
219
  @extend %rounded;
224
220
 
225
221
  border: 1px solid transparent;
226
- height: $code-header-height;
227
- width: $code-header-height;
222
+ height: v.$code-header-height;
223
+ width: v.$code-header-height;
228
224
  padding: 0;
229
225
  background-color: inherit;
230
226
 
@@ -255,38 +251,3 @@ div {
255
251
  }
256
252
  }
257
253
  }
258
-
259
- @media all and (min-width: 576px) {
260
- div[class^='language-'] {
261
- .content > & {
262
- @include ml-mr(0);
263
-
264
- border-radius: $radius-lg;
265
- }
266
-
267
- .code-header {
268
- @include ml-mr(0);
269
-
270
- $dot-margin: 1rem;
271
-
272
- &::before {
273
- content: '';
274
- display: inline-block;
275
- margin-left: $dot-margin;
276
- width: $code-dot-size;
277
- height: $code-dot-size;
278
- border-radius: 50%;
279
- background-color: var(--code-header-muted-color);
280
- box-shadow: ($code-dot-size + $code-dot-gap) 0 0
281
- var(--code-header-muted-color),
282
- ($code-dot-size + $code-dot-gap) * 2 0 0
283
- var(--code-header-muted-color);
284
- }
285
-
286
- span {
287
- // center the text of label
288
- margin-left: calc(($dot-margin + $code-dot-size) / 2 * -1);
289
- }
290
- }
291
- }
292
- }