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.
- checksums.yaml +4 -4
- data/README.md +5 -5
- data/_config.yml +9 -5
- data/_data/locales/en.yml +2 -1
- data/_data/locales/id-ID.yml +2 -1
- data/_data/locales/ko-KR.yml +91 -0
- data/_data/locales/zh-CN.yml +2 -1
- data/_includes/{disqus.html → comments/disqus.html} +4 -4
- data/_includes/comments/utterances.html +51 -0
- data/_includes/comments.html +5 -0
- data/_includes/footer.html +1 -1
- data/_includes/js-selector.html +1 -1
- data/_includes/mermaid.html +28 -0
- data/_includes/mode-toggle.html +48 -65
- data/_includes/read-time.html +3 -3
- data/_includes/refactor-content.html +109 -35
- data/_includes/related-posts.html +1 -1
- data/_includes/search-results.html +0 -8
- data/_includes/sidebar.html +10 -11
- data/_includes/timeago.html +11 -12
- data/_includes/toc.html +16 -0
- data/_includes/topbar.html +1 -1
- data/_includes/trending-tags.html +14 -0
- data/_includes/update-list.html +16 -0
- data/_layouts/default.html +6 -2
- data/_layouts/home.html +12 -9
- data/_layouts/page.html +45 -22
- data/_layouts/post.html +128 -127
- data/_sass/addon/commons.scss +154 -175
- data/_sass/addon/module.scss +48 -28
- data/_sass/addon/syntax.scss +55 -44
- data/_sass/addon/variables.scss +1 -1
- data/_sass/colors/dark-syntax.scss +3 -4
- data/_sass/colors/dark-typography.scss +11 -8
- data/_sass/colors/light-syntax.scss +3 -3
- data/_sass/colors/light-typography.scss +4 -5
- data/_sass/jekyll-theme-chirpy.scss +1 -1
- data/_sass/layout/home.scss +6 -2
- data/_sass/layout/post.scss +52 -46
- data/assets/js/dist/categories.min.js +2 -2
- data/assets/js/dist/commons.min.js +2 -2
- data/assets/js/dist/home.min.js +2 -2
- data/assets/js/dist/page.min.js +2 -2
- data/assets/js/dist/post.min.js +2 -2
- data/assets/js/dist/pvreport.min.js +2 -2
- metadata +7 -4
- data/_includes/panel.html +0 -59
data/_sass/addon/commons.scss
CHANGED
@@ -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.
|
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.
|
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.
|
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
|
-
|
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
|
-
#
|
230
|
-
|
231
|
-
|
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;
|
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;
|
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
|
-
|
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
|
-
&.
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
|
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
|
-
}
|
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
|
-
|
846
|
-
|
807
|
+
font-size: 1.2rem;
|
808
|
+
line-height: 1.75rem;
|
847
809
|
}
|
848
810
|
|
849
|
-
|
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
|
-
|
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
|
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
|
-
#
|
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
|
1104
|
-
|
1105
|
-
|
1106
|
-
|
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
|
-
|
1110
|
-
|
1111
|
-
|
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
|
-
|
1116
|
-
|
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
|
-
#
|
1174
|
-
min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$
|
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.
|
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
|
-
|
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
|
|
data/_sass/addon/module.scss
CHANGED
@@ -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-
|
43
|
-
|
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
|
-
%
|
54
|
-
|
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%;
|