jekyll-theme-chirpy 6.2.2 → 6.3.0

Sign up to get free protection for your applications and to get access to all the features.
data/_layouts/post.html CHANGED
@@ -1,5 +1,5 @@
1
1
  ---
2
- layout: page
2
+ layout: default
3
3
  refactor: true
4
4
  panel_includes:
5
5
  - toc
@@ -11,125 +11,125 @@ tail_includes:
11
11
 
12
12
  {% include lang.html %}
13
13
 
14
- <header>
15
- <h1 data-toc-skip>{{ page.title }}</h1>
14
+ <article class="px-1">
15
+ <header>
16
+ <h1 data-toc-skip>{{ page.title }}</h1>
16
17
 
17
- <div class="post-meta text-muted">
18
- <!-- published date -->
19
- <span>
20
- {{ site.data.locales[lang].post.posted }}
21
- {% include datetime.html date=page.date tooltip=true lang=lang %}
22
- </span>
23
-
24
- <!-- lastmod date -->
25
- {% if page.last_modified_at and page.last_modified_at != page.date %}
18
+ <div class="post-meta text-muted">
19
+ <!-- published date -->
26
20
  <span>
27
- {{ site.data.locales[lang].post.updated }}
28
- {% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
21
+ {{ site.data.locales[lang].post.posted }}
22
+ {% include datetime.html date=page.date tooltip=true lang=lang %}
29
23
  </span>
30
- {% endif %}
31
24
 
32
- {% if page.image %}
33
- {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
34
- {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
35
- {% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
36
-
37
- {% capture lqip %}
38
- {% if page.image.lqip %}
39
- lqip="{{ page.image.lqip }}"
25
+ <!-- lastmod date -->
26
+ {% if page.last_modified_at and page.last_modified_at != page.date %}
27
+ <span>
28
+ {{ site.data.locales[lang].post.updated }}
29
+ {% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
30
+ </span>
40
31
  {% endif %}
41
- {% endcapture %}
42
32
 
43
- <div class="mt-3 mb-3">
44
- <img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}>
45
- {%- if page.image.alt -%}
46
- <figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
47
- {%- endif -%}
48
- </div>
49
- {% endif %}
33
+ {% if page.image %}
34
+ {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
35
+ {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
36
+ {% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
50
37
 
51
- <div class="d-flex justify-content-between">
52
- <!-- author(s) -->
53
- <span>
54
- {% if page.author %}
55
- {% assign authors = page.author %}
56
- {% elsif page.authors %}
57
- {% assign authors = page.authors %}
38
+ {% if page.image.lqip %}
39
+ {%- capture lqip -%}lqip="{{ page.image.lqip }}"{%- endcapture -%}
58
40
  {% endif %}
59
41
 
60
- {{ site.data.locales[lang].post.written_by }}
42
+ <div class="mt-3 mb-3">
43
+ <img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip }}>
44
+ {%- if page.image.alt -%}
45
+ <figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
46
+ {%- endif -%}
47
+ </div>
48
+ {% endif %}
61
49
 
62
- <em>
63
- {% if authors %}
64
- {% for author in authors %}
65
- <a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
66
- {% unless forloop.last %}{{ '</em>, <em>' }}{% endunless %}
67
- {% endfor %}
68
- {% else %}
69
- <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
50
+ <div class="d-flex justify-content-between">
51
+ <!-- author(s) -->
52
+ <span>
53
+ {% if page.author %}
54
+ {% assign authors = page.author %}
55
+ {% elsif page.authors %}
56
+ {% assign authors = page.authors %}
70
57
  {% endif %}
71
- </em>
72
- </span>
73
58
 
74
- <!-- read time -->
75
- {% include read-time.html content=content prompt=true lang=lang %}
59
+ {{ site.data.locales[lang].post.written_by }}
60
+
61
+ <em>
62
+ {% if authors %}
63
+ {% for author in authors %}
64
+ <a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
65
+ {% unless forloop.last %}{{ '</em>, <em>' }}{% endunless %}
66
+ {% endfor %}
67
+ {% else %}
68
+ <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
69
+ {% endif %}
70
+ </em>
71
+ </span>
72
+
73
+ <!-- read time -->
74
+ {% include read-time.html content=content prompt=true lang=lang %}
75
+ </div>
76
+ <!-- .d-flex -->
76
77
  </div>
77
- <!-- .d-flex -->
78
+ <!-- .post-meta -->
79
+ </header>
80
+
81
+ <div class="content">
82
+ {{ content }}
78
83
  </div>
79
- <!-- .post-meta -->
80
- </header>
81
-
82
- <div class="content">
83
- {{ content }}
84
- </div>
85
-
86
- <div class="post-tail-wrapper text-muted">
87
- <!-- categories -->
88
- {% if page.categories.size > 0 %}
89
- <div class="post-meta mb-3">
90
- <i class="far fa-folder-open fa-fw me-1"></i>
91
- {% for category in page.categories %}
92
- <a href="{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/">{{ category }}</a>
93
- {%- unless forloop.last -%},{%- endunless -%}
94
- {% endfor %}
95
- </div>
96
- {% endif %}
97
-
98
- <!-- tags -->
99
- {% if page.tags.size > 0 %}
100
- <div class="post-tags">
101
- <i class="fa fa-tags fa-fw me-1"></i>
102
- {% for tag in page.tags %}
103
- <a
104
- href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
105
- class="post-tag no-text-decoration"
106
- >
107
- {{- tag -}}
108
- </a>
109
- {% endfor %}
110
- </div>
111
- {% endif %}
112
-
113
- <div
114
- class="
115
- post-tail-bottom
116
- d-flex justify-content-between align-items-center mt-5 pb-2
117
- "
118
- >
119
- <div class="license-wrapper">
120
- {% if site.data.locales[lang].copyright.license.template %}
121
- {% capture _replacement %}
84
+
85
+ <div class="post-tail-wrapper text-muted">
86
+ <!-- categories -->
87
+ {% if page.categories.size > 0 %}
88
+ <div class="post-meta mb-3">
89
+ <i class="far fa-folder-open fa-fw me-1"></i>
90
+ {% for category in page.categories %}
91
+ <a href="{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/">{{ category }}</a>
92
+ {%- unless forloop.last -%},{%- endunless -%}
93
+ {% endfor %}
94
+ </div>
95
+ {% endif %}
96
+
97
+ <!-- tags -->
98
+ {% if page.tags.size > 0 %}
99
+ <div class="post-tags">
100
+ <i class="fa fa-tags fa-fw me-1"></i>
101
+ {% for tag in page.tags %}
102
+ <a
103
+ href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
104
+ class="post-tag no-text-decoration"
105
+ >
106
+ {{- tag -}}
107
+ </a>
108
+ {% endfor %}
109
+ </div>
110
+ {% endif %}
111
+
112
+ <div
113
+ class="
114
+ post-tail-bottom
115
+ d-flex justify-content-between align-items-center mt-5 pb-2
116
+ "
117
+ >
118
+ <div class="license-wrapper">
119
+ {% if site.data.locales[lang].copyright.license.template %}
120
+ {% capture _replacement %}
122
121
  <a href="{{ site.data.locales[lang].copyright.license.link }}">
123
122
  {{ site.data.locales[lang].copyright.license.name }}
124
123
  </a>
125
124
  {% endcapture %}
126
125
 
127
- {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
128
- {% endif %}
129
- </div>
126
+ {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
127
+ {% endif %}
128
+ </div>
130
129
 
131
- {% include post-sharing.html lang=lang %}
130
+ {% include post-sharing.html lang=lang %}
131
+ </div>
132
+ <!-- .post-tail-bottom -->
132
133
  </div>
133
- <!-- .post-tail-bottom -->
134
- </div>
135
- <!-- div.post-tail-wrapper -->
134
+ <!-- div.post-tail-wrapper -->
135
+ </article>
@@ -73,52 +73,11 @@ img {
73
73
  height: auto;
74
74
  transition: all 0.35s ease-in-out;
75
75
 
76
- &[data-src] {
77
- &[data-lqip='true'] {
78
- &.lazyload,
79
- &.lazyloading {
80
- -webkit-filter: blur(20px);
81
- filter: blur(20px);
82
- }
83
- }
84
-
85
- &:not([data-lqip='true']) {
86
- &.lazyload,
87
- &.lazyloading {
88
- background: var(--img-bg);
89
- }
90
-
91
- &.lazyloaded {
92
- -webkit-animation: fade-in 0.35s ease-in;
93
- animation: fade-in 0.35s ease-in;
94
- }
95
- }
96
-
97
- &.shadow {
98
- -webkit-filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
99
- filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
100
- box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */
101
- }
102
-
103
- @extend %img-caption;
104
- }
105
-
106
- @-webkit-keyframes fade-in {
107
- from {
108
- opacity: 0;
109
- }
110
- to {
111
- opacity: 1;
112
- }
113
- }
76
+ .blur & {
77
+ $blur: 20px;
114
78
 
115
- @keyframes fade-in {
116
- from {
117
- opacity: 0;
118
- }
119
- to {
120
- opacity: 1;
121
- }
79
+ -webkit-filter: blur($blur);
80
+ filter: blur($blur);
122
81
  }
123
82
  }
124
83
 
@@ -173,12 +132,11 @@ kbd {
173
132
  }
174
133
 
175
134
  footer {
176
- font-size: 0.8rem;
177
135
  background-color: var(--main-bg);
178
136
  height: $footer-height;
179
137
  border-top: 1px solid var(--main-border-color);
180
138
 
181
- @extend %text-color;
139
+ @extend %text-xs;
182
140
 
183
141
  a {
184
142
  @extend %text-highlight;
@@ -189,7 +147,6 @@ footer {
189
147
  }
190
148
 
191
149
  p {
192
- line-height: 1.75;
193
150
  text-align: center;
194
151
  margin-bottom: 0;
195
152
  }
@@ -273,6 +230,8 @@ i {
273
230
  margin-bottom: 0.3rem;
274
231
  }
275
232
 
233
+ @extend %sup-fn-target;
234
+
276
235
  > p {
277
236
  margin-left: 0.25em;
278
237
  margin-top: 0;
@@ -287,10 +246,13 @@ i {
287
246
  @include pl-pr(2px);
288
247
 
289
248
  border-bottom-style: none !important;
290
- transition: background-color 1.5s ease-in-out;
291
249
  }
292
250
  }
293
251
 
252
+ sup {
253
+ @extend %sup-fn-target;
254
+ }
255
+
294
256
  .reversefootnote {
295
257
  @at-root a#{&} {
296
258
  font-size: 0.6rem;
@@ -344,6 +306,30 @@ i {
344
306
 
345
307
  /* --- post --- */
346
308
 
309
+ .preview-img {
310
+ aspect-ratio: 40 / 21;
311
+ width: 100%;
312
+ overflow: hidden;
313
+
314
+ @extend %rounded;
315
+
316
+ &:not(.no-bg) {
317
+ background: var(--img-bg);
318
+ }
319
+
320
+ img {
321
+ height: 100%;
322
+ -o-object-fit: cover;
323
+ object-fit: cover;
324
+
325
+ @extend %rounded;
326
+
327
+ @at-root #post-list & {
328
+ width: 100%;
329
+ }
330
+ }
331
+ }
332
+
347
333
  .post-preview {
348
334
  @extend %rounded;
349
335
 
@@ -372,7 +358,6 @@ i {
372
358
 
373
359
  main {
374
360
  line-height: 1.75;
375
- min-height: calc(100vh - $topbar-height - $footer-height);
376
361
 
377
362
  h1 {
378
363
  margin-top: 2rem;
@@ -380,7 +365,6 @@ main {
380
365
  }
381
366
 
382
367
  p {
383
- > img[data-src],
384
368
  > a.popup {
385
369
  &:not(.normal):not(.left):not(.right) {
386
370
  @include align-center;
@@ -398,7 +382,7 @@ main {
398
382
  }
399
383
 
400
384
  .post-meta {
401
- font-size: 0.85rem;
385
+ @extend %text-sm;
402
386
 
403
387
  a {
404
388
  &:not([class]):hover {
@@ -534,14 +518,15 @@ main {
534
518
  background: var(--shimmer-bg);
535
519
  height: 100%;
536
520
  width: 100%;
537
- -webkit-animation: shimmer 1s infinite;
538
- animation: shimmer 1s infinite;
521
+ -webkit-animation: shimmer 1.3s infinite;
522
+ animation: shimmer 1.3s infinite;
539
523
  }
540
524
 
541
525
  @-webkit-keyframes shimmer {
542
526
  0% {
543
527
  transform: translateX(-100%);
544
528
  }
529
+
545
530
  100% {
546
531
  transform: translateX(100%);
547
532
  }
@@ -551,6 +536,7 @@ main {
551
536
  0% {
552
537
  transform: translateX(-100%);
553
538
  }
539
+
554
540
  100% {
555
541
  transform: translateX(100%);
556
542
  }
@@ -689,7 +675,6 @@ mjx-container {
689
675
  /* --- sidebar layout --- */
690
676
 
691
677
  $sidebar-display: 'sidebar-display';
692
- $btn-gap: 0.8rem; // for the bottom icons
693
678
  $btn-border-width: 3px;
694
679
  $btn-mb: 0.5rem;
695
680
 
@@ -834,9 +819,11 @@ $btn-mb: 0.5rem;
834
819
  padding-right: 1rem;
835
820
  margin-bottom: 1.5rem;
836
821
 
822
+ $btn-size: 1.75rem;
823
+
837
824
  %button {
838
- width: 1.75rem;
839
- height: 1.75rem;
825
+ width: $btn-size;
826
+ height: $btn-size;
840
827
  margin-bottom: $btn-mb; // multi line gap
841
828
  border-radius: 50%;
842
829
  color: var(--sidebar-btn-color);
@@ -858,12 +845,12 @@ $btn-mb: 0.5rem;
858
845
  @extend %clickable-transition;
859
846
 
860
847
  &:not(:last-child) {
861
- margin-right: $btn-gap;
848
+ margin-right: $sb-btn-gap;
862
849
  }
863
850
  }
864
851
 
865
852
  i {
866
- line-height: 1.75rem;
853
+ line-height: $btn-size;
867
854
  }
868
855
 
869
856
  .mode-toggle {
@@ -877,7 +864,7 @@ $btn-mb: 0.5rem;
877
864
 
878
865
  .icon-border {
879
866
  @extend %no-cursor;
880
- @include ml-mr(calc(($btn-gap - $btn-border-width) / 2));
867
+ @include ml-mr(calc(($sb-btn-gap - $btn-border-width) / 2));
881
868
 
882
869
  background-color: var(--sidebar-btn-color);
883
870
  content: '';
@@ -1121,12 +1108,16 @@ search {
1121
1108
  }
1122
1109
  }
1123
1110
 
1124
- /* --- main wrapper --- */
1111
+ /* --- basic wrappers --- */
1125
1112
 
1126
1113
  #main-wrapper {
1127
1114
  position: relative;
1128
1115
 
1129
1116
  @include pl-pr(0);
1117
+
1118
+ > .container {
1119
+ min-height: 100vh;
1120
+ }
1130
1121
  }
1131
1122
 
1132
1123
  #topbar-wrapper.row,
@@ -1135,6 +1126,12 @@ search {
1135
1126
  @include ml-mr(0);
1136
1127
  }
1137
1128
 
1129
+ #tail-wrapper {
1130
+ > :not(script) {
1131
+ margin-top: 3rem;
1132
+ }
1133
+ }
1134
+
1138
1135
  /* --- button back-to-top --- */
1139
1136
 
1140
1137
  #back-to-top {
@@ -1270,10 +1267,6 @@ search {
1270
1267
  }
1271
1268
  }
1272
1269
 
1273
- main {
1274
- min-height: calc(100vh - $topbar-height - $footer-height-large);
1275
- }
1276
-
1277
1270
  footer {
1278
1271
  @include slide;
1279
1272
 
@@ -1287,7 +1280,7 @@ search {
1287
1280
  }
1288
1281
 
1289
1282
  #main-wrapper {
1290
- transform: translateX(#{$sidebar-width});
1283
+ transform: translateX($sidebar-width);
1291
1284
  }
1292
1285
 
1293
1286
  #back-to-top {
@@ -1298,8 +1291,8 @@ search {
1298
1291
  #sidebar {
1299
1292
  @include slide;
1300
1293
 
1301
- transform: translateX(-#{$sidebar-width}); /* hide */
1302
- -webkit-transform: translateX(-#{$sidebar-width});
1294
+ transform: translateX(-$sidebar-width); /* hide */
1295
+ -webkit-transform: translateX(-$sidebar-width);
1303
1296
  }
1304
1297
 
1305
1298
  #main-wrapper {
@@ -1474,7 +1467,7 @@ search {
1474
1467
 
1475
1468
  @media all and (min-width: 1400px) {
1476
1469
  #back-to-top {
1477
- right: calc((100vw - #{$sidebar-width} - 1140px) / 2 + 3rem);
1470
+ right: calc((100vw - $sidebar-width - 1140px) / 2 + 3rem);
1478
1471
  }
1479
1472
  }
1480
1473
 
@@ -1491,7 +1484,7 @@ search {
1491
1484
 
1492
1485
  search {
1493
1486
  margin-right: calc(
1494
- #{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem
1487
+ $main-content-max-width / 4 - $search-max-width - 0.75rem
1495
1488
  );
1496
1489
  }
1497
1490
 
@@ -1508,15 +1501,13 @@ search {
1508
1501
 
1509
1502
  #back-to-top {
1510
1503
  right: calc(
1511
- (100vw - #{$sidebar-width-large} - #{$main-content-max-width}) / 2 + 2rem
1504
+ (100vw - $sidebar-width-large - $main-content-max-width) / 2 + 2rem
1512
1505
  );
1513
1506
  }
1514
1507
 
1515
1508
  #sidebar {
1516
1509
  width: $sidebar-width-large;
1517
1510
 
1518
- $icon-gap: 1rem; // for the bottom icons
1519
-
1520
1511
  .profile-wrapper {
1521
1512
  margin-top: 3.5rem;
1522
1513
  margin-bottom: 2.5rem;
@@ -1534,11 +1525,11 @@ search {
1534
1525
  margin-bottom: 1.75rem;
1535
1526
 
1536
1527
  a:not(:last-child) {
1537
- margin-right: $icon-gap;
1528
+ margin-right: $sb-btn-gap-lg;
1538
1529
  }
1539
1530
 
1540
1531
  .icon-border {
1541
- @include ml-mr(calc(($icon-gap - $btn-border-width) / 2));
1532
+ @include ml-mr(calc(($sb-btn-gap-lg - $btn-border-width) / 2));
1542
1533
  }
1543
1534
  }
1544
1535
  }
@@ -123,10 +123,28 @@
123
123
  }
124
124
 
125
125
  %text-highlight {
126
- color: inherit;
126
+ color: var(--text-muted-hightlight-color);
127
127
  font-weight: 600;
128
128
  }
129
129
 
130
+ %text-sm {
131
+ font-size: 0.85rem;
132
+ }
133
+
134
+ %text-xs {
135
+ font-size: 0.8rem;
136
+ }
137
+
138
+ %sup-fn-target {
139
+ &:target {
140
+ background-color: var(--footnote-target-bg);
141
+ width: -moz-fit-content;
142
+ width: -webkit-fit-content;
143
+ width: fit-content;
144
+ transition: background-color 1.75s ease-in-out;
145
+ }
146
+ }
147
+
130
148
  /* ---------- scss mixin --------- */
131
149
 
132
150
  @mixin mt-mb($value) {
@@ -186,7 +186,7 @@ div {
186
186
  align-items: center;
187
187
  height: $code-header-height;
188
188
  margin-left: 0.75rem;
189
- margin-right: 0.5rem;
189
+ margin-right: 0.25rem;
190
190
 
191
191
  /* the label block */
192
192
  span {
@@ -267,7 +267,7 @@ div {
267
267
  .code-header {
268
268
  @include ml-mr(0);
269
269
 
270
- $dot-margin: calc($code-header-height / 2);
270
+ $dot-margin: 1rem;
271
271
 
272
272
  &::before {
273
273
  content: '';
@@ -6,6 +6,8 @@
6
6
 
7
7
  $sidebar-width: 260px !default; /* the basic width */
8
8
  $sidebar-width-large: 300px !default; /* screen width: >= 1650px */
9
+ $sb-btn-gap: 0.8rem !default;
10
+ $sb-btn-gap-lg: 1rem !default;
9
11
 
10
12
  /* other framework sizes */
11
13
 
@@ -14,8 +16,7 @@ $search-max-width: 200px !default;
14
16
  $footer-height: 5rem !default;
15
17
  $footer-height-large: 6rem !default; /* screen width: < 850px */
16
18
  $main-content-max-width: 1250px !default;
17
- $bottom-min-height: 35rem !default;
18
- $base-radius: 0.5rem !default;
19
+ $base-radius: 0.625rem !default;
19
20
  $back2top-size: 2.75rem !default;
20
21
 
21
22
  /* syntax highlight */